/* Cocopawnshop — public + admin (English UI) */
:root {
  --ink: #f3f4f6;
  --ink-muted: #aab2bf;
  --line: #2a3442;
  --bg: #111418;
  --card: #1a2028;
  --brand: #8fa8c9;
  --gold: #b99f6d;
  --ok: #5c8f71;
  --err: #b96b6b;
  --r: 14px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3f4f6;
    --ink-muted: #aab2bf;
    --line: #2a3442;
    --bg: #111418;
    --card: #1a2028;
    --brand: #8fa8c9;
    --gold: #b99f6d;
    --shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  }
}
* { box-sizing: border-box; }
/* Viewport-responsive baseline — README §16 */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.55; font-size: 16px;
  overflow-x: hidden;
}
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe, object { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }
a { color: var(--brand); text-underline-offset: 2px; }
.skip-link {
  position: absolute; left: -9999px; z-index: 9999;
  padding: 0.5rem 1rem; background: #000; color: #fff;
}
.skip-link:focus { left: 0; top: 0; }
.wire { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.brandbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 0.75rem;
}
#customer-lookup-brandbar[hidden] {
  display: none !important;
}
.logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: inherit; }
.logo i {
  display: block; width: 2.25rem; height: 2.25rem; border-radius: 10px;
  background: linear-gradient(140deg, var(--gold) 0%, #6a5528 100%);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.logo b { display: block; font-size: 1.1rem; letter-spacing: -0.02em; }
.logo small { color: var(--ink-muted); font-size: 0.72rem; }
nav a { margin-left: 1rem; font-size: 0.88rem; font-weight: 600; }
.grid2 {
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) {
  .grid2 { grid-template-columns: 1fr 1.05fr; }
}
h1, h2, h3 { line-height: 1.2; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 2.25rem; }
.sub { color: var(--ink-muted); font-size: 0.92rem; margin: 0.35rem 0 0; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.25rem 1.2rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.card::before {
  content: none;
}
label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin: 0.4rem 0 0.25rem; }
label .req { color: var(--err); }
input, textarea, select {
  width: 100%; padding: 0.62rem 0.8rem; font-size: 0.92rem; border-radius: 10px; border: 1px solid var(--line);
  background: #202734; color: var(--ink); font-family: inherit;
}
input::placeholder, textarea::placeholder { color: #8f99aa; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #4f6078;
  box-shadow: 0 0 0 2px rgba(97, 124, 160, 0.2);
}
textarea { min-height: 100px; resize: vertical; }
.frow { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 500px) { .frow.cols2 { grid-template-columns: 1fr 1fr; } }
button.btn {
  width: 100%; margin-top: 0.6rem; padding: 0.72rem; border: 1px solid transparent; border-radius: 11px;
  font-size: 0.92rem; font-weight: 600; background: #4b5f7b; color: #f3f4f6; cursor: pointer; font-family: inherit;
  box-shadow: none;
}
button.btn:hover { background: #566d8b; }
button.btn:disabled { opacity: 0.5; cursor: not-allowed; }
button.ghost { background: transparent; color: var(--brand); border: 1px solid var(--line); box-shadow: none; }
.hint { font-size: 0.78rem; color: var(--ink-muted); margin: 0.5rem 0 0; }
.ticket-result {
  display: none; border-left: 3px solid var(--ok); padding-left: 0.9rem; margin: 1rem 0 0;
}
.ticket-result.visible { display: block; }
.kv { display: grid; gap: 0.35rem; font-size: 0.9rem; }
.kv span { color: var(--ink-muted); }
.kv b { display: block; }
.kv.kv-inline {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 0.55rem 0.8rem;
}
.kv.kv-inline > div {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
}
@media (max-width: 780px) {
  .kv.kv-inline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .kv.kv-inline {
    grid-template-columns: 1fr;
  }
}
.field-error {
  margin-top: 0.28rem;
  color: #ff6f6f;
  font-size: 0.78rem;
  line-height: 1.3;
}
.field-invalid {
  border-color: #d25151 !important;
  box-shadow: 0 0 0 1px rgba(210, 81, 81, 0.25);
}
@media (max-width: 1200px) {
  .kv.kv-inline { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
}
@media (max-width: 760px) {
  .kv.kv-inline { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
}
.status-pill {
  display: inline-block; padding: 0.2rem 0.5rem; border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  background: rgba(30, 120, 60, 0.12); color: #1a6a3a;
}
.status-pill.defaulted { background: rgba(120, 30, 20, 0.12); color: #7a1e18; }
.status-pill.past { background: rgba(180, 100, 20, 0.12); color: #8a5a0a; }
.pabs-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 1.05rem; background: var(--card);
  display: flex; flex-direction: column; min-height: 100%;
}
.pabs-grid { display: grid; gap: 0.9rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .pabs-grid { grid-template-columns: repeat(2, 1fr); } }
.pay-grid { display: grid; gap: 0.6rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .pay-grid { grid-template-columns: repeat(3, 1fr); } }
.pay-col { background: var(--card); border: 1px dashed var(--line); border-radius: 8px; padding: 0.8rem; font-size: 0.85rem; }
.pay-col h3 { font-size: 0.8rem; margin: 0 0 0.3rem; color: var(--gold); }
.badge { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--brand); }
.errline { color: var(--err); font-size: 0.86rem; margin: 0.3rem 0; min-height: 1.2em; }
.okline { color: var(--ok); }
.okline.okline--error {
  color: #ff6f6f;
  font-weight: 600;
  font-size: 0.86rem;
}
/* Auth surfaces: staff (brand / blue) vs customer loan lookup (gold, warmer shell) */
.admin-auth-surface {
  border-left: 4px solid var(--brand);
  padding-left: 1.05rem;
}
body.customer-lookup {
  --lookup-bg1: #141a1c;
  --lookup-bg2: #0f1416;
  --lookup-card: #182024;
  background: linear-gradient(180deg, var(--lookup-bg1) 0%, var(--lookup-bg2) 55%, #0b0f12 100%);
  min-height: 100vh;
  min-height: 100dvh;
}
.customer-lookup .wire.customer-lookup-wrap { max-width: 36rem; }
/* UPDATED: fix login layout and footer position — card + footer as one centered block, not footer stuck to viewport bottom */
/* Login only: center [main + footer] in viewport; comfortable spacing; dashboard resets below */
body.customer-lookup:not(.cportal-active) .wire.customer-lookup-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding-left: clamp(0.75rem, 4.2vw, 1.25rem);
  padding-right: clamp(0.75rem, 4.2vw, 1.25rem);
  padding-top: max(0.75rem, env(safe-area-inset-top, 0));
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0));
}
body.customer-lookup:not(.cportal-active) .customer-lookup-main {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  gap: clamp(0.65rem, 2.2vh, 1.1rem);
  padding: clamp(0.5rem, 1.5vh, 0.85rem) 0 0;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.customer-lookup:not(.cportal-active) .lookup-auth-tools-outer {
  width: 100%;
  max-width: min(28rem, calc(100% - 0.5rem));
  margin: 0;
  flex-shrink: 0;
}
body.customer-lookup:not(.cportal-active) .customer-portal-wrap {
  width: 100%;
  max-width: min(28rem, calc(100% - 0.5rem));
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}
body.customer-lookup.cportal-active .wire.customer-lookup-wrap {
  min-height: 0;
  display: block;
}
body.customer-lookup.cportal-active .customer-lookup-main {
  display: block;
  flex: none;
  padding: 0;
  min-height: 0;
}
body.customer-lookup.cportal-active .customer-portal-wrap {
  /* dashboard may still reference wrap */
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}
.customer-lookup-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.customer-lookup .brandbar.customer-lookup-top { border-bottom-color: #2a3538; }
.customer-lookup .customer-portal-entry { background: var(--lookup-card); }
.lookup-auth-tools-outer { background: var(--lookup-card) !important; }
.admin-staff-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 1.1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink);
}
#auth-block .forgot-pw-compact {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}
#auth-block .forgot-pw-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
#auth-block .forgot-pw-row .btn { width: auto; }
.customer-auth-surface {
  border-left: 4px solid var(--gold);
  padding-left: 1.05rem;
}
.lookup-auth-subactions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: center;
}
.lookup-auth-subactions .btn {
  width: auto;
}
/* Customer loan lookup entry — single clear action, minimal copy */
.customer-portal-wrap {
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.5rem 0 2rem;
}
.customer-portal-entry {
  border-left: 4px solid var(--gold);
  padding: 1.35rem 1.25rem 1.2rem;
}
body.customer-lookup .customer-portal-title {
  margin-bottom: 1.05rem;
}
.customer-portal-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
  line-height: 1.2;
}
.customer-portal-lead {
  margin: 0 0 1.1rem !important;
  font-size: 0.95rem;
  line-height: 1.45;
}
.customer-portal-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.customer-portal-form .btn.customer-portal-primary {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.72rem 1rem;
  font-weight: 600;
}
/* LOOKUP PASSWORD REQUEST UI */
.lookup-password-request-row {
  margin-top: 0.15rem;
  padding-top: 0.1rem;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.lookup-password-request-text {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.8rem;
  line-height: 1.35;
}
.lookup-password-request-btn {
  width: auto !important;
  margin-top: 0 !important;
  min-height: 30px;
  padding: 0.34rem 0.62rem !important;
  font-size: 0.78rem !important;
  border-radius: 8px !important;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  touch-action: manipulation;
}
/* LOOKUP PASSWORD REQUEST MODAL */
.lookup-password-request-panel {
  width: min(34rem, 95vw);
}
.customer-portal-hint {
  font-size: 0.82rem !important;
  line-height: 1.4;
  color: var(--ink-muted) !important;
}
.customer-portal-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.65rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-muted);
}
.customer-portal-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  text-transform: none;
  font-size: 0.86rem;
  letter-spacing: 0;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.customer-portal-remember span {
  white-space: nowrap;
}
.customer-portal-sep {
  color: var(--line);
  user-select: none;
}
button.customer-portal-link {
  background: none;
  border: none;
  padding: 0.15rem 0.1rem;
  color: var(--brand);
  font: inherit;
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  width: auto;
}
button.customer-portal-link:hover {
  color: #a8bdd9;
}
.customer-portal-clear {
  font-size: 0.78rem !important;
  padding: 0.2rem 0.45rem !important;
  margin-left: 0.15rem !important;
}
.help-request-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.help-request-form label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.72rem;
  margin: 0 0 0.2rem;
}
.lookup-panel-help .sub {
  max-width: 32rem;
}
.modal-back {
  position: fixed; inset: 0; z-index: 300; background: rgba(10, 20, 40, 0.5);
  display: none; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(2px);
}
.modal-back.open { display: flex; }
#loan-registration-modal.modal-back {
  z-index: 320;
}
/* Stacked above New Loan Registration so customer search / new customer stay usable on top */
#customer-search-modal.modal-back.open,
#customer-form-modal.modal-back.open,
#cd-password-modal.modal-back.open,
#customer-memo-history-modal.modal-back.open,
#customer-status-modal.modal-back.open {
  z-index: 500;
}
.modal-box { background: var(--card); border-radius: 12px; padding: 1.4rem; max-width: 26rem; width: 100%; }
.customer-form-modal { max-width: 760px; width: min(95vw, 760px); max-height: 92vh; overflow: auto; }
/* New Customer modal: show more fields at once */
#customer-form-modal .customer-form-modal {
  max-width: 380px;
  width: min(92vw, 380px);
  max-height: 90vh;
  padding: 1rem 1.05rem;
}
#customer-form-modal #form-customer {
  gap: 0.45rem;
}
#customer-form-modal #form-customer .frow {
  gap: 0.5rem;
  margin: 0;
}
#customer-form-modal #form-customer .frow.cols2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem 0.55rem;
}
#customer-form-modal #form-customer label {
  margin: 0.18rem 0 0.16rem;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
}
#customer-form-modal #form-customer input,
#customer-form-modal #form-customer select,
#customer-form-modal #form-customer textarea {
  padding: 0.42rem 0.6rem;
  font-size: 0.84rem;
  border-radius: 9px;
}
#customer-form-modal #form-customer textarea {
  min-height: 52px;
}
#customer-form-modal #form-customer .admin-quick-actions {
  margin-top: 0.3rem;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
#customer-form-modal #form-customer .admin-quick-actions .btn {
  margin-top: 0;
  padding: 0.48rem 0.75rem;
  font-size: 0.82rem;
  width: 100%;
}
#customer-form-modal #customer-duplicate-warning {
  padding: 0.55rem !important;
}
@media (max-width: 760px) {
  #customer-form-modal #form-customer .frow.cols2 {
    grid-template-columns: 1fr;
  }
}
footer.fine { margin-top: 2.5rem; font-size: 0.75rem; color: var(--ink-muted); }
body.customer-lookup footer.fine {
  text-align: center;
  width: 100%;
}
body.customer-lookup:not(.cportal-active) footer.fine {
  flex: 0 0 auto;
  align-self: center;
  max-width: min(28rem, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(2rem, 5vh, 2.75rem);
  margin-bottom: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  opacity: 0.78;
  color: var(--ink-muted, #94a3b8);
}
body.customer-lookup:not(.cportal-active) footer.fine a {
  opacity: 0.95;
}
body.customer-lookup:not(.cportal-active) .customer-portal-title {
  text-align: center;
}

/* admin — cool blue-gray shell (visually distinct from customer-lookup) */
body.admin {
  background: #0e1014;
  background: linear-gradient(195deg, #0e1218 0%, #0a0c0f 45%, #080a0c 100%);
}
.adminbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
.admin-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  max-width: none;
  width: 100%;
  margin: 0;
}
.admin-sidebar {
  background: #151a21;
  color: #dbe2ec;
  padding: 1rem 0.75rem;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}
.admin-sidebar .logo { color: #f3f4f6; margin-bottom: 0.9rem; flex-shrink: 0; }
/* flex:1 lets the nav column fill under the logo; align-content:start stops grid rows from stretching with huge gaps. */
.admin-nav { display: grid; gap: 0.35rem; flex: 1; min-height: 0; align-content: start; }
.admin-sidebar-footer {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.admin-nav-group {
  border: 1px solid #2d3949;
  border-radius: 10px;
  padding: 0.45rem 0.45rem 0.5rem;
  background: #131920;
}
.admin-nav-group-title {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8b9bb0;
  margin: 0.1rem 0.15rem 0.35rem;
}
.admin-nav-sub {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.5rem 0.6rem;
}
.admin-nav-btn {
  width: 100%;
  text-align: left;
  padding: 0.62rem 0.7rem;
  border: 1px solid #2d3949;
  border-radius: 8px;
  background: #19212b;
  color: #c2cedd;
  font-weight: 600;
  cursor: pointer;
}
.admin-nav-btn[aria-pressed="true"] {
  background: #273548;
  border-color: #3a4b62;
  color: #f1f5f9;
}
.admin-nav-btn:hover {
  background: #233042;
  border-color: #3a4b62;
}
@media (min-width: 900px) {
  .access-control-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0.75rem;
    align-items: start;
  }
}
.ac-selected-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}
.ac-selected-row .ac-selected-shell {
  flex: 1 1 auto;
  min-width: 0;
}
.ac-inline-actions--beside {
  flex: 0 0 auto;
  align-self: center;
  max-width: min(100%, 24rem);
}
.ac-selected-shell {
  display: grid;
  grid-template-columns: 56px repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem;
  background: #182334;
}
.ac-selected-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #eaf2ff;
  background: #2563eb;
  border: 1px solid #4f84f0;
}
.ac-selected-meta span {
  display: block;
  color: var(--ink-muted);
  font-size: 0.8rem;
}
.ac-selected-meta b {
  display: block;
  margin-top: 0.12rem;
}
.ac-mini-card {
  margin: 0;
  padding: 0.6rem;
  border: 1px solid rgba(255,255,255,0.08);
}
.ac-inline-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.ac-inline-actions select,
.ac-inline-actions input {
  width: auto;
  min-width: 10rem;
  margin: 0;
}
.ac-search-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
  gap: 0.45rem 0.6rem;
  align-items: end;
}
.ac-search-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  flex-wrap: nowrap;
}
@media (max-width: 899px) {
  .ac-selected-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ac-inline-actions--beside {
    max-width: none;
    width: 100%;
    justify-content: flex-end;
  }
  .ac-selected-shell {
    grid-template-columns: 56px 1fr;
  }
  .ac-search-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ac-search-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
  .ac-inline-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .ac-inline-actions.ac-inline-actions--beside {
    justify-content: flex-end;
  }
}
.admin-main { padding: 1rem; min-width: 0; max-width: 100%; }
@media (max-width: 480px) {
  .admin-main { padding: 0.65rem 0.5rem; }
}
/* Loan detail heading: ticket id must wrap on narrow screens */
#ld-page-heading {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
#view-loan-detail .ld-shell-card > .admin-section-head {
  align-items: flex-start;
}
@media (min-width: 520px) {
  #view-loan-detail .ld-shell-card > .admin-section-head {
    align-items: center;
  }
}
/* LOCKED: Pawn admin top “Find customer / loan” bar — do not remove/replace these rules in refactors. Keep overflow:visible for popover. */
/* Global header: “FIND CUSTOMER / LOAN” + hint + [input|Search] — must not clip the dropdown. */
header.admin-topbar.card,
.admin-topbar.card {
  overflow: visible;
  margin-bottom: 1rem;
  background: #1a1d23;
  border-color: #2a2f3a;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 1.15rem 1.3rem 1.25rem;
}
.admin-header-search-panel {
  width: 100%;
  min-width: 0;
}
.admin-header-search-head {
  margin-bottom: 0.7rem;
}
.admin-header-search-title {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f3f4f6;
  margin: 0;
  line-height: 1.25;
}
.admin-header-search-hint {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: #9ca3af;
}
.admin-header-search-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
  flex-wrap: wrap;
}
button.btn.admin-header-search-btn {
  margin-top: 0 !important;
  width: auto !important;
  min-height: 2.65rem;
  padding: 0.55rem 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  font-weight: 700;
  border-radius: 8px;
  background: #4a5568;
  color: #f8fafc;
  flex: 0 0 auto;
}
button.btn.admin-header-search-btn:hover {
  background: #5a6578;
  color: #fff;
}
.admin-header-search-ico {
  display: inline-flex;
  line-height: 0;
  flex-shrink: 0;
  opacity: 0.95;
}
.admin-search-wrap {
  position: relative;
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 100%;
}
.admin-search-wrap #admin-search {
  width: 100%;
  margin: 0;
  min-height: 2.65rem;
  background: #21252b;
  border: 1px solid #343a44;
  border-radius: 8px;
  font-size: 0.95rem;
}
@media (min-width: 600px) {
  .admin-header-search-row { flex-wrap: nowrap; }
}
@media (max-width: 480px) {
  button.btn.admin-header-search-btn { flex: 1 1 100%; min-height: 2.75rem; }
}
.admin-search-popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 200;
  /* Slightly lifted vs page/header so the dropdown reads as its own layer (not full contrast). */
  background: #28323f;
  border: 1px solid rgba(120, 158, 205, 0.34);
  border-radius: 10px;
  box-shadow:
    0 14px 48px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  max-height: min(70vh, 22rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-search-popover[hidden] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}
