/* Combined CSS from efin_incred_fixed — auto-generated */

    :root {
      --bg: #f0f4ff;
      --surface: #ffffff;
      --surface2: #f0f4ff;
      --surface3: #e6ecf8;
      --border: #dde3f0;
      --border2: #c4cfe6;
      --accent: #1a4fa3;
      --accent-dark: #0f3278;
      --accent-light: #2d68cc;
      --accent-glow: rgba(26, 79, 163, .2);
      --accent-subtle: rgba(26, 79, 163, .08);
      --accent2: #d42b2b;
      --accent2-dark: #a81e1e;
      --accent2-light: #e94040;
      --accent2-glow: rgba(212, 43, 43, .18);
      --accent2-subtle: rgba(212, 43, 43, .07);
      --warn: #e67e00;
      --accent3: #ff6b35;
      --danger: #c0392b;
      --success: #1a7340;
      --text: #0c1733;
      --text2: #3a4d6e;
      --text3: #7a8aaa;
      --font-head: 'Outfit', sans-serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;
      --r: 16px;
      --r-sm: 10px;
      --r-xs: 6px;
      --shadow: 0 4px 24px rgba(26, 79, 163, .1);
      --shadow-md: 0 8px 40px rgba(26, 79, 163, .14);
      --shadow-lg: 0 20px 60px rgba(26, 79, 163, .18);
      --shadow-accent: 0 4px 24px rgba(26, 79, 163, .28);
      --sidebar-w: 260px;
      --sidebar-collapsed-w: 64px;
      --transition: 0.24s cubic-bezier(.4, 0, .2, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      min-height: 100vh;
      display: flex;
      overflow-x: auto;  /* scroll horizontally at high zoom rather than breaking layout */
      min-width: 380px;  /* never let layout collapse below this */
      background-image: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(26, 79, 163, .06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 110%, rgba(212, 43, 43, .04) 0%, transparent 50%);
    }


    /* ══ Wizard Searchable Dropdown (wsdd) ══ */
    .wsdd-wrap { position: relative; width: 100%; }
    .wsdd-display {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--surface2); border: 1.5px solid var(--border2);
      border-radius: var(--r-sm); padding: 9px 13px;
      cursor: pointer; user-select: none;
      font-size: 13px; color: var(--text);
      transition: border-color .16s, box-shadow .16s;
      min-height: 40px;
    }
    .wsdd-display:hover { border-color: var(--accent); }
    .wsdd-display.wsdd-open {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      border-radius: var(--r-sm) var(--r-sm) 0 0;
    }
    .wsdd-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wsdd-val.placeholder { color: var(--text3); }
    .wsdd-arrow { font-size: 11px; color: var(--text3); margin-left: 8px; transition: transform .18s; flex-shrink: 0; }
    .wsdd-display.wsdd-open .wsdd-arrow { transform: rotate(180deg); }
    .wsdd-panel {
      position: absolute; left: 0; right: 0; top: 100%; z-index: 9999;
      background: var(--surface); border: 1.5px solid var(--accent);
      border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm);
      box-shadow: 0 8px 32px rgba(26,79,163,.18);
    }
    /* Drop-up: opens above the field when there isn't enough room below */
    .wsdd-panel.wsdd-up {
      top: auto; bottom: 100%;
      border-top: 1.5px solid var(--accent); border-bottom: none;
      border-radius: var(--r-sm) var(--r-sm) 0 0;
      box-shadow: 0 -8px 32px rgba(26,79,163,.18);
    }
    .wsdd-search {
      width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border);
      background: var(--surface2); color: var(--text);
      font-family: var(--font-body); font-size: 13px; outline: none;
    }
    /* Combobox mode: the panel's search box visually replaces the field itself */
    .wsdd-panel.wsdd-as-field {
      position: absolute; left: 0; right: 0; top: 0; z-index: 9999;
      border: 1.5px solid var(--accent); border-radius: var(--r-sm);
      box-shadow: 0 8px 32px rgba(26,79,163,.18); overflow: hidden;
    }
    .wsdd-panel.wsdd-as-field.wsdd-up { top: auto; bottom: 0; }
    .wsdd-panel.wsdd-as-field .wsdd-search {
      padding: 9px 13px 9px 30px; min-height: 40px; font-size: 13px;
      border-bottom: 1px solid var(--border);
    }
    .wsdd-list { max-height: 220px; overflow-y: auto; }
    .wsdd-item {
      padding: 9px 13px; font-size: 13px; cursor: pointer;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 8px;
      transition: background .1s; color: var(--text);
    }
    .wsdd-item:last-child { border-bottom: none; }
    .wsdd-item:hover { background: rgba(26,79,163,.07); }
    .wsdd-item.wsdd-selected { background: rgba(26,79,163,.1); color: var(--accent); font-weight: 600; }
    .wsdd-empty { padding: 10px 13px; font-size: 12.5px; color: var(--text3); text-align: center; }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ::-webkit-scrollbar-track {
      background: var(--surface);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px;
    }

    /* ══ SETTINGS PAGE — consolidated layout ══ */
    .stg-folder {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 20px;
      transition: box-shadow .2s;
    }
    .stg-folder:hover { box-shadow: var(--shadow); }
    .stg-folder-head {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 22px;
      border-bottom: 1.5px solid var(--border);
      background: var(--surface2);
      cursor: pointer;
      user-select: none;
    }
    .stg-folder-icon {
      width: 40px; height: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; flex-shrink: 0;
    }
    .stg-folder-title { font-family: var(--font-head); font-size: 14.5px; font-weight: 800; color: var(--text); }
    .stg-folder-sub   { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .stg-folder-chevron { margin-left: auto; color: var(--text3); font-size: 13px; transition: transform .22s; flex-shrink: 0; }
    .stg-folder.open .stg-folder-chevron { transform: rotate(180deg); }
    .stg-folder-body { padding: 22px; display: none; overflow: hidden; }
    .stg-folder.open .stg-folder-body { display: block; }
    .stg-badge {
      font-size: 10px; font-weight: 800; padding: 3px 10px;
      border-radius: 99px; letter-spacing: .6px; flex-shrink: 0;
    }
    .stg-badge-admin  { background: rgba(26,79,163,.1);  color: var(--accent); }
    .stg-badge-auto   { background: rgba(26,115,64,.1);  color: var(--success); }
    .stg-badge-manual { background: rgba(230,126,0,.1);  color: var(--warn); }
    /* Provider radio cards */
    .stg-provider-card {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 16px 18px; border: 2px solid var(--border2);
      border-radius: 13px; cursor: pointer; transition: all .2s;
      background: var(--surface2);
    }
    .stg-provider-card.selected {
      border-color: var(--accent);
      background: rgba(26,79,163,.04);
      box-shadow: 0 0 0 3px rgba(26,79,163,.08);
    }
    /* Toggle switch (re-used for permissions) */
    .stg-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 14px; background: var(--surface2);
      border: 1px solid var(--border); border-radius: 10px;
    }
    .stg-toggle-row + .stg-toggle-row { margin-top: 8px; }
    /* Section label inside a folder */
    .stg-section-label {
      font-size: 10px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 1.2px; color: var(--accent);
      margin: 18px 0 10px; padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }
    .stg-section-label:first-child { margin-top: 0; }
    /* ── INVITATION MODAL ── */
    .invite-avatar-upload {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:10px; padding:18px; background:var(--surface2);
      border:2px dashed var(--border2); border-radius:16px;
      cursor:pointer; transition:border-color .2s, background .2s;
      position:relative;
    }
    .invite-avatar-upload:hover { border-color:var(--accent); background:var(--accent-subtle); }
    .invite-avatar-preview {
      width:72px; height:72px; border-radius:50%;
      object-fit:cover; display:none;
      border:3px solid var(--accent); box-shadow: 0 4px 16px var(--accent-glow);
    }
    .invite-avatar-placeholder {
      width:72px; height:72px; border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-light));
      display:flex; align-items:center; justify-content:center;
      font-size:28px; color:#fff; font-weight:800; font-family:var(--font-head);
    }
    .invite-uid-badge {
      display:inline-flex; align-items:center; gap:8px;
      background:linear-gradient(135deg,rgba(26,79,163,.08),rgba(26,79,163,.04));
      border:1.5px solid rgba(26,79,163,.2); border-radius:12px;
      padding:10px 16px; font-family:monospace;
      font-size:15px; font-weight:800; color:var(--accent); letter-spacing:1px;
    }
    .invite-step { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
    .invite-step-num {
      width:26px; height:26px; border-radius:50%; flex-shrink:0;
      background:var(--accent); color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:800; font-family:var(--font-head);
    }
    /* ── CHANGE PASSWORD MODAL ── */
    .cp-strength-bar {
      height:4px; border-radius:4px; background:var(--border);
      overflow:hidden; margin-top:6px;
    }
    .cp-strength-fill {
      height:100%; border-radius:4px; width:0%;
      transition: width .35s, background .35s;
    }

    /* ── FIRST-OFFER INTERSTITIAL — Fintech Pro ── */
    /* ══════════════════════════════════════════
       OFFER INTERSTITIAL — Lottie animation
       ══════════════════════════════════════════ */
    #offer-interstitial {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 8800;
      background: rgba(6,12,34,.88);
      backdrop-filter: blur(18px) saturate(1.6);
      align-items: center;
      justify-content: center;
    }
    #offer-interstitial.oi-active { display: flex; }

    .oi-card {
      background: linear-gradient(160deg, #ffffff 0%, #f4f7ff 100%);
      border-radius: 32px;
      padding: 24px 40px 32px;
      max-width: 400px;
      width: 92%;
      text-align: center;
      box-shadow: 0 40px 100px rgba(10,25,80,.28), 0 0 0 1px rgba(26,79,163,.1);
      position: relative;
      overflow: hidden;
      animation: oi-rise .42s cubic-bezier(.34,1.46,.64,1) both;
    }
    .oi-card::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 70% 45% at 50% -10%, rgba(26,79,163,.06) 0%, transparent 70%),
                  radial-gradient(ellipse 50% 30% at 110% 110%, rgba(44,111,255,.04) 0%, transparent 60%);
    }
    @keyframes oi-rise {
      from { opacity: 0; transform: translateY(32px) scale(.94); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   }
    }

    /* ── Offer animation: Pulse-ring data processor ── */
    #oi-lottie-wrap {
      width: 180px;
      height: 180px;
      margin: -4px auto 10px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes oi-ring-spin { to { transform: rotate(360deg); } }
    @keyframes oi-pulse-expand {
      0%   { transform: scale(1);   opacity: .8; }
      100% { transform: scale(3.2); opacity: 0; }
    }

    /* Text */
    .oi-title {
      font-family: var(--font-head);
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
      letter-spacing: -.3px;
    }
    .oi-sub {
      font-size: 12.5px;
      color: var(--text3);
      line-height: 1.65;
      margin-bottom: 20px;
      font-weight: 500;
    }

    /* Progress bar */
    .oi-bar-track {
      height: 4px;
      border-radius: 99px;
      background: rgba(26,79,163,.08);
      overflow: hidden;
      margin-bottom: 14px;
    }
    .oi-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, #1a4fa3, #2c6fff, #6fa3ff);
      background-size: 200% 100%;
      width: 0%;
      transition: width 2.8s cubic-bezier(.25,.46,.45,.94);
      animation: oi-shimmer 1.8s linear infinite;
    }
    @keyframes oi-shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Hint */
    .oi-hint {
      font-size: 11.5px;
      color: var(--text3);
      min-height: 18px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: opacity .22s ease;
    }
    .oi-hint::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #2c6fff;
      display: inline-block;
      flex-shrink: 0;
      animation: oi-pulse-dot 1.2s ease-in-out infinite;
    }
    @keyframes oi-pulse-dot {
      0%, 100% { transform: scale(1);   opacity: 1; }
      50%       { transform: scale(.45); opacity: .4; }
    }

    /* Keep legacy selectors alive for JS */
    .oi-step-chip, .oi-dots, .oi-dot,
    .oi-orbital, .oi-orbit-inner, .oi-orbit-dot,
    .oi-icon-wrap, .oi-steps { display: none !important; }

    /* ══ OFFER-READY BURST ANIMATION ══════════════════════════════
       A brief full-screen flash + expanding ring that fires when
       the offer interstitial closes and the wizard reveals step 6. */
    #offer-ready-burst {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 8900;
      pointer-events: none;
      align-items: center;
      justify-content: center;
    }
    #offer-ready-burst.orb-active { display: flex; }

    /* Full-screen radial flash */
    #offer-ready-burst .orb-flash {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 60% at 50% 50%,
        rgba(26,79,163,.22) 0%, transparent 70%);
      animation: orb-flash-in .55s cubic-bezier(.25,.46,.45,.94) forwards;
    }
    @keyframes orb-flash-in {
      0%   { opacity: 0; transform: scale(.6); }
      40%  { opacity: 1; transform: scale(1.05); }
      100% { opacity: 0; transform: scale(1.3); }
    }

    /* Centre check badge */
    #offer-ready-burst .orb-badge {
      position: relative; z-index: 2;
      width: 80px; height: 80px;
      border-radius: 50%;
      background: linear-gradient(140deg, #1a4fa3 0%, #2c6fff 100%);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 0 rgba(44,111,255,.5);
      animation: orb-badge-pop .5s cubic-bezier(.34,1.6,.64,1) forwards,
                 orb-badge-fade .35s ease-in .55s forwards;
    }
    #offer-ready-burst .orb-badge svg {
      width: 38px; height: 38px;
    }
    @keyframes orb-badge-pop {
      0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
      60%  { transform: scale(1.15) rotate(4deg); opacity: 1; }
      100% { transform: scale(1) rotate(0deg);   opacity: 1; }
    }
    @keyframes orb-badge-fade {
      to { transform: scale(1.4); opacity: 0; }
    }

    /* Expanding rings */
    #offer-ready-burst .orb-ring {
      position: absolute;
      width: 80px; height: 80px;
      border-radius: 50%;
      border: 3px solid rgba(44,111,255,.7);
      animation: orb-ring-expand .75s ease-out forwards;
    }
    #offer-ready-burst .orb-ring:nth-child(3) { animation-delay: .08s; border-color: rgba(26,79,163,.5); border-width: 2px; }
    #offer-ready-burst .orb-ring:nth-child(4) { animation-delay: .18s; border-color: rgba(111,163,255,.35); border-width: 1.5px; }
    #offer-ready-burst .orb-ring:nth-child(5) { animation-delay: .3s;  border-color: rgba(111,163,255,.2); border-width: 1px; }
    @keyframes orb-ring-expand {
      0%   { transform: scale(1);   opacity: 1; }
      100% { transform: scale(6.5); opacity: 0; }
    }

    /* Spark particles */
    #offer-ready-burst .orb-sparks {
      position: absolute;
      width: 0; height: 0;
    }
    #offer-ready-burst .orb-spark {
      position: absolute;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #2c6fff;
      animation: orb-spark-fly .7s ease-out forwards;
    }
    #offer-ready-burst .orb-spark:nth-child(1)  { animation-delay:.05s; --sx:80px;  --sy:-90px;  background:#2c6fff; }
    #offer-ready-burst .orb-spark:nth-child(2)  { animation-delay:.07s; --sx:-90px; --sy:-70px;  background:#6fa3ff; }
    #offer-ready-burst .orb-spark:nth-child(3)  { animation-delay:.09s; --sx:70px;  --sy:95px;   background:#1a4fa3; }
    #offer-ready-burst .orb-spark:nth-child(4)  { animation-delay:.06s; --sx:-80px; --sy:85px;   background:#2c6fff; }
    #offer-ready-burst .orb-spark:nth-child(5)  { animation-delay:.1s;  --sx:110px; --sy:10px;   background:#6fa3ff; }
    #offer-ready-burst .orb-spark:nth-child(6)  { animation-delay:.04s; --sx:-110px;--sy:20px;   background:#1a4fa3; }
    #offer-ready-burst .orb-spark:nth-child(7)  { animation-delay:.08s; --sx:30px;  --sy:-115px; background:#2c6fff; }
    #offer-ready-burst .orb-spark:nth-child(8)  { animation-delay:.11s; --sx:-40px; --sy:120px;  background:#6fa3ff; }
    @keyframes orb-spark-fly {
      0%   { transform: translate(0,0) scale(1); opacity: 1; }
      80%  { opacity: .7; }
      100% { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 0; }
    }


    :root {
      --bg: #f0f4ff;
      --surface: #ffffff;
      --surface2: #f0f4ff;
      --surface3: #e6ecf8;
      --border: #dde3f0;
      --border2: #c4cfe6;
      --accent: #1a4fa3;
      --accent-dark: #0f3278;
      --accent-light: #2d68cc;
      --accent-glow: rgba(26, 79, 163, .2);
      --accent-subtle: rgba(26, 79, 163, .08);
      --accent2: #d42b2b;
      --accent2-dark: #a81e1e;
      --accent2-light: #e94040;
      --accent2-glow: rgba(212, 43, 43, .18);
      --accent2-subtle: rgba(212, 43, 43, .07);
      --warn: #e67e00;
      --accent3: #ff6b35;
      --danger: #c0392b;
      --success: #1a7340;
      --text: #0c1733;
      --text2: #3a4d6e;
      --text3: #7a8aaa;
      --font-head: 'Outfit', sans-serif;
      --font-body: 'Plus Jakarta Sans', sans-serif;
      --r: 16px;
      --r-sm: 10px;
      --r-xs: 6px;
      --shadow: 0 4px 24px rgba(26, 79, 163, .1);
      --shadow-md: 0 8px 40px rgba(26, 79, 163, .14);
      --shadow-lg: 0 20px 60px rgba(26, 79, 163, .18);
      --shadow-accent: 0 4px 24px rgba(26, 79, 163, .28);
      --sidebar-w: 260px;
      --sidebar-collapsed-w: 64px;
      --transition: 0.24s cubic-bezier(.4, 0, .2, 1);
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-body);
      min-height: 100vh;
      display: flex;
      overflow-x: auto;  /* scroll horizontally at high zoom rather than breaking layout */
      min-width: 380px;  /* never let layout collapse below this */
      background-image: radial-gradient(ellipse 80% 50% at 20% -10%, rgba(26, 79, 163, .06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 110%, rgba(212, 43, 43, .04) 0%, transparent 50%);
    }


    /* ══ Wizard Searchable Dropdown (wsdd) ══ */
    .wsdd-wrap { position: relative; width: 100%; }
    .wsdd-display {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--surface2); border: 1.5px solid var(--border2);
      border-radius: var(--r-sm); padding: 9px 13px;
      cursor: pointer; user-select: none;
      font-size: 13px; color: var(--text);
      transition: border-color .16s, box-shadow .16s;
      min-height: 40px;
    }
    .wsdd-display:hover { border-color: var(--accent); }
    .wsdd-display.wsdd-open {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      border-radius: var(--r-sm) var(--r-sm) 0 0;
    }
    .wsdd-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wsdd-val.placeholder { color: var(--text3); }
    .wsdd-arrow { font-size: 11px; color: var(--text3); margin-left: 8px; transition: transform .18s; flex-shrink: 0; }
    .wsdd-display.wsdd-open .wsdd-arrow { transform: rotate(180deg); }
    .wsdd-panel {
      position: absolute; left: 0; right: 0; top: 100%; z-index: 9999;
      background: var(--surface); border: 1.5px solid var(--accent);
      border-top: none; border-radius: 0 0 var(--r-sm) var(--r-sm);
      box-shadow: 0 8px 32px rgba(26,79,163,.18);
    }
    /* Drop-up: opens above the field when there isn't enough room below */
    .wsdd-panel.wsdd-up {
      top: auto; bottom: 100%;
      border-top: 1.5px solid var(--accent); border-bottom: none;
      border-radius: var(--r-sm) var(--r-sm) 0 0;
      box-shadow: 0 -8px 32px rgba(26,79,163,.18);
    }
    .wsdd-search {
      width: 100%; padding: 8px 12px; border: none; border-bottom: 1px solid var(--border);
      background: var(--surface2); color: var(--text);
      font-family: var(--font-body); font-size: 13px; outline: none;
    }
    /* Combobox mode: the panel's search box visually replaces the field itself */
    .wsdd-panel.wsdd-as-field {
      position: absolute; left: 0; right: 0; top: 0; z-index: 9999;
      border: 1.5px solid var(--accent); border-radius: var(--r-sm);
      box-shadow: 0 8px 32px rgba(26,79,163,.18); overflow: hidden;
    }
    .wsdd-panel.wsdd-as-field.wsdd-up { top: auto; bottom: 0; }
    .wsdd-panel.wsdd-as-field .wsdd-search {
      padding: 9px 13px 9px 30px; min-height: 40px; font-size: 13px;
      border-bottom: 1px solid var(--border);
    }
    .wsdd-list { max-height: 220px; overflow-y: auto; }
    .wsdd-item {
      padding: 9px 13px; font-size: 13px; cursor: pointer;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 8px;
      transition: background .1s; color: var(--text);
    }
    .wsdd-item:last-child { border-bottom: none; }
    .wsdd-item:hover { background: rgba(26,79,163,.07); }
    .wsdd-item.wsdd-selected { background: rgba(26,79,163,.1); color: var(--accent); font-weight: 600; }
    .wsdd-empty { padding: 10px 13px; font-size: 12.5px; color: var(--text3); text-align: center; }

    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }

    ::-webkit-scrollbar-track {
      background: var(--surface);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px;
    }

    /* ══ SETTINGS PAGE — consolidated layout ══ */
    .stg-folder {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 20px;
      transition: box-shadow .2s;
    }
    .stg-folder:hover { box-shadow: var(--shadow); }
    .stg-folder-head {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 22px;
      border-bottom: 1.5px solid var(--border);
      background: var(--surface2);
      cursor: pointer;
      user-select: none;
    }
    .stg-folder-icon {
      width: 40px; height: 40px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 19px; flex-shrink: 0;
    }
    .stg-folder-title { font-family: var(--font-head); font-size: 14.5px; font-weight: 800; color: var(--text); }
    .stg-folder-sub   { font-size: 12px; color: var(--text3); margin-top: 2px; }
    .stg-folder-chevron { margin-left: auto; color: var(--text3); font-size: 13px; transition: transform .22s; flex-shrink: 0; }
    .stg-folder.open .stg-folder-chevron { transform: rotate(180deg); }
    .stg-folder-body { padding: 22px; display: none; }
    .stg-folder.open .stg-folder-body { display: block; }
    .stg-badge {
      font-size: 10px; font-weight: 800; padding: 3px 10px;
      border-radius: 99px; letter-spacing: .6px; flex-shrink: 0;
    }
    .stg-badge-admin  { background: rgba(26,79,163,.1);  color: var(--accent); }
    .stg-badge-auto   { background: rgba(26,115,64,.1);  color: var(--success); }
    .stg-badge-manual { background: rgba(230,126,0,.1);  color: var(--warn); }
    /* Provider radio cards */
    .stg-provider-card {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 16px 18px; border: 2px solid var(--border2);
      border-radius: 13px; cursor: pointer; transition: all .2s;
      background: var(--surface2);
    }
    .stg-provider-card.selected {
      border-color: var(--accent);
      background: rgba(26,79,163,.04);
      box-shadow: 0 0 0 3px rgba(26,79,163,.08);
    }
    /* Toggle switch (re-used for permissions) */
    .stg-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 14px; background: var(--surface2);
      border: 1px solid var(--border); border-radius: 10px;
    }
    .stg-toggle-row + .stg-toggle-row { margin-top: 8px; }
    /* Section label inside a folder */
    .stg-section-label {
      font-size: 10px; font-weight: 800; text-transform: uppercase;
      letter-spacing: 1.2px; color: var(--accent);
      margin: 18px 0 10px; padding-bottom: 6px;
      border-bottom: 1px solid var(--border);
    }
    .stg-section-label:first-child { margin-top: 0; }
    /* ── INVITATION MODAL ── */
    .invite-avatar-upload {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:10px; padding:18px; background:var(--surface2);
      border:2px dashed var(--border2); border-radius:16px;
      cursor:pointer; transition:border-color .2s, background .2s;
      position:relative;
    }
    .invite-avatar-upload:hover { border-color:var(--accent); background:var(--accent-subtle); }
    .invite-avatar-preview {
      width:72px; height:72px; border-radius:50%;
      object-fit:cover; display:none;
      border:3px solid var(--accent); box-shadow: 0 4px 16px var(--accent-glow);
    }
    .invite-avatar-placeholder {
      width:72px; height:72px; border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent-light));
      display:flex; align-items:center; justify-content:center;
      font-size:28px; color:#fff; font-weight:800; font-family:var(--font-head);
    }
    .invite-uid-badge {
      display:inline-flex; align-items:center; gap:8px;
      background:linear-gradient(135deg,rgba(26,79,163,.08),rgba(26,79,163,.04));
      border:1.5px solid rgba(26,79,163,.2); border-radius:12px;
      padding:10px 16px; font-family:monospace;
      font-size:15px; font-weight:800; color:var(--accent); letter-spacing:1px;
    }
    .invite-step { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
    .invite-step-num {
      width:26px; height:26px; border-radius:50%; flex-shrink:0;
      background:var(--accent); color:#fff;
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:800; font-family:var(--font-head);
    }
    /* ── CHANGE PASSWORD MODAL ── */
    .cp-strength-bar {
      height:4px; border-radius:4px; background:var(--border);
      overflow:hidden; margin-top:6px;
    }
    .cp-strength-fill {
      height:100%; border-radius:4px; width:0%;
      transition: width .35s, background .35s;
    }

    /* ── FIRST-OFFER INTERSTITIAL — Fintech Pro ── */
    #offer-interstitial {
      display:none; position:fixed; inset:0; z-index:99999;
      background:rgba(6,12,34,.84); backdrop-filter:blur(14px) saturate(1.5);
      align-items:center; justify-content:center;
    }
    #offer-interstitial.oi-active { display:flex; }
    .oi-card {
      background:linear-gradient(160deg,#ffffff 0%,#f4f7ff 100%);
      border-radius:32px; padding:24px 40px 32px;
      max-width:400px; width:92%; text-align:center;
      box-shadow:0 40px 100px rgba(10,25,80,.32), 0 0 0 1px rgba(26,79,163,.1);
      position:relative; overflow:hidden;
      animation:oi-rise .42s cubic-bezier(.34,1.46,.64,1) both;
    }
    .oi-card::before {
      content:''; position:absolute; inset:0; pointer-events:none;
      background:radial-gradient(ellipse 70% 45% at 50% -10%,rgba(26,79,163,.07) 0%,transparent 70%),
                 radial-gradient(ellipse 50% 30% at 110% 110%,rgba(44,111,255,.05) 0%,transparent 60%);
    }
    .oi-card::after {
      content:''; position:absolute; inset:0; pointer-events:none; opacity:.025;
      background-image:linear-gradient(rgba(26,79,163,1) 1px,transparent 1px),
                       linear-gradient(90deg,rgba(26,79,163,1) 1px,transparent 1px);
      background-size:28px 28px;
    }
    @keyframes oi-rise {
      from { opacity:0; transform:translateY(32px) scale(.94); }
      to   { opacity:1; transform:translateY(0)    scale(1);   }
    }
    /* ── Orbital animation ── */
    .oi-orbital {
      width:96px; height:96px; margin:0 auto 28px;
      position:relative; display:flex; align-items:center; justify-content:center;
    }
    .oi-orbital::before {
      content:''; position:absolute; inset:0; border-radius:50%;
      border:1.5px solid transparent;
      border-top-color:rgba(26,79,163,.15); border-right-color:rgba(26,79,163,.08);
      animation:oi-spin-r 3.2s linear infinite reverse;
    }
    .oi-orbital::after {
      content:''; position:absolute; inset:10px; border-radius:50%;
      border:2px solid transparent;
      border-top-color:#1a4fa3; border-right-color:#2c6fff;
      border-bottom-color:rgba(26,79,163,.15);
      animation:oi-spin-r 1.4s cubic-bezier(.5,0,.5,1) infinite;
    }
    .oi-orbit-inner {
      position:absolute; inset:20px; border-radius:50%;
      border:1.5px dashed rgba(26,79,163,.12);
      animation:oi-spin-r 4s linear infinite;
    }
    .oi-orbit-dot {
      position:absolute; inset:10px; border-radius:50%;
      animation:oi-spin-r 1.4s cubic-bezier(.5,0,.5,1) infinite;
    }
    .oi-orbit-dot::after {
      content:''; position:absolute; top:-3px; left:50%; transform:translateX(-50%);
      width:6px; height:6px; border-radius:50%; background:#2c6fff;
      box-shadow:0 0 10px rgba(44,111,255,.8);
    }
    @keyframes oi-spin-r { to { transform:rotate(360deg); } }
    .oi-icon-wrap {
      width:52px; height:52px; border-radius:14px; position:relative; z-index:2;
      background:linear-gradient(140deg,#1a4fa3 0%,#2c6fff 100%);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 8px 24px rgba(26,79,163,.38), 0 0 0 4px rgba(26,79,163,.08);
    }
    .oi-icon-wrap svg { width:26px; height:26px; }
    /* ── Text ── */
    .oi-title {
      font-family:var(--font-head); font-size:20px; font-weight:800;
      color:var(--text); margin-bottom:7px; letter-spacing:-.3px;
    }
    .oi-sub { font-size:12.5px; color:var(--text3); line-height:1.65; margin-bottom:20px; font-weight:500; }
    /* ── Analysis Cards ── */
    .oi-steps {
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:8px; margin-bottom:22px;
    }
    .oi-step-chip {
      position:relative; overflow:hidden;
      background:rgba(26,79,163,.04);
      border:1px solid rgba(26,79,163,.1);
      border-radius:12px; padding:10px 8px 9px;
      text-align:center; transition:background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
    }
    /* icon circle */
    .oi-chip-icon {
      width:30px; height:30px; border-radius:8px; margin:0 auto 6px;
      display:flex; align-items:center; justify-content:center;
      background:rgba(26,79,163,.08);
      transition:background .35s ease;
    }
    .oi-chip-icon svg { width:15px; height:15px; }
    /* label */
    .oi-chip-label {
      font-size:9.5px; font-weight:700; letter-spacing:.3px;
      color:var(--text3); text-transform:uppercase;
      transition:color .35s ease; line-height:1.2;
    }
    /* scan line — idle hidden */
    .oi-chip-scan {
      position:absolute; bottom:0; left:0; right:0; height:2px;
      background:rgba(26,79,163,.12); overflow:hidden;
    }
    .oi-chip-scan::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(90deg,transparent 0%,#2c6fff 50%,transparent 100%);
      transform:translateX(-100%);
      transition:none;
    }
    /* done tick */
    .oi-chip-tick {
      position:absolute; top:6px; right:6px;
      width:14px; height:14px; border-radius:50%;
      background:rgba(26,115,64,.12);
      display:flex; align-items:center; justify-content:center;
      opacity:0; transform:scale(.6);
      transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    }
    .oi-chip-tick svg { width:8px; height:8px; }

    /* ── ACTIVE state ── */
    .oi-step-chip.active {
      background:rgba(26,79,163,.07);
      border-color:rgba(44,111,255,.35);
      box-shadow:0 0 0 3px rgba(44,111,255,.08);
    }
    .oi-step-chip.active .oi-chip-icon {
      background:linear-gradient(135deg,#1a4fa3,#2c6fff);
      box-shadow:0 4px 12px rgba(26,79,163,.3);
    }
    .oi-step-chip.active .oi-chip-icon svg path,
    .oi-step-chip.active .oi-chip-icon svg polyline,
    .oi-step-chip.active .oi-chip-icon svg rect,
    .oi-step-chip.active .oi-chip-icon svg circle { stroke:#fff; }
    .oi-step-chip.active .oi-chip-label { color:#1a4fa3; }
    .oi-step-chip.active .oi-chip-scan::after {
      animation:oi-scan 1.1s ease-in-out infinite;
    }
    @keyframes oi-scan {
      0%   { transform:translateX(-100%); }
      100% { transform:translateX(100%); }
    }
    /* pulse ring on active icon */
    .oi-step-chip.active .oi-chip-icon::after {
      content:''; position:absolute; inset:-3px; border-radius:10px;
      border:1.5px solid rgba(44,111,255,.4);
      animation:oi-chip-pulse 1.4s ease-in-out infinite;
    }
    .oi-chip-icon { position:relative; }
    @keyframes oi-chip-pulse {
      0%,100%{ opacity:1; transform:scale(1);    }
      50%    { opacity:0; transform:scale(1.25); }
    }

    /* ── DONE state ── */
    .oi-step-chip.done {
      background:rgba(26,115,64,.05);
      border-color:rgba(26,115,64,.2);
    }
    .oi-step-chip.done .oi-chip-icon {
      background:rgba(26,115,64,.1);
      box-shadow:none;
    }
    .oi-step-chip.done .oi-chip-icon svg path,
    .oi-step-chip.done .oi-chip-icon svg polyline,
    .oi-step-chip.done .oi-chip-icon svg rect,
    .oi-step-chip.done .oi-chip-icon svg circle { stroke:#1a7340; }
    .oi-step-chip.done .oi-chip-label { color:#1a7340; }
    .oi-step-chip.done .oi-chip-scan { background:rgba(26,115,64,.15); }
    .oi-step-chip.done .oi-chip-scan::after { animation:none; transform:translateX(0); background:#1a7340; }
    .oi-step-chip.done .oi-chip-tick { opacity:1; transform:scale(1); }
    /* ── Progress bar ── */
    .oi-bar-track { height:3px; border-radius:3px; background:rgba(26,79,163,.08); overflow:hidden; margin-bottom:14px; }
    .oi-bar-fill {
      height:100%; border-radius:3px;
      background:linear-gradient(90deg,#1a4fa3,#2c6fff,#6fa3ff);
      background-size:200% 100%; width:0%;
      transition:width 2.8s cubic-bezier(.25,.46,.45,.94);
      animation:oi-shimmer 1.8s linear infinite;
    }
    @keyframes oi-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    /* ── Hint ── */
    .oi-hint {
      font-size:11px; color:var(--text3); min-height:16px; font-weight:500;
      display:flex; align-items:center; justify-content:center; gap:6px;
    }
    .oi-hint::before {
      content:''; width:5px; height:5px; border-radius:50%;
      background:#2c6fff; display:inline-block; flex-shrink:0;
      animation:oi-pulse-dot 1.2s ease-in-out infinite;
    }
    @keyframes oi-pulse-dot {
      0%,100%{ opacity:.4; transform:scale(.8); }
      50%    { opacity:1;  transform:scale(1.2); }
    }
    .oi-dots { display:none; }
    /* Data-summary strip in step 6 */


    /* ── LOGIN SCREEN ── */
    /* ══ LOGIN PAGE — Split Layout ══════════════════════════════ */
    .login-screen {
      position: fixed;
      inset: 0;
      z-index: 999;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      background: #040d1a;
    }

    /* Animated background */
    .lp-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .lp-bg .lp-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(26,79,163,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,79,163,.07) 1px, transparent 1px);
      background-size: 48px 48px;
    }
    .lp-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      opacity: .55;
      animation: lp-drift 12s ease-in-out infinite alternate;
    }
    .lp-orb1 { width:520px;height:520px;background:rgba(26,79,163,.35);top:-100px;left:-80px;animation-delay:0s; }
    .lp-orb2 { width:380px;height:380px;background:rgba(99,37,180,.28);bottom:-60px;right:38%;animation-delay:4s; }
    .lp-orb3 { width:300px;height:300px;background:rgba(6,182,212,.18);top:30%;right:-60px;animation-delay:8s; }
    @keyframes lp-drift {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(30px,20px) scale(1.08); }
    }

    /* Left branding panel */
    .lp-left {
      flex: 0 0 46%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 48px 56px;
      position: relative;
      z-index: 1;
    }
    .lp-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 16px;
      background: rgba(255,255,255,.15);
      border: 1.5px solid rgba(255,255,255,.35);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: .6px;
      margin-bottom: 28px;
      width: fit-content;
      text-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
    .lp-headline {
      font-size: clamp(30px, 3.5vw, 48px);
      font-weight: 900;
      color: #ffffff;
      line-height: 1.08;
      letter-spacing: -1.5px;
      margin: 0 0 20px;
      font-family: var(--font-head);
      text-shadow: 0 2px 12px rgba(0,0,0,.25);
    }
    .lp-hl-accent {
      background: linear-gradient(135deg, #7dd3fc, #38bdf8, #a5b4fc);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      filter: drop-shadow(0 0 8px rgba(56,189,248,.4));
    }
    .lp-desc {
      font-size: 15px;
      color: rgba(255,255,255,.88);
      line-height: 1.7;
      max-width: 400px;
      margin: 0 0 28px;
      text-shadow: 0 1px 4px rgba(0,0,0,.2);
      font-weight: 400;
    }
    .lp-stats {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .lp-stat { display: flex; flex-direction: column; gap: 2px; }
    .lp-stat-num { font-size: 14px; font-weight: 800; color: #e2e8f0; }
    .lp-stat-lbl { font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: .6px; }
    .lp-stat-div { width: 1px; height: 32px; background: rgba(255,255,255,.1); }

    /* Right form panel */
    .lp-right {
      flex: 0 0 54%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 44px;
      position: relative;
      z-index: 1;
    }
    .lp-right::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,.032);
      backdrop-filter: blur(24px);
      border-left: 1px solid rgba(255,255,255,.07);
    }

    .login-box {
      background: rgba(10,20,40,.75);
      border: 1px solid rgba(96,165,250,.15);
      border-radius: 24px;
      padding: 44px 40px;
      width: 100%;
      max-width: 440px;
      box-shadow: 0 32px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04) inset;
      position: relative;
      backdrop-filter: blur(20px);
    }

    /* Logo row */
    .lp-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 6px;
      padding: 10px 18px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(26,79,163,.07);
      border: 1px solid rgba(26,79,163,.06);
    }
    /* Legacy ring - kept for compatibility, hidden by default */
    .lp-logo-ring {
      width: 52px; height: 52px;
      border-radius: 14px;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      box-shadow: 0 4px 16px rgba(0,0,0,.3);
      flex-shrink: 0;
    }
    .lp-product-sub-line {
      text-align: center;
      margin-bottom: 10px;
    }
    .lp-product-name {
      font-size: 18px; font-weight: 900;
      color: #f1f5f9;
      font-family: var(--font-head);
      letter-spacing: -.3px;
    }
    .lp-product-sub {
      font-size: 10.5px; color: #7a8aaa;
      text-transform: uppercase; letter-spacing: 1.2px;
      font-weight: 700; margin-top: 1px;
    }
    .lp-divider {
      height: 1px; background: rgba(0,0,0,.07);
      margin-bottom: 12px;
    }
    .lp-form-title {
      display: none;  /* Hidden — logo replaces the title */
    }
    .lp-form-sub {
      font-size: 13px; color: #64748b;
      margin: 0 0 16px;
    }

    /* Fields */
    .lp-field { margin-bottom: 14px; }
    .login-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: #94a3b8;
      font-weight: 700;
      display: block;
      margin-bottom: 7px;
    }
    .login-input {
      width: 100%;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px;
      padding: 12px 16px;
      color: #f1f5f9;
      font-family: var(--font-body);
      font-size: 13.5px;
      outline: none;
      margin-bottom: 0;
      transition: border-color .18s, box-shadow .18s, background .18s;
      box-sizing: border-box;
    }
    .login-input::placeholder { color: #475569; }
    .login-input:focus {
      border-color: #3b82f6;
      background: rgba(59,130,246,.08);
      box-shadow: 0 0 0 3px rgba(59,130,246,.18);
    }

    /* Remember me */
    .lp-remember {
      display: flex; align-items: center; gap: 8px;
      cursor: pointer; font-size: 12.5px; color: #94a3b8;
      user-select: none;
    }
    .lp-checkbox { display: none; }
    .lp-check-box {
      width: 16px; height: 16px;
      border: 1.5px solid rgba(255,255,255,.2);
      border-radius: 4px;
      background: rgba(255,255,255,.05);
      display: flex; align-items: center; justify-content: center;
      transition: all .15s; flex-shrink: 0;
    }
    .lp-checkbox:checked + .lp-check-box {
      background: #3b82f6;
      border-color: #3b82f6;
    }
    .lp-checkbox:checked + .lp-check-box::after {
      content: '';
      display: block;
      width: 8px; height: 5px;
      border-left: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg) translateY(-1px);
    }
    .lp-forgot-btn {
      background: none; border: none;
      color: #60a5fa; font-size: 12.5px;
      cursor: pointer; font-weight: 600; padding: 0;
      transition: color .15s;
    }
    .lp-forgot-btn:hover { color: #93c5fd; }

    /* Error / lockout boxes */
    .lp-error-box {
      font-size: 12.5px; margin-bottom: 14px;
      text-align: center;
      background: rgba(239,68,68,.1);
      border: 1px solid rgba(239,68,68,.25);
      color: #fca5a5;
      padding: 10px 14px; border-radius: 10px;
      animation: fadeIn .2s ease;
    }
    .lp-lockout-box {
      font-size: 12px; margin-bottom: 12px;
      text-align: center;
      background: rgba(245,158,11,.08);
      border: 1px solid rgba(245,158,11,.22);
      color: #fcd34d;
      padding: 8px 12px; border-radius: 8px;
    }

    /* Sign In button */
    .login-btn {
      width: 100%;
      background: linear-gradient(135deg, #1d4ed8, #2563eb);
      color: #fff;
      border: none;
      border-radius: 11px;
      padding: 13px 20px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(37,99,235,.4), 0 0 0 1px rgba(255,255,255,.08) inset;
      transition: all .2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      letter-spacing: .2px;
    }
    .login-btn:hover {
      background: linear-gradient(135deg, #1e40af, #1d4ed8);
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(37,99,235,.5), 0 0 0 1px rgba(255,255,255,.1) inset;
    }
    .login-btn:active { transform: translateY(0); }

    /* Hint box */
    .lp-hint-box {
      margin-top: 16px; padding: 12px 14px;
      background: rgba(59,130,246,.08);
      border: 1px solid rgba(59,130,246,.2);
      border-radius: 10px; font-size: 11.5px;
      color: #94a3b8; line-height: 1.6;
    }

    /* Forgot password */
    .lp-forgot-header { text-align: center; margin-bottom: 24px; }
    .lp-forgot-icon { font-size: 36px; margin-bottom: 10px; }
    .lp-back-btn {
      width: 100%; margin-top: 10px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.1);
      color: #94a3b8; font-size: 13px; font-weight: 600;
      padding: 11px; border-radius: 10px;
      cursor: pointer; transition: all .15s;
    }
    .lp-back-btn:hover { background: rgba(255,255,255,.08); color: #e2e8f0; }

    /* Footer */
    .lp-footer {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; margin-top: 24px;
      font-size: 11px; color: #334155;
    }

    /* Entrance animations */
    @keyframes lp-fade-up {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .lp-left > * { animation: lp-fade-up .6s ease-out both; }
    .lp-left > *:nth-child(1) { animation-delay: .05s; }
    .lp-left > *:nth-child(2) { animation-delay: .15s; }
    .lp-left > *:nth-child(3) { animation-delay: .25s; }
    .lp-left > *:nth-child(4) { animation-delay: .35s; }
    .login-box { animation: lp-fade-up .5s .1s ease-out both; }

    /* Mobile: stack vertically */
    @media (max-width: 768px) {
      .login-screen { flex-direction: column; overflow-y: auto; }
      .lp-left { display: none; }
      .lp-right { flex: 1; padding: 24px 20px; min-height: 100vh; }
      .lp-right::before { display: none; }
      .login-box { padding: 32px 24px; max-width: 100%; background: transparent; border: none; box-shadow: none; }
    }

    .login-logo {
      font-family: var(--font-head);
      font-size: 32px;
      font-weight: 800;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 4px;
    }

    .login-sub {
      font-size: 12px;
      color: var(--text3);
      letter-spacing: 1.8px;
      text-transform: uppercase;
      margin-bottom: 32px;
    }

    .login-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text3);
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
    }

    .login-input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 11px 14px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      outline: none;
      margin-bottom: 14px;
      transition: border-color .18s, box-shadow .18s;
    }

    .login-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .login-select {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 11px 14px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      outline: none;
      margin-bottom: 20px;
      cursor: pointer;
    }

    .login-select option {
      background: var(--surface2);
    }

    .login-btn {
      width: 100%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: var(--r-sm);
      padding: 12px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(26, 79, 163, .28);
      transition: all .2s;
    }

    .login-btn:hover {
      background: #1a5bc7;
      transform: translateY(-1px);
      box-shadow: 0 8px 28px rgba(26, 79, 163, .4);
    }

    .login-roles {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
    }

    .login-roles-title {
      font-size: 10px;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }

    .role-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .role-pill {
      padding: 4px 10px;
      border-radius: 99px;
      font-size: 10.5px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border2);
      color: var(--text3);
      transition: all .15s;
    }

    .role-pill:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-glow);
    }

    /* ══════════════════════════════════════════════════════════
       SIDEBAR — Hover-to-expand (collapsed ↔ expanded on hover)
       Collapsed: 64px wide, icons only
       Expanded:  260px wide, icons + labels (on cursor hover)
    ══════════════════════════════════════════════════════════ */

    /* ── Base sidebar: always collapsed (icon-rail) by default ── */
    .sidebar {
      width: var(--sidebar-collapsed-w);
      background: #ffffff;
      border-right: 1px solid #ebebeb;
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0; left: 0; bottom: 0;
      z-index: 200;
      overflow: hidden;
      /* Smooth expand/collapse */
      transition: width .28s cubic-bezier(.4,0,.2,1),
                  box-shadow .28s ease;
      box-shadow: 1px 0 0 #ebebeb, 2px 0 12px rgba(0,0,0,.05);
      /* Clip text so nothing leaks in collapsed state */
      white-space: nowrap;
    }

    /* ── Expanded on hover — always active on non-touch devices ──
       Removed min-width breakpoint so zoom doesn't collapse sidebar */
    @media (hover: hover) {
      .sidebar:hover {
        width: var(--sidebar-w);
        box-shadow: 4px 0 28px rgba(0,0,0,.10);
      }
    }

    /* ── Main area always offset by collapsed width ──
       Never changes regardless of zoom level */
    .main {
      margin-left: var(--sidebar-collapsed-w);
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      min-width: 0;           /* critical: flex child must not overflow */
      overflow-x: hidden;     /* clip anything that escapes a table-wrap */
      transition: margin-left .28s cubic-bezier(.4,0,.2,1);
    }

    /* ── Logo / Brand area ── */
    .sidebar-logo {
      padding: 0;
      border-bottom: 1px solid #f0f0f0;
      flex-shrink: 0;
      background: #fff;
      overflow: hidden;
    }

    /* ══ Dual-logo zone — stacked crossfade layout ══
       Collapsed  → icon logo centred in the 64 px rail
       Expanded   → banner logo fades in, icon fades out          */
    .dual-logo-zone {
      position: relative;
      height: 68px;          /* fixed height so sidebar never jumps */
      overflow: hidden;
    }

    /* ── Icon logo slot ──
       Visible when collapsed; fades out when sidebar expands */
    .logo-icon-slot {
      position: absolute;
      top: 50%; left: 0;
      width: var(--sidebar-collapsed-w);   /* 64 px — lines up with icon rail */
      transform: translateY(-50%);
      display: flex; align-items: center; justify-content: center;
      /* fade OUT on expand */
      opacity: 1;
      transition: opacity .2s .04s;
      z-index: 2;
    }
    .sidebar:hover .logo-icon-slot {
      opacity: 0;
      pointer-events: none;
    }
    .logo-icon-box {
      width: 44px; height: 44px;
      border-radius: 10px;
      border: 1.5px dashed #d0d8e8;
      background: #f5f7ff;
      display: flex; align-items: center; justify-content: center;
      position: relative; overflow: hidden;
      transition: width .2s, height .2s;
    }

    /* ── Banner logo slot ──
       Hidden when collapsed; fades in, slides left when sidebar expands */
    .logo-banner-slot {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex; align-items: center;
      padding: 0 16px;
      /* fade IN on expand */
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity .24s .06s, transform .24s .06s;
      pointer-events: none;
      z-index: 1;
    }
    .sidebar:hover .logo-banner-slot {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    .logo-banner-box {
      position: relative;
      width: 100%; height: 50px;
      border-radius: 10px;
      border: 1.5px dashed #d0d8e8;
      background: #f5f7ff;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
      transition: height .2s;
      padding: 6px 12px;
    }
    /* When a banner image has been uploaded, remove the dashed border */
    .logo-banner-box.has-image {
      border-color: transparent;
      background: transparent;
    }
    /* When an icon image has been uploaded, remove the dashed border */
    .logo-icon-box.has-image {
      border-color: transparent;
      background: transparent;
    }
    .logo-banner-default-text {
      display: flex; flex-direction: column; align-items: flex-start;
      pointer-events: none;
    }

    /* shared upload-hint overlay — used only inside the Settings branding panel */
    .logo-upload-hint {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: rgba(26,79,163,.08);
      opacity: 0; transition: opacity .2s;
      border-radius: inherit;
      font-size: 14px;
      z-index: 3;
    }

    .logo-default-icon {
      font-size: 20px; line-height: 1;
      display: flex; align-items: center; justify-content: center;
    }
    .logo-mark {
      font-family: var(--font-head);
      font-size: 18px; font-weight: 900;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      line-height: 1.15; white-space: nowrap;
    }
    .logo-sub {
      font-size: 8px; color: #b0b8cc;
      letter-spacing: .9px; text-transform: uppercase; margin-top: 2px;
      white-space: nowrap;
    }
    /* legacy selector kept for safety */
    .logo-file-input {
      position: absolute; opacity: 0; cursor: pointer;
      width: 40px; height: 40px; top: 16px; left: 12px;
    }

    /* ── Nav scroll area ── */
    .nav-scroll-area {
      flex: 1; overflow-y: auto; overflow-x: hidden;
      padding: 10px 0 8px;
    }
    .nav-scroll-area::-webkit-scrollbar { width: 3px; }
    .nav-scroll-area::-webkit-scrollbar-track { background: transparent; }
    .nav-scroll-area::-webkit-scrollbar-thumb { background: #e0e5f0; border-radius: 6px; }

    /* ── Section group ── */
    /* No horizontal padding — nav-items span full sidebar width so the
       64px icon rail stays perfectly centred over the collapsed rail */
    .nav-section { padding: 0 0 4px; }

    /* Section label — hidden in collapsed state, fades in on expand */
    .nav-section-header {
      display: flex; align-items: center; gap: 6px;
      /* Left padding = 64px icon rail so label lines up with text when expanded */
      padding: 10px 10px 4px 16px;
      cursor: pointer;
      user-select: none;
      overflow: hidden;
    }
    .nav-section-header:hover .nav-label { opacity: .85; }

    .nav-label {
      font-size: 9.5px; font-weight: 800;
      letter-spacing: 1.5px; text-transform: uppercase;
      color: var(--accent);
      flex: 1; white-space: nowrap;
      /* Hidden when collapsed, shown on hover-expand */
      opacity: 0;
      transition: opacity .2s .06s;
    }
    .sidebar:hover .nav-label { opacity: 1; }

    .nav-section-chevron {
      font-size: 8px; color: #c4cfe0;
      transition: transform .22s, opacity .2s;
      flex-shrink: 0;
      opacity: 0;  /* hidden when collapsed */
    }
    .sidebar:hover .nav-section-chevron { opacity: 1; }
    .nav-section.collapsed .nav-section-chevron { transform: rotate(-90deg); }
    .nav-section.collapsed .nav-section-items { display: none; }

    /* ── Individual nav item ── */
    .nav-item {
      display: flex; align-items: center; gap: 0;
      padding: 0;
      border-radius: 0;          /* full-width items — radius applied via bg clip */
      cursor: pointer;
      transition: background .15s, color .15s;
      font-size: 13.5px; color: #3d4a5e;
      font-weight: 500;
      position: relative;
      overflow: hidden;
      margin: 1px 0;
      min-height: 44px;
    }
    /* Rounded highlight only when sidebar is expanded */
    .sidebar:hover .nav-item {
      border-radius: 8px;
      margin: 1px 8px;
    }
    /* Keep icon width stable when margin shifts item inward */
    .sidebar:hover .nav-icon {
      width: 44px;
      min-width: 44px;
    }

    .nav-item:hover { background: #fef2f2; color: var(--accent2); }

    .nav-item.active {
      color: var(--accent2);
      font-weight: 700;
      background: #fff0f0;
    }

    /* Active left bar */
    .nav-item.active::before {
      content: '';
      position: absolute; left: 0; top: 15%; bottom: 15%;
      width: 3px;
      background: var(--accent2);
      border-radius: 0 3px 3px 0;
    }

    /* Collapsed state: active icon gets a soft pill background */
    .nav-item.active .nav-icon::after {
      content: '';
      position: absolute;
      width: 36px; height: 32px;
      background: rgba(212, 43, 43, .1);
      border-radius: 8px;
      z-index: -1;
    }
    .nav-item.active .nav-icon { position: relative; }
    /* Remove the pill when expanded (text is shown) */
    .sidebar:hover .nav-item.active .nav-icon::after { display: none; }
    .nav-item.hidden-nav { display: none; }

    /* ── Nav icon — centred in the 64px rail ── */
    .nav-icon {
      width: 64px;          /* full rail width — always visible, always centred */
      min-width: 64px;
      height: 44px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform .18s cubic-bezier(.4,0,.2,1), opacity .18s;
      opacity: .55;
    }
    .nav-icon svg {
      width: 18px;
      height: 18px;
      display: block;
      flex-shrink: 0;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .nav-item:hover  .nav-icon { opacity: 1; transform: scale(1.1); }
    .nav-item.active .nav-icon { opacity: 1; }
    .nav-item.active .nav-icon svg { stroke: var(--accent2); }
    .nav-item:hover .nav-icon svg { stroke: var(--accent2); }

    /* ── Nav label text — hidden in rail, slides in on expand ── */
    .nav-text {
      flex: 1;
      overflow: hidden; text-overflow: ellipsis;
      font-size: 13.5px;
      opacity: 0;
      transform: translateX(-8px);
      transition: opacity .2s .06s, transform .2s .06s;
      white-space: nowrap;
      /* Avoid clicking ghost text in collapsed mode */
      pointer-events: none;
    }
    .sidebar:hover .nav-text {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    /* ── Badge — hidden in collapsed, shown on expand ── */
    .nav-badge {
      margin-left: auto;
      margin-right: 12px;
      background: var(--accent);
      color: #fff;
      font-size: 9px; font-weight: 700;
      padding: 2px 6px;
      border-radius: 20px;
      min-width: 18px; text-align: center;
      flex-shrink: 0;
      opacity: 0;
      transition: opacity .2s .06s;
    }
    .sidebar:hover .nav-badge { opacity: 1; }
    .nav-badge.warn   { background: #f59e0b; }
    .nav-badge.danger { background: var(--danger); animation: badgePulse 2s ease-in-out infinite; }

    @keyframes badgePulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); }
      50%      { box-shadow: 0 0 0 4px rgba(192,57,43,0); }
    }

    /* Divider */
    .sidebar-divider {
      height: 1px; background: #f0f0f0;
      margin: 4px 0 8px;
    }
    .sidebar:hover .sidebar-divider {
      margin: 4px 8px 8px;
    }

    /* ── Tooltip on collapsed items (desktop) ── */
    @media (hover: hover) {
      .nav-item[data-tooltip]:not(.sidebar:hover .nav-item)::after {
        content: attr(data-tooltip);
        position: absolute;
        left: calc(var(--sidebar-collapsed-w) + 8px);
        top: 50%; transform: translateY(-50%);
        background: #1a2236;
        color: #fff;
        font-size: 12px; font-weight: 600;
        padding: 5px 10px;
        border-radius: 6px;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity .15s;
        z-index: 9999;
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
      }
    }

    /* ── Footer / User card ── */
    .sidebar-footer {
      margin-top: auto;
      padding: 10px 0 12px;
      border-top: 1px solid #f0f0f0;
      background: #fff;
      flex-shrink: 0;
      overflow: hidden;
    }

    .user-card {
      display: flex; align-items: center; gap: 0;
      padding: 0;
      border-radius: 0;
      cursor: pointer;
      transition: background .15s;
      overflow: hidden;
      min-height: 52px;
    }
    .user-card:hover { background: #fef2f2; }

    /* Avatar always visible in rail — centred */
    .avatar {
      width: 64px; height: 52px;
      border-radius: 0;
      background: transparent;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    /* The actual circle inside */
    .avatar-inner {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-head); font-weight: 800; font-size: 13px; color: #fff;
      box-shadow: 0 2px 8px rgba(212,43,43,.25);
      position: relative; overflow: hidden;
      flex-shrink: 0;
    }
    .avatar-inner::after {
      content: ''; position: absolute;
      top:-50%; left:-50%; width:200%; height:200%;
      background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,.18) 50%, transparent 60%);
      animation: shimmer 3s ease-in-out infinite;
    }
    @keyframes shimmer {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }

    /* User info text — hidden when collapsed, fades in on expand */
    .user-info {
      flex:1; min-width:0; overflow:hidden;
      opacity: 0; transform: translateX(-6px);
      transition: opacity .2s .06s, transform .2s .06s;
    }
    .sidebar:hover .user-info {
      opacity: 1; transform: translateX(0);
    }
    .user-name { font-size: 12.5px; font-weight: 700; color: #1a2236; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .user-role { font-size: 10.5px; color: #8898b8; }

    .status-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 6px rgba(34,197,94,.55);
      flex-shrink: 0;
      margin-right: 12px;
      opacity: 0;
      transition: opacity .2s .06s;
      animation: pulse-dot 2.5s ease-in-out infinite;
    }
    .sidebar:hover .status-dot { opacity: 1; }

    @keyframes pulse-dot {
      0%,100% { box-shadow:0 0 6px rgba(34,197,94,.55); }
      50%      { box-shadow:0 0 10px rgba(34,197,94,.3); }
    }

    .role-badge-sidebar {
      font-size: 9.5px; padding: 1px 7px; border-radius: 99px;
      font-weight: 700; letter-spacing: .3px;
      margin-top: 1px; display: inline-block;
    }
    .role-badge-admin  { background: rgba(26,79,163,.1);   color: var(--accent); }
    .role-badge-login  { background: rgba(212,43,43,.1);   color: var(--accent2); }
    .role-badge-tl     { background: rgba(161,89,255,.12); color: #8b5cf6; }
    .role-badge-sales  { background: rgba(245,158,11,.12); color: #d97706; }
    .role-badge-partner { background: rgba(100,116,139,.12);color: #64748b; }
    .role-badge-accounts{ background: rgba(16,185,129,.12); color: #059669; }
    .role-badge-product { background: rgba(236,72,153,.12); color: #db2777; }

    /* Manage Menu button — collapses to icon only in rail */
    .admin-gear-rail {
      display: flex; align-items: center; justify-content: center;
      width: 64px; height: 40px;
      cursor: pointer;
      border: none; background: transparent;
      font-size: 18px; opacity: .5;
      transition: opacity .15s;
    }
    .admin-gear-rail:hover { opacity: 1; background: #fef2f2; }
    .admin-gear-label {
      flex:1; font-size: 12px; font-weight: 700; color: var(--accent2);
      opacity: 0; transform: translateX(-6px);
      transition: opacity .2s .06s, transform .2s .06s;
      white-space: nowrap; overflow: hidden;
    }
    .sidebar:hover .admin-gear-label { opacity: 1; transform: translateX(0); }

    /* ── Right edge accent line ── */
    .sidebar-hover-indicator {
      position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
      background: linear-gradient(180deg, transparent, var(--accent2) 40%, rgba(212,43,43,.08) 80%, transparent);
      opacity: 0; transition: opacity .28s;
    }
    .sidebar:hover .sidebar-hover-indicator { opacity: .5; }

    .topbar {
      background: rgba(255, 255, 255, .92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      padding: 14px 32px;
      display: flex;
      align-items: center;
      gap: 16px;
      position: sticky;
      top: 0;
      z-index: 50;
      overflow: visible;
      flex-wrap: nowrap;
      min-width: 0;
    }

    .topbar-title {
      font-family: var(--font-head);
      font-size: 17px;
      font-weight: 700;
      flex: 1;
      letter-spacing: -.3px;
    }

    .topbar-search {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 8px 14px 8px 36px;
      color: var(--text);
      font-size: 13px;
      font-family: var(--font-body);
      width: 240px;
      min-width: 80px;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }

    .search-wrap {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 1;
      min-width: 0;
    }

    .search-wrap::before {
      content: none; /* icon removed — selector takes left side */
    }

    /* When search-wrap has the field-selector layout, adjust the input */
    #topbar-search-wrap .topbar-search {
      border-radius: 0 9px 9px 0 !important;
      border-left: none !important;
      padding-left: 14px !important;
      width: 180px;
      min-width: 60px;
      flex-shrink: 1;
    }

    #topbar-search-wrap select {
      flex-shrink: 0;
      width: 120px;
      min-width: 90px;
    }

    #topbar-search-wrap select:focus,
    #topbar-search-wrap .topbar-search:focus {
      z-index: 1;
      position: relative;
    }

    .topbar-search:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    /* ── In-page search input (DSA / Partner pages) ── */
    .page-search-input {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 9px 14px;
      color: var(--text);
      font-size: 13px;
      font-family: var(--font-body);
      width: 100%;
      outline: none;
      transition: border-color .2s, box-shadow .2s;
    }
    .page-search-input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .page-search-input::placeholder { color: var(--text3); }

    .topbar-icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      border: 1px solid var(--border2);
      background: var(--surface2);
      color: var(--text2);
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      position: relative;
      flex-shrink: 0;
    }

    .topbar-icon-btn:hover {
      border-color: var(--accent);
      color: var(--text);
    }

    .topbar-notif-dot {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--danger);
      border: 1.5px solid var(--surface);
      box-shadow: 0 0 6px rgba(255, 69, 96, .6);
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 18px;
      border-radius: var(--r-sm);
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      border: none;
      transition: all .18s;
      letter-spacing: .1px;
    }

    .btn-primary {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 12px rgba(26, 79, 163, .22);
    }

    .btn-primary:hover {
      background: #1a5bc7;
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      border: 1px solid var(--border2);
      color: var(--text2);
    }

    .btn-ghost:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .btn-danger {
      background: rgba(255, 69, 96, .12);
      color: var(--danger);
      border: 1px solid rgba(255, 69, 96, .25);
    }

    .btn-danger:hover {
      background: rgba(255, 69, 96, .2);
    }

    .btn-success {
      background: rgba(26, 115, 64, .1);
      color: var(--success);
      border: 1px solid rgba(26, 115, 64, .25);
    }

    .btn-success:hover {
      background: rgba(26, 115, 64, .2);
      box-shadow: 0 2px 8px rgba(26, 115, 64, .25);
    }

    .btn-warn {
      background: rgba(255, 179, 71, .12);
      color: var(--warn);
      border: 1px solid rgba(255, 179, 71, .25);
    }

    .btn-warn:hover {
      background: rgba(255, 179, 71, .2);
    }

    .btn-info {
      background: rgba(0, 200, 255, .12);
      color: #1a4fa3;
      border: 1px solid rgba(0, 200, 255, .25);
    }

    .btn-info:hover {
      background: rgba(0, 200, 255, .2);
    }

    .btn-sm {
      padding: 5px 12px;
      font-size: 11.5px;
    }

    .btn:disabled {
      opacity: .4;
      cursor: not-allowed;
      transform: none !important;
    }

    /* ── PAGE ── */
    .page {
      padding: 32px;
      display: none;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      overflow-x: visible;
    }

    .page.active {
      display: block;
      animation: pageFadeIn .25s ease;
    }

    /* ── Table overflow control ── */
    /* Ensure all table containers scroll instead of blowing out */
    .table-wrap, .tracking-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* prevent the container itself from expanding beyond its parent */
      max-width: 100%;
    }

    /* Cell text truncation for long-content columns */
    td.cell-truncate {
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    td.cell-sm {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    td.cell-xs {
      max-width: 72px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Payout tables — 14 columns — hide least-critical at medium widths */
    @media (max-width: 1200px) {
      #claims-table th:nth-child(10),   /* Disb. Date */
      #claims-table td:nth-child(10),
      #claims-table th:nth-child(7),    /* Claim Amount */
      #claims-table td:nth-child(7),
      #mgmt-claims-table th:nth-child(10), /* Disbursed */
      #mgmt-claims-table td:nth-child(10) { display: none; }
    }
    @media (max-width: 1000px) {
      #claims-table th:nth-child(9),    /* Claim Month */
      #claims-table td:nth-child(9),
      #claims-table th:nth-child(4),    /* Product */
      #claims-table td:nth-child(4),
      #mgmt-claims-table th:nth-child(9), /* Month */
      #mgmt-claims-table td:nth-child(9),
      #mgmt-claims-table th:nth-child(5),
      #mgmt-claims-table td:nth-child(5) { display: none; }
    }

    /* ── Users table responsive — 9 cols ──────────────────────────────
       Column order: 1=Name 2=UID 3=Email 4=Role 5=Status 6=Locations
                     7=Sales Teams 8=Op Teams 9=Actions
       Strategy: table always has a minimum width so overflow-x:auto
       handles true overflow rather than hiding columns at wrong times.
       Columns are only hidden at widths where they genuinely won't fit,
       and the sidebar collapsing at 1100px is factored into each tier.
    ────────────────────────────────────────────────────────────────── */
    #users-table { min-width: 640px; }

    /* ≥1100px: sidebar is visible (260px). Hide teams if viewport ≤1300px */
    @media (min-width: 1101px) and (max-width: 1300px) {
      #users-table th:nth-child(8),
      #users-table td:nth-child(8) { display: none; }        /* Op Teams */
    }
    @media (min-width: 1101px) and (max-width: 1160px) {
      #users-table th:nth-child(7),
      #users-table td:nth-child(7) { display: none; }        /* Sales Teams */
    }

    /* ≤1100px: sidebar collapses to 0px — content area is now full-width.
       Both team columns can show again up to ~900px viewport. */
    @media (max-width: 1100px) and (min-width: 900px) {
      /* Both team columns visible — sidebar is gone, plenty of room */
    }
    @media (max-width: 900px) and (min-width: 700px) {
      #users-table th:nth-child(8),
      #users-table td:nth-child(8) { display: none; }        /* Op Teams */
    }
    @media (max-width: 700px) {
      #users-table th:nth-child(8),
      #users-table td:nth-child(8),
      #users-table th:nth-child(7),
      #users-table td:nth-child(7),
      #users-table th:nth-child(2),                          /* User ID */
      #users-table td:nth-child(2) { display: none; }
    }
    @media (max-width: 540px) {
      #users-table th:nth-child(6),                          /* Locations */
      #users-table td:nth-child(6),
      #users-table th:nth-child(3),                          /* Email */
      #users-table td:nth-child(3) { display: none; }
    }

    /* Applications table — 9 cols */
    @media (max-width: 960px) {
      #app-table th:nth-child(7),    /* Created */
      #app-table td:nth-child(7),
      #app-table th:nth-child(6),    /* Sales Person */
      #app-table td:nth-child(6) { display: none; }
    }

    /* Tickets table — 9 cols */
    @media (max-width: 960px) {
      #tickets-table th:nth-child(7),  /* Created */
      #tickets-table td:nth-child(7),
      #tickets-table th:nth-child(4),  /* Customer */
      #tickets-table td:nth-child(4) { display: none; }
    }

    /* DSA / Partner tables — 9 cols */
    @media (max-width: 960px) {
      #dsa-table th:nth-child(4),     /* Email */
      #dsa-table td:nth-child(4),
      #pm-table th:nth-child(4),
      #pm-table td:nth-child(4) { display: none; }
    }

    /* ── Row action dropdown menu ── */
    .row-menu-wrap {
      position: relative;
      display: inline-block;
      z-index: 1;
    }
    .row-menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      padding: 0 12px;
      border-radius: 6px;
      border: 1.5px solid var(--border2);
      background: var(--surface2);
      color: var(--text2);
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: all .15s cubic-bezier(.4,.0,.2,1);
      white-space: nowrap;
      gap: 6px;
      outline: none;
    }
    .row-menu-btn:hover {
      border-color: var(--accent);
      background: var(--surface);
      color: var(--accent);
      box-shadow: 0 2px 8px rgba(26,79,163,.12);
    }
    .row-menu-btn:active {
      transform: scale(.98);
    }
    .row-menu-dropdown {
      position: fixed !important;
      background: var(--surface);
      border: 1.5px solid var(--border2);
      border-radius: 10px;
      box-shadow: 0 10px 32px rgba(12,23,51,.16);
      min-width: 220px;
      max-width: 280px;
      z-index: 9500 !important;
      overflow: visible !important;
      animation: menuPop .15s cubic-bezier(.34,.1,.68,1);
      outline: none !important;
      pointer-events: auto !important;
    }
    .row-menu-dropdown.flipped {
      /* flipped state for fixed positioning */
    }
    @keyframes menuPop {
      from { opacity:0; transform: translateY(-8px) scale(.95); filter: blur(.5px); }
      to   { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
    }
    .row-menu-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 16px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text2);
      cursor: pointer;
      transition: all .12s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      outline: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .row-menu-item:first-child {
      border-radius: 9px 9px 0 0;
    }
    .row-menu-item:last-child {
      border-radius: 0 0 9px 9px;
    }
    .row-menu-item:hover { 
      background: var(--surface2); 
      color: var(--text);
      padding-left: 18px;
      transition: all .12s;
    }
    .row-menu-item:active {
      background: var(--surface2);
      opacity: .8;
    }
    .row-menu-item.danger { color: var(--accent2); }
    .row-menu-item.danger:hover { background: rgba(212,43,43,.08); color: #dc2626; }
    .row-menu-item.warn { color: #d97706; }
    .row-menu-item.warn:hover { background: rgba(245,158,11,.09); color: #b45309; }
    .row-menu-divider { height: 1px; background: var(--border); margin: 6px 0; }
    /* compact icon buttons for simple 2-action rows */
    .row-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      padding: 0 10px;
      border-radius: 7px;
      border: 1.5px solid var(--border2);
      background: var(--surface2);
      color: var(--text2);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .15s;
      white-space: nowrap;
      gap: 4px;
    }
    .row-action-btn:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
    .row-action-btn.danger:hover { border-color: var(--accent2); background: var(--accent2); color: #fff; }
    .row-actions { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
    .pill-cell {
      max-width: 160px;
      display: flex;
      flex-wrap: wrap;
      gap: 3px;
      align-items: flex-start;
    }
    .pill-cell-inner {
      display: contents; /* rendered pills flow inside pill-cell */
    }
    /* Compact action menu — replaces wide multi-button action cells */
    .row-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
    .row-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 28px;
      border-radius: 7px;
      border: 1px solid var(--border2);
      background: var(--surface2);
      color: var(--text3);
      cursor: pointer;
      font-size: 13px;
      transition: all .15s;
      flex-shrink: 0;
    }
    .row-action-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
    .row-action-btn.danger:hover { background: var(--accent2); color: #fff; border-color: var(--accent2); }
    .row-action-btn.warn:hover   { background: var(--warn); color: #fff; border-color: var(--warn); }

    /* ── Panel containment — prevents overflow in lender config and wizard LA step ── */
    .la-panel,
    .lc-panel {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      /* Don't use overflow:hidden — it would clip table horizontal scroll */
    }
    #lc-workspace,
    #lc-product-picker {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    /* Import cards get proper padding so content doesn't spill */
    #lc-panel-import-cfg .card,
    #la-panel-import-cfg .card {
      box-sizing: border-box;
      padding: 20px;
    }
    #lc-panel-import-cfg .card + .card,
    #la-panel-import-cfg .card + .card {
      margin-top: 16px;
    }
    /* Ensure dropzone never exceeds its card */
    #lc-panel-import-cfg [ondragover],
    #la-panel-import-cfg [ondragover] {
      box-sizing: border-box;
      max-width: 100%;
      overflow: hidden;
    }
    /* General config tabs bar in lender config */
    #lc-tabs {
      flex-wrap: wrap;
    }

    @keyframes pageFadeIn {
      from {
        opacity: 0;
        transform: translateY(8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── ACCESS RIGHTS PAGE ── */
    .access-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .access-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 22px;
      transition: all .2s;
    }

    .access-card:hover {
      border-color: var(--border2);
      transform: translateY(-2px);
    }

    .access-card-head {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }

    .access-role-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
    }

    .access-role-name {
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 700;
    }

    .access-role-key {
      font-size: 10px;
      color: var(--text3);
      letter-spacing: .8px;
      text-transform: uppercase;
      margin-top: 2px;
    }

    .access-perm-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .access-perm-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      color: var(--text2);
    }

    .access-perm-item .tick {
      color: var(--accent2);
      font-size: 12px;
    }

    .access-perm-item .cross {
      color: var(--text3);
      font-size: 12px;
    }

    .perm-section-title {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--text3);
      font-weight: 700;
      margin: 10px 0 4px;
    }

    .current-user-highlight {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 2px rgba(26, 79, 163, .12) !important;
    }

    /* ── DASHBOARD ── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-bottom: 28px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 24px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all .22s;
    }

    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

    .stat-card.blue:hover {
      border-color: var(--accent);
      box-shadow: 0 12px 40px rgba(26, 79, 163, .12);
    }

    .stat-card.green:hover {
      border-color: var(--accent2);
      box-shadow: 0 12px 40px rgba(212, 43, 43, .1);
    }

    .stat-card.orange:hover {
      border-color: var(--accent3);
      box-shadow: 0 12px 40px rgba(255, 107, 53, .12);
    }

    .stat-card.red:hover {
      border-color: var(--danger);
      box-shadow: 0 12px 40px rgba(255, 69, 96, .12);
    }

    .stat-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      opacity: 0;
      transition: opacity .3s;
    }

    .stat-card.blue::before {
      background: linear-gradient(90deg, var(--accent), transparent);
    }

    .stat-card.green::before {
      background: linear-gradient(90deg, var(--accent2), transparent);
    }

    .stat-card.orange::before {
      background: linear-gradient(90deg, var(--accent3), transparent);
    }

    .stat-card.red::before {
      background: linear-gradient(90deg, var(--danger), transparent);
    }

    .stat-card:hover::before {
      opacity: 1;
    }

    .stat-card::after {
      content: '';
      position: absolute;
      top: -20px;
      right: -20px;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      opacity: .06;
    }

    .stat-card.blue::after {
      background: var(--accent);
    }

    .stat-card.green::after {
      background: var(--accent2);
    }

    .stat-card.orange::after {
      background: var(--accent3);
    }

    .stat-card.red::after {
      background: var(--danger);
    }

    .stat-label {
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      color: var(--text3);
      margin-bottom: 12px;
      font-weight: 600;
    }

    .stat-value {
      font-family: var(--font-head);
      font-size: 34px;
      font-weight: 800;
      color: var(--text);
      line-height: 1;
      margin-bottom: 10px;
    }

    .stat-value.blue {
      color: var(--accent);
    }

    .stat-value.green {
      color: var(--accent2);
    }

    .stat-value.orange {
      color: var(--accent3);
    }

    .stat-value.red {
      color: var(--danger);
    }

    .stat-change {
      font-size: 12px;
      color: var(--text3);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .stat-change .up {
      color: var(--accent2);
    }

    .stat-change .down {
      color: var(--danger);
    }

    .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }

    .grid-3 {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r);
      overflow: hidden;    /* keep border-radius clipping for content */
      width: 100%;
      min-width: 0;        /* prevent flex child blowout */
      box-sizing: border-box;
      transition: border-color .2s;
    }

    .card:hover {
      border-color: var(--border2);
    }

    .card-head {
      padding: 18px 22px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(90deg, rgba(26, 79, 163, .02), transparent);
    }

    .card-title {
      font-family: var(--font-head);
      font-size: 14.5px;
      font-weight: 700;
      flex: 1;
      letter-spacing: -.2px;
    }

    .card-body {
      padding: 22px;
    }

    .pipeline {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 20px 24px;
    }

    .pipeline-stage {
      display: flex;
      align-items: center;
      gap: 14px;
      cursor: pointer;
    }

    .stage-bar-wrap {
      flex: 1;
    }

    .stage-label {
      font-size: 12px;
      color: var(--text2);
      width: 110px;
      flex-shrink: 0;
    }

    .stage-bar {
      height: 28px;
      border-radius: 4px;
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 10px;
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, .9);
      transition: all .3s;
    }

    .stage-bar:hover {
      filter: brightness(1.2);
    }

    .stage-count {
      font-size: 12px;
      font-weight: 700;
      color: var(--text2);
      width: 30px;
      text-align: right;
    }

    .activity-list {
      display: flex;
      flex-direction: column;
    }

    .activity-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 24px;
      border-bottom: 1px solid var(--border);
      transition: background .15s;
    }

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

    .activity-item:hover {
      background: var(--surface2);
    }

    .activity-item-link:hover {
      background: var(--accent-subtle) !important;
    }
    .activity-item-link:hover .act-text strong {
      color: var(--accent);
    }

    .act-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-top: 5px;
      flex-shrink: 0;
    }

    .act-content {
      flex: 1;
    }

    .act-text {
      font-size: 13px;
      color: var(--text2);
      line-height: 1.5;
    }

    .act-text strong {
      color: var(--text);
      font-weight: 600;
    }

    .act-time {
      font-size: 11px;
      color: var(--text3);
      margin-top: 3px;
    }

    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text3);
      font-weight: 700;
      padding: 10px 12px;
      text-align: left;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }

    td {
      padding: 11px 12px;
      font-size: 13px;
      color: var(--text2);
      border-bottom: 1px solid var(--border);
      transition: background .12s;
    }

    tr:last-child td {
      border-bottom: none;
    }

    /* Payout tables — very wide — extra tight cell padding */
    #claims-table th, #claims-table td,
    #mgmt-claims-table th, #mgmt-claims-table td {
      padding: 9px 8px;
      font-size: 12px;
    }
    #claims-table th {
      font-size: 9.5px;
    }
    #mgmt-claims-table th {
      font-size: 9.5px;
    }
    /* Salary band, bank rules, obligations — compact */
    .lc-panel table th, .lc-panel table td {
      padding: 9px 10px;
    }


    tr:hover td {
      background: rgba(26, 79, 163, .04);
      cursor: pointer;
    }

    td strong {
      color: var(--text);
      font-weight: 500;
    }

    td .app-id {
      font-family: monospace;
      font-size: 12px;
      font-weight: 700;
      color: var(--accent);
      background: rgba(26, 79, 163, .08);
      border: 1px solid rgba(26, 79, 163, .18);
      border-radius: 5px;
      padding: 2px 7px;
      display: inline-block;
      letter-spacing: .3px;
    }

    .badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .3px;
      white-space: nowrap;
    }

    .badge-draft {
      background: rgba(138, 150, 180, .15);
      color: #8a96b4;
    }

    .badge-wip {
      background: rgba(255, 179, 71, .15);
      color: var(--warn);
    }

    .badge-login {
      background: rgba(26, 79, 163, .12);
      color: var(--accent);
    }

    .badge-underwriting {
      background: rgba(161, 89, 255, .15);
      color: #a159ff;
    }

    .badge-approved {
      background: rgba(0, 212, 170, .15);
      color: var(--accent2);
    }

    .badge-disbursed {
      background: rgba(26, 115, 64, .12);
      color: #1a7340;
      border: 1px solid rgba(26, 115, 64, .25);
    }

    .badge-rejected {
      background: rgba(255, 69, 96, .15);
      color: var(--danger);
    }

    .badge-hold {
      background: rgba(255, 107, 53, .15);
      color: var(--accent3);
    }

    .badge-offer {
      background: rgba(0, 200, 255, .15);
      color: #1a4fa3;
    }

    .badge-ni,
    .badge-cancelled {
      background: rgba(138, 150, 180, .15);
      color: #8a96b4;
    }

    .badge-decision {
      background: rgba(255, 107, 53, .15);
      color: var(--accent3);
    }

    .badge-acceptance {
      background: rgba(0, 212, 170, .15);
      color: var(--accent2);
    }

    .badge-approved_deviation {
      background: rgba(230, 126, 0, .13);
      color: #b85e00;
      border: 1px solid rgba(230, 126, 0, .28);
    }

    .badge-Complete {
      background: rgba(212, 43, 43, .12);
      color: var(--accent2);
    }

    .badge-COMPLETE {
      background: rgba(212, 43, 43, .12);
      color: var(--accent2);
    }

    .badge-SKIP {
      background: rgba(138, 150, 180, .15);
      color: #8a96b4;
    }

    .badge-Pending {
      background: rgba(255, 179, 71, .15);
      color: var(--warn);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    .form-grid-3 {
      grid-template-columns: 1fr 1fr 1fr;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .form-group.full {
      grid-column: 1/-1;
    }

    label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text3);
      font-weight: 600;
    }

    input,
    select,
    textarea {
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: 11px 14px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      outline: none;
      transition: border-color .18s cubic-bezier(.4,.0,.2,1), box-shadow .18s cubic-bezier(.4,.0,.2,1), background .18s;
      line-height: 1.4;
    }

    input:hover,
    select:hover,
    textarea:hover {
      border-color: var(--border2);
      background: var(--surface);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      background: var(--surface);
    }

    input:disabled,
    select:disabled,
    textarea:disabled {
      background: var(--bg);
      color: var(--text3);
      cursor: not-allowed;
      opacity: 0.65;
    }

    select option {
      background: var(--surface2);
      color: var(--text);
      padding: 8px 12px;
    }

    select option:hover {
      background: var(--accent);
      color: white;
    }

    select option:checked {
      background: var(--accent);
      color: white;
    }

    textarea {
      resize: vertical;
      min-height: 80px;
    }

    .field-val {
      font-size: 14px;
      color: var(--text);
      padding: 10px 14px;
      min-height: 38px;
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      display: flex;
      align-items: center;
      font-weight: 500;
      transition: all .15s;
      line-height: 1.4;
    }

    .field-val:hover {
      border-color: var(--accent);
      background: #fff;
    }

    .field-val.empty {
      color: var(--text3);
      font-style: italic;
      background: var(--surface2);
    }

    .form-group label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text3);
      font-weight: 700;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* ═══════════════════════════════════════
       WIZARD STEP INDICATOR — redesigned
       ═══════════════════════════════════════ */
    .wizard-steps {
      display: flex;
      align-items: flex-start;
      gap: 0;
      margin-bottom: 36px;
      overflow-x: auto;
      padding-bottom: 8px;
      padding-top: 8px;
      scrollbar-width: none;
    }
    .wizard-steps::-webkit-scrollbar { display: none; }

    .wizard-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 76px;
      position: relative;
      cursor: default;
    }

    /* ── Connector line ── */
    .wizard-step:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 26px;
      left: calc(50% + 28px);
      right: calc(-50% + 28px);
      height: 2.5px;
      background: #e2e8f0;
      z-index: 0;
      border-radius: 99px;
      transition: background .45s ease;
    }
    .wizard-step.done:not(:last-child)::after {
      background: linear-gradient(90deg, #22c55e, #16a34a);
    }
    .wizard-step.active:not(:last-child)::after {
      background: linear-gradient(90deg, #e2e8f0 30%, #e2e8f0);
    }

    /* ── Circle ── */
    .step-num {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 2.5px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      transition: all .35s cubic-bezier(.4,0,.2,1);
      color: #94a3b8;
      box-shadow: 0 2px 8px rgba(0,0,0,.06), inset 0 1px 2px rgba(255,255,255,.9);
    }
    .step-num svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    .wizard-step:hover:not(.done) .step-num svg {
      transform: scale(1.12);
    }

    /* ── Pending (default) per-step tints ── */
    .wizard-step:nth-child(1) .step-num { background:#ede9fe; border-color:#ddd6fe; color:#7c3aed; }
    .wizard-step:nth-child(2) .step-num { background:#fce7f3; border-color:#fbcfe8; color:#db2777; }
    .wizard-step:nth-child(3) .step-num { background:#dbeafe; border-color:#bfdbfe; color:#2563eb; }
    .wizard-step:nth-child(4) .step-num { background:#d1fae5; border-color:#a7f3d0; color:#059669; }
    .wizard-step:nth-child(5) .step-num { background:#fef3c7; border-color:#fde68a; color:#d97706; }
    .wizard-step:nth-child(6) .step-num { background:#fee2e2; border-color:#fecaca; color:#dc2626; }
    .wizard-step:nth-child(7) .step-num { background:#e0f2fe; border-color:#bae6fd; color:#0284c7; }
    .wizard-step:nth-child(8) .step-num { background:#f3e8ff; border-color:#e9d5ff; color:#9333ea; }
    .wizard-step:nth-child(9) .step-num { background:#fefce8; border-color:#fef08a; color:#ca8a04; }

    /* ── Active: vivid gradient + outer glow ring ── */
    .wizard-step:nth-child(1).active .step-num { background:linear-gradient(135deg,#a78bfa,#7c3aed); border-color:#7c3aed; color:#fff; box-shadow:0 0 0 4px rgba(124,58,237,.18),0 6px 20px rgba(109,40,217,.35); }
    .wizard-step:nth-child(2).active .step-num { background:linear-gradient(135deg,#f472b6,#be185d); border-color:#be185d; color:#fff; box-shadow:0 0 0 4px rgba(219,39,119,.18),0 6px 20px rgba(190,24,93,.35); }
    .wizard-step:nth-child(3).active .step-num { background:linear-gradient(135deg,#60a5fa,#1d4ed8); border-color:#1d4ed8; color:#fff; box-shadow:0 0 0 4px rgba(37,99,235,.18),0 6px 20px rgba(29,78,216,.35); }
    .wizard-step:nth-child(4).active .step-num { background:linear-gradient(135deg,#34d399,#047857); border-color:#047857; color:#fff; box-shadow:0 0 0 4px rgba(5,150,105,.18),0 6px 20px rgba(4,120,87,.35); }
    .wizard-step:nth-child(5).active .step-num { background:linear-gradient(135deg,#fbbf24,#b45309); border-color:#b45309; color:#fff; box-shadow:0 0 0 4px rgba(217,119,6,.18),0 6px 20px rgba(180,83,9,.35); }
    .wizard-step:nth-child(6).active .step-num { background:linear-gradient(135deg,#f87171,#b91c1c); border-color:#b91c1c; color:#fff; box-shadow:0 0 0 4px rgba(220,38,38,.18),0 6px 20px rgba(185,28,28,.35); }
    .wizard-step:nth-child(7).active .step-num { background:linear-gradient(135deg,#38bdf8,#0369a1); border-color:#0369a1; color:#fff; box-shadow:0 0 0 4px rgba(2,132,199,.18),0 6px 20px rgba(3,105,161,.35); }
    .wizard-step:nth-child(8).active .step-num { background:linear-gradient(135deg,#c084fc,#7e22ce); border-color:#7e22ce; color:#fff; box-shadow:0 0 0 4px rgba(147,51,234,.18),0 6px 20px rgba(126,34,206,.35); }
    .wizard-step:nth-child(9).active .step-num { background:linear-gradient(135deg,#fde047,#92400e); border-color:#92400e; color:#fff; box-shadow:0 0 0 4px rgba(202,138,4,.18),0 6px 20px rgba(146,64,14,.35); }

    /* ── Done: green gradient ── */
    .wizard-step.done .step-num {
      background: linear-gradient(135deg,#4ade80,#15803d) !important;
      border-color: #15803d !important;
      color: #fff !important;
      box-shadow: 0 0 0 3px rgba(21,128,61,.18), 0 4px 14px rgba(22,163,74,.3) !important;
    }
    .wizard-step.done .step-num svg {
      stroke-width: 2.5;
    }

    /* ── Label ── */
    .step-label {
      font-size: 10.5px;
      font-weight: 500;
      color: #94a3b8;
      text-align: center;
      white-space: nowrap;
      line-height: 1.3;
      max-width: 76px;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: .1px;
      transition: color .3s, font-weight .3s;
    }
    .wizard-step.active .step-label {
      font-weight: 800;
      font-size: 11px;
    }
    .wizard-step:nth-child(1).active .step-label { color: #7c3aed; }
    .wizard-step:nth-child(2).active .step-label { color: #be185d; }
    .wizard-step:nth-child(3).active .step-label { color: #1d4ed8; }
    .wizard-step:nth-child(4).active .step-label { color: #047857; }
    .wizard-step:nth-child(5).active .step-label { color: #b45309; }
    .wizard-step:nth-child(6).active .step-label { color: #b91c1c; }
    .wizard-step:nth-child(7).active .step-label { color: #0369a1; }
    .wizard-step:nth-child(8).active .step-label { color: #7e22ce; }
    .wizard-step:nth-child(9).active .step-label { color: #92400e; }

    .wizard-step.done .step-label {
      color: #15803d;
      font-weight: 700;
    }

    .wizard-body {
      display: none;
    }

    .wizard-body.active {
      display: block;
    }

    /* ══ HYBRID OFFER CARD ══ */
    /* ═══════════════════════════════════════════════════════════
       OFFER CARD — REDESIGN
    ═══════════════════════════════════════════════════════════ */

    #cam-offer-card {
      width: 100%;
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(26,79,163,.18);
      box-shadow:
        0 2px 0 rgba(255,255,255,.8) inset,
        0 12px 48px rgba(26,79,163,.16),
        0 4px 12px rgba(26,79,163,.08);
      background: #f0f5ff;
    }

    /* ══════════════════════════════════════════════
       OFFER CARD — Paytm Visual Style
       All class names & IDs preserved for JS compat
    ══════════════════════════════════════════════ */

    /* Google Fonts - Nunito for bold numerals */
    @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Rubik:wght@400;500;600;700&display=swap');

    @keyframes coh-shimmer {
      0%   { left: -60%; }
      100% { left: 140%; }
    }
    @keyframes coh-float {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-4px); }
    }
    @keyframes coh-particle {
      0%   { opacity:0; transform:translateY(0) scale(.6); }
      30%  { opacity:.7; }
      100% { opacity:0; transform:translateY(-36px) scale(1); }
    }
    @keyframes coh-pop {
      from { opacity:0; transform:scale(.85); }
      to   { opacity:1; transform:scale(1); }
    }
    @keyframes coh-prog {
      from { width:0; }
      to   { width:85%; }
    }

    /* ── HEADLINE (Paytm deep blue hero) ── */
    .coh-headline {
      position: relative;
      padding: 20px 22px 58px;
      background: linear-gradient(155deg, #0047AB 0%, #002970 55%, #00143D 100%);
      border-radius: 14px 14px 0 0;
      overflow: hidden;
      text-align: left;
    }
    .coh-headline::before {
      content: '';
      position: absolute;
      top: -50px; right: -50px;
      width: 200px; height: 200px;
      border-radius: 50%;
      border: 1px solid rgba(0,186,242,0.15);
      pointer-events: none;
    }
    .coh-headline::after {
      content: '';
      position: absolute;
      top: -20px; right: -20px;
      width: 140px; height: 140px;
      border-radius: 50%;
      border: 1px solid rgba(0,186,242,0.08);
      pointer-events: none;
    }

    /* particles repurposed as subtle dots */
    .coh-particle {
      position: absolute;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: rgba(0,186,242,0.4);
      animation: coh-particle 3s ease-in infinite;
    }
    .coh-particle:nth-child(1) { left:12%;  bottom:18%; animation-delay:0s;    animation-duration:2.8s; }
    .coh-particle:nth-child(2) { left:28%;  bottom:10%; animation-delay:.7s;   animation-duration:3.2s; }
    .coh-particle:nth-child(3) { left:55%;  bottom:14%; animation-delay:1.4s;  animation-duration:2.6s; }
    .coh-particle:nth-child(4) { left:72%;  bottom:20%; animation-delay:.35s;  animation-duration:3.5s; }
    .coh-particle:nth-child(5) { left:88%;  bottom:12%; animation-delay:1.05s; animation-duration:2.9s; }

    .coh-hl-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(0,200,83,0.18);
      border: 1px solid rgba(0,200,83,0.4);
      border-radius: 100px;
      padding: 5px 13px 5px 8px;
      font-size: 11px;
      font-weight: 700;
      color: #00C853;
      letter-spacing: 0.04em;
      margin-bottom: 10px;
      animation: coh-pop 0.4s 0.15s ease both;
    }
    .coh-hl-label::before {
      content: '';
      width: 16px; height: 16px;
      background: rgba(0,200,83,0.25);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2300C853' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: 10px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .coh-hl-amount {
      font-family: 'Nunito', 'Rubik', sans-serif;
      font-size: 42px;
      font-weight: 900;
      color: #ffffff;
      letter-spacing: -2px;
      line-height: 1;
      margin-bottom: 5px;
      display: block;
    }

    .coh-hl-name {
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      margin-bottom: 3px;
    }
    .coh-hl-name span {
      color: #fff;
      font-weight: 700;
    }

    .coh-hl-sub {
      font-size: 12px;
      color: rgba(255,255,255,0.85);
      margin-top: 4px;
    }

    /* ── FLOATING STATS STRIP (wave overlap) ── */
    .coh-body {
      margin-top: -38px;
      position: relative;
      z-index: 2;
      background: #fff;
      border-radius: 18px 18px 14px 14px;
      box-shadow: 0 -4px 0 0 rgba(0,71,171,0.08), 0 8px 28px rgba(0,71,171,0.12);
      padding: 0 0 4px;
    }

    /* Stats row floated over hero */
    .coh-body::before {
      content: '';
      display: block;
      height: 0;
    }

    /* ── ROI BAND ── */
    .coh-roi-band {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #E8F4FD;
      border: 1px solid rgba(0,71,171,0.15);
      border-radius: 8px;
      margin: 12px 18px 0;
      padding: 9px 16px;
      font-size: 12.5px;
      font-weight: 600;
      color: #0047AB;
      letter-spacing: 0.02em;
    }

    /* ── EMI DISPLAY ── */
    .coh-emi-display {
      margin: 8px 18px 0;
      background: #fff;
      border: 1.5px solid rgba(0,71,171,0.12);
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      position: relative;
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0,71,171,0.07);
    }
    .coh-emi-display::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #0047AB, #00BAF2);
      border-radius: 12px 12px 0 0;
    }

    .coh-emi-display-label {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #8A95A3;
      margin-bottom: 6px;
      display: block;
    }

    .coh-emi-display-val {
      font-family: 'Nunito', 'Rubik', sans-serif;
      font-size: 34px;
      font-weight: 900;
      color: #1A1A2E;
      letter-spacing: -1.5px;
      line-height: 1;
      display: block;
    }

    /* ── PLAN SECTION ── */
    .coh-plan-section {
      margin: 12px 18px 0;
    }

    .coh-section-title {
      font-size: 12px;
      font-weight: 700;
      color: #4A5568;
      margin-bottom: 12px;
      letter-spacing: 0.02em;
    }
    .coh-plan-section .coh-section-title { margin-bottom: 12px; }
    .coh-plan-section .coh-plan-grid     { width: 100%; }
    .coh-plan-section .coh-show-more     { width: 100%; }

    .coh-plan-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .coh-plan-card {
      background: #fff;
      border: 2px solid #EEF2F8;
      border-radius: 10px;
      padding: 9px 10px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      overflow: hidden;
      text-align: left;
    }
    .coh-plan-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: transparent;
      transition: background 0.2s;
      border-radius: 10px 10px 0 0;
    }
    .coh-plan-card:hover {
      border-color: rgba(0,71,171,0.3);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0,71,171,0.1);
    }
    .coh-plan-card.selected {
      border-color: #0047AB;
      background: #F0F8FF;
    }
    .coh-plan-card.selected::before { background: #0047AB; }

    .coh-plan-head {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #8A95A3;
      display: block;
      margin-bottom: 5px;
    }
    .coh-plan-card.selected .coh-plan-head { color: #0047AB; }

    .coh-plan-emi {
      font-family: 'Nunito', sans-serif;
      font-size: 14.5px;
      font-weight: 800;
      color: #1A1A2E;
      display: block;
      margin-bottom: 2px;
    }

    .coh-plan-months {
      font-size: 11px;
      color: #8A95A3;
      display: block;
      margin-bottom: 5px;
    }

    .coh-plan-capped {
      font-size: 10px;
      font-weight: 600;
      color: #00C853;
      display: block;
    }

    .coh-show-more {
      text-align: center;
      margin: 10px 0 2px;
    }
    .coh-show-more button {
      background: none;
      border: 1.5px dashed #C8D5E8;
      border-radius: 8px;
      width: 100%;
      padding: 9px;
      font-size: 12.5px;
      font-weight: 600;
      color: #0047AB;
      cursor: pointer;
      transition: all 0.18s;
      font-family: 'Rubik', sans-serif;
    }
    .coh-show-more button:hover {
      background: #E8F4FD;
      border-style: solid;
    }

    /* ── BOOST NOTE ── */
    .coh-boost {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 8px 18px 0;
      padding: 9px 13px;
      background: #FFF3E8;
      border: 1px solid rgba(255,107,0,0.25);
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 500;
      color: #7A3800;
      line-height: 1.5;
    }
    .coh-boost span:first-child { font-size: 15px; flex-shrink: 0; }

    /* ── DISCLAIMER NOTE ── */
    .coh-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 8px 18px 0;
      padding: 9px 13px;
      background: #F6F8FB;
      border: 1px solid #E2E8F0;
      border-radius: 10px;
      font-size: 12px;
      color: #4A5568;
      line-height: 1.55;
    }

    /* ── ACTION BUTTONS ── */
    .coh-actions {
      display: flex;
      gap: 0;
      margin: 12px 18px 12px;
      flex-direction: column;
    }
    .coh-actions-btns {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 10px;
    }

    .coh-btn-recalc {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      background: #E8F4FD;
      border: 1.5px solid rgba(0,71,171,0.2);
      border-radius: 12px;
      padding: 10px 16px;
      font-size: 13px;
      font-weight: 600;
      color: #0047AB;
      cursor: pointer;
      transition: all 0.18s;
      font-family: 'Rubik', sans-serif;
      position: relative;
      overflow: hidden;
    }
    .coh-btn-recalc::before { display: none; }
    .coh-btn-recalc:hover {
      background: rgba(0,71,171,0.1);
      border-color: #0047AB;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(0,71,171,0.15);
    }
    .coh-btn-recalc:active { transform: translateY(0); box-shadow: none; }
    .coh-btn-recalc .btn-icon {
      width: 22px; height: 22px;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.4s;
      color: #0047AB;
    }
    .coh-btn-recalc:hover .btn-icon { transform: rotate(-180deg); }

    .coh-btn-apply {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: linear-gradient(135deg, #0047AB 0%, #0062CC 100%);
      border: none;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: all 0.22s;
      font-family: 'Rubik', sans-serif;
      position: relative;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0,71,171,0.35);
    }
    .coh-btn-apply::before {
      content: '';
      position: absolute;
      top: 0; left: -60%;
      width: 40%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
      transform: skewX(-20deg);
      animation: coh-shimmer 3s 1s ease infinite;
    }
    .coh-btn-apply::after { display: none; }
    .coh-btn-apply:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0,71,171,0.45);
    }
    .coh-btn-apply:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(0,71,171,0.3); }
    .coh-btn-apply .btn-icon {
      width: 36px; height: 36px;
      background: rgba(255,255,255,0.18);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform 0.2s;
    }
    .coh-btn-apply:hover .btn-icon { transform: translateX(4px); }
    .coh-btn-apply .btn-icon svg { display: block; }
    .coh-btn-apply .btn-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
    .coh-btn-apply .btn-label-main { font-size: 14px; font-weight: 700; line-height: 1.2; }
    .coh-btn-apply .btn-label-sub  { font-size: 10px; font-weight: 400; opacity: .75; letter-spacing: .2px; line-height: 1; }

    @keyframes coh-apply-pulse {
      0%   { box-shadow: 0 0 0 0 rgba(0,71,171,.5); }
      70%  { box-shadow: 0 0 0 12px rgba(0,71,171,0); }
      100% { box-shadow: 0 0 0 0 rgba(0,71,171,0); }
    }
    .coh-btn-apply.pulse { animation: coh-apply-pulse 1.4s ease 1; }

    @media (max-width: 480px) { .coh-plan-grid { grid-template-columns: repeat(2,1fr); } }

    /* ── Keep old co- classes alive (referenced in JS still) ── */
    .co-tab, .co-panel, .co-tabs { display: none !important; }
    .co-note, .co-card, .co-stat-row { display: none !important; }

    .wizard-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 24px;
      border-top: 1px solid var(--border);
      margin-top: 28px;
    }

    /* ═══════════════════════════════════════════════
       WIZARD UX ENHANCEMENTS — positive experience
       ═══════════════════════════════════════════════ */

    /* Warm labels — replace ALL CAPS with title case inside wizard */
    #page-new-application .form-group label {
      font-size: 12px;
      text-transform: none;
      letter-spacing: 0;
      font-weight: 600;
      color: var(--text2);
      margin-bottom: 4px;
    }

    /* Field hint text below inputs */

    /* Required field asterisk — warm, not aggressive */
    #page-new-application .req { color: #e24b4a; font-size: 11px; margin-left: 2px; }

    /* Tall, more inviting inputs inside wizard */
    #page-new-application input,
    #page-new-application select,
    #page-new-application textarea {
      padding: 11px 14px;
      font-size: 13.5px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      transition: border-color .18s, box-shadow .18s, background .18s;
    }
    #page-new-application input:focus,
    #page-new-application select:focus,
    #page-new-application textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      background: var(--surface);
    }
    #page-new-application input:valid:not(:placeholder-shown),
    #page-new-application select:valid:not([value=""]) {
      border-color: rgba(26,115,64,.4);
    }

    /* Motivational progress pill in wizard footer */
    .wiz-progress-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      flex: 1;
      max-width: 220px;
      margin: 0 auto;
    }
    .wiz-progress-mood {
      font-size: 11px;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: .1px;
    }
    .wiz-progress-bar-wrap {
      width: 100%;
      background: var(--surface3);
      border-radius: 99px;
      height: 6px;
      overflow: hidden;
      position: relative;
    }
    .wiz-progress-bar-fill {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, #a78bfa, #1a4fa3, #059669);
      background-size: 200% 100%;
      transition: width .5s cubic-bezier(.4,0,.2,1);
      box-shadow: 0 0 8px rgba(26,79,163,.3);
      animation: wiz-bar-shimmer 2.5s linear infinite;
    }
    @keyframes wiz-bar-shimmer {
      0%   { background-position: 0% 0%; }
      100% { background-position: 200% 0%; }
    }
    .wiz-step-counter {
      font-size: 11px;
      color: var(--text3);
      font-weight: 500;
      display: none; /* Step numbering hidden per requirement */
    }

    /* Enhanced Back / Next buttons */
    #wiz-back {
      min-width: 90px;
      border-radius: 10px !important;
    }
    #wiz-next {
      min-width: 120px;
      border-radius: 10px !important;
      font-size: 14px !important;
      padding: 10px 22px !important;
      position: relative;
      overflow: hidden;
    }
    #wiz-next::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,.12) 60%, transparent 80%);
      transform: translateX(-100%);
      transition: transform .5s ease;
    }
    #wiz-next:hover::after { transform: translateX(100%); }

    /* Section head — friendlier, less shouting */
    #page-new-application .section-head {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-weight: 700;
      color: var(--accent);
      border-bottom: 1px solid var(--border);
      padding-bottom: 8px;
      margin: 24px 0 16px;
    }
    #page-new-application .section-head:first-child { margin-top: 0; }

    /* Checklist-style required fields indicator at step top */
    .wiz-required-note {
      font-size: 11.5px;
      color: var(--text3);
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .wiz-required-note .req-dot {
      display: inline-block;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #e24b4a;
      flex-shrink: 0;
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 20, 60, .6);
      backdrop-filter: blur(6px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: var(--r);
      width: 100%;
      max-width: 760px;
      max-height: 90vh;
      overflow-y: auto;
      animation: slideUp .22s cubic-bezier(.34, 1.2, .64, 1);
      box-shadow: 0 24px 80px rgba(26, 79, 163, .18);
    }

    .modal-sm {
      max-width: 480px;
    }

    @keyframes slideUp {
      from {
        transform: translateY(24px) scale(.97);
        opacity: 0;
      }

      to {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }

    .modal-head {
      padding: 22px 26px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 14px;
      position: sticky;
      top: 0;
      background: var(--surface);
      z-index: 1;
    }

    .modal-title {
      font-family: var(--font-head);
      font-size: 17px;
      font-weight: 700;
      flex: 1;
      letter-spacing: -.2px;
    }

    .modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1px solid var(--border2);
      background: transparent;
      color: var(--text2);
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
    }

    .modal-close:hover {
      background: var(--surface2);
      color: var(--text);
    }

    .modal-body {
      padding: 26px;
    }

    .calc-result {
      background: linear-gradient(135deg, rgba(77, 124, 255, .12), rgba(212, 43, 43, .06));
      border: 1px solid rgba(26, 79, 163, .18);
      border-radius: var(--r);
      padding: 28px 24px;
      text-align: center;
      margin-top: 20px;
      position: relative;
      overflow: hidden;
    }

    .calc-result::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(26, 79, 163, .4), rgba(212, 43, 43, .3), transparent);
    }

    .emi-val {
      font-family: var(--font-head);
      font-size: 44px;
      font-weight: 800;
      color: var(--accent2);
      text-shadow: 0 0 40px rgba(212, 43, 43, .22);
    }

    .emi-label {
      font-size: 12px;
      color: var(--text3);
      margin-top: 5px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .emi-breakdown {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 22px;
    }

    .emi-item {
      background: rgba(26, 79, 163, .06);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 14px;
      text-align: center;
    }

    .emi-item-val {
      font-family: var(--font-head);
      font-size: 17px;
      font-weight: 700;
      color: var(--text);
    }

    .emi-item-label {
      font-size: 10.5px;
      color: var(--text3);
      margin-top: 4px;
      text-transform: uppercase;
      letter-spacing: .8px;
    }

    .incred-card {
      background: linear-gradient(135deg, rgba(77, 124, 255, .07), rgba(212, 43, 43, .04));
      border: 1px solid rgba(26, 79, 163, .14);
      border-radius: var(--r);
      padding: 20px 24px;
      transition: border-color .2s;
    }

    .tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-bottom: 24px;
      gap: 4px;
      overflow-x: auto;
    }

    .tab {
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text3);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all .2s;
      white-space: nowrap;
    }

    .tab:hover {
      color: var(--text);
    }

    .tab.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    .toast-container {
      position: fixed;
      top: 22px;
      right: 24px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 10px;
      pointer-events: none;
    }

    .toast {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 10px;
      padding: 13px 18px;
      font-size: 13px;
      color: var(--text);
      min-width: 280px;
      max-width: 380px;
      animation: toastIn .3s cubic-bezier(.34, 1.56, .64, 1);
      display: flex;
      align-items: center;
      gap: 11px;
      box-shadow: 0 8px 32px rgba(26, 79, 163, .12);
      pointer-events: all;
    }

    .toast.success {
      border-left: 3px solid var(--accent2);
    }

    .toast.error {
      border-left: 3px solid var(--danger);
    }

    .toast.info {
      border-left: 3px solid var(--accent);
    }

    .toast.warn {
      border-left: 3px solid var(--warn);
    }

    @keyframes toastIn {
      from {
        transform: translateX(40px) scale(.92);
        opacity: 0;
      }

      to {
        transform: translateX(0) scale(1);
        opacity: 1;
      }
    }

    .toast-icon {
      font-size: 17px;
      flex-shrink: 0;
    }

    .progress-wrap {
      background: var(--surface3);
      border-radius: 99px;
      height: 5px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      border-radius: 99px;
      background: linear-gradient(90deg, var(--accent), var(--accent));
      transition: width .5s cubic-bezier(.4, 0, .2, 1);
      box-shadow: 0 0 8px rgba(26, 79, 163, .32);
    }

    .doc-status {
      font-size: 12px;
      color: var(--text3);
      flex-shrink: 0;
    }

    .doc-item:hover {
      border-color: var(--accent);
    }

    .doc-icon {
      font-size: 24px;
    }

    .doc-info {
      flex: 1;
    }

    .doc-name {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
    }

    .doc-type {
      font-size: 11px;
      color: var(--text3);
      margin-top: 2px;
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text3);
    }

    .empty-icon {
      font-size: 48px;
      margin-bottom: 14px;
      opacity: .5;
      animation: iconBounce 2s ease-in-out infinite;
    }

    @keyframes iconBounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-6px);
      }
    }

    .empty-title {
      font-family: var(--font-head);
      font-size: 18px;
      color: var(--text2);
      margin-bottom: 8px;
    }

    .empty-sub {
      font-size: 13px;
    }

    .filter-bar {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      flex-wrap: wrap;
      align-items: center;
    }

    .filter-chip {
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--border);
      color: var(--text3);
      transition: all .2s;
      background: transparent;
    }

    .filter-chip:hover {
      border-color: var(--accent);
      color: var(--accent);
    }

    .filter-chip.active {
      background: rgba(26, 79, 163, .12);
      border-color: var(--accent);
      color: var(--accent);
    }

    .timeline {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .tl-item {
      display: flex;
      gap: 16px;
      padding-bottom: 16px;
      position: relative;
    }

    .tl-line {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    .tl-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--accent);
      flex-shrink: 0;
      margin-top: 3px;
    }

    .tl-connector {
      flex: 1;
      width: 2px;
      background: var(--border);
      margin-top: 4px;
      min-height: 16px;
    }

    .tl-item:last-child .tl-connector {
      display: none;
    }

    .tl-content {
      flex: 1;
      padding-bottom: 4px;
    }

    .tl-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }

    .tl-desc {
      font-size: 12px;
      color: var(--text3);
      margin-top: 3px;
    }

    .tl-time {
      font-size: 11px;
      color: var(--text3);
      margin-top: 2px;
    }

    .chart-area {
      height: 180px;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      padding: 0 4px;
    }

    .chart-bar-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1;
    }

    .chart-bar-inner {
      width: 100%;
      border-radius: 5px 5px 0 0;
      background: rgba(26, 79, 163, .14);
      border-top: 2px solid var(--accent);
      transition: all .4s;
      min-height: 4px;
    }

    .chart-bar-inner:hover {
      background: rgba(26, 79, 163, .38);
      cursor: pointer;
    }

    .chart-label {
      font-size: 10px;
      color: var(--text3);
      letter-spacing: .5px;
    }

    .chart-legend {
      display: flex;
      gap: 16px;
      margin-top: 12px;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--text3);
    }

    .legend-dot {
      width: 8px;
      height: 8px;
      border-radius: 2px;
    }

    .section-head {
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--accent);
      border-bottom: 1px solid var(--border);
      padding-bottom: 10px;
      margin: 28px 0 18px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .section-head::before {
      content: '';
      display: inline-block;
      width: 3px;
      height: 12px;
      background: linear-gradient(180deg, var(--accent), var(--accent));
      border-radius: 2px;
    }

    .section-head:first-child {
      margin-top: 0;
    }

    /* ── TRACKING SECTION ── */
    .tracking-header {
      background: linear-gradient(90deg, rgba(26, 79, 163, .12), rgba(26, 79, 163, .04));
      border: 1px solid rgba(26, 79, 163, .18);
      border-radius: 10px;
      padding: 14px 20px;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .tracking-header h3 {
      font-family: var(--font-head);
      font-size: 16px;
      font-weight: 700;
      flex: 1;
    }

    .tracking-actions {
      display: flex !important;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 16px;
      padding: 14px 18px;
      background: var(--surface2);
      border-radius: var(--r-sm);
      border: 1px solid var(--border);
      align-items: center;
      min-height: 50px;
      z-index: 5;
      position: relative;
    }

    .tracking-actions .btn {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    .tracking-actions .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .tracking-actions span {
      white-space: nowrap;
    }

    .tracking-table-wrap {
      overflow-x: auto;
    }

    .tracking-table th {
      font-size: 10px;
    }

    .tracking-table td {
      font-size: 12px;
      vertical-align: middle;
    }

    .tracking-comment {
      font-size: 12.5px;
      color: var(--text);
      max-width: 260px;
      line-height: 1.7;
      white-space: pre-line;
      font-family: var(--font-body);
    }
    /* Comment type badges inside timeline */
    .trk-type-tag {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      font-size: 9.5px;
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 20px;
      margin-bottom: 4px;
      letter-spacing: .3px;
    }
    .trk-type-general  { background: rgba(26,79,163,.1);  color: #1a4fa3; }
    .trk-type-query    { background: rgba(212,43,43,.1);  color: #c0392b; }
    .trk-type-pending  { background: rgba(245,158,11,.12); color: #92400e; }
    .trk-type-task     { background: rgba(26,115,64,.1);  color: #1a7340; }
    /* Pending docs list in timeline */
    .trk-doc-list {
      margin: 5px 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .trk-doc-list li {
      font-size: 11.5px;
      color: var(--text2);
      padding: 3px 8px;
      background: rgba(245,158,11,.07);
      border-left: 2px solid #f59e0b;
      border-radius: 0 5px 5px 0;
      white-space: nowrap;
    }

    .tracking-subnote {
      font-size: 11.5px;
      color: var(--text3);
      max-width: 220px;
      line-height: 1.6;
      white-space: pre-line;
      font-family: var(--font-body);
      font-style: italic;
    }

    /* Doc checklist in modal */
    .tm-doc-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: var(--text2);
      cursor: pointer;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid var(--border2);
      background: var(--surface);
      transition: all .15s;
      user-select: none;
    }
    .tm-doc-item:hover { border-color: var(--accent); color: var(--accent); }
    .tm-doc-item input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }

    .stage-badge {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .3px;
    }

    .stage-PAR_DEP {
      background: rgba(26, 79, 163, .12);
      color: var(--accent);
    }

    .stage-CPA_Dep,
    .stage-CPA_DOCS {
      background: rgba(212, 43, 43, .12);
      color: var(--accent2);
    }

    .stage-Admin {
      background: rgba(161, 89, 255, .15);
      color: #a159ff;
    }

    .stage-Login {
      background: rgba(255, 107, 53, .15);
      color: var(--accent3);
    }

    .stage-Team,
    .stage-Assign {
      background: rgba(255, 179, 71, .15);
      color: var(--warn);
    }

    .stage-System,
    .stage-System-Comment,
    .stage-System-Comments,
    .stage-system {
      background: rgba(138, 150, 180, .15);
      color: #8a96b4;
    }

    .stage-Sales {
      background: rgba(0, 200, 255, .15);
      color: #1a4fa3;
    }

    .stage-default {
      background: rgba(26, 79, 163, .08);
      color: var(--accent);
    }

    .check-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    .check-done {
      background: rgba(212, 43, 43, .12);
      color: var(--accent2);
    }

    .check-pending {
      background: rgba(255, 179, 71, .15);
      color: var(--warn);
    }

    /* ── WIZARD TRACKING MODAL ── */
    .field-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }

    .field-row.single {
      grid-template-columns: 1fr;
    }

    .field-fg {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .field-fg label {
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text3);
      font-weight: 600;
    }

    .field-fg input,
    .field-fg select,
    .field-fg textarea {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 9px 12px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13px;
      outline: none;
      transition: border-color .18s;
    }

    .field-fg input:focus,
    .field-fg select:focus,
    .field-fg textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .fi-toggle {
      display: flex;
      gap: 10px;
      margin-top: 6px;
    }

    .fi-option {
      flex: 1;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      text-align: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .15s;
    }

    .fi-option:hover {
      border-color: var(--border2);
    }

    .fi-option.positive.selected {
      border-color: var(--accent2);
      background: rgba(212, 43, 43, .1);
      color: var(--accent2);
    }

    .fi-option.negative.selected {
      border-color: var(--danger);
      background: rgba(255, 69, 96, .1);
      color: var(--danger);
    }

    .fi-option.waived.selected {
      border-color: #6b7a8f;
      background: rgba(107, 122, 143, .1);
      color: #4a5568;
    }

    .fi-option.pending.selected {
      border-color: #f59e0b;
      background: rgba(245, 158, 11, .1);
      color: #b45309;
    }

    @media(max-width:1100px) {
      .stats-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:768px) {
      .sidebar {
        left: -280px !important;
        transform: none !important;
      }

      .main {
        margin-left: 0;
      }

      .stats-grid {
        grid-template-columns: 1fr 1fr;
      }

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr;
      }

      .form-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ── Zoom-proof layout: works at any browser zoom level ── */
    body {
      min-width: 320px;
      overflow-x: hidden;
    }
    /* Main content always fills remaining space after sidebar */
    .main {
      min-width: 0;
      width: 100%;
      max-width: 100%;
    }
    /* Topbar always full width of .main */
    .topbar {
      width: 100%;
      box-sizing: border-box;
    }

    /* ══════════════════════════════════════════════════
       LARGE SCREEN RESPONSIVE — 1200px → 2560px+
       Fluid scaling so all pages fit comfortably on wide
       monitors without horizontal overflow or clipping.
    ══════════════════════════════════════════════════ */

    /* 1200–1399px — slight content expansion */
    @media (min-width: 1200px) {
      .page { padding: 24px 28px !important; }
      .stats-grid { grid-template-columns: repeat(4, 1fr); }
      .main { min-width: 0; width: 100%; }
    }

    /* 1400–1599px — wider sidebar comfort zone */
    @media (min-width: 1400px) {
      :root { --sidebar-w: 280px; }
      .page { padding: 30px 36px !important; }
      .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
      .card, .card-body { border-radius: 18px; }
      table th, table td { font-size: 12.5px; }
      .tracking-comment, .tracking-subnote { max-width: 300px; }
    }

    /* 1600–1919px — large desktop */
    @media (min-width: 1600px) {
      :root { --sidebar-w: 280px; }
      .page { padding: 32px 44px !important; }
      .main { width: 100%; }
      .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
      .table-wrap table { font-size: 13px; }
      .topbar { padding: 14px 44px !important; }
      .topbar-search { max-width: 480px; }
      .form-grid   { grid-template-columns: repeat(3, 1fr) !important; }
      .form-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
    }

    /* 1920px — Full HD */
    @media (min-width: 1920px) {
      :root { --sidebar-w: 300px; }
      .page { padding: 32px 40px !important; }
      .stats-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; }
      .topbar { padding: 16px 56px !important; }
      .topbar-search { max-width: 560px; }
      .card { border-radius: 20px; }
      .modal { max-width: 660px !important; }
      .tracking-comment, .tracking-subnote { max-width: 340px; font-size: 12.5px; }
      table th, table td { padding: 14px 18px; font-size: 13px; }
      .stat-value { font-size: 34px !important; }
      .stat-label { font-size: 12px !important; }
    }

    /* 2560px+ — 2K / ultrawide / 4K */
    @media (min-width: 2560px) {
      :root { --sidebar-w: 320px; }
      html { font-size: 18px; }
      .page { padding: 36px 48px !important; }
      .stats-grid { grid-template-columns: repeat(6, 1fr); gap: 28px; }
      .topbar { padding: 20px 80px !important; }
      .topbar-search { max-width: 700px; }
      .card { border-radius: 24px; }
      .modal { max-width: 760px !important; }
      .stat-value { font-size: 40px !important; }
      .tracking-comment, .tracking-subnote { max-width: 400px; font-size: 13px; }
      table th, table td { padding: 16px 22px; font-size: 14px; }
      .btn { font-size: 14px; padding: 11px 22px; }
      .topbar-title { font-size: 22px !important; }
      #lender-approval-box { max-width: 900px; }
      .esm-box { max-width: 680px; }
      #ic-box { max-width: 760px; }
      #bk-box { max-width: 740px; }
    }

    /* ── Payout / wide-table pages: horizontal scroll on any screen ── */
    .table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
    }

    /* Prevent any page from exceeding viewport width */
    .main {
      overflow-x: hidden;
      min-width: 0;
    }

    .page {
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      max-width: 100%;
    }

    /* ── Settings branding grid responsive (works at all zoom levels) ── */
    @media (max-width: 900px) {
      .stg-folder-body [style*="grid-template-columns:1fr 1fr"],
      .stg-folder-body [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }

    /* ═══════════════════════════════════════════════════
       ENHANCED UI — Mudrahub Design System v2
    ═══════════════════════════════════════════════════ */

    /* BODY & BACKGROUND — Mudrahub Brand */
    body {
      background: #f4f7fd;
      background-image:
        radial-gradient(ellipse 80% 45% at 15% -8%, rgba(27, 79, 160, .05) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 90% 95%, rgba(212, 43, 43, .04) 0%, transparent 55%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231b4fa0' fill-opacity='0.018'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    /* ══ Mudrahub BRAND SIDEBAR — handled by new sidebar CSS above ══ */
    /* sidebar, nav-item, nav-label, nav-icon, nav-badge, sidebar-footer,
       user-card, avatar, status-dot, role-badge-* styles are defined in
       the new sidebar block — no overrides needed here */

    /* TOPBAR — clean white with brand accent */
    .topbar {
      background: rgba(255, 255, 255, .95);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 2px solid #f0f4fc;
      padding: 12px 28px;
      box-shadow: 0 2px 16px rgba(27, 79, 160, .06);
    }

    .topbar-title {
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -.4px;
    }

    .topbar-search {
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 9px 16px 9px 38px;
      font-family: var(--font-body);
      font-size: 13px;
      width: 260px;
      color: var(--text);
      transition: all .2s;
    }

    .topbar-search:focus {
      background: #fff;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
      width: 300px;
    }

    .topbar-icon-btn {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 1px 4px rgba(26, 79, 163, .06);
    }

    .topbar-icon-btn:hover {
      background: white;
      border-color: var(--accent);
      box-shadow: 0 4px 12px rgba(26, 79, 163, .12);
      transform: translateY(-1px);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 60%, var(--accent-dark) 100%);
      box-shadow: 0 4px 14px rgba(26, 79, 163, .35), inset 0 1px 0 rgba(255, 255, 255, .15);
      border-radius: 10px;
      font-weight: 700;
      letter-spacing: .1px;
      transition: all .2s;
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #3d7ae0 0%, var(--accent-light) 100%);
      box-shadow: 0 6px 20px rgba(26, 79, 163, .45);
      transform: translateY(-2px);
    }

    .btn {
      border-radius: 10px;
      font-family: var(--font-body);
      font-weight: 600;
    }

    .btn-ghost {
      border: 1.5px solid var(--border2);
      background: var(--surface);
    }

    .btn-ghost:hover {
      background: var(--accent-subtle);
      border-color: var(--accent);
      color: var(--accent);
    }

    /* STAT CARDS — elevated */
    .stat-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      padding: 22px 24px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: all .25s cubic-bezier(.34, 1.3, .64, 1);
      box-shadow: 0 2px 12px rgba(26, 79, 163, .06);
    }

    .stat-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
    }

    .stat-card.blue {
      border-color: rgba(26, 79, 163, .2);
    }

    .stat-card.blue:hover {
      border-color: var(--accent);
      box-shadow: 0 12px 40px rgba(26, 79, 163, .16);
    }

    .stat-card.green {
      border-color: rgba(212, 43, 43, .15);
    }

    .stat-card.green:hover {
      border-color: var(--accent2);
      box-shadow: 0 12px 40px rgba(212, 43, 43, .14);
    }

    .stat-card.orange {
      border-color: rgba(230, 126, 0, .2);
    }

    .stat-card.orange:hover {
      border-color: var(--warn);
      box-shadow: 0 12px 40px rgba(230, 126, 0, .14);
    }

    .stat-card.red {
      border-color: rgba(192, 57, 43, .2);
    }

    .stat-card.red:hover {
      border-color: var(--danger);
      box-shadow: 0 12px 40px rgba(192, 57, 43, .14);
    }

    /* Stat card decorative bg orb */
    .stat-card::after {
      width: 120px;
      height: 120px;
      top: -30px;
      right: -30px;
      border-radius: 50%;
      opacity: .08;
    }

    .stat-card::before {
      height: 3px;
      border-radius: 3px 3px 0 0;
      top: 0;
    }

    .stat-card:hover::before {
      opacity: 1;
    }

    .stat-card.blue::before {
      background: linear-gradient(90deg, var(--accent), rgba(26, 79, 163, .2));
    }

    .stat-card.green::before {
      background: linear-gradient(90deg, var(--accent2), rgba(212, 43, 43, .2));
    }

    .stat-card.orange::before {
      background: linear-gradient(90deg, var(--warn), rgba(230, 126, 0, .2));
    }

    .stat-card.red::before {
      background: linear-gradient(90deg, var(--danger), rgba(192, 57, 43, .2));
    }

    .stat-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-weight: 700;
      color: var(--text3);
      margin-bottom: 14px;
    }

    .stat-value {
      font-family: var(--font-head);
      font-size: 40px;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 12px;
      letter-spacing: -1px;
    }

    .stat-change {
      font-size: 12px;
      background: rgba(26, 79, 163, .06);
      padding: 3px 8px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .stat-card.blue .stat-change {
      background: rgba(26, 79, 163, .06);
    }

    .stat-card.green .stat-change {
      background: rgba(212, 43, 43, .06);
    }

    .stat-card.orange .stat-change {
      background: rgba(230, 126, 0, .06);
    }

    .stat-card.red .stat-change {
      background: rgba(192, 57, 43, .06);
    }

    /* CARDS */
    .card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;
      box-shadow: 0 2px 12px rgba(26, 79, 163, .05);
      transition: all .22s;
    }

    .card:hover {
      border-color: rgba(26, 79, 163, .18);
      box-shadow: 0 6px 28px rgba(26, 79, 163, .09);
    }

    .card-head {
      padding: 18px 24px;
      border-bottom: 1.5px solid var(--border);
      background: linear-gradient(90deg, rgba(26, 79, 163, .025) 0%, transparent 60%);
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .card-title {
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -.3px;
      color: var(--text);
    }

    .card-body {
      padding: 24px;
    }

    /* TABLE */
    table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
    }

    table thead tr {
      position: relative;
    }

    table th {
      font-family: var(--font-body);
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 1.2px;
      font-weight: 700;
      color: var(--text3);
      padding: 12px 16px;
      background: var(--surface2);
      border-bottom: 1.5px solid var(--border);
      white-space: nowrap;
    }

    table th:first-child {
      border-radius: 10px 0 0 0;
    }

    table th:last-child {
      border-radius: 0 10px 0 0;
    }

    table td {
      padding: 13px 16px;
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      color: var(--text2);
    }

    table tbody tr {
      transition: background .15s;
    }

    table tbody tr:hover td {
      background: rgba(26, 79, 163, .035);
    }

    table tbody tr:last-child td {
      border-bottom: none;
    }

    /* MODALS */
    .modal-overlay {
      background: rgba(8, 18, 52, .55);
      backdrop-filter: blur(10px) saturate(140%);
    }

    .modal {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 22px;
      box-shadow: 0 32px 80px rgba(12, 23, 61, .22), 0 0 0 1px rgba(255, 255, 255, .6);
    }

    .modal-head {
      padding: 22px 28px;
      border-bottom: 1.5px solid var(--border);
      background: linear-gradient(90deg, rgba(26, 79, 163, .03), transparent);
    }

    .modal-title {
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 800;
    }

    .modal-close {
      border-radius: 10px;
      border: 1.5px solid var(--border2);
    }

    .modal-close:hover {
      background: var(--accent-subtle);
      color: var(--accent);
    }

    .modal-body {
      padding: 28px;
    }

    /* FORMS */
    label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: var(--text3);
      font-weight: 700;
    }

    input,
    select,
    textarea {
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 14px;
      color: var(--text);
      font-family: var(--font-body);
      font-size: 13.5px;
      outline: none;
      transition: all .2s;
      width: 100%;
    }

    input:focus,
    select:focus,
    textarea:focus {
      background: #fff;
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    input::placeholder {
      color: var(--text3);
    }

    /* ══ PREMIUM TABS ══ */
    .tabs {
      border-bottom: none;
      gap: 6px;
      padding: 6px 6px 0;
      background: linear-gradient(135deg, rgba(26, 79, 163, .04), rgba(59, 108, 212, .02));
      border-radius: 16px 16px 0 0;
      border: 1.5px solid var(--border);
      border-bottom: none;
      flex-wrap: wrap;
    }

    .tab {
      font-family: var(--font-body);
      font-size: 12.5px;
      font-weight: 600;
      padding: 9px 16px;
      border-radius: 10px 10px 0 0;
      color: var(--text3);
      transition: all .2s;
      border: 1.5px solid transparent;
      border-bottom: none;
      display: flex;
      align-items: center;
      gap: 6px;
      position: relative;
    }

    .tab:hover {
      color: var(--accent);
      background: rgba(26, 79, 163, .07);
    }

    .tab.active {
      color: var(--accent);
      background: #fff;
      border-color: var(--border);
      border-bottom-color: #fff;
      box-shadow: 0 -2px 0 var(--accent) inset, 0 2px 8px rgba(26, 79, 163, .08);
    }

    .tab-content {
      border: 1.5px solid var(--border);
      border-radius: 0 0 16px 16px;
      background: #fff;
      padding: 24px;
      margin-top: -1px;
    }

    .tab-content.active {
      display: block;
      animation: tabSlide .2s ease;
    }

    @keyframes tabSlide {
      from {
        opacity: 0;
        transform: translateY(4px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* BADGES */
    .badge {
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      letter-spacing: .3px;
    }

    .badge-Approved,
    .badge-APPROVED {
      background: rgba(26, 127, 58, .1);
      color: #1a7340;
      border: 1px solid rgba(26, 127, 58, .2);
    }

    .badge-Disbursed,
    .badge-DISBURSED {
      background: rgba(26, 79, 163, .1);
      color: var(--accent);
      border: 1px solid rgba(26, 79, 163, .2);
    }

    .badge-Complete,
    .badge-COMPLETE {
      background: rgba(212, 43, 43, .1);
      color: var(--accent2);
      border: 1px solid rgba(212, 43, 43, .2);
    }

    .badge-Rejected,
    .badge-REJECTED,
    .badge-rejected {
      background: rgba(192, 57, 43, .1);
      color: var(--danger);
      border: 1px solid rgba(192, 57, 43, .2);
    }

    .badge-Login,
    .badge-login {
      background: rgba(230, 126, 0, .1);
      color: var(--warn);
      border: 1px solid rgba(230, 126, 0, .2);
    }

    .badge-Hold,
    .badge-hold {
      background: rgba(122, 138, 170, .12);
      color: var(--text3);
      border: 1px solid var(--border2);
    }

    .badge-wip {
      background: rgba(45, 104, 204, .08);
      color: var(--accent-light);
      border: 1px solid rgba(45, 104, 204, .18);
    }

    /* FILTER CHIPS */
    .filter-chip {
      padding: 7px 16px;
      border-radius: 22px;
      font-size: 12px;
      font-weight: 600;
      border: 1.5px solid var(--border);
      color: var(--text3);
      background: var(--surface);
      transition: all .18s;
    }

    .filter-chip:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-subtle);
    }

    .filter-chip.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      box-shadow: 0 4px 12px rgba(26, 79, 163, .28);
    }

    /* TOAST */
    .toast {
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(12px);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(12, 23, 61, .15), 0 0 0 1px rgba(255, 255, 255, .8);
      color: var(--text);
    }

    .toast.success {
      border-left: 4px solid #1a7340;
    }

    .toast.error {
      border-left: 4px solid var(--danger);
    }

    .toast.info {
      border-left: 4px solid var(--accent);
    }

    .toast.warn {
      border-left: 4px solid var(--warn);
    }

    /* PIPELINE BARS */
    .pipeline {
      padding: 16px 20px;
      gap: 10px;
    }

    .stage-bar {
      border-radius: 8px;
      height: 30px;
      font-size: 11.5px;
      font-weight: 700;
    }

    .stage-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text2);
    }

    /* ACTIVITY LIST */
    .activity-item {
      padding: 14px 20px;
    }

    .activity-item:hover {
      background: var(--surface2);
      border-radius: 0;
    }

    .act-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-top: 4px;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
    }

    /* TIMELINE */
    .tl-dot {
      width: 14px;
      height: 14px;
      background: var(--accent);
      border: 2px solid #fff;
      box-shadow: 0 0 0 2px var(--accent), 0 4px 8px rgba(26, 79, 163, .3);
    }

    .tl-connector {
      background: linear-gradient(180deg, var(--accent), var(--border));
      opacity: .3;
    }

    /* PROGRESS */
    .progress-wrap {
      background: var(--surface2);
      border: 1px solid var(--border);
      height: 8px;
      border-radius: 99px;
    }

    .progress-bar {
      background: linear-gradient(90deg, var(--accent-light), var(--accent));
      height: 100%;
      border-radius: 99px;
      box-shadow: 0 0 10px rgba(26, 79, 163, .3);
    }

    /* LOGIN SCREEN — polished */
    .login-screen {
      background: linear-gradient(135deg, #0c1f52 0%, #1a3a82 40%, #0f2566 70%, #0c1f52 100%);
      background-image:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(45, 104, 204, .3) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(212, 43, 43, .2) 0%, transparent 55%),
        linear-gradient(135deg, #0c1f52 0%, #1a3a82 40%, #0f2566 70%, #0c1f52 100%);
    }

    .login-box {
      background: rgba(255, 255, 255, .96);
      backdrop-filter: blur(20px);
      border: 1.5px solid rgba(255, 255, 255, .9);
      border-radius: 24px;
      padding: 28px 36px 32px;
      box-shadow: 0 40px 100px rgba(8, 18, 52, .4), 0 0 0 1px rgba(255, 255, 255, .5);
      width: 100%;
      max-width: 400px;
      margin: 12px;
    }

    .login-logo {
      font-family: var(--font-head);
      font-size: 38px;
      font-weight: 900;
      letter-spacing: -1.5px;
    }

    .login-sub {
      font-size: 11.5px;
      letter-spacing: 2px;
      color: var(--text3);
      text-transform: uppercase;
      margin-bottom: 36px;
    }

    .login-input {
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 14px;
    }

    .login-input:focus {
      background: #fff;
      border-color: var(--accent);
    }

    .login-select {
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: 14px;
    }

    .login-btn {
      background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-dark) 100%);
      border-radius: 12px;
      padding: 14px;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: .3px;
      box-shadow: 0 8px 24px rgba(26, 79, 163, .4), inset 0 1px 0 rgba(255, 255, 255, .2);
    }

    .login-btn:hover {
      box-shadow: 0 12px 32px rgba(26, 79, 163, .5);
      transform: translateY(-2px);
    }

    .role-pill {
      border: 1.5px solid var(--border2);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 600;
      padding: 5px 12px;
      transition: all .15s;
    }

    .role-pill:hover {
      border-color: var(--accent);
      background: var(--accent-subtle);
      color: var(--accent);
    }

    /* SECTION HEADERS */
    .section-head {
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--accent);
      padding-bottom: 12px;
      margin: 28px 0 20px;
      border-bottom: 2px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .section-head::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, var(--accent), var(--accent2));
      border-radius: 2px;
    }

    /* PAGE HEADER */
    .page {
      padding: 28px 32px;
    }

    /* WIZARD STEPS */
    .step-num {
      font-family: var(--font-head);
      font-weight: 800;
      font-size: 15px;
    }

    .wizard-step.active .step-num {
      box-shadow: 0 4px 18px rgba(26,79,163,.35);
    }

    .wizard-step.done .step-num {
      background: linear-gradient(135deg, #4ade80, #16a34a) !important;
      color: #fff !important;
    }

    .wizard-step.done .step-label {
      color: #16a34a;
      font-weight: 700;
    }

    .wizard-step.active .step-label {
      font-weight: 700;
    }

    /* DOC ITEMS */
    .doc-item {
      border-radius: 12px;
      border: 1.5px solid var(--border);
      background: var(--surface2);
    }

    .doc-item:hover {
      border-color: var(--accent);
      background: var(--accent-subtle);
    }

    /* CHART BARS */
    .chart-bar-inner {
      background: linear-gradient(180deg, rgba(26, 79, 163, .18), rgba(26, 79, 163, .08));
      border-top: 2px solid var(--accent);
      border-radius: 6px 6px 0 0;
    }

    .chart-bar-inner:hover {
      background: linear-gradient(180deg, rgba(26, 79, 163, .45), rgba(26, 79, 163, .2));
    }

    /* EMPTY STATE */
    .empty-state {
      padding: 80px 20px;
    }

    .empty-icon {
      font-size: 56px;
      opacity: .35;
    }

    .empty-title {
      font-family: var(--font-head);
      font-size: 20px;
      font-weight: 800;
      color: var(--text2);
    }

    /* ACCESS CARDS */
    .access-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      padding: 24px;
      transition: all .22s;
    }

    .access-card:hover {
      border-color: rgba(26, 79, 163, .25);
      transform: translateY(-3px);
      box-shadow: var(--shadow);
    }

    .current-user-highlight {
      border-color: var(--accent) !important;
      box-shadow: 0 0 0 3px rgba(26, 79, 163, .12), var(--shadow) !important;
    }

    /* TRACKING HEADER */
    .tracking-header {
      background: linear-gradient(90deg, rgba(26, 79, 163, .08), rgba(26, 79, 163, .03));
      border: 1.5px solid rgba(26, 79, 163, .15);
      border-radius: 14px;
      padding: 16px 22px;
    }

    /* STAGE BADGE */
    .stage-badge {
      font-size: 10.5px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      letter-spacing: .2px;
    }

    /* CALC RESULT */
    .calc-result {
      background: linear-gradient(135deg, rgba(26, 79, 163, .07), rgba(212, 43, 43, .04));
      border: 1.5px solid rgba(26, 79, 163, .15);
      border-radius: 18px;
    }

    .calc-result::before {
      background: linear-gradient(90deg, transparent, rgba(26, 79, 163, .4), rgba(212, 43, 43, .3), transparent);
    }

    .emi-val {
      color: var(--accent);
      font-size: 50px;
      font-weight: 900;
      letter-spacing: -2px;
    }

    .emi-item {
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 12px;
    }

    .emi-item-val {
      font-family: var(--font-head);
      font-size: 18px;
      font-weight: 800;
    }

    /* INCRED CARD */
    .incred-card {
      background: linear-gradient(135deg, rgba(26, 79, 163, .06), rgba(212, 43, 43, .03));
      border: 1.5px solid rgba(26, 79, 163, .12);
      border-radius: 16px;
    }

    /* SCROLLBAR */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 10px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--accent);
    }

    /* TABLE WRAP */
    .table-wrap {
      border-radius: 0 0 16px 16px;
      overflow: hidden;
    }

    /* FI OPTION */
    .fi-option {
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-size: 12.5px;
      font-weight: 600;
    }

    .fi-option.positive.selected {
      border-color: var(--accent2);
      background: rgba(212, 43, 43, .08);
      color: var(--accent2);
    }

    /* ANIMATION — page fade */
    @keyframes pageFadeIn {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* STAT CARD ICON */
    .stat-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 14px;
    }

    .stat-icon.blue {
      background: rgba(26, 79, 163, .1);
    }

    .stat-icon.green {
      background: rgba(212, 43, 43, .1);
    }

    .stat-icon.orange {
      background: rgba(230, 126, 0, .1);
    }

    .stat-icon.red {
      background: rgba(192, 57, 43, .1);
    }


    /* ═══════════════════════════════════════════════════
       CELEBRATION & TRANSITION ANIMATIONS — v3
    ═══════════════════════════════════════════════════ */

    /* ── CONFETTI CANVAS ── */
    #confetti-canvas {
      position: fixed;
      inset: 0;
      z-index: 9998;
      pointer-events: none;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity .3s;
    }

    #confetti-canvas.active {
      opacity: 1;
    }

    /* ── CELEBRATION OVERLAY ── */
    .celebration-overlay {
      position: fixed;
      inset: 0;
      z-index: 9997;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity .4s;
    }

    .celebration-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    .celebration-card {
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(20px);
      border: 2px solid var(--border);
      border-radius: 28px;
      padding: 48px 56px;
      text-align: center;
      box-shadow: 0 40px 100px rgba(12, 23, 61, .25), 0 0 0 1px rgba(255, 255, 255, .8);
      transform: scale(.8) translateY(40px);
      transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .4s;
      max-width: 480px;
      width: 90%;
    }

    .celebration-overlay.active .celebration-card {
      transform: scale(1) translateY(0);
    }

    .celebration-icon {
      font-size: 72px;
      margin-bottom: 18px;
      display: block;
      animation: celebIconBounce .6s cubic-bezier(.34, 1.6, .64, 1) forwards;
    }

    @keyframes celebIconBounce {
      0% {
        transform: scale(0) rotate(-20deg);
      }

      60% {
        transform: scale(1.15) rotate(8deg);
      }

      100% {
        transform: scale(1) rotate(0deg);
      }
    }

    .celebration-title {
      font-family: var(--font-head);
      font-size: 28px;
      font-weight: 900;
      margin-bottom: 10px;
      letter-spacing: -.5px;
    }

    .celebration-sub {
      font-size: 14px;
      color: var(--text3);
      line-height: 1.6;
      margin-bottom: 28px;
    }

    .celebration-amount {
      font-family: var(--font-head);
      font-size: 42px;
      font-weight: 900;
      letter-spacing: -1.5px;
      margin-bottom: 8px;
    }

    .celebration-id {
      font-size: 12px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 28px;
    }

    .celebration-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 13px 32px;
      border-radius: 14px;
      font-family: var(--font-body);
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      transition: all .2s;
    }

    /* ── STATUS CHANGE FLASH ── */
    @keyframes statusFlash {
      0% {
        box-shadow: 0 0 0 0 rgba(26, 79, 163, .6);
      }

      50% {
        box-shadow: 0 0 0 12px rgba(26, 79, 163, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(26, 79, 163, 0);
      }
    }

    @keyframes statusFlashRed {
      0% {
        box-shadow: 0 0 0 0 rgba(212, 43, 43, .6);
      }

      50% {
        box-shadow: 0 0 0 12px rgba(212, 43, 43, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(212, 43, 43, 0);
      }
    }

    @keyframes statusFlashGreen {
      0% {
        box-shadow: 0 0 0 0 rgba(26, 115, 64, .6);
      }

      50% {
        box-shadow: 0 0 0 14px rgba(26, 115, 64, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(26, 115, 64, 0);
      }
    }

    .flash-blue {
      animation: statusFlash .8s ease-out;
    }

    .flash-red {
      animation: statusFlashRed .8s ease-out;
    }

    .flash-green {
      animation: statusFlashGreen .8s ease-out;
    }

    /* ── TABLE ROW ENTRY ── */
    @keyframes rowSlideIn {
      from {
        opacity: 0;
        transform: translateX(-16px);
        background: rgba(26, 79, 163, .08);
      }

      to {
        opacity: 1;
        transform: translateX(0);
        background: transparent;
      }
    }

    .row-new {
      animation: rowSlideIn .5s cubic-bezier(.34, 1.2, .64, 1) forwards;
    }

    /* ── STAT COUNTER BUMP ── */
    @keyframes statBump {
      0% {
        transform: scale(1);
      }

      40% {
        transform: scale(1.28) translateY(-4px);
      }

      70% {
        transform: scale(.95);
      }

      100% {
        transform: scale(1);
      }
    }

    .stat-bump {
      animation: statBump .5s cubic-bezier(.34, 1.4, .64, 1);
    }

    /* ── STATUS BADGE TRANSITION ── */
    @keyframes badgeSwap {
      0% {
        opacity: 0;
        transform: scale(.5) translateY(-8px);
      }

      60% {
        transform: scale(1.1) translateY(2px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .badge-animate {
      animation: badgeSwap .4s cubic-bezier(.34, 1.4, .64, 1);
    }

    /* ── TOAST ENHANCED ── */
    @keyframes toastIn {
      from {
        transform: translateX(40px) scale(.92);
        opacity: 0;
      }

      to {
        transform: translateX(0) scale(1);
        opacity: 1;
      }
    }

    @keyframes toastOut {
      from {
        transform: translateX(0) scale(1);
        opacity: 1;
        max-height: 80px;
      }

      to {
        transform: translateX(50px) scale(.92);
        opacity: 0;
        max-height: 0;
      }
    }

    .toast-leaving {
      animation: toastOut .35s ease-in forwards;
    }

    /* ── APPLICATION CREATED BANNER ── */
    @keyframes createdBannerIn {
      0% {
        transform: translateY(-60px);
        opacity: 0;
      }

      60% {
        transform: translateY(6px);
        opacity: 1;
      }

      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }

    .created-banner {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9996;
      pointer-events: none;
      background: linear-gradient(135deg, var(--accent-dark), var(--accent));
      color: white;
      padding: 14px 28px;
      border-radius: 50px;
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .3px;
      box-shadow: 0 8px 30px rgba(26, 79, 163, .45);
      animation: createdBannerIn .6s cubic-bezier(.34, 1.3, .64, 1) forwards;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    /* ── PROGRESS FILL ANIMATION ── */
    @keyframes progressFill {
      from {
        width: 0;
      }
    }

    .progress-bar {
      animation: progressFill .8s cubic-bezier(.4, 0, .2, 1);
    }

    /* ── PAGE TRANSITION ── */
    @keyframes pageFadeIn {
      from {
        opacity: 0;
        transform: translateY(16px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .page.active {
      animation: pageFadeIn .3s cubic-bezier(.4, 0, .2, 1);
    }

    .edit-tab-panel {
      display: none;
    }
    .edit-tab-panel.active {
      display: block;
    }

    /* ── BINARY FIELD ATTACHMENT PREVIEW ── */
    .preview-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 18, 52, .7);
      backdrop-filter: blur(12px);
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s;
    }

    .preview-modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .preview-modal {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 22px;
      box-shadow: 0 40px 100px rgba(12, 23, 61, .3);
      width: min(92vw, 860px);
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      transform: scale(.92) translateY(20px);
      transition: transform .3s cubic-bezier(.34, 1.2, .64, 1);
    }

    .preview-modal-overlay.open .preview-modal {
      transform: scale(1) translateY(0);
    }

    .preview-modal-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 24px;
      border-bottom: 1.5px solid var(--border);
      background: linear-gradient(90deg, rgba(26, 79, 163, .03), transparent);
      flex-shrink: 0;
    }

    .preview-modal-title {
      flex: 1;
      font-family: var(--font-head);
      font-size: 15px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .preview-modal-meta {
      font-size: 11.5px;
      color: var(--text3);
      flex-shrink: 0;
    }

    .preview-modal-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 1.5px solid var(--border2);
      background: transparent;
      cursor: pointer;
      font-size: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      flex-shrink: 0;
    }

    .preview-modal-close:hover {
      background: var(--accent-subtle);
      border-color: var(--accent);
      color: var(--accent);
    }

    .preview-modal-body {
      flex: 1;
      overflow: auto;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 200px;
    }

    .preview-img {
      max-width: 100%;
      max-height: 65vh;
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(12, 23, 61, .15);
    }

    .preview-pdf-frame {
      width: 100%;
      height: 65vh;
      border: none;
      border-radius: 10px;
    }

    .preview-no-preview {
      text-align: center;
      color: var(--text3);
    }

    .preview-no-preview .pnp-icon {
      font-size: 52px;
      margin-bottom: 14px;
    }

    .preview-no-preview .pnp-msg {
      font-size: 14px;
      margin-bottom: 16px;
    }

    .preview-btn-eye {
      background: none;
      border: 1.5px solid var(--border2);
      border-radius: 8px;
      width: 30px;
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--accent);
      font-size: 15px;
      flex-shrink: 0;
      transition: all .15s;
      margin-left: 4px;
    }

    .preview-btn-eye:hover {
      background: var(--accent-subtle);
      border-color: var(--accent);
    }

    .doc-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      background: var(--surface);
      margin-bottom: 10px;
      transition: border-color .2s;
    }

    /* ── Inline password row inside doc-item (for password-protected PDFs) ── */
    .doc-pw-row {
      display: none;
      width: 100%;
      flex-basis: 100%;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
      padding: 10px 12px;
      background: rgba(230,126,0,.07);
      border: 1.5px solid rgba(230,126,0,.28);
      border-radius: 10px;
      animation: docPwRowIn .2s ease;
    }
    .doc-pw-row.show { display: flex; }
    .doc-pw-row label { font-size: 11px; font-weight: 700; color: #b45309; white-space: nowrap; flex-shrink: 0; }
    .doc-pw-row input[type="password"] {
      flex: 1; min-width: 140px; background: var(--surface); border: 1.5px solid rgba(230,126,0,.35);
      border-radius: 7px; padding: 7px 10px; color: var(--text); font-size: 12.5px; outline: none;
      font-family: var(--font-body); transition: border-color .18s, box-shadow .18s;
    }
    .doc-pw-row input[type="password"]:focus { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,.14); }
    .doc-pw-btn {
      padding: 7px 14px; border-radius: 7px; background: linear-gradient(135deg,#d97706,#f59e0b);
      border: none; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer;
      font-family: var(--font-body); box-shadow: 0 2px 6px rgba(217,119,6,.3); flex-shrink: 0;
      transition: opacity .15s;
    }
    .doc-pw-btn:hover { opacity: .88; }
    .doc-pw-status { font-size: 11.5px; font-weight: 600; flex-shrink: 0; min-width: 80px; }
    .doc-pw-badge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 9.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
      background: rgba(217,119,6,.12); color: #b45309; border: 1px solid rgba(217,119,6,.28);
      letter-spacing: .3px; white-space: nowrap; flex-shrink: 0; margin-left: 4px;
    }
    @keyframes docPwRowIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

    /* ── DISBURSE PULSE RING ── */
    @keyframes disburseRing {
      0% {
        transform: scale(0.8);
        opacity: .9;
      }

      100% {
        transform: scale(2.2);
        opacity: 0;
      }
    }

    .disburse-ring {
      position: fixed;
      border-radius: 50%;
      border: 3px solid #1a7340;
      pointer-events: none;
      z-index: 9999;
      animation: disburseRing .8s ease-out forwards;
    }

    /* ── WIZARD STEP COMPLETION ── */
    @keyframes stepComplete {
      0% {
        background: var(--accent);
        transform: scale(1);
      }

      40% {
        background: var(--success);
        transform: scale(1.3);
      }

      100% {
        background: var(--accent);
        transform: scale(1);
      }
    }

    .step-completing {
      animation: stepComplete .5s ease;
    }

    /* ── NAV ITEM HIGHLIGHT ── */
    @keyframes navPing {
      0% {
        box-shadow: inset 0 0 0 0 rgba(212, 43, 43, .4);
      }

      50% {
        box-shadow: inset 0 0 0 4px rgba(212, 43, 43, .15);
      }

      100% {
        box-shadow: inset 0 0 0 0 rgba(212, 43, 43, 0);
      }
    }

    .nav-ping {
      animation: navPing .5s ease;
    }

    /* ── APPROVED GLOW ── */
    @keyframes approvedGlow {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(26, 115, 64, .0);
      }

      50% {
        box-shadow: 0 0 32px 8px rgba(26, 115, 64, .3);
      }
    }

    .approved-glow {
      animation: approvedGlow 1.2s ease-in-out 2;
    }

    /* ── REJECTED SHAKE ── */
    @keyframes rejectedShake {

      0%,
      100% {
        transform: translateX(0);
      }

      15% {
        transform: translateX(-8px);
      }

      30% {
        transform: translateX(8px);
      }

      45% {
        transform: translateX(-6px);
      }

      60% {
        transform: translateX(6px);
      }

      75% {
        transform: translateX(-3px);
      }

      90% {
        transform: translateX(3px);
      }
    }

    .rejected-shake {
      animation: rejectedShake .55s ease;
    }

    /* ── MONEY PARTICLES ── */
    .money-particle {
      position: fixed;
      pointer-events: none;
      z-index: 9999;
      font-size: 22px;
      user-select: none;
      animation: moneyFly 1.2s ease-out forwards;
    }

    @keyframes moneyFly {
      0% {
        transform: translate(0, 0) scale(.5) rotate(0deg);
        opacity: 1;
      }

      100% {
        transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(var(--rot));
        opacity: 0;
      }
    }

    /* ── LOGIN SUCCESS ── */
    @keyframes loginSlideOut {
      0% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }

      40% {
        opacity: 1;
        transform: scale(1.02) translateY(-8px);
      }

      100% {
        opacity: 0;
        transform: scale(.94) translateY(-40px);
      }
    }

    .login-exiting {
      animation: loginSlideOut .55s cubic-bezier(.4, 0, .2, 1) forwards;
    }

    /* ── COUNTING NUMBER ANIMATION ── */
    @keyframes countPop {
      0% {
        color: var(--accent);
        transform: scale(1.4);
      }

      100% {
        color: inherit;
        transform: scale(1);
      }
    }

    .count-pop {
      animation: countPop .5s cubic-bezier(.34, 1.4, .64, 1);
    }

    /* ── MOBILE HAMBURGER ── */
    .hamburger-btn {
      display: none;
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 10px;
      border: 1.5px solid var(--border2);
      background: var(--surface);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all .2s;
      position: relative;
      z-index: 51;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }

    .hamburger-btn:hover {
      border-color: var(--accent);
      background: var(--accent-subtle);
    }

    .hamburger-btn:active {
      transform: scale(0.93);
    }

    .sidebar-overlay {
      position: fixed;
      inset: 0;
      background: rgba(8, 18, 52, .5);
      backdrop-filter: blur(4px);
      z-index: 199;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
      display: none;
    }

    .sidebar-overlay.open {
      opacity: 1;
      pointer-events: all;
      display: block;
    }

    /* ── MENU MANAGER MODAL ── */
    .menu-manager-overlay {
      position: fixed;
      inset: 0;
      z-index: 9998;
      background: rgba(8, 18, 52, .6);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s;
    }

    .menu-manager-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .menu-manager-box {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 22px;
      box-shadow: 0 40px 100px rgba(12, 23, 61, .25);
      width: min(96vw, 780px);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      transform: scale(.92) translateY(20px);
      transition: transform .3s cubic-bezier(.34, 1.2, .64, 1);
    }

    .menu-manager-overlay.open .menu-manager-box {
      transform: scale(1) translateY(0);
    }

    .menu-manager-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 20px 24px;
      border-bottom: 1.5px solid var(--border);
      background: linear-gradient(90deg, rgba(26, 79, 163, .04), transparent);
      flex-shrink: 0;
    }

    .menu-manager-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px 20px;
    }

    .menu-manager-foot {
      padding: 16px 20px;
      border-top: 1.5px solid var(--border);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .menu-item-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      margin-bottom: 8px;
      cursor: default;
      user-select: none;
      transition: all .18s;
    }

    .menu-item-row:hover {
      border-color: var(--accent);
      background: var(--accent-subtle);
    }

    .menu-item-row.dragging {
      opacity: .5;
      transform: scale(.97);
    }

    .menu-item-row.drag-over {
      border-color: var(--accent2);
      background: var(--accent2-subtle);
      transform: translateY(-2px);
    }

    /* Role toggle — compact checkbox-style pill used in Menu Manager */
    .mm-role-toggle {
      width: 28px;
      height: 16px;
      border-radius: 8px;
      background: var(--border2);
      position: relative;
      cursor: pointer;
      transition: background .2s;
      flex-shrink: 0;
    }
    .mm-role-toggle.on { background: var(--accent); }
    .mm-role-toggle::after {
      content: '';
      position: absolute;
      top: 2px; left: 2px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: #fff;
      transition: transform .18s;
      box-shadow: 0 1px 3px rgba(0,0,0,.18);
    }
    .mm-role-toggle.on::after { transform: translateX(12px); }

    .menu-item-toggle {
      width: 36px;
      height: 20px;
      border-radius: 10px;
      background: var(--border2);
      position: relative;
      cursor: pointer;
      transition: background .2s;
      flex-shrink: 0;
    }

    .menu-item-toggle.on {
      background: var(--accent);
    }

    .menu-item-toggle::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      transition: transform .2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    }

    .menu-item-toggle.on::after {
      transform: translateX(16px);
    }

    .menu-drag-handle {
      font-size: 14px;
      color: var(--text3);
      cursor: grab;
      flex-shrink: 0;
    }

    .admin-gear-btn {
      display: none;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1.5px solid var(--border2);
      background: transparent;
      color: var(--text3);
      font-size: 13px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      margin-left: auto;
      flex-shrink: 0;
    }

    .admin-gear-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-subtle);
    }

    .sidebar-footer:hover .admin-gear-btn {
      display: flex;
    }

    /* always show when admin */
    .is-admin .admin-gear-btn {
      display: flex !important;
    }

    /* ── Tasks Page ── */
    .tasks-filter-btn {
      padding: 6px 16px;
      border-radius: 99px;
      border: 1.5px solid var(--border2);
      background: var(--surface);
      color: var(--text3);
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
    }
    .tasks-filter-btn:hover { border-color: var(--accent); color: var(--accent); }
    .tasks-filter-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    .task-card {
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 14px 18px;
      display: flex;
      align-items: flex-start;
      gap: 14px;
      transition: border-color .18s, box-shadow .18s;
    }
    .task-card:hover { border-color: var(--accent); box-shadow: 0 4px 16px rgba(26,79,163,.08); }
    .task-card.done { opacity: .55; }
    .task-card.overdue { border-left: 3px solid var(--accent2); }

    .task-check {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border2);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0; margin-top: 1px;
      transition: all .18s;
      font-size: 11px; color: #fff;
    }
    .task-check:hover { border-color: var(--accent); background: var(--accent-subtle); }
    .task-check.checked { background: var(--success); border-color: var(--success); }
    .task-check.checked::after { content: '✓'; }

    .task-priority {
      font-size: 10px; font-weight: 700;
      padding: 2px 8px; border-radius: 99px;
      text-transform: uppercase; letter-spacing: .4px;
    }
    .task-priority.high   { background: rgba(212,43,43,.1);  color: var(--accent2); }
    .task-priority.medium { background: rgba(230,126,0,.1);  color: var(--warn); }
    .task-priority.low    { background: rgba(26,115,64,.1);  color: var(--success); }

    /* Delete button in table */
    .btn-delete {
      background: rgba(192, 57, 43, .08);
      color: var(--danger);
      border: 1px solid rgba(192, 57, 43, .2);
    }

    .btn-delete:hover {
      background: rgba(192, 57, 43, .18);
    }

    /* ── SIDEBAR HOVER EFFECTS — ripple overlay only, transform/bg handled by main CSS ── */
    .nav-item {
      position: relative;
      overflow: hidden;
    }

    .nav-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(26, 79, 163, .05), transparent);
      opacity: 0;
      transition: opacity .2s;
      pointer-events: none;
      border-radius: 10px;
    }

    .nav-item:hover::after {
      opacity: 1;
    }

    /* ── POPUP OVERLAY FOR CELEBRATION ── */
    .partner-popup-overlay {
      position: fixed;
      inset: 0;
      z-index: 9995;
      background: rgba(8, 18, 52, .6);
      backdrop-filter: blur(12px);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .4s;
    }

    .partner-popup-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    /* ── WHATSAPP/EMAIL NOTIFICATION TOAST ── */
    .notif-sent-banner {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9990;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #128C7E;
      color: #fff;
      padding: 12px 22px;
      border-radius: 50px;
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 28px rgba(18, 140, 126, .4);
      animation: notifBannerIn .5s cubic-bezier(.34, 1.3, .64, 1) forwards;
      white-space: nowrap;
    }

    @keyframes notifBannerIn {
      from {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
      }

      to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
      }
    }

    /* ══════════════════════════════
       RESPONSIVE — MOBILE & TABLET
    ══════════════════════════════ */

    /* ── TABLET / HIGH-ZOOM (≤ 1100px) ── */
    @media (max-width: 1100px) {
      :root {
        --sidebar-w: 0px;
      }

      /* Sidebar — off-canvas drawer, fully expanded */
      .sidebar {
        width: 280px !important;
        left: -280px !important;
        transform: none !important;
        transition: left .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s;
        z-index: 200;
      }

      .sidebar.open {
        left: 0 !important;
        box-shadow: 4px 0 32px rgba(0,0,0,.12);
      }

      /* Force all text visible inside mobile drawer */
      .sidebar .logo-banner-slot,
      .sidebar .nav-text,
      .sidebar .nav-label,
      .sidebar .nav-section-chevron,
      .sidebar .nav-badge,
      .sidebar .user-info,
      .sidebar .status-dot,
      .sidebar .admin-gear-label {
        opacity: 1 !important;
        transform: translateX(0) !important;
        pointer-events: auto !important;
      }
      /* On mobile drawer, hide icon slot / show banner slot */
      .sidebar .logo-icon-slot {
        opacity: 0 !important;
        pointer-events: none !important;
      }
      /* Nav icon back to normal width on mobile */
      .sidebar .nav-icon {
        width: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      /* Nav item padding restored for mobile expanded sidebar */
      .sidebar .nav-item {
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 0 !important;
        margin: 1px 0 !important;
      }
      /* Section padding */
      .sidebar .nav-section { padding: 0 0 4px !important; }
      /* User card layout */
      .sidebar .user-card { padding: 8px 12px !important; gap: 10px !important; }
      .sidebar .avatar { width: 40px !important; height: 44px !important; }

      .sidebar-overlay {
        display: block !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
      }

      .sidebar-overlay.open {
        opacity: 1;
        pointer-events: all;
        display: block !important;
      }

      /* Main content */
      .main {
        margin-left: 0 !important;
      }

      /* Topbar */
      .hamburger-btn {
        display: flex !important;
      }

      .topbar {
        padding: 10px 14px !important;
        gap: 10px;
      }

      .topbar-search {
        display: none;
      }

      .topbar-title {
        font-size: 15px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 180px;
      }

      #topbar-new-btn {
        display: none !important;
      }

      /* Grid layouts */
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
      }

      .grid-2,
      .grid-3 {
        grid-template-columns: 1fr !important;
      }

      .access-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      .form-grid {
        grid-template-columns: 1fr 1fr !important;
      }

      .form-grid-3 {
        grid-template-columns: 1fr 1fr !important;
      }

      .obligation-row {
        grid-template-columns: 1fr 1fr !important;
      }

      /* FOIR 5-col grid: 2+3 on tablet */
      #foir-panel [style*="repeat(5,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
      }

      #foir-panel [style*="repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
      }

      /* Page padding */
      .page {
        padding: 16px !important;
      }

      .card-body {
        padding: 16px !important;
      }

      .card-head {
        padding: 14px 16px !important;
      }

      .modal-body {
        padding: 18px !important;
      }

      .modal-head {
        padding: 16px 20px !important;
      }

      .tab-content {
        padding: 18px !important;
      }

      /* Tables */
      .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      table th,
      table td {
        white-space: nowrap;
      }

      /* Filter bar */
      .filter-bar {
        flex-wrap: wrap;
        gap: 6px;
      }

      .filter-chip {
        font-size: 11px;
        padding: 5px 12px;
      }

      /* Wizard steps */
      .wizard-steps {
        gap: 0;
        overflow-x: auto;
        padding-bottom: 8px;
      }

      .step-label {
        font-size: 8px !important;
      }

      .wizard-step {
        min-width: 64px;
      }

      /* Modals */
      .modal {
        width: 95vw !important;
        margin: 0 !important;
      }

      .modal-overlay {
        align-items: flex-end;
        padding-bottom: 0;
      }

      /* Tabs — horizontal scroll */
      .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0;
        border-radius: 14px 14px 0 0;
      }

      .tab {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 12px;
        padding: 8px 12px;
      }

      /* Topbar actions — hide less important ones */
      .topbar-icon-btn:not(:first-of-type):not(:last-of-type) {
        display: none;
      }

      /* Detail header flex wrap */
      #page-app-detail>div:first-child {
        flex-wrap: wrap;
        gap: 10px;
      }

      #detail-actions {
        flex-wrap: wrap;
        gap: 6px;
      }

      #detail-actions .btn {
        font-size: 11.5px;
        padding: 7px 12px;
      }

      /* Timeline header stack */
      .tracking-header {
        flex-wrap: wrap;
      }

      .tracking-actions {
        flex-wrap: wrap;
      }

      /* Pipeline labels shorter */
      .stage-label {
        width: 80px !important;
        font-size: 11px;
      }
    }

    /* ══════════════════════════════════════════════════
       PHONE — ≤ 600px
    ══════════════════════════════════════════════════ */
    @media (max-width: 600px) {
      :root {
        --sidebar-w: 0px;
      }

      /* ── Body ── */
      body { -webkit-text-size-adjust: 100%; }

      /* ── Stats ── */
      .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
      }
      .stat-card {
        padding: 14px 12px !important;
        border-radius: 14px;
      }
      .stat-value { font-size: 26px !important; margin-bottom: 4px !important; }
      .stat-icon  { width: 34px !important; height: 34px !important; font-size: 15px !important; margin-bottom: 8px !important; }
      .stat-label { font-size: 9.5px !important; margin-bottom: 6px !important; }

      /* ── Grids ── */
      .form-grid, .form-grid-3, .grid-2, .grid-3, .access-grid, .obligation-row {
        grid-template-columns: 1fr !important;
      }
      #foir-panel [style*="repeat(5,1fr)"] { grid-template-columns: 1fr 1fr !important; }
      #foir-panel [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

      /* ── Page & Topbar ── */
      .page    { padding: 12px !important; }
      .topbar  { padding: 10px 14px !important; }
      .topbar-title { font-size: 15px !important; max-width: 150px; }
      .topbar-icon-btn { width: 40px !important; height: 40px !important; font-size: 15px !important; }

      /* ── Login ── */
      .login-box   { margin: 12px !important; padding: 24px 18px !important; border-radius: 20px; }
      .login-logo  { font-size: 28px !important; }
      .login-sub   { margin-bottom: 22px !important; }
      .login-input, .login-select { font-size: 16px !important; min-height: 48px; padding: 12px 14px; }
      .login-btn   { padding: 14px !important; min-height: 52px; font-size: 15px !important; }

      /* ── Modals — full-screen bottom sheet ── */
      .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
      }
      .modal {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 92vh !important;
        border-radius: 22px 22px 0 0 !important;
        overflow-y: auto;
        margin: 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 12px);
      }
      .modal-head  { padding: 16px 18px !important; }
      .modal-body  { padding: 16px 18px !important; }
      .modal-title { font-size: 16px !important; }

      /* ESM overlays (Deviation / Disburse etc.) — bottom sheet */
      .esm-overlay { align-items: flex-end !important; padding: 0 !important; }
      .esm-box {
        max-width: 100vw !important;
        width: 100vw !important;
        border-radius: 22px 22px 0 0 !important;
        max-height: 92vh !important;
        padding-bottom: env(safe-area-inset-bottom, 12px);
      }
      .esm-header { padding: 16px 18px 14px !important; }
      .esm-body   { padding: 16px 18px !important; gap: 12px !important; }
      .esm-footer { padding: 12px 18px 16px !important; }
      .esm-row    { grid-template-columns: 1fr !important; }

      /* Lender approval / income check / bank check ── */
      #lender-approval-overlay { align-items: flex-end !important; padding: 0 !important; }
      #lender-approval-box {
        max-width: 100vw !important; width: 100vw !important;
        border-radius: 22px 22px 0 0 !important; max-height: 92vh !important;
        padding-bottom: env(safe-area-inset-bottom, 12px);
      }
      #lender-approval-box .la-grid   { grid-template-columns: 1fr 1fr !important; }
      #lender-approval-box .la-grid-2 { grid-template-columns: 1fr !important; }
      #lender-approval-box .la-footer { flex-wrap: wrap; gap: 8px; }
      #lender-approval-box .la-footer .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }

      #ic-overlay { align-items: flex-end !important; padding: 0 !important; }
      #ic-box { max-width: 100vw !important; width: 100vw !important; border-radius: 22px 22px 0 0 !important; max-height: 92vh !important; padding-bottom: env(safe-area-inset-bottom, 12px); }
      #bk-overlay { align-items: flex-end !important; padding: 0 !important; }
      #bk-box { max-width: 100vw !important; width: 100vw !important; border-radius: 22px 22px 0 0 !important; max-height: 92vh !important; padding-bottom: env(safe-area-inset-bottom, 12px); }
      .bk-grid { grid-template-columns: 1fr !important; }

      /* ── Cards ── */
      .card         { border-radius: 14px !important; }
      .card-head    { padding: 12px 14px !important; }
      .card-body    { padding: 12px 14px !important; }
      .card-title   { font-size: 13.5px !important; }

      /* ── Tabs — horizontal scroll pill row ── */
      .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 6px 6px 0;
        border-radius: 12px 12px 0 0;
        gap: 4px;
      }
      .tabs::-webkit-scrollbar { display: none; }
      .tab {
        font-size: 11px !important;
        padding: 8px 12px !important;
        flex-shrink: 0;
        scroll-snap-align: start;
        min-height: 40px;
        display: flex; align-items: center;
      }
      .tab span     { font-size: 12px !important; }
      .tab-content  { padding: 14px !important; border-radius: 0 0 14px 14px !important; }

      /* ── Tables — scrollable with momentum ── */
      .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0 0 12px 12px;
      }
      table th { font-size: 10px !important; padding: 9px 10px !important; white-space: nowrap; }
      table td { font-size: 12px !important; padding: 11px 10px !important; }

      /* Timeline table — collapse less important columns */
      .tracking-table th:nth-child(3),
      .tracking-table td:nth-child(3),
      .tracking-table th:nth-child(4),
      .tracking-table td:nth-child(4) { display: none; }
      .tracking-comment, .tracking-subnote { max-width: 160px !important; font-size: 11px !important; }

      /* ── Inputs / Selects ── */
      input, select, textarea {
        font-size: 16px !important; /* prevents iOS zoom */
        min-height: 46px;
        border-radius: 10px !important;
      }
      .esm-input { font-size: 15px !important; min-height: 46px; padding: 11px 13px !important; }

      /* ── Buttons — thumb-friendly ── */
      .btn    { font-size: 13px !important; padding: 10px 16px !important; min-height: 44px; border-radius: 10px !important; }
      .btn-sm { font-size: 11.5px !important; padding: 7px 12px !important; min-height: 36px; }
      .filter-chip { font-size: 11px !important; padding: 7px 12px !important; min-height: 36px; }

      /* ── Filter bar ── */
      .filter-bar { gap: 5px !important; flex-wrap: wrap; }
      .filter-bar > div[style*="margin-left:auto"] { margin-left: 0 !important; width: 100%; display: flex; justify-content: flex-end; }

      /* ── Section heads ── */
      .section-head     { font-size: 10px !important; margin: 16px 0 12px !important; }
      .tab-section-head { font-size: 10px !important; margin: 12px 0 9px !important; grid-column: 1 !important; }

      /* ── Wizard steps ── */
      .wizard-steps {
        overflow-x: auto;
        padding: 4px 4px 10px 4px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin-left: -4px;
        margin-right: -4px;
        gap: 0;
      }
      .wizard-steps::-webkit-scrollbar { display: none; }
      .wizard-step  {
        min-width: 52px;
        scroll-snap-align: center;
        flex: 0 0 auto;
      }
      .step-num     { width: 36px !important; height: 36px !important; }
      .step-num svg { width: 16px !important; height: 16px !important; }
      .step-label   {
        font-size: 7px !important;
        max-width: 52px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        word-break: break-word;
      }
      /* Connector line adjustment for smaller circles */
      .wizard-step:not(:last-child)::after {
        top: 19px !important;
        left: calc(50% + 20px) !important;
        right: calc(-50% + 20px) !important;
      }
      /* Wizard heading */
      #page-new-application [style*="font-size:24px"] {
        font-size: 18px !important;
      }
      #page-new-application [style*="max-width:800px"] {
        padding: 0 !important;
      }

      /* ── Detail page ── */
      #detail-title   { font-size: 18px !important; }
      #detail-sub     { font-size: 12px !important; }
      #detail-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
      #detail-actions .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
      #page-app-detail > div:first-child {
        flex-direction: column; align-items: flex-start; gap: 10px;
        padding: 14px !important; border-radius: 14px !important;
      }

      /* ── Tracking header ── */
      .tracking-header {
        flex-direction: column; align-items: flex-start; gap: 8px !important; padding: 12px 14px !important;
      }
      .tracking-header h3 { font-size: 15px !important; }
      .tracking-actions   { padding: 10px 12px !important; gap: 6px !important; flex-wrap: wrap; }

      /* ── Pipeline ── */
      .pipeline     { padding: 12px 14px !important; }
      .stage-label  { width: 72px !important; font-size: 10.5px !important; }
      .stage-bar    { height: 24px !important; font-size: 10.5px !important; }

      /* ── Celebration ── */
      .celebration-card   { padding: 28px 18px !important; border-radius: 20px !important; }
      .celebration-title  { font-size: 22px !important; }
      .celebration-amount { font-size: 32px !important; }
      .celebration-icon   { font-size: 52px !important; }

      /* ── Toast — bottom-center ── */
      #toast-container {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        top: auto !important; right: 50% !important;
        transform: translateX(50%);
        width: calc(100vw - 24px); max-width: 360px;
      }

      /* ── Income check table ── */
      .ic-salary-table th, .ic-salary-table td { padding: 6px 6px !important; }
      .ic-salary-table th:last-child, .ic-salary-table td:last-child { width: 32px; }
      #ic-avg-bar { gap: 10px 16px !important; }

      /* ── Logo / nav ── */
      .logo-mark     { font-size: 18px !important; }
      .logo-sub      { font-size: 8px !important; }
      .dual-logo-zone { padding: 10px 12px !important; }
      .nav-item      { padding: 11px 13px; }
    }

    /* ══════════════════════════════════════════════════
       EXTRA SMALL — ≤ 390px (iPhone SE / small Android)
    ══════════════════════════════════════════════════ */
    @media (max-width: 390px) {
      .stats-grid   { grid-template-columns: 1fr !important; }
      .stat-value   { font-size: 24px !important; }
      .topbar-title { max-width: 120px !important; font-size: 14px !important; }
      .tab          { font-size: 10.5px !important; padding: 7px 9px !important; }
      .login-box    { padding: 20px 14px !important; }
      #detail-actions .btn { font-size: 11.5px !important; padding: 8px 10px !important; }
      .btn-sm       { font-size: 10.5px !important; padding: 6px 10px !important; }
      .esm-header   { padding: 14px 14px 12px !important; }
      .esm-title    { font-size: 16px !important; }
      .ic-type-toggle { flex-direction: column !important; }
      /* Extra small wizard */
      .wizard-step  { min-width: 44px !important; }
      .step-num     { width: 32px !important; height: 32px !important; }
      .step-num svg { width: 14px !important; height: 14px !important; }
      .step-label   { font-size: 6.5px !important; max-width: 44px !important; }
      .wizard-step:not(:last-child)::after { top: 17px !important; left: calc(50% + 18px) !important; right: calc(-50% + 18px) !important; }
    }

    /* ══════════════════════════════════════════════════
       NEW APPLICATION WIZARD — MOBILE SPECIFIC FIXES
    ══════════════════════════════════════════════════ */
    @media (max-width: 600px) {
      /* Wizard page header */
      #page-new-application > div > div > div > div:first-child {
        font-size: 18px !important;
      }
      /* Wizard card body less padding */
      #page-new-application .card-body {
        padding: 14px 12px !important;
      }
      /* Wiz progress wrap */
      .wiz-progress-wrap { padding: 10px 14px !important; }
      .wiz-progress-mood { font-size: 11px !important; }
      .wiz-step-counter  { font-size: 11px !important; }
      /* Product badge pill */
      #wiz-product-badge {
        font-size: 11px !important;
        padding: 4px 12px !important;
      }
      /* Nav/back/next buttons */
      #wiz-back, #wiz-next {
        font-size: 13px !important;
        padding: 11px 16px !important;
        min-height: 46px;
      }
      /* wiz-required-note */
      .wiz-required-note {
        font-size: 11px !important;
        padding: 6px 10px !important;
        margin-bottom: 14px !important;
      }
      /* Section heads in wizard */
      #page-new-application .section-head {
        font-size: 10px !important;
        margin: 14px 0 10px !important;
      }
    }

    /* ══════════════════════════════════════════════════
       TOUCH DEVICE COMFORT (all coarse-pointer devices)
    ══════════════════════════════════════════════════ */
    @media (hover: none) and (pointer: coarse) {

      /* Generous tap targets — minimum 44×44px everywhere */
      .nav-item      { min-height: 48px; }
      .btn           { min-height: 44px; }
      .btn-sm        { min-height: 38px; }
      .filter-chip   { min-height: 38px; }
      .tab           { min-height: 42px; }
      .topbar-icon-btn { width: 44px !important; height: 44px !important; }
      .ic-del-btn, .bk-verdict, .ic-type-btn { min-height: 40px; }

      /* Always 16px+ on inputs to prevent iOS auto-zoom */
      input, select, textarea { font-size: 16px !important; }
      .login-input, .login-select { font-size: 16px !important; min-height: 50px; }
      .login-btn { padding: 16px !important; min-height: 54px; font-size: 15px !important; }

      /* Smooth momentum scrolling everywhere */
      .table-wrap, .tabs, .wizard-steps, .modal, .esm-box, .modal-body, .esm-body, #lender-approval-box {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }

      /* Remove hover animations — they feel broken on touch */
      .stat-card:hover, .btn-primary:hover, .card:hover { transform: none !important; }
      .nav-item:hover { transform: none !important; background: transparent !important; }
      .doc-item:hover, .access-card:hover { transform: none !important; }

      /* Responsive active/press feedback */
      .btn:active         { opacity: .78; transform: scale(.96) !important; }
      .nav-item:active    { background: rgba(26,79,163,.12) !important; }
      .stat-card:active   { transform: scale(.97) !important; }
      .filter-chip:active { transform: scale(.95) !important; }
      .tab:active         { opacity: .75; }

      /* Safe area padding for notched/home-indicator phones */
      .la-footer, .esm-footer, .ic-footer, .bk-footer, .modal-body:last-child {
        padding-bottom: max(14px, env(safe-area-inset-bottom, 14px)) !important;
      }

      /* Wider scrollbar-free scroll areas */
      ::-webkit-scrollbar { display: none; }
      * { scrollbar-width: none; }
    }

    /* ════════════════════════════════════════════════════════
       ELITE DETAIL PAGE — Premium v6 Enhancement
    ════════════════════════════════════════════════════════ */

    /* ── DETAIL PAGE HEADER STRIP ── */
    #page-app-detail>div:first-child {
      background: linear-gradient(135deg, rgba(26, 79, 163, .04) 0%, rgba(59, 108, 212, .02) 100%);
      border: 1.5px solid var(--border);
      border-radius: 18px;
      padding: 20px 24px;
      margin-bottom: 20px;
    }

    /* ── TABS ── premium pill/card style ── */
    .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 8px 8px 0;
      background: linear-gradient(135deg, #f0f5ff 0%, #eaf1ff 100%);
      border: 1.5px solid #c8d8f8;
      border-bottom: none;
      border-radius: 18px 18px 0 0;
      margin-bottom: 0 !important;
    }

    .tab {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 9px 15px;
      border-radius: 10px 10px 0 0;
      font-size: 12.5px;
      font-weight: 600;
      color: #4a6299;
      cursor: pointer;
      border: 1.5px solid transparent;
      border-bottom: none;
      transition: all .18s;
      white-space: nowrap;
      position: relative;
    }

    .tab span {
      font-size: 14px;
      line-height: 1;
    }

    .tab:hover {
      color: var(--accent);
      background: rgba(26, 79, 163, .07);
    }

    .tab.active {
      color: var(--accent);
      background: #ffffff;
      border-color: #c8d8f8;
      border-bottom-color: #ffffff;
      box-shadow: 0 -3px 0 var(--accent) inset, 0 -2px 10px rgba(26, 79, 163, .06);
      font-weight: 700;
    }

    /* ── TAB CONTENT PANELS ── */
    .tab-content {
      display: none;
      background: #fff;
      border: 1.5px solid #c8d8f8;
      border-top: none;
      border-radius: 0 0 18px 18px;
      padding: 28px;
      min-height: 120px;
      box-shadow: 0 4px 24px rgba(26, 79, 163, .06);
    }

    .tab-content.active {
      display: block;
      animation: tabReveal .22s cubic-bezier(.4, 0, .2, 1);
    }

    @keyframes tabReveal {
      from {
        opacity: 0;
        transform: translateY(6px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ── FORM GRID — info display ── */
    .form-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .form-group label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1.1px;
      color: #7a91c0;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .field-val {
      font-size: 13.5px;
      font-weight: 500;
      color: var(--text);
      background: #f5f8ff;
      border: 1.5px solid #dde8fb;
      border-radius: 10px;
      padding: 10px 14px;
      min-height: 40px;
      display: flex;
      align-items: center;
      transition: all .15s;
      line-height: 1.4;
    }

    .field-val:hover {
      border-color: #7aaef8;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26, 79, 163, .06);
    }

    .field-val.empty {
      color: #b0bcd8;
      font-style: italic;
      background: #f8faff;
    }

    /* ── SECTION DIVIDERS inside tabs ── */
    .tab-section-head {
      font-family: var(--font-head);
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.8px;
      color: var(--accent);
      padding: 10px 0 10px;
      margin: 20px 0 14px;
      border-bottom: 2px solid #e8f0fe;
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tab-section-head::before {
      content: '';
      width: 4px;
      height: 14px;
      background: linear-gradient(180deg, var(--accent), var(--accent-light));
      border-radius: 3px;
      display: inline-block;
    }

    /* ── DOCUMENT ITEMS ── */
    .doc-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border-radius: 14px;
      border: 1.5px solid #dde8fb;
      background: #f5f8ff;
      margin-bottom: 10px;
      transition: all .2s;
    }

    .doc-item:hover {
      border-color: var(--accent);
      background: #eef4ff;
      box-shadow: 0 4px 16px rgba(26, 79, 163, .08);
      transform: translateX(3px);
    }

    .doc-icon {
      font-size: 26px;
      width: 44px;
      height: 44px;
      background: rgba(26, 79, 163, .08);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .doc-name {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--text);
    }

    .doc-type {
      font-size: 11px;
      color: var(--text3);
      margin-top: 3px;
    }

    .doc-status {
      font-size: 11.5px;
      flex-shrink: 0;
      padding: 3px 10px;
      border-radius: 20px;
      background: #f0f4ff;
      color: var(--text3);
      border: 1px solid #dde8fb;
    }

    /* ── BANK TABLE inside Lender Details tab ── */
    #lender-panel-banks .table-wrap {
      border-radius: 14px;
      overflow: hidden;
      border: 1.5px solid #dde8fb;
    }

    #lender-panel-banks table th {
      background: #eef4ff;
      color: #5a7ac4;
    }

    /* ── INCRED DETAIL CARD ── */
    #incred-detail-section .incred-card {
      background: linear-gradient(135deg, #eef4ff 0%, #f5f0ff 100%);
      border: 1.5px solid #c8d2f8;
      border-radius: 18px;
      padding: 24px 28px;
      box-shadow: 0 4px 20px rgba(26, 79, 163, .07);
    }

    /* ── TRACKING SECTION ── */
    .tracking-header {
      background: linear-gradient(135deg, #eef4ff 0%, #e8f5ff 100%);
      border: 1.5px solid #c8d8f8;
      border-radius: 16px;
      padding: 18px 24px;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .tracking-header h3 {
      font-family: var(--font-head);
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      flex: 1;
    }

    .tracking-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
      padding: 14px 18px;
      background: #f5f8ff;
      border-radius: 14px;
      border: 1.5px solid #dde8fb;
    }

    .tracking-table-wrap {
      border-radius: 14px;
      overflow: hidden;
      border: 1.5px solid #dde8fb;
    }

    .tracking-table th {
      font-size: 10.5px;
      background: #eef4ff;
      color: #5a7ac4;
    }

    .tracking-table td {
      font-size: 12.5px;
    }

    .tracking-comment {
      font-size: 12px;
      color: var(--text2);
      max-width: 260px;
      line-height: 1.65;
      white-space: pre-line;
      font-family: var(--font-body);
      font-style: normal;
    }

    .tracking-subnote {
      font-size: 12px;
      color: var(--text2);
      max-width: 260px;
      line-height: 1.65;
      white-space: pre-line;
      font-family: var(--font-body);
      font-style: normal;
      margin-top: 0;
    }

    /* ── STAGE BADGES ── enhanced ── */
    .stage-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 10px;
      border-radius: 20px;
      letter-spacing: .3px;
      display: inline-block;
    }

    /* ── CHECK BADGES ── */
    .check-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 11.5px;
      font-weight: 700;
    }

    .check-done {
      background: rgba(26, 160, 80, .1);
      color: #1a7340;
      border: 1px solid rgba(26, 160, 80, .2);
    }

    .check-pending {
      background: rgba(230, 126, 0, .1);
      color: var(--warn);
      border: 1px solid rgba(230, 126, 0, .2);
    }

    /* ── OVERVIEW STATUS BADGE ── */
    #detail-actions .badge {
      font-size: 13px;
      padding: 7px 16px;
      border-radius: 20px;
    }

    /* ── LOAN DETAIL TITLE AREA ── */
    #detail-title {
      font-family: var(--font-head);
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -.5px;
      background: linear-gradient(135deg, var(--text) 40%, var(--accent) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    #detail-sub {
      font-size: 13px;
      color: var(--text3);
      margin-top: 3px;
      font-weight: 500;
    }

    /* ── BACK BUTTON ── */
    #page-app-detail .btn-ghost:first-child {
      border-color: #c8d8f8;
      color: var(--accent);
      background: #eef4ff;
    }

    #page-app-detail .btn-ghost:first-child:hover {
      background: var(--accent);
      color: #fff;
    }

    /* ── LOAN PRODUCT SELECTOR ── */
    .loan-product-overlay {
      position: fixed;
      inset: 0;
      background: rgba(10, 20, 50, 0.55);
      backdrop-filter: blur(8px);
      z-index: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .3s ease;
    }
    .loan-product-overlay.active {
      opacity: 1;
      pointer-events: all;
    }
    .loan-product-modal {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-radius: 24px;
      padding: 36px 32px 32px;
      max-width: 680px;
      width: 100%;
      box-shadow: 0 32px 100px rgba(26, 79, 163, .28);
      transform: translateY(24px) scale(.97);
      transition: transform .35s cubic-bezier(.2,0,.1,1);
      max-height: 90vh;
      overflow-y: auto;
    }
    .loan-product-overlay.active .loan-product-modal {
      transform: translateY(0) scale(1);
    }
    .lp-header {
      text-align: center;
      margin-bottom: 28px;
    }
    .lp-title {
      font-family: var(--font-head);
      font-size: 22px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }
    .lp-sub {
      font-size: 13px;
      color: var(--text3);
    }
    .lp-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    @media (max-width: 600px) {
      .lp-grid { grid-template-columns: repeat(2, 1fr); }
    }
    .lp-card {
      background: var(--surface2);
      border: 2px solid var(--border);
      border-radius: 18px;
      padding: 22px 14px 18px;
      text-align: center;
      cursor: pointer;
      transition: all .22s cubic-bezier(.2,0,.1,1);
      position: relative;
      overflow: hidden;
    }
    .lp-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--accent-subtle), transparent 60%);
      opacity: 0;
      transition: opacity .22s;
      border-radius: 16px;
    }
    .lp-card:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(26,79,163,.15);
      background: #fff;
    }
    .lp-card:hover::before { opacity: 1; }
    .lp-card.selected {
      border-color: var(--accent);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(26,79,163,.12), 0 12px 32px rgba(26,79,163,.18);
    }
    .lp-card.selected::before { opacity: 1; }
    .lp-card-icon {
      font-size: 44px;
      margin-bottom: 12px;
      display: block;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,.1));
      transition: transform .22s;
    }
    .lp-card:hover .lp-card-icon { transform: scale(1.1) rotate(-4deg); }
    .lp-card.selected .lp-card-icon { transform: scale(1.08); }
    .lp-card-name {
      font-family: var(--font-head);
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }
    .lp-card-desc {
      font-size: 11px;
      color: var(--text3);
      margin-top: 4px;
      line-height: 1.4;
    }
    .lp-check {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(.5);
      transition: all .2s;
    }
    .lp-card.selected .lp-check { opacity: 1; transform: scale(1); }
    .lp-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 26px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
    }

    /* ── Lender Config product picker cards ── */
    .lc-prod-card {
      background: var(--surface2);
      border: 2px solid var(--border);
      border-radius: 16px;
      padding: 18px 12px 36px;   /* increased bottom padding to clear the badge */
      text-align: center;
      cursor: pointer;
      transition: all .2s cubic-bezier(.2,0,.1,1);
      position: relative;
      overflow: hidden;
    }
    .lc-prod-card:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(26,79,163,.13);
      background: #fff;
    }
    .lc-prod-card.selected {
      border-color: var(--accent);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26,79,163,.12), 0 8px 24px rgba(26,79,163,.16);
    }
    .lc-prod-icon {
      font-size: 36px;
      margin-bottom: 10px;
      display: block;
      transition: transform .2s;
      filter: drop-shadow(0 3px 6px rgba(0,0,0,.1));
    }
    .lc-prod-card:hover .lc-prod-icon { transform: scale(1.1) rotate(-3deg); }
    .lc-prod-card.selected .lc-prod-icon { transform: scale(1.07); }
    .lc-prod-name {
      font-family: var(--font-head);
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }
    .lc-prod-desc {
      font-size: 10.5px;
      color: var(--text3);
      margin-top: 3px;
      line-height: 1.4;
    }
    /* Selected check badge */
    .lc-prod-card::after {
      content: '✓';
      position: absolute;
      top: 8px; right: 9px;
      width: 20px; height: 20px;
      border-radius: 50%;
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: scale(.4);
      transition: all .18s;
    }
    .lc-prod-card.selected::after { opacity: 1; transform: scale(1); }

    /* ── Bank detail sub-tabs ── */
    .la-dtab { transition: color .15s, border-bottom-color .15s; }
    .la-dtab:hover { color: var(--accent) !important; background: rgba(26,79,163,.04) !important; }

    /* ── Lender Config bank-assignment toggle cards ── */
    .lc-bank-toggle {
      background: var(--surface2);
      border: 2px solid var(--border);
      border-radius: 12px;
      padding: 14px 12px 10px;
      cursor: default;
      text-align: center;
      transition: all .18s;
      position: relative;
    }
    .lc-bank-toggle:hover { border-color: var(--accent-light); }
    .lc-bank-toggle.active {
      border-color: var(--accent);
      background: rgba(26,79,163,.06);
      box-shadow: 0 0 0 3px rgba(26,79,163,.1);
    }
    .lc-bank-toggle-avatar {
      width: 44px; height: 44px;
      border-radius: 10px;
      margin: 0 auto 8px;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 17px;
    }
    .lc-bank-toggle-name {
      font-size: 12.5px; font-weight: 700; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .lc-bank-toggle-pill {
      font-size: 10px; margin-top: 4px; display: flex; gap: 4px;
      justify-content: center; flex-wrap: wrap;
    }
    .lc-bank-toggle-check {
      position: absolute; top: 7px; right: 8px;
      width: 18px; height: 18px; border-radius: 50%;
      background: var(--accent); color: #fff;
      font-size: 10px; display: flex; align-items: center; justify-content: center;
      opacity: 0; transform: scale(.4); transition: all .16s;
    }
    .lc-bank-toggle [onclick] { cursor: pointer; }
    .lc-bank-toggle [onclick]:hover .lc-bank-toggle-name { color: var(--accent); }

    /* ── TASKS / OBLIGATIONS inside tabs if present ── */
    .task-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border-radius: 14px;
      border: 1.5px solid #dde8fb;
      background: #f8faff;
      margin-bottom: 10px;
      transition: all .2s;
      cursor: pointer;
    }

    .task-card:hover {
      border-color: var(--accent);
      background: #eef4ff;
      box-shadow: 0 4px 16px rgba(26, 79, 163, .07);
    }

    .task-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
      background: rgba(26, 79, 163, .08);
    }

    .obligation-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 14px;
    }

    .obligation-chip {
      background: #f0f5ff;
      border: 1.5px solid #dde8fb;
      border-radius: 12px;
      padding: 14px 16px;
      text-align: center;
      transition: all .18s;
    }

    .obligation-chip:hover {
      border-color: var(--accent);
      background: #eef4ff;
    }

    .obligation-chip-val {
      font-family: var(--font-head);
      font-size: 20px;
      font-weight: 800;
      color: var(--accent);
    }

    .obligation-chip-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text3);
      font-weight: 700;
      margin-top: 4px;
    }

    /* ── NAV SCROLL AREA tweaks for light sidebar ── */

    .nav-scroll-area::-webkit-scrollbar-thumb:hover {
      background: rgba(26, 79, 163, .3);
    }

    /* ── SIDEBAR SECTION LABEL — no decorative line (handled by collapsible header) ── */

    /* ── Mudrahub BRAND FINAL POLISH ── */
    /* logo-default-icon is shown (emoji 🏦) — do not hide */

    .sidebar-logo {
      background: #fff;
    }

    /* Accent overrides to use exact brand blue */
    .btn-primary {
      background: linear-gradient(135deg, #2563c7 0%, #1b4fa0 60%, #143d82 100%);
      box-shadow: 0 4px 14px rgba(27, 79, 160, .32), inset 0 1px 0 rgba(255, 255, 255, .15);
    }

    .btn-primary:hover {
      background: linear-gradient(135deg, #3070d8, #2563c7 100%);
      box-shadow: 0 6px 20px rgba(27, 79, 160, .42);
    }

    /* Tabs — brand accent top bar */
    .tab.active {
      box-shadow: 0 -3px 0 #1b4fa0 inset, 0 2px 8px rgba(27, 79, 160, .06);
    }

    /* Stat cards — brand blue */
    .stat-card.blue::before {
      background: linear-gradient(90deg, #1b4fa0, rgba(27, 79, 160, .15));
    }

    .stat-card.green::before {
      background: linear-gradient(90deg, #d42b2b, rgba(212, 43, 43, .15));
    }

    /* Field values — brand blue hover */
    .field-val:hover {
      border-color: #1b4fa0;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(27, 79, 160, .06);
    }

    /* Tab content border — brand */
    .tab-content {
      border-color: #e0e8f8;
    }

    .tabs {
      background: linear-gradient(135deg, #f2f6fe 0%, #edf3ff 100%);
      border-color: #e0e8f8;
    }

    /* Section head accent — brand */
    .section-head::before {
      background: linear-gradient(180deg, #1b4fa0, #d42b2b);
    }

    .tab-section-head::before {
      background: linear-gradient(180deg, #1b4fa0, #d42b2b);
    }

    /* Timeline header brand color */
    .tracking-header {
      background: linear-gradient(135deg, #f0f5ff 0%, #edf2ff 100%) !important;
      border-color: #d0dff8 !important;
    }

    /* Brand red for danger actions */
    .btn-danger {
      background: rgba(212, 43, 43, .1);
      color: #d42b2b;
      border: 1.5px solid rgba(212, 43, 43, .22);
    }

    .btn-danger:hover {
      background: rgba(212, 43, 43, .18);
      border-color: #d42b2b;
    }

    /* Login screen brand gradient */
    .login-screen {
      background: linear-gradient(135deg, #0d2a6e 0%, #1b4fa0 45%, #0f2060 75%, #0a1844 100%) !important;
      background-image:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(45, 99, 199, .4) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(212, 43, 43, .25) 0%, transparent 55%),
        linear-gradient(135deg, #0d2a6e 0%, #1b4fa0 45%, #0f2060 75%, #0a1844 100%) !important;
    }

    .login-logo {
      background: linear-gradient(135deg, #1b4fa0 0%, #d42b2b 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .login-btn {
      background: linear-gradient(135deg, #2563c7 0%, #1b4fa0 50%, #143d82 100%);
    }

    /* Progress bar brand */
    .progress-bar {
      background: linear-gradient(90deg, #2563c7, #1b4fa0);
    }

    /* Timeline dot brand */
    .tl-dot {
      background: #1b4fa0;
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(27, 79, 160, .25), 0 4px 8px rgba(27, 79, 160, .25);
    }

    /* Nav active — brand red left bar */
    .nav-item.active::before {
      background: linear-gradient(180deg, #1b4fa0, #d42b2b) !important;
    }

    /* ── SVG icon colour polish ── */
    .nav-icon svg {
      stroke: #3d4a5e;
      transition: stroke .15s;
    }
    .nav-item:hover .nav-icon svg,
    .nav-item.active .nav-icon svg {
      stroke: var(--accent2);
    }

    /* Admin gear rail SVG alignment */
    .admin-gear-rail {
      width: 64px;
      min-width: 64px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      opacity: .55;
      transition: opacity .15s;
    }
    #admin-gear-btn:hover .admin-gear-rail { opacity: 1; }
    #admin-gear-btn:hover .admin-gear-rail svg { stroke: var(--accent); }
    .admin-gear-rail svg { stroke: #3d4a5e; transition: stroke .15s; }
    /* ═══ KYC STEP STYLES ═══ */
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes kycPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
    @keyframes kycSlideIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
    @keyframes kycCardFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
    @keyframes kycShimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
    @keyframes kycDotPulse { 0%,100%{transform:scale(1);opacity:.6} 50%{transform:scale(1.4);opacity:1} }
    @keyframes kycSuccessBounce { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
    @keyframes kycGlow { 0%,100%{box-shadow:0 0 0 0 rgba(26,79,163,.3)} 50%{box-shadow:0 0 0 8px rgba(26,79,163,.0)} }
    @keyframes kycBorderFlow {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    #wstep-2 .kyc-upload-card { transition: border-color .2s, box-shadow .2s; }
    #wstep-2 .kyc-upload-card:hover { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow); }
    #wstep-2 .kyc-upload-card.uploaded { border-color: var(--success) !important; border-style: solid !important; }
    #wstep-2 .kyc-upload-card.error { border-color: var(--danger) !important; border-style: solid !important; }

    /* Dynamic Upload Cards */
    .kyc-doc-card {
      border-radius: 18px;
      overflow: hidden;
      background: var(--surface);
      position: relative;
      transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
      box-shadow: 0 2px 16px rgba(26,79,163,.08);
    }
    .kyc-doc-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(26,79,163,.15);
    }
    .kyc-doc-card-header {
      padding: 16px 20px 14px;
      display: flex;
      align-items: center;
      gap: 12px;
      position: relative;
      z-index: 1;
    }
    .kyc-doc-card-header::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(26,79,163,.07) 0%, rgba(26,79,163,.03) 100%);
      z-index: 0;
    }
    .kyc-doc-card-header > * { position: relative; z-index: 1; }
    .kyc-doc-icon-wrap {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      position: relative;
      flex-shrink: 0;
    }
    .kyc-doc-icon-wrap::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--accent), rgba(26,79,163,.2));
      opacity: .15;
      z-index: -1;
    }
    .kyc-doc-card-title { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.2; }
    .kyc-doc-card-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }
    .kyc-doc-card-body  { padding: 16px 20px 20px; }
    .kyc-doc-side-label {
      font-size: 10.5px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 1px; color: var(--text3); margin-bottom: 8px;
      display: flex; align-items: center; gap: 6px;
    }
    .kyc-doc-side-label::before {
      content: '';
      display: inline-block; width: 14px; height: 2px;
      background: var(--accent); border-radius: 2px;
    }
    .kyc-preview-box {
      display: none;
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 10px;
      background: linear-gradient(135deg, #0a0f1e, #1a2340);
      position: relative;
    }
    .kyc-preview-box::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.4));
      pointer-events: none;
    }
    .kyc-upload-btn {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      padding: 11px 16px;
      background: var(--surface2);
      border: 1.5px dashed var(--border2);
      border-radius: 10px;
      cursor: pointer;
      font-size: 12.5px; font-weight: 600; color: var(--text2);
      transition: all .2s;
      position: relative;
      overflow: hidden;
    }
    .kyc-upload-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(26,79,163,.06), transparent);
      transform: translateX(-100%);
      transition: transform .4s;
    }
    .kyc-upload-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-subtle);
    }
    .kyc-upload-btn:hover::before { transform: translateX(100%); }
    .kyc-upload-icon {
      width: 26px; height: 26px;
      border-radius: 8px;
      background: rgba(26,79,163,.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px;
      transition: transform .2s;
    }
    .kyc-upload-btn:hover .kyc-upload-icon { transform: scale(1.15) translateY(-1px); }
    .kyc-upload-dots {
      display: flex; gap: 3px; margin-left: auto;
    }
    .kyc-upload-dot {
      width: 4px; height: 4px; border-radius: 50%;
      background: var(--border2);
      animation: kycDotPulse 1.4s ease-in-out infinite;
    }
    .kyc-upload-dot:nth-child(2) { animation-delay: .2s; }
    .kyc-upload-dot:nth-child(3) { animation-delay: .4s; }
    .kyc-doc-card.card-uploaded .kyc-upload-btn {
      border-color: var(--success); border-style: solid;
      background: rgba(26,115,64,.05); color: var(--success);
    }
    .kyc-doc-card.card-uploaded .kyc-upload-dots { display: none; }
    .kyc-status-chip {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 3px 9px; border-radius: 99px;
      font-size: 10.5px; font-weight: 700;
      margin-top: 6px;
    }
    .kyc-status-chip.ok  { background: rgba(26,115,64,.1);  color: var(--success); }
    .kyc-status-chip.err { background: rgba(192,57,43,.1);  color: var(--danger); }
    .kyc-status-chip.info{ background: rgba(26,79,163,.1);  color: var(--accent); }
    .kyc-card-divider {
      height: 1px; background: var(--border); margin: 14px 0;
    }
    .kyc-required-pill {
      font-size: 9.5px; color: var(--accent2); font-weight: 700;
      background: rgba(212,43,43,.08); padding: 2px 8px;
      border-radius: 99px; vertical-align: middle;
    }
    .kyc-pdf-chip {
      display: none; padding: 8px 12px;
      background: rgba(26,79,163,.06);
      border-radius: 8px; margin-bottom: 10px;
      font-size: 12px; color: var(--accent); font-weight: 600;
      border-left: 3px solid var(--accent);
    }

    .kyc-badge-ok  { background: rgba(26,115,64,.12); color: var(--success); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .kyc-badge-err { background: rgba(192,57,43,.12); color: var(--danger);  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .kyc-badge-warn{ background: rgba(230,126,0,.12);  color: var(--warn);   padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
    .kyc-badge-info{ background: rgba(26,79,163,.12);  color: var(--accent); padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

    .kyc-autofill-pulse { animation: kycPulse 0.6s ease 2; }

    /* Inline Fix Buttons */
    .kyc-fix-btn {
      font-size: 10px; font-weight: 600; color: var(--accent);
      background: var(--accent-subtle); border: 1px solid rgba(26,79,163,.2);
      border-radius: 6px; padding: 2px 7px; cursor: pointer;
      transition: all .15s; white-space: nowrap; font-family: var(--font-body);
    }
    .kyc-fix-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* Fix indicator — source state: distinguishes auto-extracted vs manually entered.
       Brand blue (#0a589a) = auto-extracted by system; functional amber (#e67e00) = manually entered. */
    .kyc-fix-btn.kyc-fix-auto {
      color: #0a589a; background: rgba(10,88,154,.08); border-color: rgba(10,88,154,.30);
    }
    .kyc-fix-btn.kyc-fix-auto:hover { background: #0a589a; color: #fff; border-color: #0a589a; }
    .kyc-fix-btn.kyc-fix-manual {
      color: #e67e00; background: rgba(230,126,0,.12); border-color: rgba(230,126,0,.40); font-weight: 700;
    }
    .kyc-fix-btn.kyc-fix-manual:hover { background: #e67e00; color: #fff; border-color: #e67e00; }

    /* Field manually corrected by user */
    .kyc-field-fixed {
      border-color: var(--warn) !important;
      background: rgba(230,126,0,.05) !important;
      box-shadow: 0 0 0 2px rgba(230,126,0,.15) !important;
    }
    .kyc-field-fixed::after { content: '✎ edited'; }

    /* Autofilled fields */
    .kyc-field-autofilled { border-color: rgba(26,79,163,.35) !important; }

    #kyc-extracted-panel { animation: kycSlideIn .35s cubic-bezier(.4,0,.2,1); }

    .kyc-report-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
    .kyc-report-row:last-child { border-bottom: none; }
    .kyc-report-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
    .kyc-report-label { font-size: 11.5px; color: var(--text3); font-weight: 600; min-width: 140px; }
    .kyc-report-value { font-size: 12.5px; color: var(--text); font-weight: 500; flex: 1; }
    .kyc-report-status { font-size: 11px; font-weight: 700; flex-shrink: 0; }

    /* Report quick-filter chips */
    .rpt-chip {
      padding: 5px 13px; font-size: 11.5px; font-weight: 600;
      border: 1.5px solid var(--border2); border-radius: 99px;
      background: var(--surface); color: var(--text2);
      cursor: pointer; transition: all .15s; white-space: nowrap;
    }
    .rpt-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
    .rpt-chip.rpt-chip-active { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* Leaderboard sort header hover */
    #rpt-leaderboard-table th:hover { background: rgba(26,79,163,.05); }

    @media print {
      .sidebar, .topbar, #rpt-scope-btns, #rpt-quick-chips, .btn, select, input[type=date] { display: none !important; }
      .main-content { margin: 0 !important; padding: 0 !important; }
      .page { display: block !important; }
      .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
    }

    #kyc-extract-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
    #kyc-extract-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(26,79,163,.45); }

    .kyc-loading-show { display: flex !important; }

    .kyc-field-autofilled { background: rgba(26,115,64,.06) !important; border-color: rgba(26,115,64,.35) !important; }

    /* ── Profile page ── */
    #page-profile .form-group label { font-size: 11.5px; }
    #profile-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
    @media (max-width: 900px) { #profile-about-grid { grid-template-columns: 1fr !important; } }
    @media (max-width: 600px) {
      #profile-primary-view,
      #profile-address-view,
      #profile-bank-view { grid-template-columns: 1fr !important; }
    }


    /* ── Advanced Filter ── */
    .af-section-head {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
      color: var(--accent); margin-bottom: 12px;
    }
    .af-divider { height: 1px; background: var(--border); margin: 0 0 20px; }
    .af-field-label { font-size: 11.5px; color: var(--text3); font-weight: 600; margin-bottom: 5px; }
    .af-select {
      width: 100%; padding: 9px 11px; border: 1.5px solid var(--border2);
      border-radius: var(--r-sm); font-size: 13px; background: var(--surface);
      color: var(--text); font-family: var(--font-body); transition: border-color .15s;
    }
    .af-select:focus { outline: none; border-color: var(--accent); }
    /* ── Advanced Filter date chips ── */
    .af-date-chip {
      padding: 7px 14px; border: 1.5px solid var(--border2); border-radius: 8px;
      background: var(--surface); color: var(--text2); font-size: 13px; font-weight: 600;
      cursor: pointer; transition: all .18s; font-family: var(--font-body);
    }
    .af-date-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
    .af-date-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* ── Export format buttons ── */
    .export-fmt-btn {
      flex: 1; display: flex; align-items: center; gap: 9px; padding: 13px 16px;
      border: 2px solid var(--border2); border-radius: 12px; cursor: pointer;
      font-size: 13.5px; font-weight: 700; color: var(--text2); background: var(--surface);
      transition: all .18s; font-family: var(--font-body);
    }
    .export-fmt-btn:hover { border-color: var(--accent); color: var(--accent); }
    .export-fmt-btn.selected { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
    /* ── Export column list ── */
    .export-col-item {
      display: flex; align-items: center; gap: 12px; padding: 11px 16px;
      border-bottom: 1px solid var(--border); cursor: grab; transition: background .15s;
      user-select: none;
    }
    .export-col-item:last-child { border-bottom: none; }
    .export-col-item:hover { background: var(--surface2); }
    .export-col-item.dragging { opacity: .4; background: var(--accent-subtle); }
    .export-col-item.drag-over { border-top: 2px solid var(--accent); }
    .export-col-cb { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex-shrink:0; }
    .export-col-drag { color: var(--text3); font-size: 14px; cursor: grab; flex-shrink:0; }
    .export-col-label { flex: 1; font-size: 13px; font-weight: 600; color: var(--text2); }
    #adv-filter-btn.has-filters { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
  /* ── Enhanced Filter & Export additions ── */
  .af-section-wrap { padding: 20px 24px 0; }
  .af-section-wrap .af-section-head { margin-bottom: 14px; }
  .af-section-head {
    display: flex; align-items: center; gap: 7px; padding: 0 0 0 0;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
    color: var(--accent);
  }
  .af-divider { height: 1px; background: var(--border); margin: 20px 0 0; }
  .af-field-label { font-size: 11.5px; color: var(--text3); font-weight: 600; margin-bottom: 5px; }
  .af-select {
    width: 100%; padding: 9px 11px; border: 1.5px solid var(--border2);
    border-radius: var(--r-sm); font-size: 13px; background: var(--surface);
    color: var(--text); font-family: var(--font-body); transition: border-color .15s;
  }
  .af-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  .af-date-chip {
    padding: 7px 14px; border: 1.5px solid var(--border2); border-radius: 8px;
    background: var(--surface); color: var(--text2); font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: all .15s; font-family: var(--font-body);
  }
  .af-date-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
  .af-date-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    /* Hide login screen instantly if a session exists — prevents flash on refresh */
    .login-screen-hidden { display: none !important; }

    html.has-session .login-screen { display: none !important; }

        /* ── EMI Calculator v2 ── */
        #page-calculator { padding-bottom: 60px; }
        .calc-wrap { max-width: 1100px; margin: 0 auto; }
        .calc-header { margin-bottom: 28px; }
        .calc-header h1 { font-family: var(--font-head); font-size: 26px; font-weight: 800; margin-bottom: 2px; }
        .calc-header p { font-size: 13px; color: var(--text3); }

        /* Mode tabs */
        .calc-mode-tabs { display: flex; gap: 6px; margin-bottom: 24px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; width: fit-content; }
        .calc-mode-tab { padding: 7px 18px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text3); border: none; background: transparent; transition: all .18s; }
        .calc-mode-tab.active { background: var(--surface); color: var(--accent); box-shadow: 0 2px 10px rgba(26,79,163,.12); }

        /* Main layout */
        .calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
        @media (max-width: 860px) { .calc-layout { grid-template-columns: 1fr; } }

        /* Input card */
        .calc-input-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 24px; }
        .calc-field { margin-bottom: 22px; }
        .calc-field label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
        .calc-field label span.val-badge { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--accent); text-transform: none; letter-spacing: 0; }
        .calc-field input[type=number] { width: 100%; background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--text); font-family: var(--font-head); outline: none; transition: border-color .18s, box-shadow .18s; }
        .calc-field input[type=number]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
        .calc-field input[type=range] { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 99px; background: var(--surface3); outline: none; margin-top: 10px; cursor: pointer; }
        .calc-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px rgba(26,79,163,.35); cursor: pointer; transition: transform .15s; }
        .calc-field input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
        .calc-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .calc-loan-type { display: flex; gap: 6px; margin-bottom: 18px; }
        .calc-loan-type button { flex: 1; padding: 8px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface2); font-size: 12.5px; font-weight: 600; color: var(--text3); cursor: pointer; transition: all .15s; }
        .calc-loan-type button.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }

        /* Result card */
        .calc-result-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; overflow: hidden; }
        .calc-result-top { background: linear-gradient(135deg, rgba(26,79,163,.06) 0%, rgba(212,43,43,.04) 100%); padding: 28px 24px 20px; text-align: center; border-bottom: 1px solid var(--border); position: relative; }
        .calc-result-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
        .calc-emi-big { font-family: var(--font-head); font-size: 48px; font-weight: 900; color: var(--accent2); line-height: 1; }
        .calc-emi-sub { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 6px; }
        .calc-breakdown-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
        .calc-bk-item { padding: 16px 12px; text-align: center; border-right: 1px solid var(--border); }
        .calc-bk-item:last-child { border-right: none; }
        .calc-bk-val { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--text); }
        .calc-bk-lbl { font-size: 10.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .7px; margin-top: 3px; }

        /* Donut chart */
        .calc-donut-wrap { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 20px; }
        .calc-donut-legend { flex: 1; display: flex; flex-direction: column; gap: 10px; }
        .donut-leg-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
        .donut-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
        .donut-leg-label { color: var(--text3); flex: 1; }
        .donut-leg-pct { font-weight: 700; color: var(--text); font-family: var(--font-head); }

        /* FOIR bar */
        .calc-foir-wrap { padding: 16px 24px; border-bottom: 1px solid var(--border); }
        .calc-foir-label { font-size: 11.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; display: flex; justify-content: space-between; }
        .calc-foir-track { height: 8px; border-radius: 99px; background: var(--surface3); position: relative; overflow: hidden; }
        .calc-foir-fill { height: 100%; border-radius: 99px; transition: width .4s cubic-bezier(.4,0,.2,1), background .4s; }
        .calc-foir-zones { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10px; color: var(--text3); }

        /* What-if table */
        .calc-whatif { padding: 18px 24px; }
        .calc-whatif-title { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 10px; }
        .calc-whatif table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
        .calc-whatif th { text-align: left; color: var(--text3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 4px 8px 8px; }
        .calc-whatif td { padding: 6px 8px; border-top: 1px solid var(--border); color: var(--text2); }
        .calc-whatif tr.active-row td { background: var(--accent-subtle); color: var(--accent); font-weight: 700; border-radius: 4px; }

        /* Amortisation */
        .calc-amort-section { margin-top: 20px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; overflow: hidden; }
        .calc-amort-head { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
        .calc-amort-head h3 { font-family: var(--font-head); font-size: 15px; font-weight: 800; margin: 0; }
        .calc-amort-toggle { display: flex; gap: 6px; }
        .calc-amort-toggle button { padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface2); font-size: 11.5px; font-weight: 600; cursor: pointer; color: var(--text3); transition: all .15s; }
        .calc-amort-toggle button.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
        .calc-amort-scroll { max-height: 340px; overflow-y: auto; }
        .calc-amort-scroll table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
        .calc-amort-scroll th { position: sticky; top: 0; background: var(--surface2); padding: 10px 14px; text-align: right; font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; border-bottom: 1px solid var(--border); }
        .calc-amort-scroll th:first-child { text-align: left; }
        .calc-amort-scroll td { padding: 9px 14px; text-align: right; border-bottom: 1px solid rgba(0,0,0,.04); color: var(--text2); }
        .calc-amort-scroll td:first-child { text-align: left; font-weight: 600; color: var(--text); }
        .calc-amort-scroll tr.year-row td { background: rgba(26,79,163,.05); font-weight: 700; color: var(--text); font-size: 11.5px; }
        .calc-amort-scroll tr:hover td { background: var(--surface2); }

        /* Compare mode */
        .calc-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        @media (max-width: 860px) { .calc-compare-grid { grid-template-columns: 1fr; } }
        .calc-compare-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 22px; }
        .calc-compare-card h3 { font-family: var(--font-head); font-size: 14px; font-weight: 800; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
        .calc-compare-diff { background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 20px 24px; margin-top: 20px; }
        .calc-compare-diff h3 { font-family: var(--font-head); font-size: 14px; font-weight: 800; margin: 0 0 14px; }
        .diff-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
        .diff-row:last-child { border-bottom: none; }
        .diff-label { color: var(--text3); }
        .diff-val { font-weight: 700; font-family: var(--font-head); }
        .diff-better { color: var(--success); }
        .diff-worse  { color: var(--accent2); }

        /* Prepayment */
        .calc-prepay-section { margin-top: 20px; background: var(--surface); border: 1.5px solid var(--border); border-radius: 18px; padding: 22px 24px; }
        .calc-prepay-section h3 { font-family: var(--font-head); font-size: 15px; font-weight: 800; margin: 0 0 16px; }
        .prepay-result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 16px; }
        .prepay-result-item { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; text-align: center; }
        .prepay-result-val { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--success); }
        .prepay-result-lbl { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; margin-top: 4px; }

  /* ── Perfios Modal Overlay ── */
  #pse-overlay {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(12,23,51,.55); backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
  }
  #pse-overlay.open { display: flex; }
  #pse-box {
    background: var(--surface); border: 1.5px solid var(--border); border-radius: 20px;
    width: min(780px, 96vw); max-height: 92vh; overflow-y: auto;
    box-shadow: var(--shadow-lg); position: relative;
    font-family: var(--font-body);
  }
  #pse-box::-webkit-scrollbar { width: 5px; }
  #pse-box::-webkit-scrollbar-track { background: var(--surface2); }
  #pse-box::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

  /* Header */
  .pse-header {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    border-bottom: 1.5px solid var(--accent-dark); padding: 20px 24px 16px;
    border-radius: 20px 20px 0 0; position: sticky; top: 0; z-index: 10;
    display: flex; align-items: flex-start; gap: 14px;
  }
  .pse-logo { width: 40px; height: 40px; background: rgba(255,255,255,.18); border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,.28); }
  .pse-title { font-size: 16px; font-weight: 800; color: #ffffff; font-family: var(--font-head); }
  .pse-sub { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 2px; }
  .pse-close {
    margin-left: auto; width: 32px; height: 32px; border-radius: 8px;
    border: 1.5px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); cursor: pointer;
    color: rgba(255,255,255,.85); font-size: 16px; display: flex; align-items: center; justify-content: center;
    transition: all .18s; flex-shrink: 0;
  }
  .pse-close:hover { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.22); color: #fff; }

  /* Steps bar */
  .pse-steps {
    display: flex; align-items: center; padding: 14px 24px;
    border-bottom: 1.5px solid var(--border); background: var(--surface2); gap: 0;
  }
  .pse-step { display: flex; align-items: center; gap: 8px; flex: 1; }
  .pse-snum {
    width: 26px; height: 26px; border-radius: 50%; background: var(--surface);
    border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--text3); transition: all .3s; flex-shrink: 0;
  }
  .pse-snum.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 8px var(--accent-glow); }
  .pse-snum.done { background: var(--success); border-color: var(--success); color: #fff; }
  .pse-slabel { font-size: 11px; color: var(--text3); font-weight: 600; }
  .pse-slabel.active { color: var(--accent); font-weight: 700; }
  .pse-slabel.done { color: var(--success); }
  .pse-sarrow { color: var(--border2); margin: 0 8px; font-size: 16px; }

  /* Body */
  .pse-body { padding: 20px 24px; background: var(--surface); }

  /* Upload grid */
  .pse-upload-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px;
  }
  @media (max-width: 560px) { .pse-upload-grid { grid-template-columns: 1fr; } }
  .pse-upload-box {
    background: var(--surface2); border: 1.5px dashed var(--border2); border-radius: 12px;
    padding: 18px 12px; text-align: center; cursor: pointer; transition: all .2s;
    position: relative; min-height: 130px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px;
  }
  .pse-upload-box:hover, .pse-upload-box.drag-over {
    border-color: var(--accent); background: var(--accent-subtle); box-shadow: 0 0 0 3px var(--accent-glow);
  }
  .pse-upload-box.loaded { border-color: var(--warn); border-style: solid; background: rgba(230,126,0,.04); }
  .pse-upload-box input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
  .pse-ubadge {
    position: absolute; top: 7px; right: 7px; background: var(--surface);
    border: 1px solid var(--border2); border-radius: 5px; padding: 2px 7px;
    font-size: 9.5px; color: var(--text3); font-family: 'IBM Plex Mono', monospace; letter-spacing: .4px;
    font-weight: 700;
  }
  .pse-ub-icon { font-size: 1.8rem; }
  .pse-ub-title { font-size: 12px; font-weight: 700; color: var(--text); }
  .pse-ub-sub { font-size: 10px; color: var(--text3); }
  .pse-ub-loaded { font-size: 10.5px; color: var(--warn); word-break: break-all; padding: 0 4px; font-weight: 600; }

  /* Password unlock */
  .pse-pw-sec {
    display: none; background: rgba(230,126,0,.06); border: 1px solid rgba(230,126,0,.28);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; gap: 10px;
    align-items: center; flex-wrap: wrap;
  }
  .pse-pw-sec.show { display: flex; }
  .pse-pw-sec label { font-size: 11.5px; color: var(--warn); font-weight: 700; white-space: nowrap; }
  .pse-pw-sec input {
    flex: 1; min-width: 120px; background: var(--surface2); border: 1.5px solid var(--border2);
    border-radius: 7px; padding: 6px 10px; color: var(--text); font-size: 12px; outline: none;
    font-family: var(--font-body);
  }
  .pse-pw-sec input:focus { border-color: var(--warn); box-shadow: 0 0 0 2px rgba(230,126,0,.12); }

  /* Manual input table */
  .pse-slip-wrap {
    background: var(--surface2); border: 1.5px solid var(--border); border-radius: 12px;
    padding: 16px; margin-bottom: 16px;
    transition: border-color .2s, box-shadow .2s;
  }
  .pse-slip-hdr {
    display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin-bottom: 6px;
  }
  .pse-slip-hdr span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); font-weight: 700; padding: 0 2px; }
  .pse-slip-row { display: grid; grid-template-columns: 110px 1fr; gap: 8px; margin-bottom: 8px; align-items: center; }
  .pse-month-tag {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: 7px;
    padding: 8px 10px; font-size: 11px; color: var(--text2); text-align: center;
    font-family: 'IBM Plex Mono', monospace; font-weight: 600; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pse-month-tag.empty { color: var(--text3); font-weight: 400; font-style: italic; }
  .pse-slip-row input {
    background: var(--surface); border: 1.5px solid var(--border2); border-radius: 7px;
    padding: 8px 10px; color: var(--text); font-size: 13px; outline: none; width: 100%;
    transition: border-color .18s; font-family: var(--font-body);
  }
  .pse-slip-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
  .pse-slip-row input::placeholder { color: var(--text3); }

  /* Progress */
  .pse-prog-wrap { margin: 10px 0; display: none; }
  .pse-prog-track { background: var(--surface3); border-radius: 5px; height: 6px; overflow: hidden; }
  .pse-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); width: 0%; transition: width .4s; border-radius: 5px; }
  .pse-prog-text { font-size: 10.5px; color: var(--text3); margin-top: 5px; font-family: 'IBM Plex Mono', monospace; }

  /* Error */
  .pse-err-box {
    background: var(--accent2-subtle); border: 1px solid var(--accent2-glow);
    border-radius: 9px; padding: 10px 14px; color: var(--accent2); font-size: 12px; margin-bottom: 12px; display: none;
  }

  /* Info box */
  .pse-info-box {
    background: var(--accent-subtle); border: 1.5px solid rgba(26,79,163,.18);
    border-radius: 10px; padding: 10px 14px; font-size: 11.5px; color: var(--text2); margin-bottom: 14px;
    line-height: 1.6;
  }
  .pse-info-box strong { color: var(--accent); }

  /* Extraction result summary */
  #pse-result-bar {
    display: none; background: rgba(26,115,64,.06); border: 1.5px solid rgba(26,115,64,.22);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
  }
  .pse-res-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
  .pse-res-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); font-weight: 700; min-width: 120px; }
  .pse-res-val { font-size: 14px; font-weight: 800; color: var(--success); font-family: var(--font-head); }

  /* Footer */
  .pse-footer {
    border-top: 1.5px solid var(--border); padding: 16px 24px;
    display: flex; align-items: center; gap: 12px; justify-content: flex-end;
    background: var(--surface2); border-radius: 0 0 20px 20px; position: sticky; bottom: 0;
  }
  .pse-btn {
    padding: 9px 20px; border-radius: 9px; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; font-family: var(--font-body); transition: all .2s;
  }
  .pse-btn-ghost { background: var(--surface); border: 1.5px solid var(--border2); color: var(--text2); }
  .pse-btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
  .pse-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-light)); color: #fff; min-width: 200px; box-shadow: var(--shadow-accent); }
  .pse-btn-primary:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-glow); }
  .pse-btn-primary:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
  .pse-btn-success { background: linear-gradient(135deg, var(--success), #22a35a); color: #fff; min-width: 220px; box-shadow: 0 4px 16px rgba(26,115,64,.22); }
  .pse-btn-success:hover { opacity: .9; transform: translateY(-1px); }

  /* Upload gate counter — shown in footer until all 3 slips are loaded */
  #pse-upload-gate {
    display: flex; align-items: center; gap: 8px; margin-right: auto;
    font-size: 11.5px; font-weight: 700; color: var(--text3);
    font-family: 'IBM Plex Mono', monospace;
  }
  #pse-upload-gate .pse-gate-dots { display: flex; gap: 5px; }
  #pse-upload-gate .pse-gate-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--border2); transition: background .25s;
  }
  #pse-upload-gate .pse-gate-dot.filled { background: var(--warn); }
  #pse-upload-gate .pse-gate-dot.filled-all { background: var(--success); }
  #pse-upload-gate .pse-gate-label { transition: color .25s; letter-spacing: .3px; }

