:root {
      --bg: #f8fafc;
      --card: #fff;
      --card2: #f1f5f9;
      --border: #e2e8f0;
      --border2: #cbd5e1;
      --text: #0f172a;
      --text2: #64748b;
      --text3: #94a3b8;
      --primary: #1d4ed8;
      --primary-l: #dbeafe;
      --primary-d: #1e40af;
      --green: #059669;
      --green-l: #d1fae5;
      --red: #dc2626;
      --red-l: #fee2e2;
      --orange: #d97706;
      --orange-l: #fef3c7;
      --purple: #7c3aed;
      --purple-l: #ede9fe;
      --blue: #2563eb;
      --blue-l: #dbeafe;
      --r: 10px;
      --r-sm: 6px;
      --r-lg: 14px;
      --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, .1);
      --sidebar-w: 230px;
    }

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

    .icon {
      display: inline-block;
      width: 1em;
      height: 1em;
      vertical-align: -0.125em;
      fill: none;
      stroke: currentColor;
      flex-shrink: 0
    }

    html,
    body {
      height: 100%;
      height: 100dvh;
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.5;
      overflow: hidden
    }

    :focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 20px;
      text-align: center
    }

    .empty-state .es-icon {
      font-size: 2.6rem;
      margin-bottom: 12px;
      opacity: .6
    }

    .empty-state .es-title {
      font-size: .94rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 5px
    }

    .empty-state .es-sub {
      font-size: .8rem;
      color: var(--text3);
      max-width: 280px;
      line-height: 1.6;
      margin-bottom: 16px
    }

    .onboard-card {
      background: linear-gradient(135deg, var(--primary-l), transparent);
      border: 1px dashed var(--primary);
      border-radius: var(--r);
      padding: 18px 20px;
      margin-bottom: 14px
    }

    .onboard-card .ob-title {
      font-size: .9rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .onboard-card .ob-sub {
      font-size: .8rem;
      color: var(--text2);
      line-height: 1.6;
      margin-bottom: 12px
    }

    /* ══════════════════════════════════════════
   DARK MODE — ALL ELEMENTS
══════════════════════════════════════════ */
    * {
      transition: background-color .25s ease, border-color .25s ease, color .2s ease, box-shadow .25s ease;
    }

    /* Exclude transitions that shouldn't animate */
    button,
    a,
    .btn,
    .btn-call,
    .btn-upd,
    .badge,
    .ptab,
    .sn-btn,
    .stab,
    .a-tab {
      transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
    }

    /* Page/animation should not be affected by global transition */
    .page,
    .modal,
    .modal-box,
    .filter-panel,
    .portfolio-card,
    .mb,
    .risk-bar,
    .coll-bar {
      transition: background-color .25s ease, border-color .25s ease, color .2s ease, transform .2s ease, opacity .2s ease;
    }

    [data-theme="dark"] {
      --bg: #0d1117;
      --card: #161b22;
      --card2: #0d1117;
      --border: #21262d;
      --border2: #30363d;
      --text: #e6edf3;
      --text2: #8b949e;
      --text3: #484f58;
      --primary: #58a6ff;
      --primary-l: rgba(88, 166, 255, .12);
      --primary-d: #1f6feb;
      --green: #3fb950;
      --green-l: rgba(63, 185, 80, .12);
      --red: #f85149;
      --red-l: rgba(248, 81, 73, .12);
      --orange: #d29922;
      --orange-l: rgba(210, 153, 34, .12);
      --purple: #bc8cff;
      --purple-l: rgba(188, 140, 255, .12);
      --blue: #79c0ff;
      --blue-l: rgba(121, 192, 255, .12);
      --shadow: 0 1px 3px rgba(0, 0, 0, .4);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, .5);
    }

    /* App backgrounds */
    [data-theme="dark"] body,
    [data-theme="dark"] #app {
      background: var(--bg);
    }

    [data-theme="dark"] .sidebar {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .topbar {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .bottom-nav {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .modal-box {
      background: var(--card);
      border-color: var(--border2);
    }

    [data-theme="dark"] .card {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .stat-card {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .page-tabs {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .a-tabs {
      background: var(--bg);
      border-color: var(--border);
    }

    [data-theme="dark"] .stab-bar {
      border-color: var(--border);
    }

    [data-theme="dark"] .filter-panel {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .filter-btn {
      background: var(--card);
      border-color: var(--border2);
    }

    [data-theme="dark"] .sum-bar {
      background: var(--bg);
      border-color: var(--border);
    }

    [data-theme="dark"] .ren-block {
      background: rgba(63, 185, 80, .06);
      border-color: rgba(63, 185, 80, .2);
    }

    [data-theme="dark"] .rp-box {
      background: rgba(63, 185, 80, .05);
      border-color: rgba(63, 185, 80, .18);
    }

    [data-theme="dark"] .cl-warn {
      background: var(--bg);
      border-color: var(--border);
    }

    /* Inputs */
    [data-theme="dark"] .fc {
      background: var(--bg);
      border-color: var(--border2);
      color: var(--text);
    }

    [data-theme="dark"] .fc:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(88, 166, 255, .1);
    }

    [data-theme="dark"] .search-in {
      background: var(--card);
      border-color: var(--border);
      color: var(--text);
    }

    [data-theme="dark"] .search-in:focus {
      border-color: var(--primary);
    }

    [data-theme="dark"] .login-field input {
      background: var(--bg);
      border-color: var(--border2);
      color: var(--text);
    }

    /* Table */
    [data-theme="dark"] .lt thead th {
      background: var(--bg);
    }

    [data-theme="dark"] .lt tbody tr:hover {
      background: rgba(255, 255, 255, .03);
    }

    [data-theme="dark"] .tbl-wrap {
      border-color: var(--border);
    }

    /* Cards */
    [data-theme="dark"] .lc {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .lc-hd {
      border-color: var(--border);
    }

    [data-theme="dark"] .lc-ac {
      border-color: var(--border);
    }

    /* Buttons */
    [data-theme="dark"] .btn-s {
      background: var(--card);
      border-color: var(--border2);
      color: var(--text);
    }

    [data-theme="dark"] .btn-s:hover {
      background: var(--border);
    }

    [data-theme="dark"] .btn-upd {
      background: var(--card);
      border-color: var(--border2);
      color: var(--text);
    }

    [data-theme="dark"] .btn-upd:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-l);
    }

    [data-theme="dark"] .u-btn {
      background: transparent;
      border-color: var(--border2);
      color: var(--text2);
    }

    /* Badges */
    [data-theme="dark"] .b-active {
      background: rgba(63, 185, 80, .12);
      color: #3fb950;
      border-color: rgba(63, 185, 80, .25);
    }

    [data-theme="dark"] .b-nine {
      background: rgba(121, 192, 255, .1);
      color: #79c0ff;
      border-color: rgba(121, 192, 255, .25);
    }

    [data-theme="dark"] .b-pnpa {
      background: rgba(188, 140, 255, .1);
      color: #bc8cff;
      border-color: rgba(188, 140, 255, .25);
    }

    [data-theme="dark"] .b-npa {
      background: rgba(248, 81, 73, .1);
      color: #f85149;
      border-color: rgba(248, 81, 73, .25);
    }

    [data-theme="dark"] .b-closed {
      background: var(--border);
      color: var(--text3);
      border-color: var(--border2);
    }

    [data-theme="dark"] .b-due {
      background: rgba(210, 153, 34, .12);
      color: #d29922;
      border-color: rgba(210, 153, 34, .25);
    }

    [data-theme="dark"] .ptab .cnt {
      background: var(--border2);
      color: var(--text);
    }

    [data-theme="dark"] .ptab.active .cnt {
      background: rgba(255, 255, 255, 0.25);
      color: #fff;
    }

    [data-theme="dark"] .b-ovd {
      background: rgba(248, 81, 73, .1);
      color: #f85149;
      border-color: rgba(248, 81, 73, .2);
    }

    /* Login */
    [data-theme="dark"] .login-box {
      background: var(--card);
      box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
    }

    [data-theme="dark"] .login-box h1 {
      color: var(--text);
    }

    [data-theme="dark"] .login-box p {
      color: var(--text2);
    }

    /* Nav */
    [data-theme="dark"] .sn-btn:hover {
      background: var(--bg);
    }

    [data-theme="dark"] .sn-btn.active {
      background: var(--primary-l);
      color: var(--primary);
    }

    [data-theme="dark"] .stab:hover {
      color: var(--text);
    }

    [data-theme="dark"] .stab.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }

    [data-theme="dark"] .ptab:hover {
      background: var(--bg);
    }

    [data-theme="dark"] .a-tab:hover {
      background: var(--card);
    }

    /* NPA/category section blocks in settings */
    [data-theme="dark"] div[style*="background:#eff6ff"] {
      background: rgba(88, 166, 255, .06) !important;
      border-color: rgba(88, 166, 255, .2) !important;
    }

    [data-theme="dark"] div[style*="background:#f5f3ff"] {
      background: rgba(188, 140, 255, .06) !important;
      border-color: rgba(188, 140, 255, .2) !important;
    }

    [data-theme="dark"] div[style*="background:#fef2f2"] {
      background: rgba(248, 81, 73, .05) !important;
      border-color: rgba(248, 81, 73, .18) !important;
    }

    [data-theme="dark"] div[style*="background:#f0fdfa"] {
      background: rgba(63, 185, 80, .05) !important;
      border-color: rgba(63, 185, 80, .18) !important;
    }

    /* Toast */
    [data-theme="dark"] .toast {
      background: var(--card);
      border-color: var(--border2);
    }

    /* Loading */
    [data-theme="dark"] .loading-ov {
      background: rgba(13, 17, 23, .88);
    }

    /* User rows */
    [data-theme="dark"] .user-row {
      border-color: var(--border);
    }

    [data-theme="dark"] .u-role.user {
      background: var(--bg);
      color: var(--text3);
      border-color: var(--border2);
    }

    /* ══════════════════════════════════════════
   SMOOTH ANIMATIONS
══════════════════════════════════════════ */
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes slideInLeft {
      from {
        opacity: 0;
        transform: translateX(-12px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes fadeScale {
      from {
        opacity: 0;
        transform: scale(.96)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .5
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% 0
      }

      100% {
        background-position: 200% 0
      }
    }

    @keyframes bounceIn {
      0% {
        opacity: 0;
        transform: scale(.6)
      }

      60% {
        transform: scale(1.08)
      }

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

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

    .lc {
      animation: slideInUp .18s ease both
    }

    .stat-card {
      animation: fadeScale .2s ease both
    }

    .card {
      animation: fadeScale .18s ease both
    }

    .loan-modal-open {
      animation: fadeScale .2s cubic-bezier(.4, 0, .2, 1)
    }

    .badge {
      transition: all .18s ease !important;
    }

    /* Staggered card animations */
    .lc:nth-child(1) {
      animation-delay: .03s
    }

    .lc:nth-child(2) {
      animation-delay: .06s
    }

    .lc:nth-child(3) {
      animation-delay: .09s
    }

    .lc:nth-child(4) {
      animation-delay: .12s
    }

    .lc:nth-child(5) {
      animation-delay: .15s
    }

    /* Skeleton loading */
    .skel {
      background: linear-gradient(90deg, var(--border) 25%, var(--border2) 50%, var(--border) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
      border-radius: 4px
    }

    /* Ripple on buttons */
    .btn,
    .btn-call,
    .btn-upd,
    .sn-btn,
    .ptab {
      position: relative;
      overflow: hidden;
    }

    .btn::after,
    .btn-call::after,
    .btn-upd::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      margin: -50px;
      background: rgba(255, 255, 255, .25);
      transform: scale(0);
      opacity: 0;
      pointer-events: none;
      transition: transform .5s ease, opacity .5s ease;
    }

    .btn:active::after,
    .btn-call:active::after,
    .btn-upd:active::after {
      transform: scale(3);
      opacity: 0;
      transition: 0s;
    }

    /* ══════════════════════════════════════════
   MODERN BUTTON STYLES
══════════════════════════════════════════ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 9px 18px;
      border: none;
      border-radius: 8px;
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: .01em;
      position: relative;
      overflow: hidden;
    }

    .btn-p {
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      box-shadow: 0 2px 8px rgba(29, 78, 216, .3);
    }

    .btn-p:hover {
      background: linear-gradient(135deg, #1d4ed8, #1e3a8a);
      box-shadow: 0 4px 14px rgba(29, 78, 216, .4);
      transform: translateY(-1px);
    }

    .btn-p:active {
      transform: translateY(0);
      box-shadow: 0 1px 4px rgba(29, 78, 216, .3);
    }

    .btn-s {
      background: var(--card);
      color: var(--text);
      border: 1.5px solid var(--border2);
    }

    .btn-s:hover {
      background: var(--card2);
      border-color: var(--border2);
      transform: translateY(-1px);
    }

    .btn-g {
      background: transparent;
      color: var(--text2);
      padding: 8px 12px;
    }

    .btn-g:hover {
      color: var(--text);
      background: var(--card2);
    }

    .btn-fw {
      width: 100%;
    }

    .btn-danger {
      background: var(--red-l);
      color: var(--red);
      border: 1px solid rgba(220, 38, 38, .25);
    }

    .btn-danger:hover {
      background: var(--red);
      color: #fff;
      transform: translateY(-1px);
    }

    .btn-call {
      background: linear-gradient(135deg, #059669, #047857);
      color: #fff;
      padding: 6px 11px;
      font-size: .72rem;
      border-radius: 7px;
      border: none;
      cursor: pointer;
      font-weight: 700;
      font-family: inherit;
      box-shadow: 0 2px 6px rgba(5, 150, 105, .25);
      white-space: nowrap;
    }

    .btn-call:hover {
      background: linear-gradient(135deg, #047857, #065f46);
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(5, 150, 105, .3);
    }

    .btn-upd {
      background: var(--card);
      color: var(--text);
      border: 1.5px solid var(--border2);
      padding: 6px 11px;
      font-size: .72rem;
      border-radius: 7px;
      cursor: pointer;
      font-weight: 600;
      font-family: inherit;
    }

    .btn-upd:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-l);
      transform: translateY(-1px);
    }

    .btn.btn-call {
      padding: 9px 18px;
      font-size: .84rem
    }

    .login-btn {
      width: 100%;
      padding: 13px;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      color: #fff;
      border: none;
      border-radius: 9px;
      font-size: .92rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: .02em;
      box-shadow: 0 4px 14px rgba(29, 78, 216, .35);
      transition: all .18s ease;
      margin-top: 6px;
    }

    .login-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(29, 78, 216, .45);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    .login-btn:disabled {
      opacity: .6;
      transform: none;
      cursor: not-allowed;
    }

    /* ══════════════════════════════════════════
   NEW FEATURE: LOAN DETAIL DRAWER
══════════════════════════════════════════ */
    .detail-drawer {
      position: fixed;
      inset: 0;
      z-index: 250;
      display: none;
      background: rgba(15, 23, 42, .55);
      backdrop-filter: blur(6px);
    }

    .detail-drawer.open {
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }

    .dd-box {
      background: var(--card);
      border: 1px solid var(--border2);
      border-radius: 20px 20px 0 0;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      padding-bottom: env(safe-area-inset-bottom);
      animation: slideInUp .26s cubic-bezier(.4, 0, .2, 1);
    }

    .dd-hd {
      padding: 14px 18px 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid var(--border)
    }

    .dd-drag {
      width: 32px;
      height: 3px;
      background: var(--border2);
      border-radius: 2px;
      margin: 10px auto 0
    }

    .dd-stat-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 14px
    }

    .dd-stat {
      background: var(--card2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 11px 13px
    }

    .dd-stat .dl {
      font-size: .62rem;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 3px
    }

    .dd-stat .dv {
      font-size: .9rem;
      font-weight: 700;
      color: var(--text)
    }

    .dd-timeline {
      padding: 0 18px 16px
    }

    .dd-tl-title {
      font-size: .7rem;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 10px
    }

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

    .tl-item:not(:last-child)::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 16px;
      bottom: 0;
      width: 1px;
      background: var(--border)
    }

    .tl-dot {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 2px solid;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .52rem;
      font-weight: 800;
      margin-top: 2px
    }

    .tl-info .ti-title {
      font-size: .81rem;
      font-weight: 600
    }

    .tl-info .ti-sub {
      font-size: .71rem;
      color: var(--text2);
      margin-top: 1px
    }

    /* ══════════════════════════════════════════
   NEW FEATURE: SORT TOOLBAR
══════════════════════════════════════════ */
    .sort-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-bottom: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 2px
    }

    .sort-bar::-webkit-scrollbar {
      display: none
    }

    .sort-chip {
      display: flex;
      align-items: center;
      gap: 3px;
      padding: 4px 10px;
      background: var(--card);
      border: 1px solid var(--border2);
      border-radius: 20px;
      color: var(--text2);
      font-size: .7rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all .15s;
    }

    .sort-chip:hover {
      border-color: var(--primary);
      color: var(--primary)
    }

    .sort-chip.active {
      background: var(--primary-l);
      border-color: var(--primary);
      color: var(--primary)
    }

    .sort-chip .sort-arrow {
      font-size: .65rem;
      transition: transform .15s
    }

    /* ══════════════════════════════════════════
   NEW FEATURE: QUICK STATS CHIPS (Dashboard)
══════════════════════════════════════════ */
    .insight-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px
    }

    .insight-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 12px 14px;
      position: relative;
      overflow: hidden;
    }

    .insight-card .ic-icon {
      font-size: 1.5rem;
      margin-bottom: 5px;
      display: block
    }

    .insight-card .ic-val {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text)
    }

    .insight-card .ic-lbl {
      font-size: .67rem;
      color: var(--text2);
      margin-top: 2px
    }

    .insight-card .ic-bar {
      height: 2px;
      border-radius: 1px;
      margin-top: 8px;
      background: var(--border)
    }

    .insight-card .ic-fill {
      height: 100%;
      border-radius: 1px;
      transition: width .8s ease
    }

    @media(min-width:768px) {
      .dd-box {
        max-width: 520px;
        border-radius: 16px 16px 0 0
      }

      .dd-stat-grid {
        grid-template-columns: 1fr 1fr 1fr 1fr
      }

      .insight-row {
        grid-template-columns: 1fr 1fr 1fr 1fr
      }
    }

    /* ── EMI CALCULATOR ──────────────────────────── */
    .emi-result {
      background: linear-gradient(135deg, var(--primary), var(--primary-d));
      border-radius: var(--r);
      padding: 16px;
      color: #fff;
      margin-top: 12px
    }

    .emi-val {
      font-size: 1.6rem;
      font-weight: 800;
      display: block;
      line-height: 1
    }

    .emi-lbl {
      font-size: .68rem;
      opacity: .75;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-top: 3px
    }

    .emi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      margin-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .15);
      padding-top: 12px
    }

    .emi-stat {
      text-align: center;
      padding: 0 6px
    }

    .emi-stat:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, .15)
    }

    .emi-s-v {
      font-size: .96rem;
      font-weight: 800;
      display: block
    }

    .emi-s-l {
      font-size: .6rem;
      opacity: .65;
      text-transform: uppercase;
      letter-spacing: .05em
    }

    .fu-tag-grid {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 12px
    }

    .fu-tag {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: .76rem;
      font-weight: 600;
      border: 1.5px solid var(--border2);
      background: var(--card);
      color: var(--text2);
      cursor: pointer;
      transition: all .15s;
      font-family: inherit
    }

    .fu-tag.selected {
      border-color: var(--primary);
      background: var(--primary-l);
      color: var(--primary)
    }

    .fu-tag:hover {
      border-color: var(--primary)
    }

    .btn-followed {
      background: var(--green-l);
      border-color: var(--green) !important;
      color: var(--green) !important
    }

    .scheme-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px solid var(--border)
    }

    .scheme-bar:last-child {
      border-bottom: none
    }

    .sb-name {
      font-size: .8rem;
      font-weight: 600;
      width: 90px;
      flex-shrink: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .sb-track {
      flex: 1;
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden
    }

    .sb-fill {
      height: 100%;
      border-radius: 3px;
      background: var(--primary);
      transition: width .6s ease
    }

    .sb-cnt {
      font-size: .72rem;
      color: var(--text2);
      width: 28px;
      text-align: right;
      flex-shrink: 0
    }

    .bulk-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      flex: 1
    }

    .bs-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--border);
      color: var(--text3);
      font-size: .8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .2s
    }

    .bs-lbl {
      font-size: .66rem;
      color: var(--text3);
      font-weight: 600;
      text-align: center;
      transition: color .2s
    }

    .bs-line {
      flex: 1;
      height: 1px;
      background: var(--border);
      margin-bottom: 18px;
      min-width: 20px;
      transition: background .2s
    }

    .bulk-step.active .bs-num {
      background: var(--primary);
      color: #fff
    }

    .bulk-step.active .bs-lbl {
      color: var(--primary)
    }

    .bulk-step.done .bs-num {
      background: var(--green);
      color: #fff
    }

    .bulk-step.done .bs-lbl {
      color: var(--green)
    }

    .bs-line.done {
      background: var(--green)
    }

    .bulk-drop-zone {
      border: 2px dashed var(--border2);
      border-radius: var(--r);
      padding: 36px 20px;
      text-align: center;
      cursor: pointer;
      transition: all .2s;
      background: var(--card);
    }

    .bulk-drop-zone:hover,
    .bulk-drop-zone.drag-over {
      border-color: var(--primary);
      background: var(--primary-l);
    }

    .bulk-drop-zone.drag-over {
      transform: scale(1.01)
    }

    .bdz-icon {
      font-size: 2.2rem;
      margin-bottom: 10px
    }

    .bdz-title {
      font-size: .9rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px
    }

    .bdz-sub {
      font-size: .74rem;
      color: var(--text3)
    }

    .bulk-preview-row {
      display: grid;
      gap: 0;
      font-size: .75rem;
      border-bottom: 1px solid var(--border)
    }

    .bulk-preview-row:last-child {
      border-bottom: none
    }

    .bulk-preview-row:hover {
      background: var(--card2)
    }

    .bpr-cell {
      padding: 7px 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .bpr-status {
      padding: 7px 10px;
      display: flex;
      align-items: center
    }

    .bstat {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0
    }

    .bulk-stat-pill {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 10px 12px;
      text-align: center
    }

    .bsp-val {
      font-size: 1.3rem;
      font-weight: 800;
      display: block
    }

    .bsp-lbl {
      font-size: .62rem;
      color: var(--text3);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: .04em
    }

    .bulk-result-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 32px 20px;
      text-align: center;
      animation: fadeScale .3s ease;
    }


    /* ── PORTFOLIO CARD ──────────────────────────── */
    .portfolio-card {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-d) 100%);
      border-radius: var(--r);
      padding: 18px 20px;
      margin-bottom: 14px;
      color: #fff;
      position: relative;
      overflow: hidden;
    }

    .portfolio-card::before {
      content: '';
      position: absolute;
      top: -40px;
      right: -40px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .06);
    }

    .portfolio-card::after {
      content: '';
      position: absolute;
      bottom: -60px;
      right: 30px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .04);
    }

    .pc-label {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      opacity: .7;
      margin-bottom: 5px
    }

    .pc-val {
      font-size: 1.8rem;
      font-weight: 800;
      line-height: 1
    }

    .pc-sub {
      font-size: .76rem;
      opacity: .75;
      margin-top: 4px
    }

    .pc-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 0;
      margin-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, .15);
      padding-top: 14px
    }

    .pc-stat {
      text-align: center;
      padding: 0 8px
    }

    .pc-stat:not(:last-child) {
      border-right: 1px solid rgba(255, 255, 255, .15)
    }

    .pc-s-val {
      font-size: 1.1rem;
      font-weight: 800;
      display: block
    }

    .pc-s-lbl {
      font-size: .6rem;
      opacity: .65;
      text-transform: uppercase;
      letter-spacing: .06em
    }

    /* ── MINI CHART BARS ─────────────────────────── */
    .mini-bars {
      display: flex;
      align-items: flex-end;
      gap: 3px;
      height: 36px;
      margin-top: 8px
    }

    .mb {
      flex: 1;
      border-radius: 2px 2px 0 0;
      transition: height .4s ease;
      min-height: 2px;
      opacity: .85
    }

    /* ── RISK METER ──────────────────────────────── */
    .risk-meter {
      height: 3px;
      border-radius: 2px;
      background: var(--border);
      overflow: hidden;
      margin-top: 5px
    }

    .risk-bar {
      height: 100%;
      border-radius: 2px;
      transition: width .6s ease
    }

    /* ── FILTER PANEL ────────────────────────────── */
    .filter-panel {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 14px;
      margin-bottom: 12px;
      display: none;
    }

    .filter-panel.open {
      display: block;
      animation: fi .15s ease
    }

    .filter-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .filter-btn {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      background: var(--card);
      border: 1px solid var(--border2);
      border-radius: var(--r-sm);
      color: var(--text2);
      font-size: .76rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
    }

    .filter-btn:hover,
    .filter-btn.active {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-l)
    }

    .filter-btn .fc-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--primary);
      display: none
    }

    .filter-btn.active .fc-dot {
      display: inline-block
    }

    /* ── DARK MODE TOGGLE ────────────────────────── */
    .theme-toggle {
      width: 34px;
      height: 20px;
      border-radius: 10px;
      background: var(--border2);
      border: none;
      cursor: pointer;
      position: relative;
      transition: background .2s;
      flex-shrink: 0;
    }

    .theme-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, .2);
    }

    [data-theme="dark"] .theme-toggle {
      background: var(--primary)
    }

    [data-theme="dark"] .theme-toggle::after {
      transform: translateX(14px)
    }

    /* ── COLLECTION PROGRESS ─────────────────────── */
    .coll-bar-wrap {
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 6px
    }

    .coll-bar {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--green), #34d399);
      transition: width .8s ease
    }

    /* ── ANIMATED COUNTER ────────────────────────── */
    @keyframes countUp {
      from {
        opacity: 0;
        transform: translateY(4px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .st-val.counting {
      animation: countUp .4s ease
    }

    /* ── LOAN AGE TIMELINE ───────────────────────── */
    .age-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 7px;
      border-radius: 10px;
      font-size: .62rem;
      font-weight: 700;
    }

    /* ── QUICK NOTES BADGE ───────────────────────── */
    .has-note {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
      flex-shrink: 0;
    }

    #login-page {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 60%, #3b82f6 100%);
      padding: 20px;
    }

    .login-box {
      background: #fff;
      border-radius: 20px;
      padding: 36px 32px;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    }

    .login-logo {
      width: 56px;
      height: 56px;
      background: var(--primary);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      color: #fff;
      font-weight: 800;
      margin: 0 auto 16px;
      box-shadow: 0 4px 16px rgba(29, 78, 216, .4);
    }

    .login-box h1 {
      font-size: 1.4rem;
      font-weight: 800;
      text-align: center;
      color: var(--text);
      margin-bottom: 4px
    }

    .login-box p {
      font-size: .82rem;
      color: var(--text2);
      text-align: center;
      margin-bottom: 24px
    }

    .login-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-bottom: 14px
    }

    .login-field label {
      font-size: .76rem;
      font-weight: 600;
      color: var(--text2)
    }

    .login-field input {
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      font-size: .9rem;
      font-family: inherit;
      color: var(--text);
      background: #fff;
      transition: border-color .15s;
    }

    .login-field input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(29, 78, 216, .1)
    }

    .login-btn {
      width: 100%;
      padding: 12px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: var(--r-sm);
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s;
      margin-top: 6px;
    }

    .login-btn:hover {
      background: var(--primary-d)
    }

    .login-hint {
      font-size: .74rem;
      color: var(--text3);
      text-align: center;
      margin-top: 14px
    }

    .login-err {
      font-size: .8rem;
      color: var(--red);
      text-align: center;
      margin-top: 8px;
      display: none
    }

    /* ── APP SHELL ────────────────────────────── */
    #app {
      display: none;
      height: 100vh;
      height: 100dvh;
      overflow: hidden
    }

    .app-shell {
      display: flex;
      height: 100%
    }

    /* ── SIDEBAR ──────────────────────────────── */
    .sidebar {
      width: var(--sidebar-w);
      background: #fff;
      border-right: 1px solid var(--border);
      display: none;
      flex-direction: column;
      flex-shrink: 0;
      overflow-y: auto;
    }

    .sb-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 18px;
      border-bottom: 1px solid var(--border);
    }

    .sb-logo-icon {
      width: 32px;
      height: 32px;
      background: var(--primary);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .9rem;
      color: #fff;
      font-weight: 800;
      flex-shrink: 0;
    }

    .sb-logo-text {
      font-size: 1rem;
      font-weight: 800;
      color: var(--text)
    }

    .sb-user {
      padding: 12px 18px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .sb-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--primary-l);
      color: var(--primary);
      font-weight: 700;
      font-size: .8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .sb-user-name {
      font-size: .82rem;
      font-weight: 600;
      color: var(--text)
    }

    .sb-user-role {
      font-size: .68rem;
      color: var(--text3);
      text-transform: capitalize
    }

    .sb-logout {
      margin-left: auto;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text3);
      font-size: .78rem;
      padding: 4px 8px;
      border-radius: 4px;
      transition: all .15s;
      white-space: nowrap;
    }

    .sb-logout:hover {
      color: var(--red);
      background: var(--red-l)
    }

    .sb-nav {
      padding: 10px 8px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 1px
    }

    .sb-section {
      font-size: .63rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text3);
      padding: 8px 10px 4px
    }

    .sn-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border: none;
      background: transparent;
      color: var(--text2);
      border-radius: var(--r-sm);
      cursor: pointer;
      font-family: inherit;
      font-size: .84rem;
      font-weight: 500;
      transition: all .15s;
      width: 100%;
      text-align: left;
    }

    .sn-btn:hover {
      background: var(--bg);
      color: var(--text)
    }

    .sn-btn.active {
      background: var(--primary-l);
      color: var(--primary);
      font-weight: 600
    }

    .sn-btn .si {
      font-size: .92rem;
      width: 18px;
      text-align: center;
      flex-shrink: 0
    }

    .sn-btn .sl {
      flex: 1
    }

    .sn-badge {
      background: var(--red);
      color: #fff;
      font-size: .6rem;
      font-weight: 800;
      padding: 1px 6px;
      border-radius: 10px;
      min-width: 18px;
      text-align: center;
    }

    .sn-badge.blue {
      background: var(--primary)
    }

    .sb-foot {
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      font-size: .7rem;
      color: var(--text3)
    }

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

    .topbar {
      height: 54px;
      background: #fff;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 10px;
      flex-shrink: 0;
    }

    .tb-logo {
      width: 30px;
      height: 30px;
      background: var(--primary);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 800;
      font-size: .85rem;
      flex-shrink: 0;
    }

    .tb-title {
      font-size: .96rem;
      font-weight: 800;
      flex: 1;
      color: var(--text)
    }

    .tb-page {
      font-size: .88rem;
      font-weight: 700;
      color: var(--text);
      display: none
    }

    .tb-user-pill {
      display: none;
      align-items: center;
      gap: 6px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 4px 12px 4px 6px;
      cursor: pointer;
      transition: all .15s;
    }

    .tb-user-pill:hover {
      border-color: var(--border2)
    }

    .tb-user-pill .av {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--primary-l);
      color: var(--primary);
      font-weight: 700;
      font-size: .68rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tb-user-pill .nm {
      font-size: .76rem;
      font-weight: 600;
      color: var(--text2)
    }

    #tb-sync {
      background: none;
      border: 1px solid var(--border2);
      border-radius: var(--r-sm);
      color: var(--text2);
      padding: 5px 10px;
      font-size: .74rem;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
      white-space: nowrap;
    }

    #tb-sync:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-l)
    }

    .tb-logout {
      background: rgba(220, 38, 38, .08);
      border: 1px solid rgba(220, 38, 38, .25);
      border-radius: var(--r-sm);
      color: var(--red);
      padding: 5px 10px;
      font-size: .74rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tb-logout:hover {
      background: var(--red);
      color: #fff;
      border-color: var(--red);
    }

    #sync-ok {
      font-size: .72rem;
      color: var(--green);
      display: none;
      white-space: nowrap
    }

    .main-scroll {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch
    }

    .main-scroll::-webkit-scrollbar {
      width: 4px
    }

    .main-scroll::-webkit-scrollbar-thumb {
      background: var(--border2);
      border-radius: 4px
    }

    .page {
      display: none;
      padding: 20px 16px;
      animation: fi .15s ease
    }

    .page.active {
      display: block
    }

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

      to {
        opacity: 1;
        transform: none
      }
    }

    /* ── BOTTOM NAV (mobile) ──────────────────── */
    .bottom-nav {
      display: flex;
      background: #fff;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      padding-bottom: env(safe-area-inset-bottom);
    }

    .bn-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 4px;
      background: none;
      border: none;
      color: var(--text3);
      font-size: .6rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      gap: 3px;
      letter-spacing: .02em;
      position: relative;
      transition: color .15s;
    }

    .bn-btn .ic {
      font-size: 1.1rem;
      line-height: 1
    }

    .bn-btn.active {
      color: var(--primary)
    }

    .bn-btn.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 20%;
      right: 20%;
      height: 2px;
      background: var(--primary);
      border-radius: 0 0 2px 2px;
    }

    .bn-add-ic {
      width: 44px;
      height: 44px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      color: #fff;
      margin-bottom: -2px;
      box-shadow: 0 2px 10px rgba(29, 78, 216, .35);
      transition: transform .15s;
    }

    .bn-btn:hover .bn-add-ic {
      transform: scale(1.06)
    }

    .bn-badge {
      position: absolute;
      top: 5px;
      right: 50%;
      transform: translateX(55%);
      background: var(--red);
      color: #fff;
      font-size: .55rem;
      font-weight: 800;
      padding: 1px 5px;
      border-radius: 8px;
      min-width: 15px;
      text-align: center;
    }

    /* ── CARDS ────────────────────────────────── */
    .card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r);
      margin-bottom: 14px
    }

    .card-hd {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 13px 16px;
      border-bottom: 1px solid var(--border)
    }

    .card-hd h2 {
      font-size: .9rem;
      font-weight: 700;
      flex: 1;
      color: var(--text)
    }

    .card-ic {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .88rem;
      flex-shrink: 0
    }

    .card-body {
      padding: 16px
    }

    /* ── STATS ────────────────────────────────── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 14px
    }

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

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

    .stat-card .st-bar {
      height: 2px;
      border-radius: 1px;
      margin-top: 8px;
      background: var(--border);
    }

    .stat-card .st-fill {
      height: 100%;
      border-radius: 1px;
      transition: width .8s ease;
      background: var(--sc, var(--primary));
    }

    .st-ic {
      font-size: 1.5rem;
      display: block;
      margin-bottom: 5px;
    }

    .st-val,
    .pc-val,
    .bsp-val,
    .emi-val,
    .login-box h1 {
      letter-spacing: -.02em
    }

    .st-val {
      font-size: 1.7rem;
      font-weight: 800;
      display: block;
      line-height: 1;
      color: var(--text)
    }

    .st-lbl {
      font-size: .6rem;
      color: var(--text2);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-top: 3px;
      display: block
    }

    .stat-card.urgent .st-val {
      color: var(--sc, var(--primary))
    }

    /* ── TABS ─────────────────────────────────── */
    .page-tabs {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 4px;
      overflow-x: auto;
      overflow-y: hidden;
      margin-bottom: 12px;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x;
    }

    .page-tabs::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .ptab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      border: none;
      background: transparent;
      color: var(--text2);
      font-size: .8rem;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all .15s ease;
      white-space: nowrap;
      flex-shrink: 0;
      font-family: inherit;
    }

    .ptab:hover {
      background: var(--bg);
      color: var(--text);
    }

    .ptab.active {
      color: #fff;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .ptab.pt-all.active {
      background: var(--primary);
      box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
    }

    .ptab.pt-overdue.active {
      background: var(--red);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    }

    .ptab.pt-due.active {
      background: var(--orange);
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
    }

    .ptab.pt-renewal.active {
      background: var(--blue);
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    }

    .ptab.pt-pnpa.active {
      background: var(--purple);
      box-shadow: 0 4px 12px rgba(124, 58, 237, 0.35);
    }

    .ptab.pt-npa.active {
      background: var(--red);
      box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
    }

    .ptab .cnt {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 7px;
      border-radius: 10px;
      font-size: .66rem;
      font-weight: 800;
      background: var(--card2);
      color: var(--text2);
      min-width: 18px;
      line-height: 1;
      transition: all .15s ease;
    }

    .ptab.active .cnt {
      background: rgba(255, 255, 255, 0.25);
      color: #fff;
    }

    /* ── SEARCH & FILTER ROW ───────────────────── */
    .search-filter-row {
      display: flex;
      align-items: stretch;
      gap: 8px;
      margin-bottom: 10px;
    }

    .search-filter-row .search-wrap {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
    }

    .search-filter-row .filter-btn {
      white-space: nowrap;
      flex-shrink: 0;
      min-height: 38px;
      box-sizing: border-box;
    }

    .active-filters-bar {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }

    .search-wrap {
      position: relative;
      margin-bottom: 10px
    }

    .search-wrap .si {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text3);
      font-size: .85rem;
      pointer-events: none
    }

    .search-in {
      width: 100%;
      padding: 8px 10px 8px 32px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text);
      font-size: .84rem;
      font-family: inherit;
      transition: border-color .15s;
    }

    .search-in:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(29, 78, 216, .08)
    }

    .search-in::placeholder {
      color: var(--text3)
    }

    .rc {
      font-size: .72rem;
      color: var(--text3);
      margin-bottom: 8px
    }

    /* ── TABLE ────────────────────────────────── */
    .tbl-wrap {
      overflow-x: auto;
      border: 1px solid var(--border);
      border-radius: var(--r-sm)
    }

    .lt {
      width: 100%;
      border-collapse: collapse;
      font-size: .81rem
    }

    .lt thead th {
      padding: 9px 11px;
      background: var(--bg);
      color: var(--text2);
      font-size: .63rem;
      font-weight: 700;
      letter-spacing: .07em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--border);
      text-align: left;
      white-space: nowrap;
    }

    .lt tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .1s
    }

    .lt tbody tr:last-child {
      border-bottom: none
    }

    .lt tbody tr:hover {
      background: var(--bg)
    }

    .lt tbody tr.cr td {
      opacity: .4
    }

    .lt tbody td {
      padding: 9px 11px;
      vertical-align: middle
    }

    .nm-c .nm {
      font-weight: 600;
      font-size: .83rem;
      line-height: 1.2
    }

    .nm-c .cd {
      font-size: .65rem;
      color: var(--primary);
      font-weight: 700;
      letter-spacing: .03em;
      margin-top: 1px
    }

    .ln {
      font-weight: 700;
      font-size: .81rem
    }

    .ln-s {
      font-size: .68rem;
      color: var(--text2);
      margin-top: 1px
    }

    .nd-dt {
      font-size: .78rem;
      font-weight: 600;
      display: block
    }

    .nd-ov {
      display: inline-block;
      margin-top: 2px;
      padding: 1px 5px;
      background: var(--red-l);
      color: var(--red);
      border: 1px solid #fca5a5;
      border-radius: 3px;
      font-size: .62rem;
      font-weight: 700
    }

    .nd-td {
      display: inline-block;
      margin-top: 2px;
      padding: 1px 5px;
      background: var(--orange-l);
      color: var(--orange);
      border: 1px solid #fcd34d;
      border-radius: 3px;
      font-size: .62rem;
      font-weight: 700
    }

    .nd-sn {
      color: var(--orange)
    }

    .ac {
      display: flex;
      gap: 4px;
      align-items: center
    }

    .btn-call {
      background: var(--green);
      color: #fff;
      padding: 5px 9px;
      font-size: .7rem;
      border-radius: var(--r-sm);
      border: none;
      cursor: pointer;
      font-weight: 700;
      font-family: inherit;
      transition: opacity .15s;
      white-space: nowrap;
    }

    .btn-call:hover {
      opacity: .85
    }

    .btn-upd {
      background: #fff;
      color: var(--text);
      border: 1px solid var(--border2);
      padding: 5px 9px;
      font-size: .7rem;
      border-radius: var(--r-sm);
      cursor: pointer;
      font-weight: 600;
      font-family: inherit;
      transition: all .15s;
    }

    .btn-upd:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--primary-l)
    }

    /* ── BADGES ───────────────────────────────── */
    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: .64rem;
      font-weight: 700;
      white-space: nowrap
    }

    .b-active {
      background: var(--green-l);
      color: #065f46;
      border: 1px solid #6ee7b7
    }

    .b-nine {
      background: var(--blue-l);
      color: #1e40af;
      border: 1px solid #93c5fd
    }

    .b-pnpa {
      background: var(--purple-l);
      color: #5b21b6;
      border: 1px solid #c4b5fd
    }

    .b-npa {
      background: var(--red-l);
      color: #991b1b;
      border: 1px solid #fca5a5
    }

    .b-closed {
      background: var(--card2);
      color: var(--text3);
      border: 1px solid var(--border2)
    }

    .b-due {
      background: var(--orange-l);
      color: #92400e;
      border: 1px solid #fcd34d
    }

    .b-ovd {
      background: #fff1f2;
      color: #be123c;
      border: 1px solid #fecdd3
    }

    /* ── MOBILE LOAN CARDS ────────────────────── */
    @media(max-width:767px) {
      .tbl-wrap {
        display: none
      }

      .loan-cards {
        display: flex;
        flex-direction: column;
        gap: 8px
      }
    }

    @media(min-width:768px) {
      .loan-cards {
        display: none
      }
    }

    .lc {
      background: var(--card, #ffffff);
      border: 1px solid var(--border, #e2e8f0);
      border-radius: 12px;
      padding: 10px 12px;
      overflow: hidden;
      box-shadow: 0 3px 12px rgba(15, 23, 42, 0.06);
      transition: transform .18s ease, box-shadow .18s ease;
      margin-bottom: 10px;
    }

    .lc:hover {
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    }

    .lc.cr {
      opacity: .5;
    }

    .lc-hd {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border, #e5e7eb);
      margin-bottom: 6px;
    }

    .lc-av {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: linear-gradient(135deg, #dbeafe, #eff6ff);
      border: 1px solid #bfdbfe;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .82rem;
      font-weight: 700;
      color: #1d4ed8;
      flex-shrink: 0;
    }

    .lc-info {
      flex: 1;
      min-width: 0;
    }

    .lc-nm {
      font-weight: 700;
      font-size: .88rem;
      color: var(--text);
      letter-spacing: -.015em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .lc-sub-row {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 2px;
    }

    .lc-cd {
      font-size: .62rem;
      background: var(--primary-l, #eff6ff);
      color: var(--primary, #2563eb);
      padding: 1px 6px;
      border-radius: 6px;
      font-weight: 700;
      display: inline-block;
    }

    .lc-followed-tag {
      font-size: .58rem;
      background: #d1fae5;
      color: #047857;
      padding: 1px 6px;
      border-radius: 6px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      border: 1px solid #a7f3d0;
      white-space: nowrap;
      flex-shrink: 0;
    }

    /* BODY & GRID SPACING RESTORED TO COMFORTABLE VALUES */
    .lc-bd {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 6px;
    }

    .lc-bd-box {
      background: var(--surface2, #f8fafc);
      border-radius: 10px;
      padding: 10px 12px;
      border: 1px solid var(--border, #e2e8f0);
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .lc-row-3col {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border, #e2e8f0);
    }

    .lc-row-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border, #e2e8f0);
    }

    .lc-col-box {
      background: var(--surface2, #f8fafc);
      border-radius: 8px;
      padding: 6px 8px;
      border: 1px solid var(--border, #e2e8f0);
    }

    .lc-col {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .lc-col-border {
      border-left: 1px solid var(--border, #e5e7eb);
      padding-left: 8px;
    }

    .lc-lbl {
      font-size: .6rem;
      font-weight: 700;
      color: var(--text3);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 2px;
      line-height: 1;
      display: block;
    }

    .lc-val-loanno {
      font-size: .84rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      word-break: break-word;
    }

    .lc-val-duedate {
      font-size: .84rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }

    .lc-val-duedate.text-red {
      color: #dc2626;
    }

    .lc-val-duedate.text-orange {
      color: #d97706;
    }

    .lc-val-norm {
      font-size: .84rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
    }

    .lc-due-badge {
      display: inline-block;
      padding: 1px 5px;
      border-radius: 8px;
      font-size: .62rem;
      font-weight: 700;
      line-height: 1.3;
    }

    .lc-due-late {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #fca5a5;
    }

    .lc-due-today {
      background: #fef3c7;
      color: #d97706;
      border: 1px solid #fcd34d;
    }

    .lc-due-soon {
      background: #dbeafe;
      color: #2563eb;
      border: 1px solid #93c5fd;
    }

    .lc-lp-ago {
      font-size: .62rem;
      font-weight: 500;
      color: var(--text2);
    }

    .lc-val-amount {
      font-size: .94rem;
      font-weight: 800;
      color: #2563eb;
      line-height: 1.2;
    }

    .lc-val-interest {
      font-size: .94rem;
      font-weight: 800;
      color: #dc2626;
      line-height: 1.2;
    }

    .lc-age-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      margin-bottom: 0;
      background: transparent;
      border-radius: 0;
      border: none;
    }

    .lc-age-lbl {
      font-size: .62rem;
      color: var(--text2);
      font-weight: 500;
    }

    .lc-age-lbl strong {
      color: var(--text);
      font-weight: 700;
    }

    .risk-meter {
      height: 6px;
      border-radius: 3px;
      background: var(--border, #e5e7eb);
      overflow: hidden;
    }

    .risk-bar {
      height: 100%;
      border-radius: 3px;
      transition: width .6s ease;
    }

    .lc-age-status {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-align: right;
    }

    .lc-ac {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 0;
    }

    .lc-ac button,
    .lc-ac .btn-call,
    .lc-ac .btn-upd {
      height: 42px;
      min-height: 42px;
      border-radius: 10px;
      font-size: .8rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 0 4px;
      width: 100%;
      margin: 0;
      box-sizing: border-box;
      transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    }

    .lc-ac button:active,
    .lc-ac .btn-call:active,
    .lc-ac .btn-upd:active {
      transform: scale(0.96);
    }

    .lc-ac .btn-call-fill {
      background: linear-gradient(135deg, #10b981, #059669);
      color: #ffffff;
      border: none;
      font-weight: 700;
      box-shadow: 0 3px 10px rgba(16, 185, 129, .3);
    }

    .lc-ac .btn-call-fill:hover {
      background: linear-gradient(135deg, #059669, #047857);
    }

    .lc-ac .btn-upd {
      background: #ffffff;
      color: #334155;
      border: 1.5px solid #e2e8f0;
    }

    .lc-ac .btn-upd:hover {
      border-color: #2563eb;
      color: #2563eb;
      background: #eff6ff;
    }

    .lc-ac .btn-followed {
      background: #ecfdf5 !important;
      color: #059669 !important;
      border: 1.5px solid #a7f3d0 !important;
    }

    .lc-ac .btn-upd-primary {
      background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
      color: #ffffff !important;
      border: none !important;
      font-weight: 700 !important;
      box-shadow: 0 3px 12px rgba(37, 99, 235, .35) !important;
    }

    .lc-ac .btn-upd-primary:hover {
      background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    }

    [data-theme="dark"] .lc {
      background: var(--card);
      border-color: var(--border);
    }

    [data-theme="dark"] .lc-hd,
    [data-theme="dark"] .lc-row-3col,
    [data-theme="dark"] .lc-age-row {
      border-color: var(--border);
    }

    [data-theme="dark"] .lc-col-border {
      border-left-color: var(--border);
    }

    [data-theme="dark"] .lc-nm,
    [data-theme="dark"] .lc-val-loanno,
    [data-theme="dark"] .lc-val-duedate,
    [data-theme="dark"] .lc-val-norm,
    [data-theme="dark"] .lc-age-lbl strong {
      color: var(--text);
    }

    [data-theme="dark"] .lc-lbl,
    [data-theme="dark"] .lc-lp-ago,
    [data-theme="dark"] .lc-age-lbl {
      color: var(--text2);
    }

    [data-theme="dark"] .lc-ac .btn-upd {
      background: var(--card);
      color: var(--text);
      border-color: var(--border2);
    }

    [data-theme="dark"] .risk-meter {
      background: var(--border);
    }

    /* ── MODAL ────────────────────────────────── */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .5);
      display: none;
      z-index: 200;
      backdrop-filter: blur(4px);
      align-items: flex-end;
      justify-content: center
    }

    .modal.open {
      display: flex
    }

    .modal-box {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 18px 18px 0 0;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      padding-bottom: env(safe-area-inset-bottom);
      animation: su .22s ease;
      box-shadow: 0 -4px 30px rgba(0, 0, 0, .12);
    }

    @keyframes su {
      from {
        transform: translateY(100%)
      }

      to {
        transform: translateY(0)
      }
    }

    .m-drag {
      width: 32px;
      height: 3px;
      background: var(--border2);
      border-radius: 2px;
      margin: 10px auto 0
    }

    .m-hd {
      padding: 13px 18px 10px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .m-title {
      font-size: .96rem;
      font-weight: 700;
      flex: 1;
      color: var(--text)
    }

    .m-close {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 32px;
      height: 32px;
      color: var(--text2);
      font-size: .95rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all .15s;
      flex-shrink: 0;
    }

    .m-close:hover {
      background: var(--red-l);
      color: var(--red)
    }

    .m-body {
      padding: 0 18px 12px
    }

    .m-foot {
      padding: 11px 18px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
      justify-content: flex-end
    }

    /* ── FORMS ────────────────────────────────── */
    .fg {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-bottom: 12px
    }

    .fg label {
      font-size: .73rem;
      font-weight: 600;
      color: var(--text2)
    }

    .fg label .req::after {
      content: ' *';
      color: var(--red)
    }

    .fc {
      padding: 9px 12px;
      background: #fff;
      border: 1.5px solid var(--border);
      border-radius: var(--r-sm);
      color: var(--text);
      font-size: .86rem;
      font-family: inherit;
      transition: border-color .15s, box-shadow .15s;
      width: 100%;
    }

    .fc:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(29, 78, 216, .08)
    }

    .fc::placeholder {
      color: var(--text3)
    }

    select.fc option {
      background: #fff
    }

    textarea.fc {
      resize: none;
      min-height: 64px
    }

    .fhint {
      font-size: .67rem;
      color: var(--text3);
      margin-top: 2px
    }

    .paid-breakdown {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
      padding: 8px 10px;
      background: var(--green-l);
      border: 1px solid var(--green);
      border-radius: var(--r-sm);
      font-size: .73rem;
      color: var(--green);
      animation: fi .15s ease;
    }

    .paid-breakdown .pb-ic {
      font-size: .9rem;
      line-height: 1;
      flex-shrink: 0
    }

    .paid-breakdown .pb-txt {
      flex: 1;
      line-height: 1.35
    }

    .paid-breakdown .pb-txt b {
      font-weight: 700
    }

    .fg2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px
    }

    .f-sect {
      font-size: .63rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--text3);
      margin-bottom: 10px;
      margin-top: 18px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--border);
    }

    .f-sect:first-child {
      margin-top: 0
    }

    /* ── BUTTONS ──────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 9px 18px;
      border: none;
      border-radius: var(--r-sm);
      font-size: .84rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all .15s;
      white-space: nowrap
    }

    .btn-p {
      background: var(--primary);
      color: #fff
    }

    .btn-p:hover {
      background: var(--primary-d)
    }

    .btn-s {
      background: #fff;
      color: var(--text);
      border: 1.5px solid var(--border2)
    }

    .btn-s:hover {
      background: var(--bg)
    }

    .btn-g {
      background: transparent;
      color: var(--text2);
      padding: 8px 12px
    }

    .btn-g:hover {
      color: var(--text);
      background: var(--bg)
    }

    .btn-fw {
      width: 100%
    }

    .btn-danger {
      background: var(--red-l);
      color: var(--red);
      border: 1px solid #fca5a5
    }

    .btn-danger:hover {
      background: var(--red);
      color: #fff
    }

    /* ── ACTION TABS ──────────────────────────── */
    .a-tabs {
      display: flex;
      gap: 2px;
      background: var(--bg);
      border-radius: var(--r-sm);
      padding: 3px;
      margin-bottom: 13px;
      border: 1px solid var(--border)
    }

    .a-tab {
      flex: 1;
      padding: 7px 5px;
      border: none;
      background: transparent;
      color: var(--text2);
      font-size: .76rem;
      font-weight: 600;
      border-radius: 4px;
      cursor: pointer;
      font-family: inherit;
      text-align: center;
      transition: all .15s
    }

    .a-tab:hover {
      color: var(--text);
      background: #fff
    }

    .a-tab.active {
      color: #fff;
      font-weight: 700
    }

    .a-tab.paid.active {
      background: var(--green)
    }

    .a-tab.renewed.active {
      background: var(--primary)
    }

    .a-tab.closed.active {
      background: #6b7280
    }

    .a-tab.ht {
      display: none !important
    }

    .a-panel {
      display: none
    }

    .a-panel.active {
      display: block
    }

    /* ── SUM BAR ──────────────────────────────── */
    .sum-bar {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 10px 13px;
      margin-bottom: 13px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
      font-size: .77rem
    }

    .sum-bar .sl {
      font-size: .6rem;
      color: var(--text3);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .05em;
      margin-bottom: 1px
    }

    /* ── RENEWAL ──────────────────────────────── */
    .ren-block {
      background: #f0fdfa;
      border: 1px solid #99f6e4;
      border-radius: var(--r-sm);
      padding: 13px
    }

    .ren-block .rbt {
      font-size: .66rem;
      font-weight: 700;
      color: #0d9488;
      letter-spacing: .07em;
      text-transform: uppercase;
      margin-bottom: 10px;
      display: block
    }

    .ren-block label {
      color: #0d9488 !important
    }

    .ren-block .fc {
      border-color: #99f6e4;
      background: #fff
    }

    .ren-block .fc:focus {
      border-color: #0d9488;
      box-shadow: 0 0 0 3px rgba(13, 148, 136, .1)
    }

    .rp-box {
      background: #f0fdfa;
      border: 1px solid #99f6e4;
      border-radius: var(--r-sm);
      padding: 11px 13px;
      margin-top: 10px;
      font-size: .78rem
    }

    .rp-box h4 {
      font-size: .68rem;
      font-weight: 700;
      color: #0d9488;
      margin-bottom: 7px
    }

    .rp-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px
    }

    .rp-row .lb {
      color: var(--text2)
    }

    .rp-row .vl {
      font-weight: 700
    }

    .rp-sep {
      border: none;
      border-top: 1px solid #99f6e4;
      margin: 6px 0
    }

    .cl-warn {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--r-sm);
      padding: 16px;
      text-align: center;
      color: var(--text2);
      font-size: .81rem;
      line-height: 1.6
    }

    .cl-warn strong {
      color: var(--text)
    }

    /* ── SETTINGS TABS ────────────────────────── */
    .stab-bar {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
      overflow-x: auto;
      scrollbar-width: none
    }

    .stab-bar::-webkit-scrollbar {
      display: none
    }

    .stab {
      padding: 10px 14px;
      border: none;
      background: transparent;
      color: var(--text2);
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      border-bottom: 2px solid transparent;
      transition: all .15s;
      white-space: nowrap
    }

    .stab:hover {
      color: var(--text)
    }

    .stab.active {
      color: var(--primary);
      border-bottom-color: var(--primary)
    }

    .s-panel {
      display: none
    }

    .s-panel.active {
      display: block
    }

    /* ── USER TABLE ───────────────────────────── */
    .user-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border)
    }

    .card > .user-row {
      padding: 12px 14px;
      border-bottom: 1px solid #f1f5f9;
    }

    .user-row:last-child {
      border-bottom: none
    }

    .u-av {
      width: 34px;
      height: 34px;
      border-radius: 9px;
      background: linear-gradient(135deg, #dbeafe, #eff6ff);
      border: 1px solid #bfdbfe;
      color: #1d4ed8;
      font-weight: 700;
      font-size: .78rem;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .user-row .btn-call,
    .user-row .btn-upd {
      width: 34px;
      height: 34px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      flex-shrink: 0;
    }

    .u-name {
      font-weight: 600;
      font-size: .83rem
    }

    .u-email {
      font-size: .7rem;
      color: var(--text3)
    }

    .u-role {
      font-size: .66rem;
      padding: 2px 7px;
      border-radius: 12px;
      font-weight: 700;
      margin-left: auto;
      white-space: nowrap
    }

    .u-role.admin {
      background: var(--primary-l);
      color: var(--primary)
    }

    .u-role.user {
      background: var(--bg);
      color: var(--text3);
      border: 1px solid var(--border2)
    }

    .u-actions {
      display: flex;
      gap: 5px;
      margin-left: 8px
    }

    .u-btn {
      background: none;
      border: 1px solid var(--border2);
      border-radius: 4px;
      padding: 3px 8px;
      font-size: .72rem;
      cursor: pointer;
      color: var(--text2);
      font-family: inherit;
      transition: all .15s
    }

    .u-btn:hover {
      border-color: var(--primary);
      color: var(--primary)
    }

    .u-btn.del:hover {
      border-color: var(--red);
      color: var(--red);
      background: var(--red-l)
    }

    /* ── LOADING + TOAST ──────────────────────── */
    .spinner {
      width: 26px;
      height: 26px;
      border: 2.5px solid var(--border);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: sp .7s linear infinite;
      margin: 28px auto
    }

    @keyframes sp {
      to {
        transform: rotate(360deg)
      }
    }

    .loading-ov {
      position: fixed;
      inset: 0;
      background: rgba(248, 250, 252, .85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 300;
      flex-direction: column;
      gap: 10px
    }

    .loading-ov.show {
      display: flex
    }

    .loading-ov p {
      color: var(--text2);
      font-size: .83rem
    }

    #toast-a {
      position: fixed;
      bottom: 68px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      gap: 6px;
      z-index: 400;
      pointer-events: none;
      width: 88%;
      max-width: 350px
    }

    .toast {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--r);
      padding: 11px 14px;
      font-size: .81rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: var(--shadow-md);
      opacity: 0;
      transform: translateY(8px);
      transition: all .22s;
      pointer-events: auto
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0)
    }

    .toast.success {
      border-color: #6ee7b7
    }

    .toast.success .ti {
      color: var(--green)
    }

    .toast.warning {
      border-color: #fcd34d
    }

    .toast.warning .ti {
      color: var(--orange)
    }

    .toast.error {
      border-color: #fca5a5
    }

    .toast.error .ti {
      color: var(--red)
    }

    .toast.info .ti {
      color: var(--primary)
    }

    .divider {
      border: none;
      border-top: 1px solid var(--border);
      margin: 12px 0
    }

    /* ── DESKTOP ≥768px ───────────────────────── */
    @media(min-width:768px) {
      .sidebar {
        display: flex
      }

      .bottom-nav {
        display: none
      }

      .tb-logo {
        display: none
      }

      .tb-title {
        display: none
      }

      .tb-page {
        display: block
      }

      .tb-user-pill {
        display: flex
      }

      #toast-a {
        bottom: 20px
      }

      .topbar {
        padding: 0 26px
      }

      .page {
        padding: 26px 30px
      }

      .stats-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 12px
      }

      .st-val {
        font-size: 2rem
      }

      .modal {
        align-items: center;
        padding: 20px
      }

      .modal-box {
        border-radius: 14px;
        max-width: 500px;
        animation: ci .2s ease
      }

      @keyframes ci {
        from {
          opacity: 0;
          transform: scale(.96) translateY(6px)
        }

        to {
          opacity: 1;
          transform: none
        }
      }

      .m-drag {
        display: none
      }
    }

    @media(min-width:1100px) {
      .page {
        padding: 30px 40px
      }
    }
/* ══════════════════════════════════════════
   MOBILE OPTIMIZATIONS
══════════════════════════════════════════ */

/* Very small phones (<=479px): 2-column stats grid */
@media(max-width:479px){
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .st-val{font-size:1.4rem}
  .st-lbl{font-size:.65rem}
  .page{padding:12px}
  .portfolio-card{padding:14px}
  .pc-val{font-size:1.6rem}
}

/* All mobile (<=767px) improvements */
@media(max-width:767px){
  /* Touch targets & Sticky Loan Page Tabs */
  .page-tabs{position:sticky;top:0;z-index:30;background:rgba(255,255,255,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:6px;gap:6px;margin-bottom:12px;border-radius:var(--r);box-shadow:0 2px 10px rgba(0,0,0,0.06)}
  [data-theme="dark"] .page-tabs{background:rgba(22,27,34,0.92)}
  .ptab{padding:9px 14px;min-height:42px;font-size:.8rem;flex-shrink:0;white-space:nowrap}
  .ptab .cnt{font-size:.68rem;padding:2px 7px}
  .sort-chip{padding:7px 13px;min-height:36px;font-size:.73rem}
  .m-close{width:40px;height:40px}
  .filter-btn{padding:8px 13px;font-size:.8rem;min-height:38px}
  .bn-btn{min-height:52px;padding:10px 4px}
  .bn-btn .ic{font-size:1.2rem}
  .lc-ac .btn-call,.lc-ac .btn-upd{min-height:44px;padding:11px 12px;font-size:.8rem}
  /* Form inputs - bigger tap area + readable text */
  .fc{padding:11px 13px;font-size:.9rem}
  .search-in{padding:10px 10px 10px 34px;font-size:.88rem;min-height:42px}
  /* Readable font sizes - minimum ~9px */
  .badge{font-size:.68rem}
  .lc-f label{font-size:.63rem}
  .lc-nm{font-size:.88rem}
  .st-lbl{font-size:.65rem}
  .bsp-lbl{font-size:.67rem}
  .rc{font-size:.74rem}
  /* Scroll behavior - prevent background scroll when modal/drawer open */
  .main-scroll{overscroll-behavior-y:contain}
  .modal-box,.dd-box{overscroll-behavior:contain}
  /* Toast above bottom nav */
  #toast-a{bottom:72px}
  /* Active bottom nav indicator - thicker, wider */
  .bn-btn.active::before{height:3px;left:12%;right:12%}
  /* Loan card buttons spacing */
  .lc-ac{gap:8px}
  /* Sort bar more spacing */
  .sort-bar{margin-bottom:10px;gap:6px}
  /* Stats card tap area */
  .stat-card{padding:14px}
}

@media(max-width:360px){
  .filter-grid{grid-template-columns:1fr}
  .ptab{padding:8px 12px;font-size:.78rem;flex-shrink:0}
  .lc-bd{grid-template-columns:1fr 1fr;gap:6px 8px}
}

/* Landscape mobile */
@media(max-height:500px) and (max-width:767px){
  .topbar{height:46px}
  .bn-btn{min-height:44px}
  .page{padding:10px 14px}
}
/* ═══════════════════════════════════════════════════════════════
   SCREENSHOT-MATCHED DESIGN — Loan Card + Mobile UI Overhaul
═══════════════════════════════════════════════════════════════ */

/* ── LOAN CARD HEADER ──────────────────────────────────────── */
.lc { border-radius:14px;overflow:hidden;margin-bottom:12px;background:var(--card);border:1px solid var(--border) }
.lc-av { width:40px;height:40px;border-radius:10px;background:var(--primary-l);color:var(--primary);font-weight:800;font-size:.82rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px }
.lc-hd { display:flex;align-items:center;padding:12px 14px 10px }
.lc-nm { font-size:.84rem;font-weight:800;letter-spacing:.01em;line-height:1.2 }
.lc-cd { font-size:.72rem;color:var(--text3);margin-top:1px }

/* ── 4-COLUMN GRID (screenshot-matched) ───────────────────── */
.lc-bd4 { display:grid !important;grid-template-columns:1fr 1fr 1fr 1fr !important;padding:10px 14px 8px !important;border-bottom:1px solid var(--border);gap:0 !important }
.lc-bd4 .lc-f { padding:0 6px 0 0;min-width:0 }
.lc-bd4 .lc-f label { font-size:.54rem;font-weight:700;letter-spacing:.05em;color:var(--text3);text-transform:uppercase;display:block;margin-bottom:3px }
.lc-bd4 .lc-f .v { font-size:.78rem;font-weight:600;color:var(--text);word-break:break-word;line-height:1.3 }

/* Amount — big bold */
.lc-amount { font-size:.98rem !important;font-weight:800 !important;color:var(--text) !important;letter-spacing:-.02em }

/* Next due — red date */
.lc-due-val { font-size:.78rem !important;font-weight:700 !important;color:var(--red) !important;line-height:1.4 }

/* Interest due — big red */
.lc-int-due { font-size:.88rem !important;font-weight:800 !important;color:var(--red) !important;line-height:1.2 }

/* Loan no */
.lc-loanno { font-size:.8rem !important;font-weight:700 !important;color:var(--text) !important }

/* ── DATE BADGES ───────────────────────────────────────────── */
.lc-due-badge { display:inline-block;font-size:.62rem;font-weight:700;padding:1px 7px;border-radius:10px;margin-top:2px;white-space:nowrap }
.lc-due-late { background:#fee2e2;color:#dc2626 }
.lc-due-today { background:#fef3c7;color:#d97706 }
.lc-due-soon { background:#d1fae5;color:#059669 }
[data-theme="dark"] .lc-due-late { background:rgba(220,38,38,.18) }
[data-theme="dark"] .lc-due-today { background:rgba(217,119,6,.18) }
[data-theme="dark"] .lc-due-soon { background:rgba(5,150,105,.18) }

/* ── LOAN AGE ROW ──────────────────────────────────────────── */
.lc-age-row { display:flex;align-items:center;padding:6px 14px;gap:4px;border-bottom:1px solid var(--border) }
.lc-age-lbl { font-size:.62rem;color:var(--text3);font-weight:500;white-space:nowrap;flex-shrink:0 }
.lc-age-lbl strong { color:var(--text2);font-weight:700 }
.lc-age-status { font-size:.62rem;font-weight:800;letter-spacing:.04em;white-space:nowrap;flex-shrink:0 }

/* ── ACTION BUTTONS ────────────────────────────────────────── */
.lc-ac { display:flex;gap:7px;padding:9px 14px 13px }
.btn-call-fill { background:linear-gradient(135deg,#059669,#047857) !important;color:#fff !important;border:none !important;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px }
.btn-call-fill:hover { background:linear-gradient(135deg,#047857,#065f46) !important }
.btn-call-off { background:#fee2e2 !important;color:#dc2626 !important;border:1px solid #fca5a5 !important;font-weight:700;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0.85;cursor:not-allowed !important;pointer-events:none }
[data-theme="dark"] .btn-call-off { background:rgba(220,38,38,0.15) !important;color:#ef4444 !important;border:1px solid rgba(220,38,38,0.3) !important }
.btn-upd-txt { display:flex;align-items:center;justify-content:center;gap:5px;font-size:.78rem;font-weight:600;color:var(--text2) !important }

/* ── MOBILE (<= 767px) ─────────────────────────────────────── */
@media(max-width:767px){
  /* Topbar — white, logo square + title + sync */
  .topbar { height:56px;padding:0 14px;gap:10px }
  .tb-logo { width:36px;height:36px;border-radius:9px;background:var(--primary);color:#fff;font-weight:800;font-size:.92rem;display:flex;align-items:center;justify-content:center;flex-shrink:0 }
  .tb-title { font-size:.92rem;font-weight:800;flex:1 }
  #tb-sync { padding:6px 12px;border:1.5px solid var(--border2);border-radius:20px;font-size:.74rem;font-weight:600;display:flex;align-items:center;gap:5px;white-space:nowrap }
  .tb-logout { padding:6px 10px;border-radius:20px;font-size:.74rem;min-height:34px;gap:4px }
  .tb-logout-txt { display:inline }

  /* Page tabs */
  .page-tabs { position:sticky;top:0;z-index:30;background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 10px;gap:6px;margin-bottom:12px;border-bottom:1px solid var(--border) }
  [data-theme="dark"] .page-tabs { background:rgba(22,27,34,0.96) }
  .ptab { padding:8px 14px;min-height:40px;font-size:.78rem;flex-shrink:0;white-space:nowrap;border-radius:20px }
  .ptab .cnt { font-size:.68rem;padding:2px 7px }

  /* Sort bar */
  .sort-bar { margin-bottom:10px;gap:6px;align-items:center }
  .sort-chip { padding:6px 12px;min-height:34px;font-size:.72rem;border-radius:20px }

  /* Filter & Search single row */
  .search-filter-row { gap:8px;margin-bottom:10px }
  .search-filter-row .filter-btn { min-height:44px;padding:0 14px;border-radius:12px }
  .filter-grid { grid-template-columns: 1fr; gap: 12px }

  .filter-btn { padding:8px 13px;font-size:.8rem;min-height:38px }

  /* Search */
  .search-in { padding:10px 10px 10px 36px;font-size:.88rem;min-height:44px;border-radius:12px }

  /* Bottom nav — taller, bigger Add circle */
  .bn-btn { min-height:54px;padding:10px 4px }
  .bn-btn .ic { font-size:1.15rem }
  .bn-add-ic { width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#1d4ed8);display:flex;align-items:center;justify-content:center;font-size:1.6rem;color:#fff;margin-bottom:-4px;box-shadow:0 4px 16px rgba(29,78,216,.4);border:3px solid var(--bg) }
  #bn-add { margin-top:-12px }

  /* Loan card action buttons */
  .lc-ac .btn-call,.lc-ac .btn-upd { min-height:42px;font-size:.78rem }
  .lc-ac { gap:7px }

  /* Font sizes */
  .lc-nm { font-size:.84rem }
  .badge { font-size:.68rem }
  .stat-card { padding:14px }
  .m-close { width:40px;height:40px }
  .fc { padding:11px 13px;font-size:.9rem }

  /* Toast above bottom nav */
  #toast-a { bottom:72px }
  .bn-btn.active::before { height:3px;left:12%;right:12% }
  .main-scroll { overscroll-behavior-y:contain }
  .modal-box,.dd-box { overscroll-behavior:contain }
  .sort-bar { margin-bottom:10px }

  /* 4-column grid on medium phones — keeps all 4 cols */
  .lc-bd4 { grid-template-columns:1fr 1fr 1fr 1fr !important }
}

/* Very small phones */
@media(max-width:479px){
  .lc-bd4 { grid-template-columns:1fr 1fr !important }
  .lc-amount { font-size:.88rem !important }
  .lc-int-due { font-size:.78rem !important }
}

@media(max-width:360px){
  .ptab { padding:7px 10px;font-size:.74rem }
  .lc-bd4 { grid-template-columns:1fr 1fr !important }
}

@media(max-height:500px) and (max-width:767px){
  .topbar { height:46px }
  .bn-btn { min-height:44px }
  .page { padding:10px 14px }
}

/* ── UX OVERHAUL ENHANCEMENTS ───────────────────────────────────── */
.num-tab { font-variant-numeric: tabular-nums; }

/* Quick Sort Selector */
.sort-select {
  height: 38px;
  padding: 0 10px;
  font-size: .78rem;
  font-weight: 600;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sort-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

/* Search Term Highlighting */
mark.sh-hl {
  background: #fef08a;
  color: #854d0e;
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}
[data-theme="dark"] mark.sh-hl {
  background: #854d0e;
  color: #fef08a;
}

/* Payment Preset Amount Chips */
.preset-btn-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  margin-bottom: 12px;
}
.preset-chip {
  background: var(--surface2, #f1f5f9);
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: .73rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.preset-chip:hover, .preset-chip:active {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* Quick Action Top Strip (Update Modal) */
/* Big Round Minimal Pay Button next to Interest Due */
.btn-pay-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
}

.btn-pay-icon .icon {
  width: 14px;
  height: 14px;
}

.btn-pay-icon:hover {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35);
}

.btn-pay-icon:active {
  transform: scale(0.92);
}

/* Calculation Breakdown Card (Payment Update Modal) */
.calc-breakdown-box {
  background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(16,185,129,0.06));
  border: 1.5px solid rgba(37,99,235,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0 14px;
}
.calc-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .78rem;
  padding: 3px 0;
  color: var(--text2);
}
.calc-line.calc-total {
  border-top: 1px dashed var(--border);
  margin-top: 6px;
  padding-top: 8px;
  font-size: .88rem;
  font-weight: 800;
  color: var(--text);
}

/* Live Scheme Preview Card (Add Loan Form) */
.scheme-preview-card {
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(245,158,11,0.08));
  border: 1.5px solid rgba(37,99,235,0.25);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: none;
}
.scheme-preview-card.show {
  display: block;
  animation: fadeIn .2s ease;
}
.sp-title {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--primary);
  margin-bottom: 6px;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sp-item {
  display: flex;
  flex-direction: column;
}
.sp-lbl { font-size: .62rem; color: var(--text3); font-weight: 600; }
.sp-val { font-size: .82rem; color: var(--text); font-weight: 700; }

/* Skeleton Loading Shimmer */
.sk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
  position: relative;
  overflow: hidden;
}
.sk-line {
  height: 12px;
  border-radius: 6px;
  background: var(--border);
  margin-bottom: 8px;
  animation: sk-shimmer 1.4s infinite ease-in-out;
}
@keyframes sk-shimmer {
  0% { opacity: .4; }
  50% { opacity: .9; }
  100% { opacity: .4; }
}

/* Quick Pay Modal Mobile Keyboard Fix */
#quick-pay-modal {
  align-items: center;
  padding: 16px;
}
#quick-pay-modal .modal-box {
  border-radius: 16px;
  margin: auto;
  max-height: 85vh;
}