.admin-search-popover-status {
  padding: 0.35rem 0.55rem;
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
}
.admin-search-popover-list {
  overflow-y: auto;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.admin-search-hits-table-wrap {
  width: 100%;
  min-width: min(100%, 32rem);
}
table.admin-search-hits {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  color: #e8eef5;
}
table.admin-search-hits thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8fa6bc;
  padding: 0.4rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  background: #2f3a4a;
  z-index: 1;
  white-space: nowrap;
}
table.admin-search-hits .admin-search-hits-th-type { width: 4.5rem; }
table.admin-search-hits .admin-search-hits-th-action { width: 3.5rem; text-align: right; }
table.admin-search-hits td {
  padding: 0.38rem 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}
table.admin-search-hits .admin-search-hits-td-go { text-align: right; }
table.admin-search-hits .admin-search-hits-td-type { white-space: nowrap; }
table.admin-search-hits .admin-search-hits-td-phone { max-width: 7.5rem; }
.admin-search-hit-kind-tag {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7aa7d6;
}
.admin-search-hit-go {
  display: inline-block;
  font-weight: 600;
  font-size: 0.75rem;
  color: #c9a227;
}
tr.admin-search-hit-row {
  cursor: pointer;
  transition: background 0.12s ease;
}
tr.admin-search-hit-row:hover,
tr.admin-search-hit-row:focus-visible {
  background: #3a4a5c;
  outline: none;
}
tr.admin-search-hit-row.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
tr.admin-search-hit-row.is-disabled:hover { background: transparent; }
table.admin-search-hits .nowrap { white-space: nowrap; }
button.admin-search-hit {
  display: block;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #e8eef5;
  cursor: pointer;
  font: inherit;
}
button.admin-search-hit:hover,
button.admin-search-hit:focus-visible {
  background: #3a4a5c;
  border-color: #4a5d75;
  outline: none;
}
.admin-search-hit-kind {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #7aa7d6;
  margin-right: 0.35rem;
}
.admin-search-hit-title {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 0.12rem;
}
.admin-search-hit-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-muted, #9aa8b8);
}
.admin-kpi-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.admin-kpi { padding: 1rem 1rem; }
.admin-dashboard-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: 0.9rem;
}
.admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.65rem;
}
.customer-top-head {
  justify-content: space-between;
  gap: 0.8rem;
}
/* Customers pane: KPIs, table, pagination (search: global #admin-search) */
.customer-kpi-section { margin-bottom: 0.8rem; }
.customer-kpi-section .overview-kpi-grid { margin: 0; }
.customer-mgmt-bar { margin-bottom: 0.55rem; }
.customer-mgmt-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.customer-filter-bar {
  margin-bottom: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: flex-end;
  justify-content: space-between;
}
@media (min-width: 720px) {
  .customer-filter-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, auto);
    align-items: end;
  }
}
.select-wide { width: 100%; min-width: 0; }
.customer-filter-bar .customer-filter-bar-reset { justify-self: end; }
.customer-table-wrap {
  overflow-x: hidden;
  margin-top: 0.35rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.customer-mgt-table tbody tr { cursor: pointer; }
.customer-mgt-table tbody tr:hover { background: rgba(50, 78, 110, 0.15); }
.customer-mgt-table .customer-id-cell {
  max-width: none;
  white-space: normal;
  overflow: visible;
  word-break: break-all;
}
/* Customer profile grade pills: Normal / Caution / Suspended (class names are legacy). */
.customer-status-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
}
.customer-status-pill.is-active { background: rgba(34, 197, 94, 0.2); color: #86efac; border-color: #166534; }
.customer-status-pill.is-hold { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border-color: #1d4ed8; }
.customer-status-pill.is-suspended { background: rgba(71, 85, 105, 0.45); color: #e2e8f0; border-color: #475569; }
.customer-mgt-table .customer-actions-th { width: auto; max-width: 9rem; }
.customer-mgt-table .customer-actions-cell {
  white-space: normal;
  vertical-align: middle;
  padding: 0.2rem 0.35rem;
}
.customer-mgt-table .customer-action-btn {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  margin: 0 0.1rem 0 0;
  line-height: 0;
  border: 1px solid #2f4b72;
  border-radius: 8px;
  color: #9dc2f7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 35, 58, 0.6);
}
.customer-mgt-table .customer-action-btn:hover {
  color: #dbeafe;
  border-color: #4a7cbe;
  background: rgba(32, 56, 90, 0.75);
}
.customer-mgt-table .customer-action-btn.cust-act-delete {
  color: #fca5a5;
  border-color: #6b2e36;
}
.customer-mgt-table .customer-action-btn.cust-act-delete:hover { color: #fee2e2; border-color: #b91c1c; }
.customer-mgt-table .customer-action-icon { display: block; }
.customer-table-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding-top: 0.6rem;
  border-top: 1px solid #2a3a4e;
}
.customer-pager-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1;
  min-width: min(100%, 20rem);
}
.customer-pager-pages { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; align-items: center; }
.btn.ghost.is-current {
  color: #f0f8ff;
  background: #2f5fa6;
  border-color: #4b83d6;
}
.btn.ghost:disabled { opacity: 0.4; pointer-events: none; }
.customer-pager-size-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.customer-page-size-select { min-width: 5.2rem; }
@media (max-width: 640px) {
  .customer-table-pager { flex-direction: column; align-items: stretch; }
  .customer-pager-nav { order: 2; }
  .customer-pager-size-wrap { order: 3; justify-content: space-between; }
  #customer-pager-showing { order: 1; text-align: center; }
}
.customer-detail-hero {
  border: 1px solid #2f4056;
  background: linear-gradient(180deg, #1a2536 0%, #172233 100%);
}
.customer-detail-hero-top {
  margin: 0;
}
.customer-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.customer-hero-r1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.customer-hero-r1-mid {
  flex: 1;
  min-width: 0;
  display: block;
}
/* Name should stay visible; only hide when truly empty */
.customer-hero-r1-mid #cd-name:empty {
  display: none;
}
.customer-hero-r1-mid:has(#cd-name:empty) {
  display: none;
}
.customer-hero-edit-btn {
  width: auto !important;
  margin-top: 0 !important;
  padding: 0.34rem 0.68rem !important;
  font-size: 0.78rem !important;
  line-height: 1.1;
  flex-shrink: 0;
}
.customer-info-kv {
  gap: 0;
}
.customer-info-kv > div {
  display: grid;
  grid-template-columns: minmax(130px, 210px) minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  padding: 0.58rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.customer-info-kv > div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.customer-info-kv > div > span {
  color: #b8c7de;
  font-weight: 500;
}
.customer-info-kv > div > b {
  display: block;
  color: #edf3ff;
  font-weight: 700;
  word-break: break-word;
}
@media (max-width: 760px) {
  .customer-hero-head {
    flex-wrap: wrap;
  }
  .customer-info-kv > div {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }
}
/* Quick memo: Save overlaid on bottom-right of textarea (not in footer row) */
.qmemo-board .qmemo-pad {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
}
.qmemo-board .qmemo-pad textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.4rem 0.5rem 0.5rem 0.5rem;
  resize: vertical;
  vertical-align: top;
}
/* Customer detail: fill column height — memo pad grows toward card bottom */
#view-customer-detail .customer-detail-top-row > .qmemo-board--customer-detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
#view-customer-detail .customer-detail-top-row > .qmemo-board--customer-detail > h3,
#view-customer-detail .customer-detail-top-row > .qmemo-board--customer-detail > p.sub {
  flex-shrink: 0;
}
#view-customer-detail .qmemo-detail-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  margin: 0 0 0.4rem;
}
#view-customer-detail .customer-detail-top-row > .qmemo-board--customer-detail .qmemo-pad {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#view-customer-detail .qmemo-board--customer-detail .frow {
  flex-shrink: 0;
  margin-top: 0.35rem;
}
#view-customer-detail .qmemo-pad textarea#qmemo-ta-customer-detail {
  flex: 1 1 auto;
  min-height: 22rem !important;
  max-height: none;
}
@media (max-width: 899px) {
  #view-customer-detail .customer-detail-top-row > .qmemo-board--customer-detail {
    min-height: 28rem;
  }
}
.customer-detail-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  align-items: stretch;
}
.customer-detail-top-row > .customer-detail-hero,
.customer-detail-top-row > .qmemo-board {
  height: 100%;
}
.customer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #eaf2ff;
  background: #36598a;
  border: 1px solid #5477ab;
}
.admin-filter-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.admin-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.admin-activity-list li {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.72rem 0.75rem;
  background: #1e2530;
}
.admin-quick-actions {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
#view-customer-detail > .card > .admin-quick-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
}
#view-customer-detail > .card > .admin-quick-actions .btn {
  width: auto;
  min-width: 5.2rem;
  margin-top: 0;
  padding: 0.34rem 0.5rem;
  font-size: 0.76rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-summary-footer {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.overview-kpi-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.overview-kpi-card {
  min-height: 138px;
  text-align: left;
  cursor: pointer;
  border: 1px solid #2f3b4d;
  background: #182334;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.overview-kpi-card.kpi-active { border-color: #365f91; }
.overview-kpi-card.kpi-due-soon { border-color: #8d7231; }
.overview-kpi-card.kpi-overdue { border-color: #8d3d43; }
.overview-kpi-card.kpi-prepaid { border-color: #6b4a8d; }
.overview-kpi-card.kpi-interest { border-color: #3b7a56; }
.overview-kpi-card:hover { filter: brightness(1.06); }
.overview-kpi-action {
  color: #9dc2f7;
  font-size: 0.76rem;
  margin-top: 0.3rem;
}
.overview-kpi-main {
  margin: 0.3rem 0 0.2rem;
  font-size: 2rem;
  font-weight: 700;
  color: #f7fbff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
  letter-spacing: 0.01em;
}
.overview-kpi-meta {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.83rem;
}
.overview-kpi-meta b { color: var(--ink); }
.overview-list-item {
  border: 1px solid #2f3b4d;
  border-radius: 10px;
  background: #1b2431;
  padding: 0.6rem 0.7rem;
  cursor: pointer;
}
.overview-list-item:hover { border-color: #4b6385; }
.overview-list-grid {
  display: grid;
  gap: 0.55rem;
}
.overview-go-btn { margin-top: 0.7rem; }
.loan-header-actions {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  align-items: center;
}
.loan-header-actions-right {
  margin-left: auto;
  display: inline-flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.loans-primary-cta {
  font-weight: 700;
  padding: 0.62rem 1.05rem;
  box-shadow: 0 3px 18px rgba(44, 110, 193, 0.28);
}
.loans-kpi-grid .overview-kpi-card { min-height: 118px; }
/* Loans workspace (list + aside) */
#view-loans .loans-workspace { max-width: 100%; }
.loans-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 0.85rem;
}
.loans-hero-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}
.loans-hero-lead { margin: 0.3rem 0 0; max-width: 36rem; }
#view-loans .loan-header-actions { width: auto; min-width: min(100%, 22rem); justify-content: flex-end; }
#view-loans .loans-primary-cta { background: #2563eb; border-color: #2563eb; }
#view-loans .btn {
  width: auto;
  margin-top: 0;
  padding: 0.5rem 0.62rem;
  font-size: 0.64rem;
  border-radius: 9px;
}
#view-loans .loan-header-actions,
#view-loans .loan-header-actions-right {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
#view-loans .loan-header-actions {
  width: 100%;
  justify-content: flex-start;
  min-width: 0;
}
#view-loans .loan-header-actions-right {
  margin-left: 0;
}
#view-loans .loan-header-actions .btn,
#view-loans .loan-header-actions-right .btn,
#view-loans .loans-filter-primary-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.loans-filter-card { margin: 0 0 0.5rem; padding: 0.9rem 1.05rem; }
.loans-filter-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.75rem;
}
.loans-filter-primary > div { flex: 1 1 8rem; min-width: 0; max-width: 12rem; }
.loans-filter-primary > div label { text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.05em; color: #94a3b8; }
.loans-filter-primary-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  gap: 0.4rem;
  margin-left: auto;
}
#view-loans .loans-filter-search-btn { background: #2563eb; border-color: #2563eb; min-width: 5.2rem; }
.loans-filter-adv { margin-top: 0.5rem; font-size: 0.9rem; color: #a8b8cc; }
.loans-filter-adv summary { cursor: pointer; user-select: none; color: #7dd3fc; }
#view-loans .loans-v2-body {
  display: block;
  max-width: 100%;
}
/* Top row: horizontal loan summary + My Notes above filters; loan list uses full width below. */
#view-loans .loans-v2-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 0.85rem;
}
#view-loans .loans-v2-toprow .loans-summary-banner {
  flex: 1 1 22rem;
  min-width: 0;
}
#view-loans .loans-v2-toprow .loans-mynotes--toprow {
  flex: 0 1 20rem;
  width: min(22rem, 100%);
  max-width: 100%;
  align-self: stretch;
}
@media (max-width: 1100px) {
  #view-loans .loans-v2-toprow {
    flex-direction: column;
  }
  #view-loans .loans-v2-toprow .loans-mynotes--toprow {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}
#view-loans .loans-summary-banner .loans-summary-grid2 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  #view-loans .loans-summary-banner .loans-summary-grid2 {
    grid-template-columns: 1fr 1fr;
  }
}
#view-loans .loans-summary-banner-lower {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: flex-start;
  margin-top: 0.35rem;
}
#view-loans .loans-summary-banner-lower-left {
  flex: 1 1 10rem;
  min-width: 0;
}
#view-loans .loans-summary-banner-lower .loans-sum-legend {
  flex: 1 1 12rem;
  min-width: min(100%, 12rem);
  margin-top: 0;
}
#view-loans .loans-mynotes--toprow .qmemo-pad textarea {
  min-height: 4.5rem;
}
.loans-list-card { min-width: 0; }
.loans-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.45rem;
}
.loans-list-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
#loans-list-count.loans-list-count, .loans-list-title .loans-list-count { color: #4ade80; font-weight: 800; }
.loans-list-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
#view-loans .loans-page-size { max-width: 4.2rem; margin: 0; padding: 0.2rem 0.35rem; }
.loans-pager-lbl { margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
.loans-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  margin-top: 0.25rem;
  border: 1px solid #2f3a4a;
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#view-loans .loans-data-table {
  margin: 0;
  /* Floor width so columns are not crushed; wrapper scrolls horizontally on narrow viewports. */
  min-width: 48rem;
  width: 100%;
  max-width: none;
  table-layout: auto;
  font-size: 0.86rem;
}
#view-loans .loans-data-table th,
#view-loans .loans-data-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}
#view-loans .loans-data-table th {
  white-space: normal;
  line-height: 1.2;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