@keyframes docPwIn { from { opacity:0; transform:scale(.88) translateY(12px); } to { opacity:1; transform:scale(1) translateY(0); } }
#doc-pw-overlay { display:none; align-items:center; justify-content:center; }
#doc-pw-overlay[style*="display:flex"] { display:flex !important; }


/* ══════════════════════════════════════════════════════════════
   LENDER EMAIL WORKFLOW (LEW) — AI timeline entry styles
   ══════════════════════════════════════════════════════════════ */

/* AI-attributed tracking rows get a subtle blue-left border */
.tracking-table tbody tr[data-ai="true"],
.tracking-table tbody tr.lew-ai-row {
  border-left: 3px solid #0047AB;
  background: rgba(0, 71, 171, 0.03);
}
.tracking-table tbody tr[data-ai="true"] td:first-child::before,
.tracking-table tbody tr.lew-ai-row td:first-child::before {
  content: '🤖 ';
  font-size: 11px;
}

/* LEW action bar inside the timeline tab */
#lew-action-bar {
  position: sticky;
  top: 0;
  z-index: 5;
}
#lew-action-bar button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  transition: all 0.18s;
}

/* Lender email sent / received chips on the timeline */
.lew-chip-sent     { display:inline-block; background:#E8F4FD; color:#0047AB; border:1px solid rgba(0,71,171,.2); border-radius:100px; padding:2px 9px; font-size:10px; font-weight:700; }
.lew-chip-received { display:inline-block; background:#E8F5EE; color:#1a6b4a; border:1px solid rgba(26,107,74,.2); border-radius:100px; padding:2px 9px; font-size:10px; font-weight:700; }

/* ══════════════════════════════════════════════════════════════
   AI AGENT — Timeline entry styles
   ══════════════════════════════════════════════════════════════ */

/* AI Agent tracking rows */
.tracking-table tbody tr[data-ai="true"],
.tracking-table tbody tr.agent-ai-row {
  border-left: 3px solid #6366f1;
  background: rgba(99, 102, 241, 0.03);
}
.tracking-table tbody tr[data-ai="true"] td:first-child::before {
  content: '🤖 ';
  font-size: 11px;
}

/* Agent action bar */
#agent-action-bar button:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  transition: all 0.15s;
}

/* Agent pulsing run indicator */
@keyframes agent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,71,171,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(0,71,171,0); }
}
.agent-running { animation: agent-pulse 1.4s ease infinite; }

