:root {
  color-scheme: light;
  --p3m-ink: #172033;
  --p3m-muted: #6c7486;
  --p3m-primary: #5c4bea;
  --p3m-primary-dark: #4436c2;
  --p3m-navy: #151c30;
  --p3m-bg: #f3f5fa;
  --p3m-line: #e4e8f0;
  --p3m-surface: #fff;
  --p3m-radius: 18px;
  --p3m-shadow: 0 14px 38px rgb(23 32 51 / 7%);
}

* { box-sizing: border-box; }
body {
  min-height: 100vh;
  background: var(--p3m-bg);
  color: var(--p3m-ink);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 { color: var(--p3m-ink); font-weight: 680; letter-spacing: -.025em; }
a { color: var(--p3m-primary-dark); text-underline-offset: 3px; }
a:hover { color: var(--p3m-primary); }
.muted, .text-muted, .form-text { color: var(--p3m-muted) !important; }
.small, small { line-height: 1.5; }

/* Consistent controls across the customer and staff mock portals. */
.btn {
  min-height: 42px;
  padding: .62rem 1rem;
  border-radius: 10px;
  font-weight: 650;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--p3m-primary); border-color: var(--p3m-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--p3m-primary-dark); border-color: var(--p3m-primary-dark); }
.btn-outline-primary { color: var(--p3m-primary-dark); border-color: #c9c5f8; }
.btn-outline-primary:hover { color: #fff; background: var(--p3m-primary); border-color: var(--p3m-primary); }
.btn-outline-secondary { border-color: #d5dae4; color: #505a6e; }
.form-control, .form-select {
  min-height: 46px;
  padding: .65rem .85rem;
  border-color: #dce1eb;
  border-radius: 10px;
  color: var(--p3m-ink);
  background-color: #fff;
}
textarea.form-control { min-height: 112px; }
.form-control:focus, .form-select:focus {
  border-color: #9a91f5;
  box-shadow: 0 0 0 .22rem rgb(92 75 234 / 13%);
}
.form-label { margin-bottom: .45rem; color: #303a4e; font-weight: 630; }
.form-check-input:checked { background-color: var(--p3m-primary); border-color: var(--p3m-primary); }
.badge.text-bg-primary { background-color: var(--p3m-primary) !important; }

/* Reusable cards and clear local-simulation notices. */
.card, .auth-panel, .p2p-panel {
  border: 1px solid rgb(226 230 239 / 85%);
  border-radius: var(--p3m-radius);
  background: var(--p3m-surface);
  box-shadow: var(--p3m-shadow) !important;
}
.card-body { padding: clamp(20px, 3vw, 32px); }
.demo-banner {
  padding: 12px 15px;
  border: 1px solid #e5e1ff;
  border-radius: 12px;
  background: #f0edff;
  color: #493bc2;
  font-size: .88rem;
  font-weight: 560;
}
.alert { border-radius: 12px; overflow-wrap: anywhere; }
.alert-warning { color: #76540b; border-color: #f3dda0; background: #fff5d9; }
.alert-danger { color: #8d2837; border-color: #f2c6cd; background: #fff0f2; }
.alert-success { color: #176b50; border-color: #b9e5d3; background: #eaf8f1; }

/* Customer wallet dashboard: compact dark rail, spacious portfolio area. */
.wallet-shell {
  width: min(100% - 40px, 1320px);
  max-width: 1320px;
  margin: 28px auto;
  padding: 0;
}
.layout {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
  min-height: min(740px, calc(100vh - 120px));
}
.sidebar {
  padding: 22px 16px;
  border: 1px solid #222b43;
  border-radius: 20px;
  background: var(--p3m-navy);
  color: #d7dbea;
  box-shadow: 0 18px 42px rgb(18 27 48 / 16%);
}
.sidebar .p3m-logo {
  display: block;
  width: 100%;
  max-width: 170px;
  height: 72px;
  margin: 0 auto 24px;
  object-fit: contain;
  border-radius: 12px;
}
.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 3px 0;
  padding: 11px 13px;
  border-radius: 10px;
  color: #cbd2e3;
  font-weight: 570;
  text-decoration: none;
}
.sidebar a:hover, .sidebar a:focus-visible { color: #fff; background: #27314e; }
.sidebar a:first-of-type { color: #fff; background: linear-gradient(100deg, #6758ed, #5245ce); }
.sidebar .muted { display: block; margin: 18px 10px 0; color: #aeb8ce !important; }
.layout > section { min-width: 0; padding: 8px 0; }
.wallet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 10px 0 22px; }
.wallet-head h1 { font-size: clamp(1.6rem, 2.7vw, 2.2rem); }
.balance {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 38px);
  border: 0;
  border-radius: 20px;
  background: linear-gradient(116deg, #201b50 0%, #5040c9 55%, #6859f4 100%);
  color: #fff;
  box-shadow: 0 18px 38px rgb(69 57 184 / 18%);
}
.balance::after {
  position: absolute;
  top: -95px;
  right: -50px;
  width: 250px;
  height: 250px;
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgb(255 255 255 / 4%), 0 0 0 58px rgb(255 255 255 / 3%);
  content: "";
  pointer-events: none;
}
.balance > div { position: relative; z-index: 1; }
.balance > div:first-child { color: #e0ddff; font-weight: 620; }
.balance-value { margin: 5px 0 2px; font-size: clamp(2.25rem, 5vw, 3rem); font-weight: 760; letter-spacing: -.045em; }
.balance > div:last-child { color: #dad6ff; font-size: .93rem; }
.actions { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin: 18px 0; }
.actions .btn { display: flex; align-items: center; justify-content: center; min-height: 50px; }
.layout > section > p { margin: 14px 0; }
.layout > section > p:nth-of-type(2) { font-weight: 620; }
.layout > section > form:last-child { display: inline-block; margin-right: 8px; }
.layout > section > form:last-child .btn-link { padding-left: 0; }
.sidebar-hidden { grid-template-columns: minmax(0,1fr); }
.sidebar-hidden .sidebar { display: none; }

/* Transaction, history, security, support, and staff pages share the same canvas. */
.p2p-shell { width: min(100% - 40px, 960px); max-width: 960px; margin: 30px auto; padding: 0; }
.p2p-panel { padding: clamp(22px, 4vw, 38px); }
.p2p-form { width: 100%; max-width: 690px; margin-top: 22px; }
.p2p-panel dt { color: #3a4357; font-weight: 640; }
.p2p-panel dd { color: #212b40; text-align: right; font-variant-numeric: tabular-nums; }
.p2p-panel > p, .p2p-panel .small { color: var(--p3m-muted); }
.wallet-shell > p:first-child, .p2p-shell > p:first-child { margin: 0 0 14px; font-size: .92rem; }
.wallet-shell > p:first-child a, .p2p-shell > p:first-child a { font-weight: 620; text-decoration: none; }
.wallet-shell > .card, .wallet-shell > .auth-panel { margin-top: 16px; }
.wallet-shell .border.rounded { border-color: var(--p3m-line) !important; border-radius: 14px !important; background: #fbfcfe; }
.profile-summary { padding: 20px; border: 1px solid var(--p3m-line); border-radius: 15px; background: #fbfcfe; }
.profile-details { display: grid; gap: 0; }
.profile-details > div { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, 1.3fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--p3m-line); }
.profile-details > div:last-child { border-bottom: 0; }
.profile-details dt { color: var(--p3m-muted); font-size: .9rem; font-weight: 620; }
.profile-details dd { margin: 0; overflow-wrap: anywhere; font-weight: 630; }
.profile-shortcut { padding: 20px; border: 1px solid var(--p3m-line); border-radius: 15px; background: #fff; }
.profile-shortcut p { min-height: 3em; }
.table { --bs-table-bg: transparent; --bs-table-striped-bg: #f7f8fc; color: #30394c; }
.table thead th { padding-top: 13px; padding-bottom: 13px; color: #657087; font-size: .78rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.table td { padding-top: 14px; padding-bottom: 14px; vertical-align: middle; }
code { color: #8d4074; overflow-wrap: anywhere; }

/* Sign-in and one-time confirmation screens. */
.auth-shell {
  width: min(100% - 32px, 520px);
  max-width: 520px;
  margin: clamp(18px, 6vh, 58px) auto;
  padding: 0;
}
.auth-shell > .p3m-logo { display: block; width: 180px; height: 82px; margin: 0 auto 16px; object-fit: contain; }
.auth-panel { margin: 0; padding: clamp(24px, 5vw, 38px); }
.auth-panel .p3m-logo { width: 100%; }
.auth-panel label { font-weight: 630; }
.auth-panel > h1 { font-size: 1.9rem; }
.auth-welcome { width: min(100% - 48px, 1040px); max-width: 1040px; }
.auth-welcome { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); align-items: stretch; gap: 0; overflow: hidden; border: 1px solid var(--p3m-line); border-radius: 24px; background: #fff; box-shadow: 0 24px 70px rgb(23 32 51 / 12%); }
.auth-welcome > .p3m-logo { position: absolute; z-index: 2; top: 22px; left: 38px; display: block; width: 128px; height: 56px; object-fit: contain; }
.auth-welcome .auth-panel { border: 0; border-radius: 0; box-shadow: none !important; padding: clamp(28px, 5vw, 54px); }
.auth-welcome .auth-panel { padding-top: 100px; }
.auth-welcome::after {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 590px;
  padding: 40px;
  background:
    radial-gradient(circle at 72% 23%, rgb(255 255 255 / 78%) 0 7%, transparent 7.5%),
    radial-gradient(circle at 37% 48%, rgb(255 255 255 / 54%) 0 11%, transparent 11.5%),
    radial-gradient(ellipse at 65% 58%, rgb(103 87 237 / 30%) 0 22%, transparent 22.5%),
    linear-gradient(150deg, #f7f3ea 0%, #ded9cc 42%, #252140 100%);
  color: #fff;
  content: "Move value globally\A\A Local mock wallet\A Receive · Send · P3M Internal";
  white-space: pre-wrap;
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  font-weight: 730;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.p3m-logo { max-width: 100%; border-radius: 12px; }

.secret-text { padding: 14px; border-radius: 12px; background: #f3f5fa; font-size: 1rem; overflow-wrap: anywhere; white-space: pre-wrap; }
.recovery-offer { width: min(100% - 32px, 500px); max-width: 500px; padding: 28px; border: 1px solid var(--p3m-line); border-radius: 20px; box-shadow: 0 18px 60px rgb(23 32 51 / 22%); }
.recovery-offer::backdrop { background: rgb(21 28 48 / 52%); backdrop-filter: blur(3px); }

@media (max-width: 760px) {
  .wallet-shell { width: min(100% - 28px, 620px); margin: 14px auto; }
  .layout { grid-template-columns: 1fr; gap: 14px; min-height: 0; }
  .sidebar { padding: 12px; border-radius: 16px; }
  .sidebar .p3m-logo { width: 120px; height: 50px; margin: 0 4px 8px; }
  .sidebar a { display: inline-flex; margin: 2px; padding: 9px 10px; }
  .sidebar .muted { margin: 8px; }
  .layout > section { padding: 0 2px 20px; }
  .wallet-head { margin: 4px 0 16px; }
  .balance { border-radius: 16px; }
  .p2p-shell { width: min(100% - 28px, 680px); margin: 16px auto; }
  .auth-welcome { width: min(100% - 28px, 540px); grid-template-columns: 1fr; }
  .auth-welcome::after { min-height: 190px; padding: 22px; background-position: center; font-size: 1.55rem; }
}
@media (max-width: 480px) {
  body { font-size: 14px; }
  .actions { grid-template-columns: 1fr; }
  .wallet-head { align-items: flex-start; }
  .wallet-head .btn { min-height: 38px; padding: .45rem .65rem; font-size: .82rem; }
  .p2p-panel { padding: 20px 16px; }
  .p2p-panel dd { text-align: left; }
  .auth-shell { width: min(100% - 24px, 520px); margin: 12px auto; }
  .auth-panel { padding: 23px 19px; }
  .auth-welcome { width: min(100% - 20px, 520px); }
  .auth-welcome > .p3m-logo { top: 16px; left: 20px; width: 112px; height: 48px; }
  .auth-welcome .auth-panel { padding: 78px 18px 22px; }
  .card-body { padding: 19px; }
  .profile-summary, .profile-shortcut { padding: 16px; }
  .profile-details > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
/* Module 9 — Refined Purple. Shared presentation; workflow markup remains intact. */
:root { --p3m-ink:#111b3d; --p3m-muted:#64708b; --p3m-primary:#6940ed; --p3m-primary-dark:#5125cd; --p3m-navy:#121c40; --p3m-bg:#fbfcff; --p3m-line:#e4e7f2; --p3m-radius:16px; --p3m-shadow:0 4px 18px rgb(25 33 65 / 3%); }
body { font-family:"Segoe UI",Inter,system-ui,-apple-system,sans-serif !important; background:var(--p3m-bg); font-weight:400; }
h1,h2,h3,h4,h5,h6 { font-family:inherit; font-weight:650; letter-spacing:-.035em; }
h1,.h1 { font-size:clamp(1.8rem,3vw,2.6rem); }
a { overflow-wrap:anywhere; }
.btn { font-weight:600; border-radius:11px; box-shadow:none; }
.btn:hover { transform:none; }
.btn-primary { background:var(--p3m-primary); border-color:var(--p3m-primary); }
.btn-outline-primary { background:#fff; border-color:#dcd5fa; }
.form-control,.form-select { border-color:#dfe3ee; background:#fff; }
.card,.auth-panel,.p2p-panel { border-color:var(--p3m-line); box-shadow:var(--p3m-shadow) !important; }
.p3m-wordmark { display:block; font-size:2rem; font-weight:800; letter-spacing:-.08em; color:var(--p3m-ink); margin-bottom:24px; }
.auth-panel .p3m-wordmark { width:auto; }
.auth-welcome > .p3m-wordmark { position:absolute; top:24px; left:38px; z-index:2; }
.auth-welcome::after { background:radial-gradient(ellipse at 30% 25%,#b2a0ff 0,transparent 50%),linear-gradient(145deg,#eee9ff,#6751ae 70%,#192241); }
.demo-banner { background:#f4f1ff; border-color:#e9e3fe; color:#59438e; padding:10px 14px; font-size:.85rem; }
.balance { color:var(--p3m-ink); background:linear-gradient(115deg,#f0ebff,#f9f7ff); border:1px solid #e0d8ff; box-shadow:none; }
.balance::after { display:none; }
.balance > div:first-child,.balance > div:last-child { color:#60698c; }
.balance-value { color:#101a3b; display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:clamp(2rem,4vw,3rem); }
.asset-mark { display:inline-block; width:24px; height:24px; margin-right:8px; vertical-align:middle; flex-shrink:0; }
.balance-value > .asset-mark,.display-6 > .asset-mark { width:52px; height:52px; }
.p3m-icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.actions a { flex-direction:column; gap:10px; min-height:100px !important; background:#fff; color:var(--p3m-primary-dark); border:1px solid #dfd7fd; }
.actions a:hover { background:#f3eeff; }
.actions .p3m-icon { width:30px; height:30px; }
.p3m-ready { padding-left:248px; }
.p3m-ready > main { width:calc(100% - 64px); max-width:1280px; margin:32px auto; }
.p3m-ready > .auth-shell { max-width:620px; }
.p3m-ready .layout { display:block; min-height:0; }
.p3m-ready .layout > section { padding:0; }
.p3m-navigation { position:fixed; top:0; bottom:0; left:0; width:248px; padding:30px 18px; background:linear-gradient(170deg,#152047,#101936); color:#e9edff; overflow-y:auto; z-index:20; }
.p3m-navigation .p3m-wordmark { color:#fff; margin:0 16px 34px; }
.p3m-nav-label { margin:0 16px 12px; font-size:.7rem; font-weight:650; letter-spacing:.1em; color:#aab5d5; }
.p3m-nav-links { display:grid; gap:5px; }
.p3m-navigation a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; text-decoration:none; color:#e0e5f6; font-weight:500; }
.p3m-navigation a:hover { background:#222e55; color:#fff; }
.p3m-navigation a[aria-current="page"] { background:linear-gradient(110deg,#7544ff,#5e32d9); color:#fff; }
.p3m-unread { margin-left:auto; font-size:.8rem; }
.p3m-nav-hidden { padding-left:0; }
.p3m-nav-hidden .p3m-navigation { display:none; }
.table { --bs-table-striped-bg:#fafbff; }
.table thead th { text-transform:none; letter-spacing:0; font-weight:600; color:#727d97; border-bottom-color:var(--p3m-line); }
.table td { border-bottom-color:#edf0f7; }
.p3m-status-success { color:#12805a !important; font-weight:600; }
.p3m-status-pending { color:#986112 !important; font-weight:600; }
.table-responsive { max-width:100%; }
.card,section,main,form { min-width:0; }
input,select,textarea { max-width:100%; }
.secret-text,code,dd { overflow-wrap:anywhere; }
button:focus-visible,a:focus-visible { outline:3px solid #a695f5; outline-offset:3px; }
.p3m-ready > aside.wallet-shell { width:calc(100% - 64px); margin:20px auto; }
@media(min-width:1100px) { .p3m-ready .balance { padding:32px; } .p3m-ready .actions { max-width:560px; } }
@media(max-width:1000px) { .p3m-ready { padding-left:208px; } .p3m-navigation { width:208px; padding:24px 12px; } .p3m-ready > main { width:calc(100% - 36px); } .p3m-nav-hidden { padding-left:0; } }
@media(max-width:760px) {
 .p3m-ready { padding-left:0; }
 .p3m-navigation { position:static; width:auto; overflow:visible; padding:18px 14px; border-radius:0 0 18px 18px; }
 .p3m-navigation .p3m-wordmark { margin:0 8px 16px; font-size:1.6rem; }
 .p3m-nav-label { display:none; }
 .p3m-nav-links { display:flex; flex-wrap:wrap; gap:4px; }
 .p3m-navigation a { padding:10px; font-size:.84rem; gap:7px; }
 .p3m-navigation .p3m-icon { width:18px; height:18px; }
 .p3m-ready > main { width:calc(100% - 28px); margin:24px auto; }
 .actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 .actions a { padding:10px 5px; font-size:.85rem; }
 .balance-value > .asset-mark,.display-6 > .asset-mark { width:38px; height:38px; }
 .p3m-ready > aside.wallet-shell { width:calc(100% - 28px); }
 .d-flex.justify-content-between { flex-wrap:wrap; gap:12px; }
}
.p3m-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,1fr); gap:28px; align-items:center; background:linear-gradient(115deg,#f0ebff,#faf8ff); border:1px solid #e0d8ff; border-radius:18px; padding:28px; }
.p3m-hero .balance { border:0; background:none; padding:0; }
.p3m-hero .actions { margin:0; }
.p3m-live-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.8fr); gap:24px; align-items:center; }
.p3m-live-hero > .alert { grid-column:1/-1; }
.p3m-live-hero .display-6 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-weight:700; }
.sidebar .p3m-wordmark { color:#fff; }
@media(max-width:1100px) { .p3m-hero,.p3m-live-hero { grid-template-columns:1fr; } .p3m-hero { gap:16px; padding:22px; } }
.p3m-live-hero .display-6 { color:var(--p3m-ink); }