#view-loans .loans-data-table td:nth-child(5),
#view-loans .loans-data-table td:nth-child(8) {
  white-space: nowrap;
  word-break: normal;
}
#view-loans .loans-data-table td:nth-child(8) {
  text-align: center;
}
#view-loans .loans-data-table th:last-child,
#view-loans .loans-data-table td:last-child {
  min-width: 8.5rem;
  box-sizing: border-box;
}
.loans-td-loanno { font-family: ui-monospace, monospace; font-size: 0.82rem; }
.loans-td-amount { font-weight: 700; }
.loans-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: none;
  white-space: nowrap;
}
.loans-badge--active { background: rgba(22, 163, 74, 0.22); color: #86efac; border-color: rgba(22, 163, 74, 0.45); }
.loans-badge--duesoon { background: rgba(234, 179, 8, 0.2); color: #fde68a; border-color: rgba(234, 179, 8, 0.45); }
.loans-badge--overdue { background: rgba(220, 38, 38, 0.2); color: #fecaca; border-color: rgba(220, 38, 38, 0.45); }
.loans-badge--closed { background: rgba(100, 116, 139, 0.25); color: #cbd5e1; border-color: rgba(100, 116, 139, 0.5); }
#view-loans td.loans-td-actions,
#view-loans td.customer-actions-cell.loans-td-actions {
  white-space: normal;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
  justify-content: flex-end;
  vertical-align: top;
}
#view-loans .loans-td-actions .btn.ghost { padding: 0.32rem 0.5rem; font-size: 0.8rem; margin: 0 0.1rem 0 0; }
.loans-row-more { position: relative; display: inline-block; vertical-align: middle; }
.loans-row-more summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.1rem; }
.loans-row-more summary::-webkit-details-marker { display: none; }
.loans-row-more-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 0.2rem;
  z-index: 50;
  min-width: 12.5rem;
  padding: 0.4rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  border: 1px solid #3d4a5f;
  background: #1a1f2a;
}
#view-loans .loans-row-more-menu .btn.ghost { width: 100%; text-align: left; margin: 0; }
.loans-mynotes-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.loans-mynotes-title { margin: 0; font-size: 0.98rem; }
#view-loans .loans-mynotes .qmemo-pad textarea { width: 100%; min-height: 5.5rem; }
.loans-mynotes-link { background: none; border: none; color: #7dd3fc; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 0.12em; }
.loans-mynotes-link:hover { color: #bae6fd; }
.loans-summary-title { margin: 0 0 0.5rem; font-size: 1rem; }
.loans-summary-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.loans-summary-cell {
  background: #151a22;
  border: 1px solid #2a3240;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.loans-summary-cell .sub { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8; margin: 0; }
.loans-summary-num { font-size: 1.2rem; line-height: 1.1; }
.loans-summary-amt { font-size: 0.78rem; color: #a8b8ce; }
.loans-segbar {
  display: flex;
  width: 100%;
  min-height: 10px;
  border-radius: 6px;
  overflow: hidden;
  background: #0f1419;
  margin: 0.5rem 0 0.25rem;
}
.loans-seg { min-height: 10px; min-width: 0; }
.loans-seg--active { background: #2563eb; }
.loans-seg--duesoon { background: #d97706; }
.loans-seg--overdue { background: #dc2626; }
.loans-seg--closed { background: #64748b; }
.loans-seg--default { background: #7c3aed; }
.loans-sum-legend { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.8rem; color: #c7d4e6; }
.loans-sum-legend li { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; }
.loans-legend-swatch { width: 0.5rem; height: 0.5rem; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
/* legacy: ring charts (still useful if reintroduced) */
.loans-mid-grid {
  margin-top: 0.8rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
}
.loans-ring-wrap {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  align-items: center;
}
.loans-ring {
  width: 146px;
  height: 146px;
  border-radius: 999px;
  background: conic-gradient(#2f76d2 0 100%);
  position: relative;
}
.loans-ring-inner {
  position: absolute;
  inset: 21px;
  border-radius: 999px;
  background: #101a28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.loans-ring-inner b { font-size: 1.55rem; color: #f3f8ff; line-height: 1; }
.loans-ring-inner small { color: #b6c4d7; font-size: 0.72rem; }
.loans-ring-legend { display: grid; gap: 0.35rem; }
.loans-ring-legend div { display: flex; gap: 0.38rem; align-items: baseline; }
.loans-ring-legend span { min-width: 96px; color: #c7d4e6; font-size: 0.84rem; }
.loans-ring-legend b { color: #f2f8ff; }
.loans-ring-legend small { color: #95a8c0; font-size: 0.72rem; }
#view-loans .frow input::placeholder { color: #7f92ab; }
#view-loans .loans-filter-card input::placeholder { color: #7f92ab; }
.loan-registration-modal-box {
  max-width: min(96vw, 1220px);
  width: min(96vw, 1220px);
  max-height: 92vh;
  overflow: auto;
}
#collateral-register-modal .modal-box { max-width: 900px; width: min(95vw, 900px); }
.collateral-summary-wrap {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  align-items: center;
}
.collateral-donut {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: conic-gradient(#2f76d2 0 100%);
  position: relative;
}
.collateral-donut-inner {
  position: absolute;
  inset: 20px;
  border-radius: 999px;
  background: #101a28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.collateral-donut-inner b { font-size: 1.6rem; color: #f3f8ff; line-height: 1; }
.collateral-donut-inner small { color: #b6c4d7; font-size: 0.72rem; }
.collateral-summary-legend { display: grid; gap: 0.35rem; }
.collateral-summary-legend div { display: flex; gap: 0.4rem; align-items: baseline; }
.collateral-summary-legend span { min-width: 140px; color: #c7d4e6; font-size: 0.84rem; }
.collateral-summary-legend b { color: #f2f8ff; }
.collateral-summary-legend small { color: #95a8c0; font-size: 0.72rem; }
.collateral-action-btn {
  width: auto;
  padding: 0.25rem 0.45rem;
  margin-top: 0;
  font-size: 0.72rem;
}
#loan-registration-modal-host #section-loan-form {
  border: none;
  padding: 0;
  background: transparent;
}
#loan-registration-modal-host .nlr-title-inline {
  display: none;
}
/* New loan registration (4-step) */
.nlr-wrap {
  background: #121a24;
  border: 1px solid #2a3648;
  border-radius: 12px;
  padding: 0.75rem 0.9rem 0.6rem;
}
#view-pawn .nlr-wrap { margin-top: 0.4rem; }
.nlr-form {
  display: block;
  margin: 0;
  padding: 0;
}
.nlr-section-h {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  color: #f0f4fb;
  letter-spacing: 0.02em;
}
.nlr-stepper {
  margin: 0.2rem 0 0.65rem;
  border-bottom: 1px solid #2a3648;
  padding-bottom: 0.5rem;
}
.nlr-stepper-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  align-items: start;
}
@media (max-width: 880px) {
  .nlr-stepper-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.nlr-stepper .nlr-step-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 2.75rem;
  text-align: left;
  background: #182230;
  border: 1px solid #2f3e52;
  border-radius: 8px;
  color: #d5e0f0;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  font: inherit;
}
.nlr-step-pill .nlr-step-idx {
  flex: 0 0 auto;
  display: inline-flex;
  width: 1.55rem;
  height: 1.55rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  background: #2d3a4a;
  color: #a8c0dd;
  border: 1px solid #3e5169;
}
.nlr-step-pill .nlr-step-txt { display: block; }
.nlr-step-pill .nlr-step-txt small {
  display: block;
  font-size: 0.68rem;
  color: #8fa4bd;
  font-weight: 500;
  margin-top: 0.08rem;
  letter-spacing: 0;
}
.nlr-step-pill.is-current {
  background: #1a2840;
  border-color: #3b6fc4;
  color: #f5f8ff;
}
.nlr-step-pill.is-current .nlr-step-idx {
  background: #2f5eb8;
  border-color: #4d84d8;
  color: #fff;
}
.nlr-step-pill.is-done .nlr-step-idx { background: #1f4a1f; border-color: #2d6a2d; color: #d0ffd0; }
.nlr-cust-toprow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: flex-end;
  margin-top: 0.1rem;
}
.nlr-cust-toprow .loan-step-search-wrap { flex: 1 1 12rem; min-width: 0; }
.nlr-cust-top-actions { flex: 0 0 auto; }
.nlr-cust-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: flex-start;
  justify-content: space-between;
  margin: 0.15rem 0 0.2rem;
}
.nlr-cust-avatar {
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: #f3f6fc;
  background: #2a4a6e;
  border: 1px solid #3a6a9a;
  flex: 0 0 auto;
}
.nlr-cust-head { flex: 1 1 12rem; min-width: 0; }
.nlr-cust-name { font-size: 0.95rem; }
.nlr-pill-wrap { margin-left: 0.3rem; display: inline-block; vertical-align: middle; }
.nlr-cust-oneline { line-height: 1.35; font-size: 0.82rem; }
.nlr-cust-cta { display: flex; gap: 0.3rem; align-items: center; flex: 0 0 auto; }
.nlr-sr, .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
}
.nlr-block {
  background: #161d2a;
  border: 1px solid #2a384b;
  border-radius: 10px;
  padding: 0.5rem 0.55rem 0.6rem;
}
.nlr-subhead {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #a8bdd6;
  font-weight: 700;
}
.nlr-tight { gap: 0.45rem 0.55rem !important; }
.nlr-grid-2 {
  display: grid;
  gap: 0.45rem 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  margin: 0.1rem 0 0.15rem;
}
@media (max-width: 700px) {
  .nlr-grid-2 { grid-template-columns: 1fr; }
}
.nlr-label {
  display: block;
  font-size: 0.8rem;
  color: #cfdae8;
  margin: 0 0 0.2rem;
}
.nlr-label .req { color: #e0e0e0; font-weight: 600; }
#view-pawn .nlr-wrap .input-like, #loan-registration-modal-host .input-like {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: #141a22;
  border: 1px solid #2e3c51;
  color: #f0f3f7;
  border-radius: 8px;
  padding: 0.4rem 0.45rem;
  font: inherit;
}
#view-pawn .nlr-wrap select.input-like, #loan-registration-modal-host select.input-like { cursor: pointer; }
#view-pawn .nlr-wrap .nlr-amount-bump .input-like, #loan-registration-modal-host .nlr-amount-bump .input-like {
  font-size: 1.12rem;
  font-weight: 800;
  padding: 0.45rem 0.5rem;
}
.nlr-currency, .nlr-currency .nlr-pct {
  display: grid;
  align-items: stretch;
  grid-template-columns: auto 1fr;
  gap: 0;
  border: 1px solid #2e3c51;
  border-radius: 8px;
  overflow: hidden;
  background: #141a22;
}
.nlr-currency .pre, .nlr-currency .suff {
  display: flex;
  align-items: center;
  background: #1a2230;
  color: #b0c0d8;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
}
.nlr-currency .input-like {
  border: none !important;
  border-radius: 0;
}
.nlr-currency.is-readonly { opacity: 0.9; }
/* Standalone % group (e.g. interest) — % sits beside input, same height as other inputs */
.nlr-pct {
  display: grid;
  align-items: stretch;
  grid-template-columns: 1fr auto;
  gap: 0;
  min-width: 0;
  width: 100%;
  min-height: 2.4rem;
  box-sizing: border-box;
  border: 1px solid #2e3c51;
  border-radius: 8px;
  overflow: hidden;
  background: #141a22;
}
.nlr-pct .input-like {
  min-width: 0;
  width: 100%;
  border: none !important;
  border-radius: 0;
}
.nlr-pct .suff {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 0.5rem;
  background: #1a2230;
  color: #b0c0d8;
  font-size: 0.8rem;
  font-weight: 600;
  border: none;
  border-left: 1px solid #2e3c51;
  box-sizing: border-box;
}
#loan-registration-modal-host .nlr-pct {
  border-color: #2a3a4f;
  background: #080d16;
}
#loan-registration-modal-host .nlr-pct .suff { border-left-color: #2a3a4f; }
.nlr-pct.nlr-pct-readonly .input-like[readonly] {
  cursor: default;
  color: #c8d4e6;
  user-select: none;
}
.nlr-pct.nlr-pct-readonly { opacity: 0.95; }
.nlr-term-row { display: flex; flex-direction: column; gap: 0.25rem; }
.nlr-term-digits { display: grid; grid-template-columns: auto 1fr; }
.nlr-term-digits .pre { padding: 0.35rem; font-size: 0.7rem; }
.nlr-term-presets { display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: center; }
.nlr-linklike {
  background: none;
  border: 0;
  color: #6eb0ff;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.05rem 0.1rem;
}
.nlr-total-due { grid-column: 1 / -1; }
#section-loan-form .nlr-spread-4 .nlr-total-due { grid-column: auto; }
#nlr-panel-2 .nlr-ld-grid.nlr-spread-4 .nlr-total-due { grid-column: auto; }
.nlr-spread-4 {
  display: grid;
  gap: 0.45rem 0.55rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  margin: 0.1rem 0 0.2rem;
}
#nlr-panel-2 .nlr-ld-grid.nlr-spread-4,
#loan-registration-modal-host #nlr-panel-2 .nlr-ld-grid.nlr-spread-4 {
  align-items: start;
  align-content: start;
}
#nlr-panel-2 .nlr-ld-field,
#loan-registration-modal-host #nlr-panel-2 .nlr-ld-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
#nlr-panel-2 .nlr-ld-loan-type .nlr-label,
#loan-registration-modal-host #nlr-panel-2 .nlr-ld-loan-type .nlr-label {
  white-space: nowrap;
}
#nlr-panel-2 .nlr-ld-r3-twin .nlr-ld-col-span-2 { grid-column: span 2; }
@media (max-width: 520px) {
  #nlr-panel-2 .nlr-ld-r3-twin .nlr-ld-col-span-2 { grid-column: 1 / -1; }
}
#nlr-panel-2 .nlr-ld-field-purpose-inline,
#loan-registration-modal-host #nlr-panel-2 .nlr-ld-field-purpose-inline {
  min-width: 0;
}
#nlr-panel-2 .nlr-ld-date-row.frow,
#loan-registration-modal-host #nlr-panel-2 .nlr-ld-date-row.frow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.4rem;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
#nlr-panel-2 .nlr-term-compact { min-width: 0; width: 100%; }
#nlr-panel-2 .nlr-term-row1 {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.4rem;
  width: 100%;
}
#nlr-panel-2 .nlr-term-row1 .nlr-term-currency { flex: 1 1 4.5rem; min-width: 3.5rem; max-width: 100%; }
#nlr-panel-2 .nlr-term-row1 .nlr-term-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  flex: 1 1 6.5rem;
  min-width: 0;
}
#nlr-panel-2 .nlr-term-hint { margin: 0.1rem 0 0; font-size: 0.72rem; line-height: 1.3; color: #7a8fa8; }
#nlr-panel-2 .nlr-ld-amount .nlr-currency,
#nlr-panel-2 .nlr-total-due .nlr-currency { width: 100%; }
#nlr-panel-2 .btn.nlr-ld-cal { flex: 0 0 auto; padding: 0.4rem 0.55rem; }
@media (max-width: 1200px) {
  .nlr-spread-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .nlr-spread-4 { grid-template-columns: 1fr; }
}
/* NLR: card boxes (design) — use .nlr-ref-card instead of border-top strips */
#section-loan-form .nlr-ref-card,
#loan-registration-modal-host .nlr-ref-card {
  background: #0a1018;
  border: 1px solid #1a2535;
  border-radius: 12px;
  padding: 0.8rem 0.9rem 0.95rem;
  margin-top: 0.75rem;
  box-sizing: border-box;
}
#section-loan-form .nlr-ref-card:first-of-type,
#loan-registration-modal-host .nlr-form .nlr-ref-card:first-of-type {
  margin-top: 0.45rem;
}
.nlr-ref-stepper { margin-bottom: 0.2rem; }
.nlr-cust-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem 0.55rem;
  margin-top: 0.35rem;
}
.nlr-cust-typeahead-block {
  flex: 1 1 12rem;
  min-width: 0;
  position: relative;
}
input#f-tk.nlr-ticket-auto[readonly] {
  cursor: default;
  color: #c8d4e6;
  user-select: none;
}
#section-loan-form .nlr-cust-search-row .nlr-cust-select-cta,
#loan-registration-modal-host .nlr-cust-search-row .nlr-cust-select-cta {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  align-self: center;
  white-space: nowrap;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  background: #1a3352;
  border: 1px solid #2a5588;
  color: #e8f2ff;
}
.nlr-cust-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  margin-top: 2px;
  max-height: 14.5rem;
  overflow: auto;
  background: #0a1018;
  border: 1px solid #2a4a6e;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}
.nlr-cust-suggest .nlr-typ-pick {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.55rem;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #1a2535;
  background: #0a1018;
  color: #e0e8f2;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  line-height: 1.3;
}
.nlr-cust-suggest .nlr-typ-pick:hover,
.nlr-cust-suggest .nlr-typ-pick:focus {
  background: #152230;
  outline: none;
}
.nlr-cust-suggest .nlr-typ-pick:last-of-type { border-bottom: 0; }
.nlr-cust-suggest .nlr-typ-sub { display: block; color: #8a9ab5; font-size: 0.75rem; margin-top: 0.12rem; }
.nlr-cust-suggest .nlr-typ-empt { padding: 0.45rem 0.5rem; color: #6a7a92; }
#section-loan-form .nlr-panel#nlr-panel-2,
#section-loan-form .nlr-panel#nlr-panel-3,
#section-loan-form .nlr-panel#nlr-panel-photos,
#section-loan-form .nlr-panel-add {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* New Loan — reference (mock) styling */
#loan-registration-modal .loan-registration-modal-box.nlr-modal-ref {
  background: #0a0f1a;
  border: 1px solid #1a2433;
  border-radius: 14px;
  padding: 0;
  max-width: min(98vw, 1200px);
  width: min(98vw, 1200px);
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#loan-registration-modal .nlr-ref-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid #1a2435;
  background: #0b1120;
  flex: 0 0 auto;
}
#loan-registration-modal .nlr-ref-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
}
#loan-registration-modal .nlr-ref-close {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #a8b9d0 !important;
  font-size: 1.05rem;
}
#loan-registration-modal .nlr-ref-close span { font-size: 0.82rem; }
#loan-registration-modal-host {
  padding: 0.65rem 1.1rem 1.2rem;
  overflow: auto;
  flex: 1 1 auto;
  background: #0b1120;
}
#loan-registration-modal-host #section-loan-form.nlr-ref,
#view-pawn #section-loan-form.nlr-ref {
  --nlr-ink: #e8edf6;
  --nlr-line: #1c2738;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #dce4f0;
  padding: 0.1rem 0 0.25rem;
}
#view-pawn #section-loan-form.nlr-ref {
  background: #0b1120;
  border: 1px solid var(--nlr-line, #1c2738);
  border-radius: 12px;
  padding: 0.75rem 0.9rem 0.85rem;
}
.nlr-stepper--ref {
  border-bottom-color: #1a2435;
}
.nlr-stepper--ref .nlr-step-pill:not(.is-current) {
  background: #0f1520;
  border-color: #2a384c;
  color: #8c9baf;
}
.nlr-stepper--ref .nlr-step-pill:not(.is-current) .nlr-step-idx {
  background: #1e2838;
  border-color: #2f3d52;
  color: #9dabc0;
}
.nlr-stepper--ref .nlr-step-pill.is-current {
  background: #132038;
  border-color: #3266b8;
  color: #e8f0ff;
}
.nlr-cust-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.1rem; }
.nlr-section-h--hero {
  font-size: 1.02rem;
  font-weight: 700;
  color: #f2f6fc;
  text-transform: none;
  margin: 0;
}
.nlr-cust-lead { color: #96a4bd; font-size: 0.82rem; }
.nlr-cust-search-block { margin-top: 0.1rem; }
.nlr-cust-search-merged {
  display: flex;
  align-items: stretch;
  background: #080d16;
  border: 1px solid #2a3a50;
  border-radius: 8px;
  overflow: hidden;
}
#section-loan-form .nlr-cust-search-merged .input-like,
#loan-registration-modal-host .nlr-cust-search-merged .input-like {
  border: 0;
  border-radius: 0;
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
/* Override global `button.btn { width: 100% }` — search field fills row, icon stays narrow */
#section-loan-form .nlr-cust-search-merged button.nlr-cust-search-go,
#loan-registration-modal-host .nlr-cust-search-merged button.nlr-cust-search-go {
  width: auto;
  min-width: 0;
  max-width: 2.35rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.2rem 0.28rem;
  font-size: 0.82rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.nlr-cust-search-go {
  border: 0;
  border-left: 1px solid #2a3a50;
  border-radius: 0;
  background: #0f1622;
}
#section-loan-form .nlr-selected-customer.card,
#loan-registration-modal-host .nlr-selected-customer.card {
  background: #0a1422;
  border: 1px solid #1e3555;
  border-radius: 10px;
}
.nlr-ld-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.65rem;
  margin-top: 0.35rem;
  align-items: end;
}
@media (max-width: 720px) { .nlr-ld-dual { grid-template-columns: 1fr; } }
.nlr-ld-notes { margin-top: 0.45rem; }
.nlr-ld-row2 { margin-top: 0.35rem; }
.nlr-ghost-cta {
  background: transparent;
  color: #b8c9e0;
  border: 1px solid #2f3f55;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 600;
}
.nlr-cta-prime:disabled { opacity: 0.5; }
.nlr-cta-prime:not(:disabled) {
  background: linear-gradient(180deg, #2a72e8 0%, #1a56c9 100%);
  border: 1px solid #3d84ec;
  color: #fcfdff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.48rem 1rem;
  border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
label.nlr-lab-ico { display: flex; align-items: center; gap: 0.2rem; }
label.nlr-lab-ico::before {
  content: attr(data-ico);
  font-size: 0.68rem;
  opacity: 0.7;
  line-height: 1;
}
.nlr-staff-folds { margin-top: 0.55rem; }
#nlr-panel-staff > .nlr-staff-folds { margin-top: 0; }
.nlr-staff-folds > summary { cursor: pointer; font-size: 0.82rem; color: #7a9ed4; }
.nlr-staff-folds .nlr-slab { margin-top: 0.45rem; }
.nlr-customer-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 0.55rem;
  align-items: start;
}
.nlr-selected-customer--compact {
  padding: 0.5rem 0.6rem !important;
}
.nlr-id-panel {
  border: 1px solid #1f2e44;
  border-radius: 10px;
  background: #0a1422;
  padding: 0.52rem 0.6rem;
}
.nlr-id-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.55rem;
}
.nlr-id-grid > div:last-child {
  grid-column: 1 / -1;
}
.nlr-ticket-loan-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.45rem 0.55rem;
  align-items: end;
}
.nlr-loan-summary-row {
  margin-top: 0.45rem;
  border: 1px solid #21314a;
  border-radius: 10px;
  background: #0b1525;
  padding: 0.5rem 0.6rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
}
.nlr-loan-summary-item small {
  display: block;
  font-size: 0.72rem;
  color: #8da3c0;
}
.nlr-loan-summary-item b {
  display: block;
  margin-top: 0.14rem;
  color: #e7eefb;
  font-size: 0.98rem;
}
.nlr-total-due-accent { color: #5ed896 !important; }
.nlr-date-inline {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.nlr-date-inline .input-like { flex: 1 1 auto; min-width: 0; }
.nlr-date-inline .btn {
  width: auto;
  margin: 0;
  min-width: 2rem;
}
.nlr-collateral-table-wrap {
  margin-top: 0.3rem;
  overflow-x: auto;
  border: 1px solid #1f2f46;
  border-radius: 10px;
}
.nlr-collateral-builder-table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
}
.nlr-collateral-builder-table th,
.nlr-collateral-builder-table td {
  padding: 0.4rem 0.45rem;
  vertical-align: middle;
}
.nlr-collateral-builder-table td .input-like,
.nlr-collateral-builder-table td .nlr-currency {
  margin: 0;
}
.nlr-collateral-builder-table td .nlr-currency .input-like {
  min-height: 2rem;
}
.nlr-collateral-actions-cell {
  display: flex;
  gap: 0.28rem;
}
.nlr-col-action-btn {
  width: auto;
  margin: 0;
  min-height: 1.85rem;
  padding: 0.3rem 0.45rem;
  font-size: 0.75rem;
}
.nlr-collateral-totals {
  margin-top: 0.42rem;
  border: 1px solid #1f2f46;
  border-radius: 10px;
  background: #0a1422;
  padding: 0.45rem 0.58rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.nlr-collateral-totals small {
  display: block;
  color: #8da3c0;
  font-size: 0.72rem;
}
.nlr-collateral-totals b {
  display: block;
  color: #f4f8ff;
  margin-top: 0.1rem;
}
#loan-registration-modal-host .nlr-ref-card {
  padding: 0.42rem 0.48rem 0.52rem;
  margin-top: 0.55rem;
}
/* New Ticket modal — typography & density (higher opacity / clearer text) */
#loan-registration-modal-host .nlr-section-h,
#loan-registration-modal-host .nlr-section-h--hero {
  opacity: 1;
  font-weight: 600;
  color: #ffffff;
}
#loan-registration-modal-host .nlr-id-panel__title,
#loan-registration-modal-host .nlr-subhead {
  color: rgba(232, 242, 255, 0.95);
}
#loan-registration-modal-host .nlr-label {
  color: rgba(232, 242, 255, 0.92);
  font-weight: 500;
}
#loan-registration-modal-host .nlr-field-muted,
#loan-registration-modal-host .nlr-optional-suffix {
  color: rgba(220, 235, 255, 0.78);
  font-weight: 500;
  font-size: 0.82em;
}
#loan-registration-modal-host .sub {
  color: rgba(220, 235, 255, 0.72);
}
#loan-registration-modal-host .input-like,
#loan-registration-modal-host select.input-like {
  color: #fff;
}
#loan-registration-modal-host .input-like::placeholder {
  color: rgba(220, 235, 255, 0.62);
}
#loan-registration-modal-host textarea.input-like::placeholder {
  color: rgba(220, 235, 255, 0.62);
}
#loan-registration-modal-host .nlr-loan-summary-item small,
#loan-registration-modal-host .nlr-collateral-totals small {
  color: rgba(220, 235, 255, 0.78);
}
#loan-registration-modal-host .nlr-collateral-builder-table th {
  color: rgba(232, 242, 255, 0.9);
}
#loan-registration-modal-host .nlr-additional-notes {
  margin-top: 0.42rem;
}
#loan-registration-modal-host .nlr-additional-notes textarea.input-like {
  width: 100%;
  min-height: 2.75rem;
  resize: vertical;
}
#loan-registration-modal-host .nlr-id-uploads-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.55rem;
  align-items: end;
  margin-top: 0.35rem;
}
@media (max-width: 560px) {
  #loan-registration-modal-host .nlr-id-uploads-row {
    grid-template-columns: 1fr;
  }
}
#loan-registration-modal-host .btn.nlr-btn-secondary {
  background: #202c3a;
  color: #e8f0ff;
  border: 1px solid #3a4d66;
}
#loan-registration-modal-host .btn.nlr-btn-secondary:hover {
  background: #273548;
}
.nlr-col-icon-btn {
  padding: 0.28rem 0.4rem;
  min-width: 2rem;
}
.nlr-col-icon-btn .nlr-col-ico,
.nlr-col-icon-btn .customer-action-icon {
  display: block;
  vertical-align: middle;
}
#loan-registration-modal-host .nlr-ref .input-like {
  min-height: 2.05rem;
}
#loan-registration-modal-host .nlr-ref textarea.input-like {
  min-height: 3.2rem;
}
#loan-registration-modal-host #f-int.input-like {
  min-height: 2.6rem;
}
@media (max-width: 980px) {
  .nlr-ticket-loan-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nlr-loan-summary-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .nlr-customer-layout { grid-template-columns: 1fr; }
  .nlr-id-grid { grid-template-columns: 1fr; }
  .nlr-ticket-loan-row { grid-template-columns: 1fr; }
  .nlr-loan-summary-row { grid-template-columns: 1fr; }
}
#nlr-panel-2 .nlr-vpw-input-row,
#loan-registration-modal-host #nlr-panel-2 .nlr-vpw-input-row,
#nlr-panel-staff .nlr-vpw-input-row,
#loan-registration-modal-host #nlr-panel-staff .nlr-vpw-input-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  min-width: 0;
}
#nlr-panel-2 .nlr-vpw-input-wrap,
#loan-registration-modal-host #nlr-panel-2 .nlr-vpw-input-wrap,
#nlr-panel-staff .nlr-vpw-input-wrap,
#loan-registration-modal-host #nlr-panel-staff .nlr-vpw-input-wrap {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.35rem;
}
#nlr-panel-2 .nlr-vpw-input-wrap .input-like,
#loan-registration-modal-host #nlr-panel-2 .nlr-vpw-input-wrap .input-like,
#nlr-panel-staff .nlr-vpw-input-wrap .input-like,
#loan-registration-modal-host #nlr-panel-staff .nlr-vpw-input-wrap .input-like,
#nlr-panel-2 .nlr-vpw-input-row > .input-like,
#loan-registration-modal-host #nlr-panel-2 .nlr-vpw-input-row > .input-like,
#nlr-panel-staff .nlr-vpw-input-row > .input-like,
#loan-registration-modal-host #nlr-panel-staff .nlr-vpw-input-row > .input-like {
  flex: 1 1 auto;
  min-width: 0;
}
#nlr-panel-2 #btn-nlr-vpw-visibility.btn,
#loan-registration-modal-host #nlr-panel-2 #btn-nlr-vpw-visibility.btn,
#nlr-panel-staff #btn-nlr-vpw-visibility.btn,
#loan-registration-modal-host #nlr-panel-staff #btn-nlr-vpw-visibility.btn {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
}
#nlr-panel-2 #btn-nlr-vpw-generate.btn,
#loan-registration-modal-host #nlr-panel-2 #btn-nlr-vpw-generate.btn,
#nlr-panel-staff #btn-nlr-vpw-generate.btn,
#loan-registration-modal-host #nlr-panel-staff #btn-nlr-vpw-generate.btn {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.4rem 0.55rem;
}
#section-loan-form .nlr-spread-4 + .nlr-tight.nlr-spread-4 { margin-top: 0.35rem; }
#loan-registration-modal-host .nlr-ref .input-like,
#view-pawn #section-loan-form.nlr-ref .input-like { background: #080d16; border-color: #2a3a4f; }
#loan-registration-modal-host .nlr-ref .nlr-currency { border-color: #2a3a4f; }
.info-i {
  display: inline-block;
  font-size: 0.6rem;
  line-height: 1;
  color: #9eb7d4;
  border: 1px solid #3d5170;
  width: 0.95em;
  height: 0.95em;
  line-height: 0.9em;
  text-align: center;
  border-radius: 2px;
  font-weight: 800;
  vertical-align: 0.15em;
  cursor: help;
}
.nlr-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  align-items: center;
  justify-content: space-between;
  margin: 0.5rem 0 0.15rem;
  padding: 0.4rem 0.15rem 0.2rem 0.05rem;
  border-top: 1px solid #2a3648;
}
.nlr-foot-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; justify-content: flex-end; flex: 0 0 auto; }
#view-pawn .nlr-foot .okline, #loan-registration-modal-host .nlr-foot .okline { min-width: 0; }
.loan-step-inpanel { box-shadow: inset 0 0 0 1px rgba(47, 62, 80, 0.35); }
.overview-bottom-grid {
  margin-top: 0.85rem;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}