/* ══════════════════════════════════════════════════════════════════════
   TASKS PAGE — Complete redesign fix
   Replaces the broken horizontal card layout with a clean grid
   ══════════════════════════════════════════════════════════════════════ */

/* ── Filter bar ── */
.task-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.task-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border2, #dde8fb);
  background: var(--surface, #f8faff);
  font-size: 13px;
  font-weight: 600;
  color: var(--text2, #4a5568);
  cursor: pointer;
  transition: all .18s;
  font-family: var(--font-body, inherit);
}

.task-filter-chip:hover {
  border-color: var(--accent, #1a4fa3);
  color: var(--accent, #1a4fa3);
  background: rgba(26,79,163,.05);
}

.task-filter-chip.active {
  background: var(--accent, #1a4fa3);
  border-color: var(--accent, #1a4fa3);
  color: #fff;
}

/* ── Board grid ── */
.task-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  align-items: start;
}

/* ── Card — override the broken flex layout ── */
.task-board .task-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  border: 1.5px solid #dde8fb !important;
  background: #fff !important;
  margin-bottom: 0 !important;
  cursor: default !important;
  box-shadow: 0 2px 10px rgba(26,79,163,.05);
  transition: border-color .18s, box-shadow .18s, transform .18s;
  position: relative;
  overflow: hidden;
}

.task-board .task-card:hover {
  border-color: var(--accent, #1a4fa3) !important;
  box-shadow: 0 6px 20px rgba(26,79,163,.1) !important;
  transform: translateY(-2px);
}

/* Priority left border */
.task-board .task-card.priority-high   { border-left: 4px solid #d42b2b !important; }
.task-board .task-card.priority-medium { border-left: 4px solid #e67e00 !important; }
.task-board .task-card.priority-low    { border-left: 4px solid #1a7340 !important; }

/* ── Card header row ── */
.task-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.task-card-app-id {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--accent, #1a4fa3);
  background: rgba(26,79,163,.08);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
  transition: background .18s;
}

.task-card-app-id:hover {
  background: rgba(26,79,163,.16);
  text-decoration: underline;
}

.task-card-type {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #1a1a2e);
  line-height: 1.3;
}

/* ── Status pill ── */
.task-status-pill {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
  align-self: flex-start;
}

.task-status-pill.draft    { background: rgba(100,100,130,.1);  color: #505070; border: 1px solid rgba(100,100,130,.2); }
.task-status-pill.open     { background: rgba(26,79,163,.1);    color: var(--accent, #1a4fa3); border: 1px solid rgba(26,79,163,.2); }
.task-status-pill.done     { background: rgba(26,115,64,.1);    color: #1a7340; border: 1px solid rgba(26,115,64,.2); }
.task-status-pill.pending  { background: rgba(230,126,0,.1);    color: #b35900; border: 1px solid rgba(230,126,0,.2); }
.task-status-pill.cancelled{ background: rgba(192,57,43,.08);   color: #b03020; border: 1px solid rgba(192,57,43,.15); }

/* ── Meta row (user, date, app name) ── */
.task-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text3, #7a7a8a);
}

.task-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* ── Remark text ── */
.task-card-remark {
  font-size: 12.5px;
  color: var(--text2, #4a5568);
  line-height: 1.55;
  background: #f5f8ff;
  border: 1px solid #e0e8f8;
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
  /* Clamp long remarks to 3 lines with expand on hover */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height .3s;
  max-height: 70px;
  word-break: break-word;
}

.task-board .task-card:hover .task-card-remark {
  -webkit-line-clamp: unset;
  max-height: 300px;
  overflow: visible;
}

/* ── AI Agent created badge ── */
.task-board .task-card[id*="efin-task-card"] .task-card-type::before {
  content: '';
}

/* AI agent tasks get a subtle teal top strip */
.task-board .task-card.agent-task {
  background: linear-gradient(#f8fdff, #fff) !important;
}

/* ── Action buttons row ── */
.task-board .task-card > div:last-child {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f0f4fc;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Done card ── */
.task-board .task-card.done-card {
  opacity: .6;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .task-board {
    grid-template-columns: 1fr;
  }
}


/* Header — same gradient as PSE */

/* iframe fills the rest */



/* ══════════════════════════════════════════════════════════════
   PERFIOS V9 BANK STATEMENT MODAL
   Matches PSE salary slip modal pixel-for-pixel
   ══════════════════════════════════════════════════════════════ */

/* ── Perfios v9 Bank Statement Modal — matches PSE salary slip style ── */
#pfv9-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(12,23,51,.55);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
#pfv9-overlay.open { display: flex; }

#pfv9-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 20px;
  width: min(1080px, 97vw);
  height: min(88vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: docPwIn .22s cubic-bezier(.34,1.4,.64,1);
}

/* Blue gradient header — matches app UI theme */
#pfv9-header {
  background: linear-gradient(135deg, #0f3278 0%, #1a4fa3 60%, #2d68cc 100%);
  border-bottom: 1.5px solid #0f3278;
  padding: 18px 24px 14px;
  border-radius: 20px 20px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
#pfv9-header .pfv9-logo {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.28);
}
#pfv9-header .pfv9-title {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-head);
}
#pfv9-header .pfv9-sub {
  font-size: 11px;
  color: rgba(255,255,255,.75);
  margin-top: 3px;
  line-height: 1.55;
}
#pfv9-close-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  cursor: pointer;
  color: rgba(255,255,255,.9);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
}
#pfv9-close-btn:hover {
  border-color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.22);
  color: #fff;
}


/* pfv9 footer */
#pfv9-footer {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1.5px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  flex-wrap: wrap;
}
#pfv9-confirm-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
  transition: all .15s;
}

/* iframe fills remaining space — Perfios runs with its own theme inside */
#pfv9-frame {
  flex: 1;
  border: none;
  width: 100%;
  display: block;
  background: transparent;
}

/* ── Payout Management UI ─────────────────────────────────── */
.pm-kpi-card { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:16px 18px; cursor:pointer; transition:transform .15s,box-shadow .15s,border-color .15s; position:relative; overflow:hidden; }
.pm-kpi-card::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; border-radius:14px 14px 0 0; }
.pm-kpi-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.07); }
.pm-kpi-warn  { border-color:rgba(230,126,0,.25); } .pm-kpi-warn::before  { background:var(--warn); }    .pm-kpi-warn:hover  { border-color:var(--warn); }
.pm-kpi-success { border-color:rgba(26,115,64,.25); } .pm-kpi-success::before { background:var(--success); } .pm-kpi-success:hover { border-color:var(--success); }
.pm-kpi-accent { border-color:rgba(26,79,163,.25); }  .pm-kpi-accent::before { background:var(--accent); }   .pm-kpi-accent:hover { border-color:var(--accent); }
.pm-kpi-danger { border-color:rgba(212,43,43,.25); }  .pm-kpi-danger::before { background:var(--accent2); }  .pm-kpi-danger:hover { border-color:var(--accent2); }
.pm-kpi-total { background:linear-gradient(135deg,rgba(26,79,163,.09),rgba(26,79,163,.04)); border-color:rgba(26,79,163,.3) !important; }
.pm-kpi-total::before { background:var(--accent); }
.pm-kpi-month { background:var(--surface2); } .pm-kpi-month::before { background:var(--text3); }
.pm-kpi-icon  { font-size:15px; margin-bottom:8px; opacity:.75; display:block; }
.pm-kpi-num   { font-weight:800; font-size:26px; color:var(--text); line-height:1; margin-bottom:4px; }
.pm-kpi-num--lg { font-size:20px; color:var(--accent); }
.pm-kpi-warn .pm-kpi-num   { color:var(--warn); }
.pm-kpi-success .pm-kpi-num { color:var(--success); }
.pm-kpi-accent .pm-kpi-num  { color:var(--accent); }
.pm-kpi-danger .pm-kpi-num  { color:var(--accent2); }
.pm-kpi-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--text3); margin-bottom:2px; }
.pm-kpi-sub   { font-size:11px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pm-filters-bar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; background:var(--surface); border:1.5px solid var(--border); border-radius:14px; padding:12px 16px; margin-bottom:14px; }
.pm-search-wrap { flex:1; min-width:200px; position:relative; display:flex; align-items:center; }
.pm-search-icon { position:absolute; left:10px; font-size:13px; pointer-events:none; }
.pm-search-input { width:100%; padding:7px 12px 7px 32px; border:1.5px solid var(--border2); border-radius:8px; font-size:13px; background:var(--surface2); color:var(--text); outline:none; transition:border-color .15s; }
.pm-search-input:focus { border-color:var(--accent); background:var(--surface); }
.pm-select { padding:7px 10px; border:1.5px solid var(--border2); border-radius:8px; font-size:13px; background:var(--surface2); color:var(--text); outline:none; cursor:pointer; transition:border-color .15s; }
.pm-select:focus, .pm-select:hover { border-color:var(--accent); }
.pm-clear-btn { padding:7px 14px; border:1.5px solid var(--border2); border-radius:8px; background:transparent; font-size:12.5px; color:var(--text3); cursor:pointer; transition:all .15s; white-space:nowrap; }
.pm-clear-btn:hover { border-color:var(--accent2); color:var(--accent2); background:rgba(212,43,43,.06); }
.pm-table-wrap { background:var(--surface); border:1.5px solid var(--border); border-radius:14px; overflow:hidden; }
.pm-table { width:100%; border-collapse:collapse; }
.pm-table thead tr { background:var(--surface2); border-bottom:1.5px solid var(--border); }
.pm-table thead th { padding:10px 12px; font-size:11px; font-weight:700; letter-spacing:.8px; color:var(--text3); text-align:left; white-space:nowrap; }
.pm-th-sort { cursor:pointer; user-select:none; } .pm-th-sort:hover { color:var(--accent); }
.pm-table tbody tr { border-bottom:1px solid var(--border); transition:background .12s; }
.pm-table tbody tr:last-child { border-bottom:none; }
.pm-table tbody tr:hover { background:var(--surface2) !important; }
.pm-table tbody td { padding:10px 12px; vertical-align:middle; }
.pm-empty-row { text-align:center; padding:56px 20px !important; color:var(--text3); font-size:13.5px; }
.pm-table-footer { display:flex; align-items:center; justify-content:space-between; padding:11px 18px; border-top:1.5px solid var(--border); flex-wrap:wrap; gap:10px; background:var(--surface2); }
.pm-bulk-btn { font-weight:600; font-size:12px; padding:5px 12px; border-radius:7px; border:1.5px solid; }
.pm-bulk-pay     { background:rgba(26,79,163,.1);  color:var(--accent);  border-color:rgba(26,79,163,.3); }
.pm-bulk-approve { background:rgba(26,115,64,.1);  color:var(--success); border-color:rgba(26,115,64,.3); }
.pm-bulk-reject  { background:rgba(212,43,43,.08); color:var(--accent2); border-color:rgba(212,43,43,.2); }
.pm-bulk-hold    { background:rgba(230,126,0,.08); color:var(--warn);    border-color:rgba(230,126,0,.25); }
.pm-bulk-btn:hover { opacity:.85; cursor:pointer; }

/* compat tokens required by added sections (kept) */
:root{ --info:#1a4fa3; --success-subtle:rgba(26,115,64,.10); }