.status-chip {
  display: inline-block;
  font-size: 0.7rem;
  border-radius: 999px;
  border: 1px solid #3a4b62;
  padding: 0.1rem 0.45rem;
  color: #d8e4f4;
}
.status-chip.needs-reply { border-color: #925d46; color: #ffc8a6; }
.status-chip.unread { border-color: #516b8f; color: #bcd7ff; }
.status-chip.sent { border-color: #4c7b62; color: #b7f2d2; }
.priority-chip {
  display: inline-block;
  font-size: 0.7rem;
  border-radius: 999px;
  border: 1px solid #3a4b62;
  padding: 0.1rem 0.45rem;
}
.priority-chip.high { border-color: #8a4a4a; color: #ffb2b2; }
.priority-chip.medium { border-color: #8a764a; color: #ffe7a6; }
.priority-chip.normal { border-color: #52658a; color: #c4d8ff; }
.bc-summary-bar {
  position: sticky;
  top: 0.6rem;
  z-index: 4;
  margin-top: 0.8rem;
}
.bc-summary-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bc-summary-grid article {
  background: #202937;
  border: 1px solid #2f3b4d;
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
}
.bc-summary-grid small {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.bc-summary-grid b {
  font-size: 1rem;
  color: var(--ink);
}
.bc-summary-grid b.due { color: #85c4ff; font-size: 1.15rem; }
.bc-summary-grid b.warn { color: #ffd08b; font-size: 1.08rem; }
.bc-summary-grid b.over { color: #ff9f9f; font-size: 1.08rem; }
.ld-summary-card { position: static; top: auto; }
.bc-summary-grid--compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.42rem;
}
.bc-summary-grid--compact article { padding: 0.42rem 0.52rem; }
.bc-summary-grid--compact b { font-size: 0.95rem; }
.bc-summary-grid--compact b.due { font-size: 1.28rem; color: #5cb3ff; }
.ld-status-badge {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid #37516f;
  padding: 0.12rem 0.45rem;
  font-size: 0.75rem;
}
.ld-status-badge.is-ok { background: rgba(60, 160, 96, 0.2); color: #8ee3b2; border-color: #2f7a55; }
.ld-status-badge.is-warn { background: rgba(234, 140, 60, 0.22); color: #ffcc96; border-color: #8f643a; }
.ld-status-badge.is-bad { background: rgba(210, 72, 72, 0.22); color: #ffb1b1; border-color: #874747; }
.ld-action-bar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.26rem;
}
.ld-action-bar .ld-action-btn {
  width: 100%;
  margin: 0;
  min-height: 2rem;
  padding: 0.32rem 0.38rem;
  font-size: 0.78rem;
}
.ld-action-btn--primary { background: #2f6ec7; border-color: #4f86d8; }
.ld-main-grid {
  display: grid;
  gap: 0.62rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
/* Pawn Ticket Detail: Financial + Loan Summary stay on one row (narrower halves); Collateral full width below. */
.ld-fin-loan-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
  align-items: stretch;
  min-width: 0;
}
.ld-fin-loan-split > .ld-compact-card {
  min-width: 0;
}
.ld-compact-card {
  padding: 0.65rem 0.72rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ld-collateral-card {
  grid-column: 1 / -1;
}
.ld-compact-card .ld-kv-list { flex: 1 1 auto; }
.ld-kv-list { display: grid; gap: 0.28rem; }
.ld-kv-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}
.ld-kv-list > div span { color: var(--ink-muted); font-size: 0.78rem; }
.ld-kv-list > div b { text-align: right; font-size: 0.86rem; }
.ld-accent-good { color: #6ed497; }
.ld-collateral-table td { padding-top: 0.42rem; padding-bottom: 0.42rem; }
.ld-collateral-table tbody tr:hover { background: rgba(90, 132, 180, 0.14); }
.ld-collateral-total b { color: #75c1ff; }
.ld-staff-note-card textarea { min-height: 5rem; resize: vertical; }
.ld-activity-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ld-activity-tab {
  border: 1px solid #2e3f56;
  background: #151b26;
  color: #d1dce8;
  border-radius: 8px;
  padding: 0.28rem 0.62rem;
  font-size: 0.77rem;
  cursor: pointer;
}
.ld-activity-tab[aria-pressed="true"] {
  background: #234a6e;
  border-color: #3b6a98;
  color: #f4f7fb;
}
.ld-activity-card table.admin th,
.ld-activity-card table.admin td { padding-top: 0.44rem; padding-bottom: 0.44rem; }
.ld-activity-card #ld-activity-table {
  width: 100%;
  table-layout: fixed;
}
.ld-activity-card #ld-activity-table th,
.ld-activity-card #ld-activity-table td {
  min-width: 0;
}
.ld-activity-card .ld-activity-clip-cell { max-width: 15rem; }
.ld-activity-card .ld-activity-clip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bc-workspace-grid {
  margin-top: 0.9rem;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.bc-tab-panel[hidden] { display: none !important; }
.msg-tab-panel[hidden] { display: none !important; }
.cd-tab-panel[hidden] { display: none !important; }
.ld-tab-panel[hidden] { display: none !important; }
.bc-tab-btn[aria-pressed="true"] {
  background: #2a3d57;
  border-color: #446184;
  color: #f4f7fb;
}
@media (min-width: 900px) {
  .admin-shell { grid-template-columns: 230px minmax(0, 1fr); }
  .admin-main { padding: 1rem 1.1rem; }
  .admin-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-dashboard-grid { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
  .customer-detail-top-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .admin-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .admin-summary-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .overview-bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loans-mid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .loans-ring-wrap { grid-template-columns: 160px minmax(0, 1fr); }
  .collateral-summary-wrap { grid-template-columns: 170px minmax(0, 1fr); }
  .bc-summary-grid--six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bc-workspace-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(300px, 0.9fr); }
}
@media (max-width: 1200px) {
  .bc-summary-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ld-action-bar { grid-template-columns: repeat(6, minmax(108px, 1fr)); overflow-x: auto; }
}
@media (max-width: 640px) {
  .bc-summary-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.collections-context-line {
  margin: 0.55rem 0 0.2rem;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid #2f3b4d;
  background: #1a2230;
  font-size: 0.88rem;
  color: #d6e0f0;
}

/* —— Interest due & payment (collections) workspace —— */
.collections-workspace {
  padding: 0.85rem 1rem 1.1rem;
}
.collections-ws-head {
  margin-bottom: 0.65rem;
}
.collections-ws-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.collections-ws-lead {
  margin: 0.35rem 0 0;
  max-width: 52rem;
}
.collections-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.65rem 0 0.25rem;
}
.collections-pill {
  border: none;
  border-radius: 999px;
  padding: 0.48rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.collections-pill:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.collections-pill--interest { background: linear-gradient(180deg, #2a6fdb 0%, #1e4f9e 100%); }
.collections-pill--payment { background: linear-gradient(180deg, #23965b 0%, #1a6d42 100%); }
.collections-pill--renewal { background: linear-gradient(180deg, #7d4dbf 0%, #523282 100%); }
.collections-pill--notice { background: linear-gradient(180deg, #c2782d 0%, #8a5420 100%); }
.collections-pill--default { background: linear-gradient(180deg, #c43b3b 0%, #8a2222 100%); }
.collections-pill--liquidation { background: linear-gradient(180deg, #8b2942 0%, #5c1828 100%); }
.collections-pill-sub {
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}
.collections-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.5rem 0 0.65rem;
}
@media (max-width: 1100px) {
  .collections-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .collections-kpi-grid { grid-template-columns: 1fr; }
}
.collections-kpi-card {
  position: relative;
  border-radius: 12px;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px solid #2c3a50;
  background: linear-gradient(165deg, #1c2433 0%, #141a26 100%);
  overflow: hidden;
}
.collections-kpi-icon {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  opacity: 0.35;
  font-size: 1.1rem;
}
.collections-kpi-val {
  margin: 0.15rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}
.collections-kpi-meta {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-muted, #9aa8bc);
}
.collections-fold {
  margin: 0.45rem 0 0.55rem;
  border: 1px solid #2a3546;
  border-radius: 10px;
  padding: 0.35rem 0.65rem;
  background: rgba(20, 26, 38, 0.65);
}
.collections-fold > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: #dbe4f5;
  list-style: none;
}
.collections-fold > summary::-webkit-details-marker { display: none; }
.collections-mid-inner {
  margin-top: 0.5rem;
}
.collections-search-card {
  margin-top: 0.55rem;
  padding: 0.65rem 0.85rem 0.75rem;
}
.collections-subhead {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
}
.collections-subhead--tight {
  margin: 0 0 0.28rem;
}
.collections-search-mega {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.42fr) minmax(0, 0.42fr) minmax(0, 1.05fr) auto;
  grid-template-rows: auto auto;
  column-gap: 0.4rem;
  row-gap: 0.08rem;
  align-items: end;
}
.collections-search-mega input,
.collections-search-mega select {
  padding: 0.48rem 0.6rem;
  font-size: 0.88rem;
}
.collections-search-mega .collections-input-icon--search input {
  padding-right: 2.05rem;
}
.collections-mg-kw {
  grid-column: 1;
  grid-row: 1;
}
.collections-mg-st {
  grid-column: 2;
  grid-row: 1;
}
.collections-mg-ty {
  grid-column: 3;
  grid-row: 1;
}
.collections-mg-dr {
  grid-column: 4;
  grid-row: 1;
}
.collections-mg-actions-r1 {
  grid-column: 5;
  grid-row: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 0.35rem;
  align-self: end;
}
.collections-mg-loan {
  grid-column: 1;
  grid-row: 2;
}
.collections-mg-amt {
  grid-column: 2 / span 2;
  grid-row: 2;
}
.collections-mg-od {
  grid-column: 4;
  grid-row: 2;
}
.collections-mg-more {
  grid-column: 5;
  grid-row: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: end;
}
.collections-field {
  min-width: 0;
}
.collections-field > label,
.collections-field-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted, #9aa8bc);
  margin-bottom: 0.14rem;
}
.collections-input-icon {
  position: relative;
}
.collections-input-icon--search input {
  width: 100%;
  padding-right: 2.15rem;
  box-sizing: border-box;
}
.collections-input-icon--search::after {
  content: "";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  margin-top: -0.5rem;
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  pointer-events: none;
  background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8bc' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3-3'/%3E%3C/svg%3E");
}
.collections-date-range,
.collections-amt-range {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.collections-date-range input[type="date"],
.collections-amt-range input {
  flex: 1 1 0;
  min-width: 0;
}
.collections-range-sep {
  flex-shrink: 0;
  opacity: 0.55;
  font-size: 0.85rem;
}
.collections-btn-more-filters {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 8.5rem;
}
.collections-funnel-ic {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  opacity: 0.75;
  clip-path: polygon(10% 30%, 50% 0%, 90% 30%, 75% 100%, 25% 100%);
}
.collections-extra-filters {
  margin-top: 0.35rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  border: 1px solid #2f3d52;
  background: rgba(18, 24, 36, 0.65);
}
.collections-extra-filters-lead {
  margin: 0;
  font-size: 0.76rem;
}
.collections-search-mega .collections-field--loan input {
  max-width: 100%;
}
@media (max-width: 1100px) {
  .collections-search-mega {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
  }
  .collections-mg-actions-r1 {
    justify-content: flex-end;
  }
  .collections-mg-more {
    justify-content: stretch;
  }
  .collections-btn-more-filters {
    width: 100%;
    min-width: 0;
  }
}
.collections-table-card {
  margin-top: 0.55rem;
}
.collections-table-head {
  align-items: center;
}
.collections-count {
  color: #62d88f;
  font-weight: 600;
}
.collections-table-scroll {
  overflow: auto;
  margin-top: 0.35rem;
  border-radius: 8px;
  border: 1px solid #2a3546;
}
.collections-due-table {
  margin: 0;
  min-width: 860px;
}
.collections-table-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  padding-top: 0.35rem;
  border-top: 1px solid #2a3546;
  font-size: 0.82rem;
}
.collections-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0.55rem;
}
.collections-tool-btn {
  border-radius: 10px;
  border: 1px solid #3d4d66;
  background: transparent;
  color: #e8eef8;
  padding: 0.42rem 0.85rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.collections-tool-btn:hover {
  background: rgba(80, 120, 200, 0.12);
  border-color: #5a7194;
}
.collections-tool-btn--quiet {
  opacity: 0.85;
  font-size: 0.78rem;
}
.collections-loan-load {
  margin-top: 0.45rem;
  max-width: 36rem;
}
.collections-footer-copy {
  text-align: center;
  margin: 0.85rem 0 0.15rem;
  font-size: 0.78rem;
  opacity: 0.75;
}
.collections-loan-id-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: #6eb3ff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
}
.collections-loan-id-btn:hover { color: #9ccaff; }
.collections-cust-phone {
  font-size: 0.78rem;
  margin-top: 0.12rem;
}
.collections-type-pill {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
}
.collections-type-pill--principal {
  background: rgba(80, 140, 255, 0.2);
  color: #9cc6ff;
  border: 1px solid rgba(100, 160, 255, 0.35);
}
.collections-type-pill--interest {
  background: rgba(80, 200, 140, 0.15);
  color: #8cf0c0;
  border: 1px solid rgba(100, 210, 160, 0.3);
}
.collections-due-overdue {
  color: #ff7a7a;
  font-size: 0.76rem;
  font-weight: 600;
  margin-top: 0.15rem;
}
.collections-row-btn {
  border-radius: 8px;
  border: 1px solid #3d4d66;
  padding: 0.2rem 0.45rem;
  margin: 0 0.12rem 0 0;
  font-size: 0.72rem;
  cursor: pointer;
  background: #1e2635;
  color: #e2e9f5;
}
.collections-row-btn--pay {
  border-color: #2a8f55;
  background: rgba(40, 140, 90, 0.25);
  color: #b8f5d4;
}
.collections-row-btn--renew {
  border-color: #6b4d9a;
  background: rgba(110, 80, 170, 0.22);
  color: #dcc4ff;
}
.collections-row-btn:hover { filter: brightness(1.12); }
.collections-actions-cell {
  position: relative;
  vertical-align: middle;
}
.collections-row-more {
  display: inline-block;
  vertical-align: middle;
}
.collections-row-more > summary {
  list-style: none;
}
.collections-row-more > summary::-webkit-details-marker {
  display: none;
}
.collections-row-more-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
  min-width: 208px;
  margin-top: 0.2rem;
}
.collections-col-title {
  font-size: 0.92rem;
  margin: 0 0 0.5rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.collections-record-primary {
  border: 1px solid #3d5a80;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.28);
  background: linear-gradient(180deg, #1e2633 0%, #171c28 100%);
}
.collections-record-cta {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.65rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.collections-billing-btns {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.35rem;
}
.collections-billing-btns .btn {
  width: 100%;
  justify-content: center;
}
.collections-ref-details {
  background: #1a1f2a;
  border-color: #2c3645;
}
.overview-global-search {
  margin-top: 0.85rem;
}
.msg-tab-btn[aria-pressed="true"] {
  background: #2a3d57;
  border-color: #446184;
  color: #f4f7fb;
}
.messages-dash-layout {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.messages-dash-main { min-width: 0; }
.messages-dash-aside { min-width: 0; }
.messages-kpi-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.messages-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.btn.msg-btn-green { background: #1b6d4a; border-color: #1f8f62; }
.btn.msg-btn-green:hover { background: #1f7d57; }
.btn.msg-btn-purple { background: #5c4d8a; border-color: #6f61a0; }
.btn.msg-btn-purple:hover { background: #6a5a9a; }
.btn.msg-btn-orange { background: #8a5a2b; border-color: #a66d3a; }
.btn.msg-btn-orange:hover { background: #9a6632; }
.messages-list-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.messages-list-tabs .msg-list-tab {
  font-size: 0.8rem;
  padding: 0.38rem 0.7rem;
  border-radius: 9px;
  border: 1px solid #2e3f56;
  background: #151b26;
  color: #d1dce8;
  cursor: pointer;
}
.messages-list-tabs .msg-list-tab[aria-pressed="true"] {
  background: #234a6e;
  border-color: #3b6a98;
  color: #f4f7fb;
}
.msg-donut {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0.25rem auto 0;
  /* --p-sms, --p-email, --p-auto: 0–100, sum 100 for full circle */
  background: conic-gradient(
    #4a9eff 0 calc(var(--p-sms) * 3.6deg),
    #2dd48a calc(var(--p-sms) * 3.6deg) calc((var(--p-sms) + var(--p-email)) * 3.6deg),
    #7b6cbd calc((var(--p-sms) + var(--p-email)) * 3.6deg) calc((var(--p-sms) + var(--p-email) + var(--p-auto)) * 3.6deg)
  );
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.msg-donut::after {
  content: attr(data-center);
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: #141a24;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: #a8b4c4;
  text-align: center;
  line-height: 1.2;
  padding: 0.2rem;
}
.msg-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}
button.msg-ql {
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid #2e3f56;
  background: #171d28;
  color: #dbe4ef;
  border-radius: 9px;
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}
button.msg-ql b { color: #7db7ff; font-weight: 700; }
.badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-ok { background: #163d2a; color: #8fefb8; border-color: #2a5c42; }
.badge-warn { background: #4a3518; color: #ffd59a; border-color: #6a4a22; }
.badge-err { background: #4a1e24; color: #ffb3b3; border-color: #6a2a32; }
.badge-info { background: #1a3350; color: #9ac8ff; border-color: #2a4a6e; }
.badge-muted { background: #2a3040; color: #9aa4b2; border-color: #3a4052; }
.badge-pink { background: #3a2a50; color: #d4b8ff; border-color: #5a3f7a; }
@media (min-width: 1200px) {
  .messages-dash-layout { grid-template-columns: minmax(0, 1fr) 17.5rem; }
  .messages-kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .messages-kpi-row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* LOCKED: Shared `.tabs` row for admin detail views (Customer Detail, etc.).
   Do NOT add `#view-customer-detail .tabs { display: none }` or similar — it hides
   the only navigation to Transactions / Loan ledger. See .cursor/rules/cocopawnshop-admin-detail-tabs.mdc */
.tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tabs button {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #3b4a60;
  background: #1d2735;
  color: #d7e4f7;
  font-weight: 600;
  cursor: pointer;
}
.tabs button:hover {
  background: #243246;
  color: #eef5ff;
  border-color: #4b6280;
}
.tabs button[aria-pressed="true"] { background: #234a6e; color: #fff; border-color: #234a6e; }
.panel[hidden] { display: none !important; }
table.admin { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.admin th, table.admin td { text-align: left; padding: 0.58rem 0.5rem; border-bottom: 1px solid var(--line); }
table.admin thead th { color: #c6d0df; font-weight: 600; background: #1e2530; }
/* Collateral list compact rows + actions dropdown */
#tbl-collateral-list td {
  padding-top: 0.38rem;
  padding-bottom: 0.38rem;
  vertical-align: middle;
}
#table-collateral-main {
  width: 100%;
  table-layout: fixed;
}
#table-collateral-main th,
#table-collateral-main td {
  min-width: 0;
}
#table-collateral-main th:last-child,
#table-collateral-main td:last-child {
  width: 7.2rem;
}
#tbl-collateral-list .col-row-clip-cell { max-width: 8.5rem; }
#tbl-collateral-list .col-row-clip {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tbl-collateral-list .col-actions-cell {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  min-width: 7rem;
}
#tbl-collateral-list .col-action-edit,
#tbl-collateral-list .col-action-more {
  width: auto;
  margin: 0;
  padding: 0.16rem 0.42rem;
  font-size: 0.76rem;
}
#tbl-collateral-list .col-action-more {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--brand);
  background: transparent;
}
#tbl-collateral-list .col-more-wrap { position: relative; }
#tbl-collateral-list .col-more-wrap > summary {
  list-style: none;
  cursor: pointer;
}
#tbl-collateral-list .col-more-wrap > summary::-webkit-details-marker { display: none; }
#tbl-collateral-list .col-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.22rem);
  z-index: 30;
  min-width: 9rem;
  border: 1px solid #2e3f56;
  border-radius: 8px;
  background: #141b27;
  padding: 0.3rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 0.2rem;
}
#tbl-collateral-list .col-more-menu .btn {
  width: 100%;
  margin: 0;
  text-align: left;
  justify-content: flex-start;
  padding: 0.22rem 0.42rem;
  font-size: 0.76rem;
}
.auth-box { max-width: 20rem; margin: 2rem auto; }

/* Customer dashboard-style lookup */
.lookup-hero { margin: 0.8rem 0 1rem; }
.lookup-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.lookup-side { display: grid; gap: 0.85rem; }
.lookup-main { min-width: 0; }
.lookup-title {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--ink-muted);
  letter-spacing: 0.05em;
}
.lookup-main .ticket-result {
  display: block;
  border-left: none;
  padding-left: 0;
  margin: 0;
}
.lookup-main .ticket-result:not(.visible) { display: none; }
#account-empty { display: block; }
.ticket-result.visible + #account-empty { display: none; }
@media (min-width: 980px) {
  .lookup-layout { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); }
  .lookup-side { position: sticky; top: 1rem; }
}
.lookup-tools-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
.frow.cols3 {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .lookup-tools-grid.lookup-tools-compact {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .frow.cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lookup-dashboard { margin-top:1rem; }
.lookup-dashboard-shell { margin-top: 1rem; }
.pawn-lookup-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.new-loan-layout {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.loan-step-stack {
  display: grid;
  gap: 0.9rem;
}
.loan-form-stack {
  display: grid;
  gap: 0.9rem;
}
.loan-step-card {
  border: 1px solid #2d3a4d;
  background: #171f2b;
}
.loan-step-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
  font-size: 1rem;
}
.loan-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  height: 1.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dbe8f8;
  background: #2a3d57;
  border: 1px solid #446184;
}
.loan-step-actions-inline {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.loan-step-customer-lead {
  margin: 0.2rem 0 0.4rem;
  max-width: 44rem;
}
.loan-step-customer-block {
  margin: 0;
}
.loan-step-customer-block > label {
  margin-top: 0.2rem;
}
.loan-step-search-inline {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 0.2rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: #202734;
  max-width: 100%;
}
.loan-step-search-inline #pawn-customer-search {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.loan-step-search-inline #pawn-customer-search:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(97, 124, 160, 0.35);
}
.loan-step-search-inline #btn-pawn-customer-search {
  flex: 0 0 auto;
  width: auto;
  min-width: 5.2rem;
  margin-top: 0;
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
  align-self: stretch;
  white-space: nowrap;
}
.loan-step-new-customer-row {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
}
.loan-step-new-customer-row .btn {
  width: auto;
  margin-top: 0;
}
.loan-amount-emphasis {
  border: 1px solid #3b5a84;
  border-radius: 10px;
  padding: 0.45rem 0.6rem 0.6rem;
  background: #1c2940;
}
.loan-amount-emphasis input {
  font-size: 1.05rem;
  font-weight: 700;
}
.loan-login-preview {
  margin-top: 0.75rem;
  border: 1px dashed #3b4a61;
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: #1b2431;
}
.loan-optional-section {
  margin-top: 0.55rem;
  background: #1b2431;
  border-color: #2d3949;
}
/* Do not use pointer-events:none here — NLR loan fields must stay usable before customer select; gate on Create/submit. */
.loan-step-disabled {
  opacity: 0.58;
  filter: saturate(0.8);
}
.pawn-lookup-listbox {
  padding: 0.65rem 0.7rem;
  background: #1b2431;
}
.lookup-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.lookup-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lookup-shell {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.lookup-sidebar {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.lookup-content { min-width: 0; }
.lookup-content .card { margin-bottom: 0.8rem; }

/* Transaction history filter chips — global button.btn uses width:100%; keep pills in one horizontal row */
body.customer-lookup .cportal-txn-filter-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0 0 0.7rem;
  width: 100%;
  box-sizing: border-box;
}
body.customer-lookup .cportal-txn-filter-bar button.btn.cportal-txn-filter-btn {
  width: auto;
  min-width: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.32rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex: 0 1 auto;
}
body.customer-lookup .cportal-txn-filter-bar button.btn.cportal-txn-filter-btn[aria-pressed="true"] {
  background: rgba(91, 156, 247, 0.22);
  border-color: rgba(91, 156, 247, 0.45);
  color: #e2e8f0;
}
.lookup-nav { display:grid; gap:0.5rem; align-content:start; }
.lookup-nav-btn {
  width:100%;
  text-align:left;
  padding:0.62rem 0.7rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:transparent;
  color:var(--ink);
  font-weight:600;
  cursor:pointer;
}
.lookup-nav-btn[aria-pressed="true"] { background:#e8f0fa; color:#2f4f72; border-color:#cddced; }
.lookup-nav-btn[aria-pressed="true"] { background:#273548; color:#ecf2fb; border-color:#3d4f66; }
.lookup-nav-btn:hover { background:#222c39; }
.lookup-pane { display: block; }
/* Author rule .lookup-pane alone overrides the UA [hidden] display; keep hidden panes out of the layout. */
.lookup-pane[hidden] {
  display: none !important;
}
.dash-kv {
  display:grid;
  gap:0.7rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.dash-kv .card { margin:0; padding:0.85rem 0.9rem; }
.dash-kv .k { color:var(--ink-muted); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; }
.dash-kv .v { font-size:1rem; font-weight:700; }
@media (max-width: 760px) {
  .dash-kv { grid-template-columns:1fr; }
}
@media (min-width: 980px) {
  .lookup-shell { grid-template-columns: minmax(220px, 250px) minmax(0, 1fr); }
  .pawn-lookup-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr); }
  .new-loan-layout { grid-template-columns: 1fr; }
}

/* landing page soft style */
.landing-soft {
  background: #0f1115;
  color: var(--ink);
}
.landing-soft-header {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.landing-soft-header .brand {
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  color: #f3f4f6;
}
.landing-soft-header .entry-btn {
  text-decoration: none;
  border: 1px solid #354355;
  color: #d5deea;
  background: #1a2028;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-weight: 600;
}
.landing-soft-main {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2.5rem 1rem;
}
.landing-soft-main h1 {
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  color: #f3f4f6;
}
.landing-soft-main p {
  margin: 0.6rem 0 2.2rem;
  color: #aab2bf;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 500;
}
.landing-soft-main .primary-cta {
  display: inline-block;
  text-decoration: none;
  background: #4b5f7b;
  color: #f3f4f6;
  padding: 0.88rem 1.9rem;
  border-radius: 12px;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 600;
}
.landing-soft-footer {
  text-align: center;
  color: #aab2bf;
  font-size: 1rem;
  padding: 1.1rem 1rem 1.6rem;
}

/* DARK BACKGROUND RESET */
.pawn-landing-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: clip;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 60%),
    #0a0a0a;
}
.pawn-landing-shell .landing-soft-header {
  /* HEADER SIZE FIX */
  min-height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(73, 89, 111, 0.28);
}
.pawn-loan-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 0.42rem;
  height: 34px;
  padding: 0 14px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: rgba(8, 14, 24, 0.25) !important;
  color: #f4f6fb !important;
  box-shadow: 0 0 0 rgba(201, 169, 106, 0);
}
.pawn-loan-btn:hover {
  background: rgba(14, 23, 37, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 0 2px rgba(201, 169, 106, 0.14);
}
.pawn-loan-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 999px;
  background:
    center / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23C9A96A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.pawn-hero-core {
  max-width: 60rem;
  margin-inline: auto;
}
.pawn-landing-shell .landing-soft-main {
  padding: 0 1rem;
  display: grid;
  place-items: center;
}
.pawn-landing-shell .landing-soft-main h1 {
  /* HERO SCALE FIX */
  font-size: 58px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  color: #eaeaea;
}
.pawn-landing-shell .landing-soft-main p {
  margin: 10px 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}
/* HOW IT WORKS LINK */
.pawn-how-link {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: transparent;
  color: #c9a96a;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
}
.pawn-how-link i {
  width: 14px;
  height: 14px;
}
.pawn-how-link:hover {
  text-decoration: underline;
  filter: brightness(1.08);
}
/* REMOVE WE ACCEPT SECTION */
.pawn-accept-mini { display: none !important; }
/* COMPACT CONTACT ACTIONS */
.pawn-landing-bottom {
  /* FOOTER LEFT RIGHT SPLIT */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  min-height: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #91a1b7;
  padding: 0 24px;
  font-size: 13px;
}
.pawn-landing-bottom small {
  color: #6e7d92;
  margin-right: auto;
  font-size: 12px;
  white-space: nowrap;
}
.pawn-bottom-link {
  /* FOOTER ICON ALIGNMENT FIX */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a9b8cd;
  text-decoration: none;
  border-bottom: 1px dotted rgba(92, 111, 136, 0.72);
  white-space: nowrap;
  line-height: 1;
}
.pawn-bottom-link + .pawn-bottom-link,
.pawn-bottom-link + .pawn-send-btn {
  margin-left: 18px;
}
.pawn-bottom-link i {
  /* ICON SCALE FIX */
  width: 14px;
  height: 14px;
  color: #c9a96a;
  stroke-width: 1.8;
  vertical-align: middle;
}
.pawn-bottom-link:hover {
  color: #e2eaf6;
  border-bottom-color: rgba(136, 158, 188, 0.92);
}
.pawn-send-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  border: 1px solid rgba(104, 121, 144, 0.78);
  background: rgba(15, 23, 35, 0.58);
  color: #dde7f4;
  border-radius: 8px;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.pawn-send-btn:hover {
  background: rgba(23, 34, 52, 0.86);
}
.pawn-send-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background:
    center / 100% 100% no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23C9A96A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'/%3E%3C/svg%3E");
}

/* SEND MESSAGE MODAL */
.pawn-send-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.pawn-send-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 9, 16, 0.7);
}
.pawn-send-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(32rem, calc(100vw - 1.4rem));
  border: 1px solid #33465f !important;
}
.pawn-send-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.pawn-send-head h2 {
  margin: 0;
  font-size: 1.03rem;
}
.pawn-how-list {
  margin: 0.15rem 0 0;
  padding-left: 1.1rem;
  color: #d3deee;
  display: grid;
  gap: 0.42rem;
  font-size: 0.9rem;
}
.pawn-how-modal .pawn-send-panel {
  width: min(52rem, calc(100vw - 1.4rem));
  max-height: min(88vh, 48rem);
  overflow: auto;
}
.pawn-how-guide-list {
  counter-reset: pawnHowStep;
  list-style: none;
  padding-left: 0;
  gap: 0.62rem;
}
.pawn-how-guide-list li {
  counter-increment: pawnHowStep;
  position: relative;
  padding: 0.55rem 0.7rem 0.55rem 2.2rem;
  border-left: 1px solid rgba(201, 169, 106, 0.24);
}
.pawn-how-guide-list li::before {
  content: counter(pawnHowStep);
  position: absolute;
  left: 0.55rem;
  top: 0.62rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 169, 106, 0.5);
  color: #d6b476;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.pawn-how-guide-list h3 {
  margin: 0 0 0.25rem;
  color: #f2f5fb;
  font-size: 0.98rem;
  font-weight: 600;
}
.pawn-how-guide-list p {
  margin: 0;
  color: #bac6d8;
  line-height: 1.45;
  font-size: 0.86rem;
}

/* HOW IT WORKS PAGE CREATED */
/* ROUTE /pawn/how-it-works */
.pawn-how-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: clip;
  background:
    radial-gradient(circle at 60% 25%, rgba(201, 169, 106, 0.1), transparent 38%),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), transparent 60%),
    #090909;
}
.pawn-how-header {
  min-height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pawn-how-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #c9a96a;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.pawn-how-back i {
  width: 14px;
  height: 14px;
}
.pawn-how-main {
  width: min(1280px, calc(100% - 48px));
  margin: 22px auto 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(300px, 340px);
  gap: 30px;
  align-items: start;
}
.pawn-how-content h1 {
  margin: 0;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(2.1rem, 3.25vw, 3.3rem);
  color: #ece8df;
  letter-spacing: -0.008em;
  text-align: center;
}
.pawn-how-title-divider {
  display: flex;
  justify-content: center;
  margin: 8px 0 12px;
}
.pawn-how-title-divider span {
  width: 126px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 106, 0.85), transparent);
  position: relative;
}
.pawn-how-title-divider span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid rgba(201, 169, 106, 0.85);
  transform: translate(-50%, -50%) rotate(45deg);
  background: #0d0f13;
}
.pawn-how-subtitle {
  margin: 0 0 20px;
  text-align: center;
  font-size: clamp(1.04rem, 1.45vw, 1.28rem);
  color: rgba(255, 255, 255, 0.78);
}
.pawn-how-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.pawn-how-steps li {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0 18px;
}
.pawn-how-steps h2 {
  margin: 0 0 9px;
  font-size: clamp(1.05rem, 1.35vw, 1.95rem);
  color: #d3b06e;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.pawn-how-steps p {
  margin: 0 0 5px;
  color: rgba(236, 239, 243, 0.82);
  line-height: 1.6;
  font-size: clamp(0.93rem, 1.08vw, 1.1rem);
}
.pawn-how-side {
  display: grid;
  gap: 14px;
  width: min(340px, 100%);
  justify-self: end;
}

/* RIGHT SIDE GRAPHIC SECTION */
.pawn-how-collateral-combo {
  border: 1px solid rgba(201, 169, 106, 0.24) !important;
  background: rgba(11, 13, 18, 0.95);
  padding: 12px !important;
  display: grid;
  gap: 12px;
}
.pawn-how-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(201, 169, 106, 0.14), transparent 56%),
    linear-gradient(180deg, rgba(16, 18, 24, 0.99), rgba(8, 10, 14, 0.99));
  overflow: hidden;
}
.pawn-how-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}
.pawn-how-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0), rgba(9, 9, 9, 0.6) 88%);
}
.pawn-how-item {
  position: absolute;
  border: 1px solid rgba(201, 169, 106, 0.6);
  background: rgba(8, 9, 12, 0.9);
  color: #e8d7b0;
  border-radius: 10px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.5);
  font-weight: 600;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0.22rem 0.3rem;
}
.pawn-how-visual:not(.is-fallback) .pawn-how-item,
.pawn-how-visual:not(.is-fallback)::before {
  display: none;
}
.pawn-how-item.bag { top: 18px; right: 34px; width: 182px; height: 132px; border-radius: 20px; }
.pawn-how-item.watch { top: 132px; right: 214px; width: 84px; height: 84px; border-radius: 999px; }
.pawn-how-item.ring { top: 199px; right: 254px; width: 58px; height: 58px; border-radius: 999px; }
.pawn-how-item.chain { top: 214px; right: 138px; width: 120px; height: 32px; border-radius: 999px; }
.pawn-how-item.coin { top: 140px; right: 96px; width: 86px; height: 86px; border-radius: 999px; }
.pawn-how-item.pokemon { top: 134px; right: 20px; width: 88px; height: 118px; border-radius: 9px; }
.pawn-how-item.truck { top: 285px; right: 92px; width: 182px; height: 48px; border-radius: 12px; }

/* ACCEPTED COLLATERAL LIST UNDER IMAGE */
.pawn-how-collateral {
  padding: 0 2px 2px;
}
.pawn-how-collateral h3 {
  margin: 0 0 8px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  color: #d3b06e;
  letter-spacing: 0.01em;
}
.pawn-how-collateral ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.pawn-how-collateral li {
  color: rgba(236, 239, 243, 0.86);
  font-size: 0.86rem;
  line-height: 1.4;
}

/* LOAN ACCOUNT SECTION ADDED */
.pawn-how-side-card {
  border: 1px solid rgba(201, 169, 106, 0.24) !important;
  background: rgba(11, 13, 18, 0.95);
  padding: 16px 16px !important;
}
.pawn-how-side-card h3 {
  margin: 0 0 10px;
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.15;
  color: #f0e6d4;
}
.pawn-how-loan-art {
  display: block;
  width: 100%;
  margin: 2px 0 14px;
}
.pawn-how-loan-photo {
  display: block;
  position: static;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  transform: none;
}
.pawn-how-side-card p {
  margin: 0 0 10px;
  color: rgba(240, 242, 245, 0.86);
  line-height: 1.45;
  font-size: 0.92rem;
}
.pawn-how-side-card ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.pawn-how-side-card li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(244, 238, 223, 0.94);
  font-size: 0.9rem;
  line-height: 1.42;
}
.pawn-how-side-card li i {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin-top: 1px;
  color: #c9a96a !important;
  stroke: #c9a96a !important;
}
.pawn-how-contact {
  border: 1px solid rgba(201, 169, 106, 0.24) !important;
  background: rgba(11, 13, 18, 0.95);
  display: grid;
  gap: 10px;
}
.pawn-how-contact a {
  color: rgba(240, 242, 245, 0.9);
  text-decoration: none;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.05rem;
  line-height: 1.3;
}
.pawn-how-contact i {
  width: 16px;
  height: 16px;
  color: #c9a96a;
  margin-top: 2px;
}
.pawn-how-footer {
  margin-top: 8px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .pawn-how-main {
    width: min(1240px, calc(100% - 32px));
    grid-template-columns: minmax(0, 1fr) minmax(270px, 310px);
    gap: 20px;
  }
  .pawn-how-side {
    width: min(310px, 100%);
  }
  .pawn-how-visual {
    aspect-ratio: 1 / 1;
    min-height: 0;
  }
  .pawn-how-item.bag { width: 150px; height: 108px; right: 24px; }
  .pawn-how-item.watch { right: 170px; top: 118px; }
  .pawn-how-item.ring { right: 208px; top: 184px; }
  .pawn-how-item.chain { right: 100px; top: 196px; width: 106px; }
  .pawn-how-item.coin { right: 68px; top: 126px; width: 74px; height: 74px; }
  .pawn-how-item.pokemon { right: 12px; top: 122px; width: 74px; height: 98px; }
  .pawn-how-item.truck { right: 62px; top: 228px; width: 156px; height: 42px; }
  .pawn-how-side-card h3 {
    font-size: 1.35rem;
  }
  .pawn-how-collateral h3 {
    font-size: 0.98rem;
  }
  .pawn-how-collateral li {
    font-size: 0.82rem;
  }
  .pawn-how-contact a {
    font-size: 0.95rem;
  }
}
@media (max-width: 767px) {
  .pawn-how-header {
    padding: 0 14px;
    min-height: 58px;
  }
  .pawn-how-main {
    width: calc(100% - 16px);
    grid-template-columns: 1fr;
    margin-top: 14px;
    gap: 16px;
  }
  .pawn-how-side {
    width: 100%;
    justify-self: stretch;
  }
  .pawn-how-subtitle {
    margin-bottom: 14px;
    font-size: 15px;
  }
  .pawn-how-steps li {
    padding: 16px 0 14px;
  }
  .pawn-how-steps h2 {
    font-size: 1.1rem;
  }
  .pawn-how-steps p {
    font-size: 14px;
    line-height: 1.6;
  }
  .pawn-how-side-card h3 {
    font-size: 1.25rem;
  }
  .pawn-how-collateral-combo {
    padding: 12px !important;
    gap: 10px;
  }
  .pawn-how-collateral {
    padding: 0 2px 2px;
  }
  .pawn-how-collateral h3 {
    font-size: 1rem;
  }
  .pawn-how-collateral li {
    font-size: 14px;
    line-height: 1.55;
  }
  .pawn-how-side-card p,
  .pawn-how-side-card li,
  .pawn-how-contact a {
    font-size: 14px;
    line-height: 1.6;
  }
  .pawn-how-side-card,
  .pawn-how-contact,
  .pawn-how-collateral-combo {
    padding: 16px 16px !important;
  }
  .pawn-how-visual {
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    aspect-ratio: auto;
    padding: 0 !important;
  }
  .pawn-how-photo {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 0;
    margin-bottom: 0;
  }
  .pawn-how-visual::before {
    display: none;
  }
  .pawn-how-item {
    position: static;
    width: 100% !important;
    height: auto !important;
    min-height: 40px;
    border-radius: 10px !important;
    font-size: 12px;
    padding: 10px;
  }
  .pawn-how-contact a {
    font-size: 14px;
  }
  .pawn-how-footer {
    margin-top: 2px;
  }
}

@media (max-width: 480px) {
  .pawn-how-header {
    min-height: auto;
    padding: 10px 10px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pawn-how-back {
    font-size: 12px;
  }
  .pawn-how-header .pawn-loan-btn {
    margin-left: auto;
    min-height: 38px;
    height: 38px;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
  .pawn-how-main {
    width: calc(100% - 12px);
    margin-top: 10px;
    gap: 12px;
  }
  .pawn-how-content h1 {
    font-size: clamp(1.6rem, 8vw, 2rem);
    line-height: 1.2;
  }
  .pawn-how-subtitle {
    font-size: 14px;
    margin-bottom: 12px;
  }
  .pawn-how-steps li {
    padding: 13px 0 12px;
  }
  .pawn-how-steps h2 {
    font-size: 1rem;
  }
  .pawn-how-collateral-combo,
  .pawn-how-side-card,
  .pawn-how-contact {
    border-radius: 12px;
    padding: 12px !important;
  }
  .pawn-how-collateral ul {
    padding-left: 16px;
  }
}

/* —— Customer “My loan” full dashboard (COCOPAWN) —— */
body.customer-lookup.cportal-active .wire.customer-lookup-wrap {
  max-width: min(1680px, 100%);
}
/* Logged-in portal: use same page bg as pre-login (body.customer-lookup gradient) */
body.customer-lookup.cportal-active .brandbar.customer-lookup-top {
  background: #141a1f;
  border-bottom: 1px solid #2a3340;
  padding: 0.55rem 0;
  align-items: center;
}
body.customer-lookup.cportal-active .customer-lookup-top .logo,
body.customer-lookup.cportal-active .customer-lookup-top .logo b { color: #e2e8f0; }
body.customer-lookup.cportal-active .customer-lookup-top .logo small { color: #94a3b8; }
body.customer-lookup.cportal-active .customer-lookup-nav a {
  color: #94a3b8;
  margin-left: 0.85rem;
  font-weight: 600;
}
body.customer-lookup.cportal-active .customer-lookup-nav a:hover { color: #e2e8f0; }
body.customer-lookup.cportal-active .customer-lookup-main { background: transparent; }
.customer-lookup-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin-left: auto;
  min-width: 0;
}
.cportal-brandbar-tools {
  display: flex;
  align-items: center;
  min-width: 0;
}
/* [hidden] must win — otherwise .cportal-brandbar-tools { display:flex } shows portal tools on the login page */
.cportal-brandbar-tools[hidden] {
  display: none !important;
}
.cportal-header-actions--brandbar { margin-left: 0 !important; justify-content: flex-end; flex-wrap: wrap; }
.cportal-ico-btn.cportal-ico-btn--bar,
body.customer-lookup.cportal-active .cportal-brandbar-tools .cportal-ico-btn {
  border: 1px solid #475569;
  background: #0f1419;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 0.32rem 0.5rem;
  line-height: 1;
  font-size: 1.05rem;
  cursor: pointer;
}
body.customer-lookup.cportal-active .cportal-brandbar-tools .cportal-topbar-sep {
  background: #3d4b5a;
  height: 1.25rem;
}
body.customer-lookup.cportal-active .cportal-brandbar-tools .cportal-topbar-ac,
body.customer-lookup.cportal-active .cportal-brandbar-tools .cportal-profile-btn {
  color: #e2e8f0;
  border-color: #475569;
  background: rgba(15, 23, 32, 0.65);
  width: auto;
  margin: 0;
  padding: 0.4rem 0.65rem;
  font-size: 0.86rem;
}
body.customer-lookup.cportal-active .cportal-brandbar-tools .cportal-topbar-ac:hover,
body.customer-lookup.cportal-active .cportal-brandbar-tools .cportal-profile-btn:hover {
  background: #1e293b;
  border-color: #64748b;
  color: #fff;
}
.cportal-root {
  margin-top: 0.25rem;
}
.cportal-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.9rem;
  background: linear-gradient(135deg, #1a222c 0%, #151a22 100%);
  border: 1px solid #2a3340;
  border-radius: 16px;
}
.cportal-brand .cportal-logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
}
.cportal-crown {
  display: block;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  background: linear-gradient(140deg, #7c3aed 0%, #4c1d95 55%, #2e1065 100%);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}
.cportal-logo b { font-size: 1.05rem; letter-spacing: 0.12em; }
.cportal-logo small { color: #94a3b8; font-size: 0.7rem; display: block; }
.cportal-topbar-right {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.9rem 1.25rem;
  min-width: 0;
}
.cportal-greet { margin: 0; font-size: 1.1rem; font-weight: 600; }
.cportal-greet-sub { margin: 0.2rem 0 0; font-size: 0.85rem; color: #94a3b8; }
.cportal-header-actions {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  margin-left: auto; justify-content: flex-end;
}
.cportal-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.cportal-search {
  min-width: min(280px, 100%);
  max-width: 360px;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border-radius: 10px;
  border: 1px solid #334155;
  background: #0f1419;
  color: #f1f5f9;
}
.cportal-bell { position: relative; font-size: 1.1rem; cursor: default; user-select: none; opacity: 0.9; }
.cportal-bell-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 4px;
  font-size: 0.65rem;
  line-height: 1.1rem;
  text-align: center;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
}
.cportal-shell {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .cportal-shell { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
}
.cportal-sidebar {
  padding: 1rem;
  position: sticky;
  top: 0.5rem;
}
.cportal-side-h {
  margin: 1rem 0 0.35rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.cportal-side-nav { display: flex; flex-direction: column; gap: 0.35rem; }
.cportal-root .cportal-side-nav .lookup-nav-btn,
.cportal-root .cportal-side-nav .cportal-nav-pill {
  text-align: left;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #2f3b4a;
  background: #141c26;
  color: #e2e8f0;
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.cportal-root .cportal-side-nav .lookup-nav-btn[aria-pressed="true"] {
  background: linear-gradient(90deg, #4c1d95 0%, #312e81 100%);
  border-color: #6d28d9;
  color: #fff;
}
.cportal-nav-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 6px;
  font-size: 0.7rem;
  background: #b91c1c;
  color: #fff;
  border-radius: 6px;
  vertical-align: 2px;
}
.cportal-quick-repay { margin-top: 1.25rem; padding: 1rem !important; background: #1e1b4b !important; border-color: #4338ca !important; }
.cportal-quick-repay h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.cportal-btn-grad {
  width: 100%;
  background: linear-gradient(90deg, #7c3aed, #4f46e5) !important;
  color: #fff !important;
  font-weight: 600;
  border: none !important;
  margin-top: 0.5rem;
}
.cportal-main { min-width: 0; }
.cportal-kpi-row {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 1rem;
}
.cportal-kpi {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: #161d27;
  border: 1px solid #2a3344;
  position: relative;
  overflow: hidden;
}
.cportal-kpi::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cportal-kpi-accent, #6366f1);
  opacity: 0.9;
}
.cportal-kpi.violet { --cportal-kpi-accent: #7c3aed; }
.cportal-kpi.blue { --cportal-kpi-accent: #3b82f6; }
.cportal-kpi.green { --cportal-kpi-accent: #22c55e; }
.cportal-kpi.amber { --cportal-kpi-accent: #f59e0b; }
.cportal-kpi.teal { --cportal-kpi-accent: #14b8a6; }
.cportal-kpi h4 { margin: 0; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; font-weight: 600; }
.cportal-kpi .num { font-size: 1.25rem; font-weight: 700; margin: 0.4rem 0 0.15rem; font-variant-numeric: tabular-nums; }
.cportal-kpi .sub { font-size: 0.8rem; color: #64748b; margin: 0; }
.cportal-grid-2 {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) {
  .cportal-grid-2 { grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr); }
  .cportal-grid-2.col-big-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.cportal-active-loan { padding: 1.25rem; }
.cportal-donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cportal-donut {
  --p: 25;
  width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(#7c3aed calc(var(--p) * 1%), #1e293b 0);
  display: grid; place-items: center; flex-shrink: 0;
}
.cportal-donut-inner {
  width: 68px; height: 68px; border-radius: 50%;
  background: #111820;
  display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 700;
}
.cportal-badge-ok { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; background: #14532d; color: #bbf7d0; }
.cportal-badge-warn { background: #713f12; color: #fde68a; }
.cportal-badge-err { background: #7f1d1d; color: #fecaca; }
.cportal-h3 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.cportal-btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.cportal-btn-row .btn { font-size: 0.86rem; }
.cportal-btn-primary { background: linear-gradient(90deg, #6d28d9, #4f46e5) !important; color: #fff !important; border: none !important; }
.cportal-table-wrap { overflow-x: auto; margin-top: 0.5rem; -webkit-overflow-scrolling: touch; }
.cportal-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cportal-table th, .cportal-table td { padding: 0.45rem 0.55rem; text-align: left; border-bottom: 1px solid #2a3344; }
.cportal-table th { color: #94a3b8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cportal-messages-list { display: flex; flex-direction: column; gap: 0.5rem; }
.cportal-msg {
  padding: 0.65rem 0.8rem; border-radius: 10px; border: 1px solid #2f3a48;
  background: #141b24;
  font-size: 0.88rem;
}
.cportal-msg.unread { border-color: #6366f1; }
.cportal-group-photo { max-width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid #334155; }
.cportal-qgrid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  margin-top: 0.75rem;
}
.cportal-qaction {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.75rem 0.5rem; border-radius: 12px; border: 1px solid #2f3a48; background: #121822;
  font-size: 0.8rem; font-weight: 600; color: #e2e8f0; cursor: pointer; text-align: center;
  min-height: 4.2rem;
}
.cportal-qaction:hover { background: #1a2330; border-color: #4c5d75; }
.cportal-qac-violet { border-color: #5b21b6; background: linear-gradient(180deg, #1e1b4b, #121822); }
.cportal-qac-blue { border-color: #1d4ed8; }
.cportal-qac-teal { border-color: #0f766e; }
.cportal-qac-amber { border-color: #b45309; }
.cportal-qac-green { border-color: #166534; }
.cportal-support-card { line-height: 1.5; }
.cportal-support-card a { font-weight: 600; }
.cportal-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; margin: 0.5rem 0; }
.cportal-filters input, .cportal-filters select { max-width: 12rem; }
.cportal-due-soon { color: #fbbf24; font-weight: 600; }
.cportal-due-ok { color: #4ade80; }
.cportal-due-late { color: #f87171; }
.cportal-search-hide { display: none !important; }

/* Customer dashboard compact refactor */
.cportal-root .card { margin: 0 0 0.75rem; }
.cportal-kpi-row.cportal-kpi-row-compact {
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.cportal-kpi-row.cportal-kpi-row-compact .cportal-kpi {
  padding: 0.72rem 0.85rem;
  min-height: auto;
}
.cportal-kpi-row.cportal-kpi-row-compact .cportal-kpi .num {
  margin: 0.25rem 0 0.05rem;
  font-size: 1.08rem;
}
.cportal-kpi-row.cportal-kpi-row-compact .cportal-kpi .sub {
  font-size: 0.74rem;
}
.cportal-dashboard-grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}
.cportal-span-8 { grid-column: span 12; }
.cportal-span-6 { grid-column: span 12; }
.cportal-span-4 { grid-column: span 12; }
.cportal-col-stack {
  display: grid;
  gap: 0.75rem;
}
.cportal-dashboard-grid12 .card {
  padding: 0.75rem 0.9rem;
  max-height: 260px;
  overflow: auto;
}
.cportal-active-loan-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.cportal-active-loan-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cportal-active-loan-actions .btn {
  width: auto;
  margin: 0;
  padding: 0.45rem 0.7rem;
  font-size: 0.8rem;
}
.cportal-active-loan-info {
  line-height: 1.3;
  min-width: 0;
}
.cportal-active-loan .cportal-donut {
  width: 82px;
  height: 82px;
}
.cportal-active-loan .cportal-donut-inner {
  width: 59px;
  height: 59px;
  font-size: 0.78rem;
}
.cportal-qgrid.cportal-qgrid-compact {
  margin-top: 0.55rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}
.cportal-qgrid.cportal-qgrid-compact .cportal-qaction {
  min-height: auto;
  padding: 0.45rem 0.55rem;
  font-size: 0.78rem;
  line-height: 1.2;
}
.cportal-billing-card .btn { margin-top: 0.15rem; }
.cportal-collateral-compact .cportal-table th,
.cportal-collateral-compact .cportal-table td,
.cportal-tx-summary .cportal-table th,
.cportal-tx-summary .cportal-table td {
  padding: 0.33rem 0.45rem;
}
.cportal-messages-list.cportal-messages-list-compact {
  max-height: 165px;
  overflow: auto;
  gap: 0.4rem;
}
.cportal-messages-list.cportal-messages-list-compact .cportal-msg {
  padding: 0.45rem 0.58rem;
  font-size: 0.8rem;
}
@media (min-width: 1200px) {
  .cportal-kpi-row.cportal-kpi-row-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .cportal-span-8 { grid-column: span 8; }
  .cportal-span-6 { grid-column: span 6; }
  .cportal-span-4 { grid-column: span 4; }
  .cportal-active-loan-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .cportal-active-loan-actions {
    grid-column: auto;
    flex-direction: row;
    align-items: flex-start;
  }
}
@media (max-width: 1199px) {
  .cportal-dashboard-grid12 .card {
    max-height: none;
  }
}
@media (max-width: 700px) {
  .cportal-qgrid.cportal-qgrid-compact {
    grid-template-columns: 1fr;
  }
  .cportal-active-loan-actions .btn {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .cportal-topbar { flex-direction: column; align-items: stretch; }
  .cportal-topbar-right { flex-direction: column; align-items: stretch; }
  .cportal-header-actions { width: 100%; }
  .cportal-search { max-width: none; }
  .cportal-sidebar { position: static; }
}

/* Customer portal: My Notes (left sidebar) — header row + bordered note card */
.cportal-sidebar-notes {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  min-width: 0;
}
.cportal-sidebar-notes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.cportal-sidebar-notes-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.cportal-sidebar-notes-more {
  width: auto !important;
  margin: 0 !important;
  padding: 0.28rem 0.65rem !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.65) !important;
}
.cportal-sidebar-notes-more:hover {
  background: rgba(51, 65, 85, 0.55) !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}
.cportal-sidebar-notes-h {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #f8fafc;
  letter-spacing: 0.01em;
}
.cportal-sidebar-notes-ico {
  color: #f1f5f9;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
  flex-shrink: 0;
}
.cportal-sidebar-notes-box {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #121418;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.cportal-sidebar-notes-text {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1f5f9;
  font-size: 0.875rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 5.5rem;
  padding: 0.75rem 0.85rem 0.45rem;
  font-family: inherit;
}
.cportal-sidebar-notes-text::placeholder {
  color: #808080;
  opacity: 1;
}
.cportal-sidebar-notes-text:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}
.cportal-sidebar-notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 0;
}
.cportal-sidebar-notes .cportal-note-count {
  font-size: 0.75rem;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}
.cportal-sidebar-notes-save {
  width: auto !important;
  margin: 0 !important;
  padding: 0.38rem 0.95rem !important;
  font-size: 0.8rem !important;
  font-weight: 500;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px;
  box-shadow: none !important;
}
.cportal-sidebar-notes-save:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #fff !important;
}
.cportal-sidebar-notes-save:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
/* Lookup password request modal reuses .cnotes-modal + .cnotes-panel */
.cnotes-modal {
  position: fixed;
  inset: 0;
  z-index: 48;
}
#cportal-notes-more-modal {
  z-index: 52;
}
#cportal-notes-more-modal .cportal-notes-more-panel {
  width: min(46rem, calc(100vw - 1.25rem));
  max-height: min(82vh, 40rem);
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}
#cportal-notes-more-modal .cportal-notes-more-close {
  width: auto !important;
  margin-top: 0 !important;
  padding: 0.35rem 0.85rem !important;
  font-size: 0.85rem !important;
}
.cnotes-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.68);
}
.cnotes-panel {
  position: absolute;
  right: min(2rem, 3vw);
  bottom: min(2rem, 3vh);
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(80vh, 45rem);
  overflow: auto;
  border: 1px solid #334155 !important;
}
.cnotes-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cnotes-panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

/* Admin contact modal: single-line title + compact close (global button.btn is width:100%) */
#cportal-admin-contact-modal .cportal-ac-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
  margin-bottom: 0.5rem;
}
#cportal-admin-contact-modal h2.cportal-ac-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#cportal-admin-contact-modal .cportal-ac-head-close {
  width: auto !important;
  min-width: 2.25rem;
  margin-top: 0 !important;
  padding: 0.28rem 0.5rem;
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
  border-radius: 8px;
}
#cportal-admin-contact-modal .cportal-modal-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
#cportal-admin-contact-modal .cportal-modal-actions .btn {
  width: auto !important;
  margin-top: 0 !important;
  min-width: 5.5rem;
}

/* SECONDARY SECTIONS MOVED TO MODALS */
.cportal-secondary-modal {
  position: fixed;
  inset: 0;
  z-index: 44;
}
.cportal-secondary-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.62);
}
.cportal-secondary-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(72rem, calc(100vw - 1.4rem));
  max-height: min(86vh, 56rem);
  overflow: auto;
  border: 1px solid #334155 !important;
}
.cportal-secondary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.cportal-secondary-head h2 {
  margin: 0;
  font-size: 1.08rem;
}
@media (max-width: 767px) {
  .pawn-landing-shell .landing-soft-header {
    min-height: 64px;
    padding: 0 12px;
  }
  .pawn-landing-shell .landing-soft-main h1 {
    font-size: clamp(34px, 10vw, 38px);
  }
  .pawn-landing-shell .landing-soft-main p {
    font-size: 13px;
  }
  .pawn-how-link {
    margin-top: 12px;
    gap: 0.28rem;
    font-size: 13px;
  }
  .pawn-loan-btn,
  .pawn-send-btn {
    min-height: 40px;
    height: 40px;
  }
  .pawn-landing-bottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 14px 14px;
    text-align: center;
  }
  .pawn-landing-bottom small {
    width: auto;
    margin-right: 0;
    white-space: normal;
  }
  .pawn-bottom-link + .pawn-bottom-link,
  .pawn-bottom-link + .pawn-send-btn {
    margin-left: 0;
  }
  .pawn-bottom-link {
    min-height: 40px;
    border-bottom: 0;
    padding: 4px 6px;
    justify-content: center;
  }
  .pawn-bottom-link span {
    white-space: normal;
  }
  .cnotes-panel {
    right: 0.65rem;
    left: 0.65rem;
    bottom: 0.65rem;
    width: auto;
    max-height: 78vh;
  }
  .cportal-secondary-panel {
    width: calc(100vw - 0.8rem);
    max-height: 82vh;
  }
}

@media (max-width: 767px) {
  body.customer-lookup .wire.customer-lookup-wrap {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
  body.customer-lookup:not(.cportal-active) .wire.customer-lookup-wrap {
    padding-top: max(0.4rem, env(safe-area-inset-top, 0));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom, 0));
  }
  .customer-lookup .brandbar.customer-lookup-top {
    gap: 0.55rem;
    padding: 0.7rem 0.75rem;
  }
  .customer-lookup .logo {
    min-width: 0;
    gap: 0.5rem;
  }
  .customer-lookup .logo b {
    font-size: 1rem;
    line-height: 1.15;
  }
  .customer-lookup .logo small {
    font-size: 0.72rem;
  }
  .customer-lookup-nav {
    width: 100%;
    justify-content: flex-start;
    font-size: 0.82rem;
  }
  body.customer-lookup:not(.cportal-active) .customer-lookup-main {
    padding: clamp(0.4rem, 1.2vh, 0.75rem) 0 0;
    gap: 0.55rem;
  }
  body.customer-lookup:not(.cportal-active) footer.fine {
    margin-top: clamp(1.75rem, 4.5vh, 2.5rem);
    font-size: 0.78rem;
  }
  body.customer-lookup:not(.cportal-active) .customer-portal-wrap,
  body.customer-lookup:not(.cportal-active) .lookup-auth-tools-outer {
    max-width: 100%;
  }
  .customer-portal-wrap {
    max-width: 100%;
    padding: 0.25rem 0 0.95rem;
  }
  body.customer-lookup:not(.cportal-active) .customer-portal-wrap {
    padding: 0;
  }
  .customer-portal-entry {
    padding: 1rem 0.9rem 0.95rem;
  }
  .customer-portal-title {
    font-size: 1.2rem;
  }
  .customer-portal-options {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    gap: 0.35rem 0.45rem;
  }
  #lookup-auth-tools.lookup-auth-tools-outer {
    padding: 0.95rem !important;
  }
  .lookup-tools-grid.lookup-tools-compact {
    gap: 1.1rem;
  }
  #lookup-auth-tools .lookup-title {
    font-size: 1rem !important;
  }
  #lookup-auth-tools .btn {
    min-height: 40px;
  }
  .lookup-password-request-row {
    align-items: flex-start;
    gap: 0.55rem;
  }
  .lookup-password-request-text {
    font-size: 0.76rem;
  }
  .lookup-password-request-btn {
    min-height: 32px;
    padding: 0.3rem 0.56rem !important;
  }
  .help-request-form textarea {
    min-height: 84px;
  }
  .cportal-topbar {
    padding: 0.8rem 0.85rem;
  }
  .cportal-greet {
    font-size: 1rem;
  }
  .cportal-greet-sub {
    font-size: 0.78rem;
  }
  .cportal-header-actions .cportal-profile-btn {
    min-height: 38px;
    padding: 0.45rem 0.65rem;
  }
  .cportal-sidebar {
    padding: 0.75rem;
    position: static;
  }
  .cportal-root .cportal-side-nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(140px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .cportal-root .cportal-side-nav .lookup-nav-btn,
  .cportal-root .cportal-side-nav .cportal-nav-pill {
    min-height: 40px;
    white-space: nowrap;
    text-align: center;
  }
  .cportal-side-h {
    margin-top: 0.8rem;
  }
  .cportal-quick-repay {
    margin-top: 0.9rem;
  }
  .cportal-main .card {
    padding: 0.9rem !important;
  }
  .cportal-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cportal-qgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cportal-table {
    font-size: 0.82rem;
  }
  .cportal-table th,
  .cportal-table td {
    padding: 0.42rem 0.44rem;
  }
}

@media (max-width: 480px) {
  body.customer-lookup .wire.customer-lookup-wrap {
    padding-left: 8px;
    padding-right: 8px;
  }
  body.customer-lookup:not(.cportal-active) .wire.customer-lookup-wrap {
    padding-top: max(0.35rem, env(safe-area-inset-top, 0));
    padding-bottom: max(0.45rem, env(safe-area-inset-bottom, 0));
  }
  .customer-lookup .brandbar.customer-lookup-top {
    padding: 0.62rem 0.65rem;
  }
  .customer-lookup .logo b {
    font-size: 0.95rem;
  }
  .customer-portal-entry {
    padding: 0.9rem 0.78rem 0.85rem;
  }
  .customer-portal-title {
    font-size: 1.1rem;
  }
  .lookup-password-request-row {
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.36rem 0.55rem;
  }
  .lookup-password-request-btn {
    min-height: 34px;
  }
  .customer-portal-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    width: 100%;
  }
  .customer-portal-remember,
  .customer-portal-link {
    white-space: nowrap;
  }
  .customer-portal-remember span {
    white-space: nowrap;
  }
  .customer-portal-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.46rem;
  }
  .customer-portal-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
  }
  .customer-portal-sep {
    display: none;
  }
  #lookup-auth-tools.lookup-auth-tools-outer {
    padding: 0.8rem !important;
  }
  #lookup-auth-tools .btn,
  .customer-portal-form .btn.customer-portal-primary {
    min-height: 40px;
  }
  .cportal-root .cportal-side-nav {
    grid-auto-columns: minmax(122px, 1fr);
    gap: 0.3rem;
  }
  .cportal-main .card {
    padding: 0.78rem !important;
  }
  .cportal-kpi-row,
  .cportal-qgrid {
    grid-template-columns: 1fr;
  }
}

/* pawn-lookup mobile overflow + bottom row cleanup */
@media (max-width: 767px) {
  html, body.customer-lookup {
    overflow-x: hidden;
  }
  body.customer-lookup .wire.customer-lookup-wrap {
    overflow-x: clip;
  }
  .customer-portal-entry,
  #lookup-auth-tools.lookup-auth-tools-outer {
    max-width: 100%;
  }
  body.customer-lookup:not(.cportal-active) .customer-portal-options {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .pawn-landing-shell .landing-soft-header {
    padding: 8px 10px;
    min-height: auto;
  }
  .pawn-loan-btn {
    min-height: 38px;
    height: 38px;
    font-size: 12px !important;
    padding: 0 11px !important;
  }
  .pawn-landing-shell .landing-soft-main {
    padding: 0 12px;
  }
  .pawn-landing-shell .landing-soft-main h1 {
    font-size: clamp(30px, 10.5vw, 34px);
    line-height: 1.15;
  }
  .pawn-landing-shell .landing-soft-main p {
    font-size: 12px;
    margin-top: 8px;
  }
  .pawn-how-link {
    margin-top: 10px;
    font-size: 12px;
  }
  .pawn-landing-bottom {
    gap: 6px;
    padding: 10px 10px 12px;
  }
  .pawn-bottom-link {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
  .pawn-send-btn {
    width: 100%;
    justify-content: center;
  }
}

/* —— Customer portal (simple): “My Loan” layout —— matches main dark gradient, not light gray */
.cportal-root.cportal-simple {
  --cportal-canvas: transparent;
  --cportal-surface: #161d27;
  --cportal-line: #2a3344;
  --cportal-ink: #e2e8f0;
  --cportal-muted: #94a3b8;
  --cportal-sum4-line: #2a3344;
  --cportal-zebra-a: #141b24;
  --cportal-zebra-b: rgba(15, 23, 42, 0.28);
}
#lookup-dashboard.cportal-root.cportal-simple {
  background: var(--cportal-canvas);
  margin-top: 0.4rem;
  padding: 0.25rem 0.35rem 0.5rem;
}
.cportal-root.cportal-simple .cportal-shell { gap: 0.7rem; align-items: start; }
.cportal-root.cportal-simple .cportal-main .cportal-ico-btn {
  border: 1px solid #334155;
  background: #0f1419;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 0.32rem 0.5rem;
  cursor: pointer;
  line-height: 1;
  font-size: 1.1rem;
}
.cportal-bell-wrap { position: relative; }
.cportal-topbar-sep {
  width: 1px;
  min-width: 1px;
  height: 1.4rem;
  background: #d1d5db;
  flex-shrink: 0;
  align-self: center;
  margin: 0 0.1rem;
}
.cportal-root.cportal-simple .cportal-header-actions { gap: 0.35rem; }
.cportal-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: min(320px, 92vw);
  background: #1a222c;
  border: 1px solid #2a3340;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  z-index: 30;
  padding: 0.5rem 0.65rem 0.65rem;
  color: #e2e8f0;
}
.cportal-root.cportal-simple .cportal-dropdown {
  background: #1a222c;
  border: 1px solid #2a3340;
  color: #e2e8f0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.cportal-root.cportal-simple .cportal-profile-dropdown { color: #e2e8f0; }
.cportal-profile-wrap { position: relative; }
.cportal-profile-dropdown { right: 0; left: auto; }
.cportal-profile-dropdown .sub { color: #94a3b8 !important; }
.cportal-root.cportal-simple .cportal-profile-dropdown .cportal-profile-line { color: #e2e8f0; }
.cportal-root.cportal-simple .cportal-profile-dropdown .sub { color: #94a3b8 !important; }
.cportal-dropdown-h { margin: 0 0 0.4rem; font-size: 0.78rem; color: #94a3b8; }
.cportal-root.cportal-simple .cportal-dropdown-h { color: #94a3b8; }
.cportal-dd-list { max-height: 220px; overflow: auto; }
.cportal-dd-item { padding: 0.4rem 0.15rem; border-bottom: 1px solid #2a3344; cursor: pointer; }
.cportal-root.cportal-simple .cportal-dd-item { border-bottom-color: #2a3344; }
.cportal-dd-item:last-child { border-bottom: none; }
.cportal-dd-all { width: 100%; margin-top: 0.4rem; }
.cportal-text-link {
  background: none; border: none; color: #1e4f8a; font-weight: 600; cursor: pointer;
  padding: 0; font: inherit; text-decoration: none;
}
.cportal-text-link:hover { color: #163a66; text-decoration: underline; }
.cportal-root.cportal-simple .cportal-text-link { color: #60a5fa; }
.cportal-root.cportal-simple .cportal-text-link:hover { color: #93c5fd; }
.cportal-view-more { font-size: 0.9rem; }
.cportal-root.cportal-simple .cportal-main {
  background: transparent;
  padding: 0.15rem 0.2rem 0.65rem;
  min-width: 0;
}
.cportal-root.cportal-simple .lookup-content .card { margin-bottom: 0; }
.cportal-root.cportal-simple .cportal-main .card,
.cportal-root.cportal-simple #cportal-secondary-body .card {
  background: var(--cportal-surface);
  border: 1px solid var(--cportal-line);
  color: var(--cportal-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  border-radius: 10px;
}
.cportal-root.cportal-simple .cportal-h3 { color: var(--cportal-ink); }
.cportal-root.cportal-simple .cportal-h3.cportal-myloan-h2 { color: var(--cportal-ink); }
.cportal-root.cportal-simple .cportal-main .btn.ghost {
  color: #cbd5e1;
  border-color: #334155;
  background: rgba(15, 20, 25, 0.35);
}
.cportal-root.cportal-simple .cportal-main .btn.ghost:hover {
  color: #f1f5f9;
  background: #1e293b;
  border-color: #475569;
}
.cportal-root.cportal-simple .cportal-secondary-head h2 { color: var(--cportal-ink); }
.cportal-root.cportal-simple #cportal-secondary-body { color: var(--cportal-ink); }
.cportal-root.cportal-simple .cportal-sidebar.card {
  background: var(--cportal-surface);
  border: 1px solid var(--cportal-line) !important;
  color: var(--cportal-ink);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  border-radius: 10px;
  padding: 0.75rem 0.8rem;
}
.cportal-root.cportal-simple .cportal-side-nav .lookup-nav-btn,
.cportal-root.cportal-simple .cportal-side-nav .cportal-nav-pill {
  background: #141c26;
  border-color: #2f3b4a;
  color: #e2e8f0;
}
.cportal-ico-inline { margin-right: 0.35rem; display: inline-block; opacity: 0.95; }
.cportal-myloan-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.cportal-myloan-block { margin: 0; }
.cportal-myloan-block-title {
  margin: 0.1rem 0 0.32rem 0.05rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cportal-ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.cportal-myloan-summary-card { padding: 0 !important; overflow: hidden; border-radius: 10px !important; }
.cportal-sum4--unified-mock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.cportal-sum4--unified-mock .cportal-sum4-cell {
  padding: 1.2rem 0.9rem 1.35rem;
  border-right: 1px solid var(--cportal-sum4-line, #d1d5db);
  min-width: 0;
}
.cportal-sum4--unified-mock .cportal-sum4-cell:last-child { border-right: none; }
.cportal-root.cportal-simple .cportal-sum4--unified-mock .cportal-sum4-cell { border-right-color: var(--cportal-sum4-line); }
/* 4-up KPI: label / amount / description — flex column + gap for clear vertical rhythm */
.cportal-loan-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* 8px; was 6–10px range */
}
.cportal-sum4--unified-mock .cportal-loan-kpi-label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--cportal-muted, #4b5563);
  font-weight: 600;
  line-height: 1.5;
}
.cportal-sum4--unified-mock .cportal-loan-kpi-value {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--cportal-ink, #0f172a);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.cportal-sum4--unified-mock .cportal-loan-kpi-desc {
  margin: 0;
  font-size: 0.8rem;
  color: #94a3b8;
  line-height: 1.6;
}
.cportal-root.cportal-simple .cportal-main .cportal-table--zebra thead th {
  background: #1e293b;
  color: #94a3b8;
  font-weight: 600;
  font-size: 0.78rem;
  border-bottom: 1px solid #2a3344;
  padding: 0.5rem 0.55rem;
}
.cportal-root.cportal-simple .cportal-main .cportal-table--zebra tbody tr:nth-child(even) {
  background: var(--cportal-zebra-b, rgba(15, 23, 42, 0.28));
}
.cportal-root.cportal-simple .cportal-main .cportal-table--zebra tbody tr:nth-child(odd) {
  background: var(--cportal-zebra-a, #141b24);
}
.cportal-root.cportal-simple .cportal-table-wrap--myloan { margin: 0; margin-top: 0; }
.cportal-root.cportal-simple .cportal-myloan-line--table .cportal-table-wrap { margin-top: 0; }
.cportal-root.cportal-simple .cportal-myloan-line--table { padding: 0.4rem 0.55rem 0.5rem !important; }
.cportal-sidebar .cportal-sidebar-foot { margin-top: 0.55rem; }
.cportal-sidebar .cportal-sidebar-notes + .cportal-sidebar-foot { margin-top: 0.85rem; }
.cportal-myloan-line { margin: 0 !important; padding: 0.55rem 0.65rem !important; }
.cportal-myloan-h2 { margin: 0 0 0.4rem !important; font-size: 0.98rem !important; font-weight: 600; }
/* My Notes (dark sidebar) */
.cportal-root.cportal-simple .cportal-sidebar-notes {
  border-top-color: #2a3344;
  border-bottom-color: #2a3344;
}
.cportal-root.cportal-simple .cportal-sidebar-notes-h { color: var(--cportal-ink); }
.cportal-root.cportal-simple .cportal-sidebar-notes-ico { color: #94a3b8; }
.cportal-root.cportal-simple .cportal-sidebar-notes-box {
  background: #121418;
  border-color: #3d4a5c;
}
.cportal-root.cportal-simple .cportal-sidebar-notes-text { color: #e2e8f0; }
.cportal-root.cportal-simple .cportal-sidebar-notes-text::placeholder { color: #64748b; }
.cportal-root.cportal-simple .cportal-sidebar-notes-footer { border-top-color: rgba(255, 255, 255, 0.1); }
.cportal-root.cportal-simple .cportal-sidebar-notes .cportal-note-count { color: #94a3b8; }
.cportal-root.cportal-simple .cportal-sidebar-notes-save {
  color: #e2e8f0 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
.cportal-root.cportal-simple .cportal-sidebar-notes-save:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #f1f5f9 !important;
}
.cportal-root.cportal-simple .cportal-sidebar-foot { border-color: #2a3344; }
.cportal-root.cportal-simple .cportal-nav-badge { vertical-align: 1px; }
.cportal-myloan-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
.cportal-myloan-kpis .card {
  margin: 0 !important;
}
.cportal-myloan-kpi {
  margin: 0 !important;
  padding: 0.65rem 0.8rem !important;
  min-width: 0;
}
.cportal-myloan-kpi h4 {
  margin: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 600;
}
.cportal-myloan-kpi .num { margin: 0.2rem 0; font-size: 1.12rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #f1f5f9; }
.cportal-myloan-kpi .sub { margin: 0; font-size: 0.75rem; color: #94a3b8; line-height: 1.35; }
.cportal-alertline--card {
  background: transparent;
  border: none;
  padding: 0.15rem 0;
}
.cportal-myloan-bell-slot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; }
.cportal-myloan-bell-ico { font-size: 1.2rem; line-height: 1; }
.cportal-myloan-bell-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 4px;
  font-size: 0.62rem;
  line-height: 1.05rem;
  text-align: center;
  background: #dc2626;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
}
.cportal-view-more-wrap { text-align: center; margin: 0.5rem 0 0; padding: 0; }
@media (max-width: 1024px) {
  .cportal-myloan-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cportal-sum4--unified-mock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cportal-sum4--unified-mock > .cportal-sum4-cell { border-right: none; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell:nth-child(1) { border-right: 1px solid #2a3344; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell:nth-child(3) { border-right: 1px solid #2a3344; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell:nth-child(1),
  .cportal-sum4--unified-mock > .cportal-sum4-cell:nth-child(2) { border-bottom: 1px solid #2a3344; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell:nth-child(3),
  .cportal-sum4--unified-mock > .cportal-sum4-cell:nth-child(4) { border-bottom: none; }
}
@media (max-width: 560px) {
  .cportal-myloan-kpis { grid-template-columns: 1fr; }
  .cportal-sum4--unified-mock { grid-template-columns: 1fr; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell { border-right: none !important; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell:not(:last-child) { border-bottom: 1px solid #2a3344; }
  .cportal-sum4--unified-mock > .cportal-sum4-cell:last-child { border-bottom: none; }
}
.cportal-root.cportal-simple .cportal-main .cportal-table th,
.cportal-root.cportal-simple .cportal-main .cportal-table td {
  border-bottom: 1px solid #2a3344;
  color: #e2e8f0;
  padding: 0.45rem 0.5rem;
  font-size: 0.84rem;
  vertical-align: top;
}
.cportal-root.cportal-simple .cportal-main .cportal-table th {
  color: #94a3b8;
  background: #141b24;
  font-weight: 600;
}
.cportal-root.cportal-simple .cportal-main .cportal-table td.sub,
.cportal-root.cportal-simple .cportal-main .cportal-td-empty {
  color: #94a3b8;
}
.cportal-root.cportal-simple .cportal-main .cportal-msg {
  background: #141b24;
  border: 1px solid #2f3a48;
  color: #e2e8f0;
}
.cportal-root.cportal-simple .cportal-main .cportal-msg .sub { color: #94a3b8; }
.cportal-sum4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.cportal-myloan-hero { padding: 0; overflow: hidden; }
.cportal-alertline {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid #2a3344;
  background: #141b24;
}
.cportal-root.cportal-simple .cportal-alertline--card,
.cportal-root.cportal-simple .cportal-myloan-line .cportal-alertline {
  background: transparent;
  border-bottom: none;
}
.cportal-root.cportal-simple .cportal-alertline-title { color: #e2e8f0; }
.cportal-root.cportal-simple .cportal-alertline-snippet { color: #94a3b8; }
.cportal-alertline-bell { font-size: 1.15rem; line-height: 1; flex-shrink: 0; }
.cportal-alertline-body { flex: 1; min-width: 0; }
.cportal-alertline-title { margin: 0; font-size: 0.88rem; color: #e2e8f0; }
.cportal-alertline-snippet { display: block; margin-top: 0.15rem; line-height: 1.35; color: #94a3b8; }
.cportal-alertline-btn { flex-shrink: 0; font-size: 0.82rem; padding: 0.35rem 0.6rem; }
.cportal-sum4-myloan > div {
  padding: 0.65rem 0.8rem;
}
.cportal-sum4 > div {
  padding: 0.6rem 0.75rem;
  border-right: 1px solid #2a3344;
  min-width: 0;
}
.cportal-sum4 > div:last-child { border-right: none; }
.cportal-sum4 h4 {
  margin: 0;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 600;
}
.cportal-sum4 .num { margin: 0.2rem 0; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #f1f5f9; }
.cportal-sum4 .sub { margin: 0; font-size: 0.75rem; color: #94a3b8; }
.cportal-num-ok, .cportal-ok { color: #16a34a; font-weight: 600; }
.cportal-inline-h { display: flex; align-items: start; justify-content: space-between; gap: 0.5rem; }
.cportal-modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem; }
.cportal-pencil { opacity: 0.6; font-size: 0.9em; margin-left: 0.25rem; }
.cportal-note-count { font-size: 0.75rem; color: #94a3b8; }
@media (max-width: 1024px) {
  .cportal-sum4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cportal-sum4 > div { border-right: none; border-bottom: 1px solid #2a3344; }
}

/* —— Admin: Primary + STAFF (pawn-admin) —— */
.primary-admin-card {
  margin-bottom: 0.75rem;
}
.primary-admin-h3 {
  text-transform: none;
  letter-spacing: 0.02em;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 600;
}
.primary-admin-kv b {
  font-weight: 500;
  word-break: break-word;
}
.primary-pw-form {
  display: grid;
  gap: 0.5rem 0.65rem;
  max-width: 28rem;
  margin-top: 0.15rem;
}
@media (min-width: 600px) {
  .primary-pw-form {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .primary-pw-form > div:nth-child(1) {
    grid-column: 1 / -1;
  }
}
.primary-pw-form input {
  max-width: 100%;
  min-width: 0;
}
.staff-admin-section {
  min-width: 0;
}
.adm-staff-table-wrap {
  overflow-x: hidden;
  min-width: 0;
  max-width: 100%;
}
table.adm-staff-table th:nth-child(2),
table.adm-staff-table td.td-clip {
  word-break: break-word;
  overflow-wrap: anywhere;
}
table.adm-staff-table th:last-child,
table.adm-staff-table td.adm-td-actions {
  width: 1%;
  white-space: normal;
  vertical-align: top;
}
.adm-action-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.2rem 0.15rem;
  max-width: 100%;
}
.adm-act-btn {
  flex: 0 0 auto;
}
.td-wrap {
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .admin-page-h2-wrap {
    margin-bottom: 0.5rem;
  }
  .adm-staff-table thead th:nth-child(4),
  .adm-staff-table tbody td:nth-child(4) {
    display: none;
  }
}

/*
 * Customer list — fluid columns, wrap text (no summed fixed rem widths → no forced horizontal scroll).
 * README §16: avoid trapping users in sideways scroll; UUIDs and headers wrap instead.
 */
#table-customers-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 0.78rem;
}
#table-customers-wrap th,
#table-customers-wrap td {
  min-width: 0;
  padding: 0.42rem clamp(0.22rem, 1.5vw, 0.4rem);
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
#table-customers-wrap thead th {
  white-space: normal;
  line-height: 1.25;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  vertical-align: bottom;
}
#table-customers-wrap td.num {
  white-space: nowrap;
  word-break: normal;
  text-align: right;
}
#table-customers-wrap td:nth-child(5) {
  text-align: center;
  white-space: nowrap;
  word-break: normal;
}
#table-customers-wrap .customer-id-cell,
#table-customers-wrap .customer-id-cell small {
  display: block;
  word-break: break-all;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  max-width: none;
  font-size: 0.72rem;
  line-height: 1.35;
}
#table-customers-wrap .customer-actions-cell {
  white-space: normal !important;
  display: flex;
  flex-wrap: wrap;
  gap: 0.22rem;
  align-items: center;
  justify-content: flex-end;
}
#table-customers-wrap .customer-actions-cell .btn {
  margin: 0;
  flex: 0 0 auto;
}
#table-customers-wrap .customer-actions-cell .customer-action-btn {
  width: 2.15rem;
  min-width: 2.15rem;
  height: 2.15rem;
}
#table-customers-wrap .customer-actions-cell .btn[data-customer-delete] {
  margin-left: 0;
}