:root {
	      --bg: #f5f7f8;
	      --surface: #ffffff;
	      --surface-2: #eef4f3;
      --ink: #17201f;
      --muted: #697371;
      --line: #dce4e2;
      --line-strong: #c7d1cf;
      --primary: #0f766e;
      --primary-dark: #0b5f59;
      --primary-soft: #dff4f1;
      --accent: #4f46e5;
      --accent-soft: #e8e7ff;
      --warn: #b45309;
      --warn-soft: #fff2cf;
      --danger: #b91c1c;
      --danger-soft: #fde2e2;
      --ok: #15803d;
	      --ok-soft: #dcfce7;
	      --shadow: 0 18px 42px rgba(23, 32, 31, 0.12);
	      --radius: 8px;
	      color-scheme: light;
	      font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
	      letter-spacing: 0;
	    }

    * {
      box-sizing: border-box;
    }

	    html {
	      background: var(--bg);
	      overflow-x: clip;
	      overscroll-behavior-x: none;
	      height: 100%;
	    }

	    body {
	      margin: 0;
	      width: 100%;
	      height: 100%;
	      max-width: 100%;
	      background: var(--bg);
	      color: var(--ink);
	      overflow: hidden;
	      overscroll-behavior: none;
	    }

    #app {
      width: 100%;
      height: 100dvh;
      overflow: hidden;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      letter-spacing: 0;
    }

    button {
      cursor: pointer;
    }

    .hidden {
      display: none !important;
    }

    .auth-shell {
      min-height: 100vh;
      height: 100dvh;
      display: grid;
      place-items: center;
      padding: 24px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      background:
        linear-gradient(180deg, rgba(15, 118, 110, 0.08), transparent 38%),
        var(--bg);
    }

    .auth-panel {
      width: min(980px, 100%);
      display: grid;
      grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1fr);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .auth-brand {
      padding: 34px;
      background:
        linear-gradient(145deg, rgba(15, 118, 110, 0.16), transparent 48%),
        linear-gradient(180deg, #f8fbfb, #edf5f4);
      border-right: 1px solid var(--line);
    }

    .auth-brand h1 {
      margin: 0 0 12px;
	      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.08;
      font-weight: 780;
      letter-spacing: 0;
    }

	    .auth-brand p {
	      margin: 0;
	      color: var(--muted);
	      line-height: 1.7;
	      max-width: 34ch;
	    }

	    .brand-title {
	      display: inline-flex;
	      align-items: center;
	      gap: 10px;
	      min-width: 0;
	      max-width: 100%;
	    }

	    .brand-title-text {
	      min-width: 0;
	      overflow-wrap: anywhere;
	    }

    .brand-logo {
      width: 1.08em;
      height: 1.08em;
      flex: 0 0 auto;
      object-fit: contain;
      border-radius: 50%;
    }

    @media (min-width: 761px) {
      .auth-brand h1.auth-brand-title {
        font-size: clamp(26px, 2.7vw, 34px);
        line-height: 1.12;
        white-space: nowrap;
      }

      .auth-brand h1.auth-brand-title .brand-title-text {
        overflow-wrap: normal;
        white-space: nowrap;
      }
    }

	    .auth-form {
	      padding: 34px;
	      display: grid;
	      align-content: center;
	      gap: 18px;
	    }

    .demo-login-panel {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
      padding-top: 2px;
    }

    .demo-login-panel > span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 780;
    }

    .demo-login-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .demo-login-button {
      min-height: 42px;
      justify-content: flex-start;
      padding-inline: 12px;
    }

    .demo-login-button small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .app-shell {
      min-height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: grid;
      grid-template-columns: 252px minmax(0, 1fr);
    }

    .sidebar {
      border-right: 1px solid var(--line);
      background: #fbfdfd;
      display: flex;
      flex-direction: column;
      padding: 18px;
      gap: 18px;
      min-height: 100vh;
      position: sticky;
      top: 0;
    }

    .brand-lockup {
      display: flex;
      gap: 12px;
      align-items: center;
      min-height: 48px;
    }

    .brand-copy strong,
    .brand-copy span {
      display: block;
      line-height: 1.3;
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      flex: 0 0 auto;
      object-fit: contain;
      border-radius: 50%;
      background: #fff;
      border: 1px solid rgba(177, 34, 47, 0.22);
      box-shadow: 0 8px 18px rgba(11,95,89,.14);
    }

    .nav {
      display: grid;
      gap: 6px;
    }

    .nav-group {
      display: grid;
      gap: 5px;
    }

    .nav-group + .nav-group {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .nav-group-label {
      padding: 0 10px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .nav-button {
      width: 100%;
      min-height: 42px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 10px;
      border-radius: var(--radius);
      padding: 0 12px;
      text-align: left;
    }

    .nav-button:hover {
      background: var(--surface-2);
    }

    .nav-button.active {
      background: var(--primary-soft);
      color: var(--primary-dark);
      border-color: #b7e4df;
      font-weight: 700;
    }

    .nav-icon-wrap {
      width: 18px;
      height: 18px;
      display: inline-grid;
      place-items: center;
      position: relative;
      flex: 0 0 auto;
    }

    .nav-dot {
      position: absolute;
      width: 7px;
      height: 7px;
      top: -2px;
      right: -2px;
      border-radius: 999px;
      background: #dc2626;
      border: 1px solid #fbfdfd;
    }

    .sidebar-footer {
      margin-top: auto;
      display: grid;
      gap: 12px;
      border-top: 1px solid var(--line);
      padding-top: 16px;
    }

    .profile-block {
      display: grid;
      gap: 4px;
    }

    .profile-block strong,
    .profile-block span {
      overflow-wrap: anywhere;
    }

    .profile-block span {
      font-size: 12px;
      color: var(--muted);
    }

    .main {
      min-width: 0;
      min-height: 0;
      height: 100dvh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-x pan-y;
    }

    .topbar {
      min-height: 70px;
      border-bottom: 1px solid var(--line);
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      padding: 14px 24px;
      position: sticky;
      top: 0;
      z-index: 40;
    }

	    .page-title {
	      margin: 0;
	      font-size: 24px;
	      line-height: 1.25;
	      letter-spacing: 0;
	    }

	    .page-title.brand-title {
	      gap: 8px;
	    }

	    .page-title .brand-logo {
	      width: 1.05em;
	      height: 1.05em;
	    }

    .page-title.notice-title {
      font-size: 32px;
    }

    .topbar-meta {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      color: var(--muted);
      font-size: 13px;
      text-align: right;
    }

    .topbar-clock {
      font-variant-numeric: tabular-nums;
    }

    .topbar-account-badge {
      min-height: 42px;
      max-width: 230px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #f8fbfb;
      color: var(--ink);
      text-align: left;
    }

    .topbar-account-badge i {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      color: var(--primary-dark);
    }

    .topbar-account-copy {
      min-width: 0;
      display: grid;
      gap: 1px;
      line-height: 1.15;
    }

    .topbar-account-copy strong,
    .topbar-account-copy small {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-account-copy strong {
      color: var(--ink);
      font-size: 13px;
      font-weight: 820;
    }

    .topbar-account-copy small {
      color: var(--muted);
      font-size: 11px;
      font-weight: 720;
    }

	    .topbar-actions {
	      display: flex;
	      gap: 12px;
	      align-items: center;
	      justify-content: flex-end;
	      min-width: 0;
	    }

    .topbar-logout {
      display: none;
    }

    .content {
      padding: 24px;
      display: grid;
      gap: 22px;
    }

    .content-band {
      display: grid;
      gap: 14px;
    }

    .section-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 36px;
    }

    .section-heading h2 {
      margin: 0;
      font-size: 19px;
      letter-spacing: 0;
    }

    .section-heading.action-heading {
      justify-content: flex-end;
      min-height: 40px;
    }

    .section-heading p {
      display: none;
    }

    .notification-setup-heading {
      align-items: center;
    }

    .notification-setup-heading > div {
      min-width: 0;
    }

    .notification-setup-btn {
      min-height: 32px;
      padding: 0 10px;
      gap: 6px;
      flex: 0 0 auto;
      font-size: 12px;
    }

    .notification-setup-btn i {
      width: 14px;
      height: 14px;
    }

    .notification-setup-heading .notification-compat-note {
      display: block;
      margin-top: 6px;
      color: var(--warn);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }

    .toolbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

	    .filter-bar {
	      position: relative;
	      z-index: 20;
	      display: grid;
	      grid-template-columns: minmax(240px, 420px) minmax(150px, 220px);
      gap: 10px;
      align-items: center;
	      justify-content: start;
	    }

		    .customer-toolbar {
		      grid-template-columns: minmax(220px, 420px) minmax(150px, 220px) auto auto minmax(16px, 1fr) auto;
		      width: 100%;
		    }

		    .customer-compact-toggle {
		      grid-column: 3;
		    }

		    .customer-closed-toggle {
		      grid-column: 4;
		    }

		    .customer-closed-toggle.is-active {
		      border-color: var(--primary);
		      background: #d8ece9;
		      color: var(--primary-dark);
		      box-shadow: inset 0 0 0 1px rgba(11,111,104,.16);
		    }

		    .customer-add-button {
		      grid-column: 6;
		      justify-self: end;
		    }

	    .dashboard-notification-button {
	      position: relative;
	      width: 42px;
	      height: 42px;
	      border: 1px solid var(--line-strong);
	      border-radius: var(--radius);
	      background: var(--surface);
	      color: var(--primary-dark);
	      display: inline-grid;
	      place-items: center;
	      box-shadow: var(--shadow-sm);
	    }

	    .dashboard-notification-button i {
	      width: 20px;
	      height: 20px;
	    }

	    .dashboard-notification-badge {
	      position: absolute;
	      top: -6px;
	      right: -6px;
	      min-width: 18px;
	      height: 18px;
	      padding: 0 5px;
	      border-radius: 999px;
	      background: #dc2626;
	      color: #fff;
	      border: 2px solid var(--surface);
	      display: inline-grid;
	      place-items: center;
	      font-size: 10px;
	      font-weight: 850;
	      line-height: 1;
	    }

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr));
      gap: 12px;
    }

    .monitor-blank {
      min-height: 360px;
      border-top: 1px solid var(--line);
    }

    .sales-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }

    .sales-summary-card {
      min-height: 168px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 0;
      padding: 14px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 96px;
      gap: 14px;
      align-items: center;
    }

    .sales-summary-card h3 {
      margin: 0 0 10px;
      font-size: 18px;
      letter-spacing: 0;
    }

    .summary-lines {
      display: grid;
      gap: 7px;
      color: var(--muted);
      font-size: 13px;
    }

    .summary-lines strong {
      color: var(--ink);
      font-size: 15px;
    }

    .donut {
      --percent: 0;
      width: 92px;
      height: 92px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(#5b8def calc(var(--percent) * 1%), #e7eefb 0);
    }

    .donut::before {
      content: "";
      position: absolute;
    }

    .donut-inner {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: var(--surface);
      display: grid;
      place-items: center;
      color: #111827;
      font-weight: 800;
      font-size: 18px;
      box-shadow: inset 0 0 0 1px #dce6f7;
    }

    .stat-card,
    .customer-card,
    .notice-card,
    .record-panel,
    .staff-card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .stat-card {
      padding: 16px;
      min-height: 112px;
      display: grid;
      gap: 8px;
      align-content: space-between;
    }

    .stat-card span {
      color: var(--muted);
      font-size: 13px;
    }

    .stat-card strong {
      font-size: 26px;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

	    .stat-card small {
	      display: none;
	    }

	    button.stat-card {
	      color: inherit;
	      font: inherit;
	      text-align: left;
	      cursor: pointer;
	    }

	    .stat-card-button:hover {
	      border-color: var(--primary);
	      box-shadow: var(--shadow-sm);
	      transform: translateY(-1px);
	    }

    .sales-home {
      display: grid;
      gap: 16px;
    }

    .sales-profile-panel {
      border: 1px solid #bfc7c5;
      border-radius: 0;
      background: var(--surface);
      padding: 22px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
      gap: 20px;
      align-items: center;
      min-height: 170px;
    }

    .sales-profile-main {
      display: grid;
      gap: 12px;
    }

    .sales-profile-main h2 {
      margin: 0;
      font-size: 30px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .sales-profile-meta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 13px;
    }

    .sales-total-amount {
      border-left: 1px solid var(--line);
      padding-left: 22px;
      display: grid;
      gap: 10px;
      justify-items: end;
      text-align: right;
    }

    .sales-total-amount span,
    .sales-data-cell span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .sales-total-amount strong {
      font-size: 38px;
      line-height: 1.05;
      overflow-wrap: anywhere;
    }

    .sales-shareholder-panel,
    .sales-data-panel,
    .sales-customer-panel {
      border: 1px solid #bfc7c5;
      border-radius: 0;
      background: var(--surface);
      overflow: hidden;
    }

    .sales-shareholder-head {
      min-height: 62px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .sales-shareholder-head h2 {
      margin: 0;
      font-size: 24px;
      letter-spacing: 0;
      line-height: 1.15;
    }

    .sales-shareholder-total {
      display: grid;
      gap: 4px;
      justify-items: end;
      text-align: right;
    }

    .sales-shareholder-total span,
    .sales-shareholder-metric span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .sales-shareholder-total strong {
      font-size: 22px;
      line-height: 1.1;
      overflow-wrap: anywhere;
    }

    .sales-shareholder-compact {
      padding: 16px;
      display: grid;
      gap: 8px;
    }

    .ratio-bar {
      height: 12px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #eef5f3;
    }

    .ratio-bar span {
      display: block;
      height: 100%;
      min-width: 2px;
      border-radius: inherit;
      background: linear-gradient(90deg, #7fcaa7, var(--primary));
    }

    .sales-shareholder-compact small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 760;
      text-align: right;
    }

    .sales-shareholder-grid {
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: 12px;
    }

	    .sales-shareholder-card {
	      min-height: 142px;
	      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fbfdfc;
	      display: grid;
	      gap: 12px;
	    }

	    button.sales-shareholder-card {
	      color: inherit;
	      font: inherit;
	      text-align: left;
	      cursor: pointer;
	    }

	    .sales-shareholder-button:hover {
	      border-color: var(--primary);
	      box-shadow: var(--shadow-sm);
	      transform: translateY(-1px);
	    }

    .sales-shareholder-card header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .sales-shareholder-card h3 {
      margin: 0;
      font-size: 16px;
      line-height: 1.2;
    }

    .sales-shareholder-card small {
      color: var(--muted);
      font-weight: 700;
      white-space: nowrap;
    }

    .sales-shareholder-metrics {
      display: grid;
      gap: 7px;
    }

    .sales-shareholder-metric {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .sales-shareholder-metric strong {
      min-width: 0;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .sales-shareholder-customers {
      display: grid;
      gap: 6px;
      padding-top: 8px;
      border-top: 1px dashed var(--line);
    }

    .sales-shareholder-customer-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 28px;
      font-size: 13px;
      color: var(--ink-soft);
    }

    .sales-shareholder-customer-row span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--ink);
      font-weight: 760;
    }

    .sales-shareholder-customer-row strong {
      flex: 0 0 auto;
      color: var(--danger);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }

    .sales-shareholder-customer-row strong:where(:empty) {
      color: var(--muted);
    }

    .sales-shareholder-empty {
      color: var(--muted);
      font-size: 12px;
      font-weight: 720;
    }

    .shareholder-customer-name {
      font-size: 15px;
      font-weight: 820;
      color: var(--ink);
    }

    .sales-data-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sales-data-cell {
      min-height: 82px;
      padding: 14px;
      display: grid;
      gap: 8px;
      align-content: center;
      border-right: 1px solid var(--line);
    }

    .sales-data-cell:nth-child(4n) {
      border-right: 0;
    }

    .sales-data-cell strong {
      font-size: 20px;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    .sales-table-head {
      min-height: 46px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .sales-table-head h2 {
      margin: 0;
      font-size: 17px;
      letter-spacing: 0;
    }

    .sales-table-head span {
      color: var(--muted);
      font-size: 13px;
    }

    .sales-management-tabs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 10px;
    }

    .sales-management-tab {
      min-height: 112px;
      padding: 12px;
      display: grid;
      gap: 7px;
      align-content: start;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background: var(--surface);
      color: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
    }

    .sales-management-tab.active {
      border-color: var(--primary);
      background: #eef8f5;
      box-shadow: inset 4px 0 0 var(--primary), var(--shadow-sm);
    }

    .sales-management-tab strong {
      font-size: 16px;
      line-height: 1.2;
    }

    .sales-management-tab span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 720;
    }

    .sales-management-heading {
      align-items: center;
    }

    .sales-management-stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .sales-detail-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
      gap: 14px;
    }

    .sales-detail-card {
      min-width: 0;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background: var(--surface);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
    }

    .sales-detail-card header {
      min-height: 72px;
      padding: 14px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid var(--line);
      background: #fbfdfc;
    }

    .sales-detail-card h3 {
      margin: 0 0 5px;
      font-size: 18px;
      line-height: 1.2;
    }

    .sales-detail-card header span,
    .sales-detail-meta,
    .sales-detail-records small {
      color: var(--muted);
      font-size: 12px;
    }

    .sales-detail-metrics {
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .sales-detail-metrics .metric {
      min-height: 58px;
      padding: 9px;
    }

    .sales-detail-meta {
      padding: 0 14px 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      font-weight: 720;
    }

    .sales-detail-records {
      padding: 12px 14px;
      display: grid;
      gap: 8px;
      border-top: 1px dashed var(--line);
      border-bottom: 1px solid var(--line);
      background: #fcfdfd;
    }

    .sales-detail-records > strong {
      font-size: 13px;
    }

    .sales-detail-records div {
      display: grid;
      grid-template-columns: 86px 1fr 1fr 1fr;
      gap: 8px;
      color: var(--ink-soft);
      font-size: 12px;
      font-variant-numeric: tabular-nums;
    }

    .sales-detail-actions {
      padding: 12px 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      background: #fbfdfc;
    }

    .sales-detail-actions .btn {
      min-height: 34px;
      padding: 0 10px;
      font-size: 12px;
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.75fr);
      gap: 18px;
      align-items: start;
    }

	    .customer-grid {
	      position: relative;
	      z-index: 1;
	      display: grid;
	      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	      gap: 14px;
    }

	    .customer-card {
	      min-height: 304px;
	      display: grid;
	      grid-template-rows: auto 1fr auto;
	      overflow: hidden;
	    }

	    .customer-simple-panel table {
	      min-width: max(620px, 100%);
	    }

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

	    .customer-card-focus {
	      outline: 3px solid rgba(11, 111, 104, 0.32);
	      outline-offset: 3px;
	    }

    .customer-card.inactive-card {
      border-color: #ef9f9f;
      background: #fffafa;
      opacity: 0.64;
    }

    .customer-card.inactive-card .card-head,
    .customer-card.inactive-card .card-actions {
      border-color: #f0b4b4;
    }

    .customer-card .card-head {
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--line);
      display: grid;
      gap: 10px;
    }

    .customer-card .name-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .customer-card h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .identity-stack {
      display: grid;
      gap: 2px;
      margin-top: 4px;
    }

    .phone-line {
      font-size: 15px;
      font-weight: 760;
      color: #293433;
    }

    .id-line {
      font-size: 12px;
      color: var(--muted);
    }

	    .card-meta-line {
	      display: flex;
	      justify-content: space-between;
      gap: 12px;
      color: var(--muted);
	      font-size: 13px;
	      flex-wrap: wrap;
	    }

	    .inline-action-link,
	    .table-link {
	      appearance: none;
	      border: 0;
	      background: transparent;
	      color: var(--primary-dark);
	      font: inherit;
	      font-weight: 820;
	      padding: 0;
	      text-align: left;
	      text-decoration: underline;
	      text-underline-offset: 3px;
	      cursor: pointer;
	    }

	    .inline-action-link:hover,
	    .table-link:hover {
	      color: var(--primary);
	    }

    .customer-card .subline {
      color: var(--muted);
      font-size: 13px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .card-body {
      padding: 14px 16px;
      display: grid;
      gap: 12px;
    }

    .metric-grid {
      display: none;
    }

    .metric {
      min-height: 66px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px;
      display: grid;
      gap: 4px;
      background: #fcfdfd;
    }

    .metric span {
      font-size: 12px;
      color: var(--muted);
    }

    .metric strong {
      font-size: 15px;
      overflow-wrap: anywhere;
    }

    .metric-with-action {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }

    .metric-with-action span,
    .metric-with-action strong {
      grid-column: 1;
    }

    .metric-with-action .btn {
      grid-column: 2;
      grid-row: 1 / span 2;
      min-height: 32px;
      padding: 0 9px;
      font-size: 12px;
      white-space: nowrap;
    }

    .card-ledger {
      display: grid;
      gap: 12px;
    }

	    .customer-interest-summary,
	    .payment-table-summary {
	      color: var(--muted);
	      font-size: 12px;
	      font-weight: 720;
	      line-height: 1.35;
	    }

	    .customer-interest-summary strong,
	    .payment-table-summary strong {
	      color: var(--ink-soft);
	      font-variant-numeric: tabular-nums;
	    }

	    .payment-record-table tfoot td {
	      border-top: 2px solid var(--line-strong);
	      font-weight: 830;
	      background: #f8fbfa;
	    }

    .bar-metric {
      display: grid;
      grid-template-columns: minmax(92px, 118px) minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      min-height: 42px;
    }

    .bar-copy {
      display: grid;
      gap: 2px;
    }

    .bar-copy span {
      color: var(--muted);
      font-size: 12px;
    }

    .bar-copy strong {
      font-size: 15px;
      overflow-wrap: anywhere;
    }

    .bar-track {
      height: 12px;
      border: 1px solid var(--line);
      background: #f7faf9;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      width: var(--value);
      transition: width 180ms ease;
    }

    .bar-fill.principal {
      background: #9fd7bb;
    }

    .bar-fill.interest {
      background: #efd989;
    }

	    .due-line {
	      color: var(--muted);
	      font-size: 13px;
	      display: flex;
      flex-wrap: wrap;
      gap: 10px;
	      border-top: 1px solid var(--line);
	      padding-top: 10px;
	    }

	    .shareholder-rate-line {
	      color: var(--ink-soft);
	      font-weight: 720;
	    }

	    .shareholder-rate-line strong {
	      color: var(--ink);
	      font-weight: 820;
	    }

    .card-actions {
      border-top: 1px solid var(--line);
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .card-actions .span-2 {
      grid-column: span 2;
    }

    .notice-list,
    .record-list,
    .staff-list {
      display: grid;
      gap: 10px;
    }

    .notice-card {
      padding: 10px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
      border-left: 4px solid var(--primary);
    }

    .notice-card.warn {
      border-left-color: var(--warn);
    }

    .notice-card.danger {
      border-left-color: var(--danger);
    }

    .notice-top {
      display: flex;
      justify-content: flex-start;
      gap: 12px;
      align-items: center;
    }

    .notice-top strong {
      overflow-wrap: anywhere;
    }

    .notice-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 12px;
    }

    .notice-message {
      margin-top: 4px;
      font-size: 13px;
      line-height: 1.45;
    }

    .notice-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
    }

    .record-panel {
      overflow: hidden;
    }

    .table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      touch-action: pan-x pan-y;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 0;
      table-layout: fixed;
      background: var(--surface);
    }

    .excel-panel {
      border-radius: 0;
      border-color: #bfc7c5;
      background: var(--surface);
    }

    .excel-panel table {
      min-width: 0;
      font-size: 13px;
    }

    .payment-table-summary {
      margin-bottom: 8px;
      text-align: right;
    }

    .ticket-summary-note {
      color: var(--muted);
      font-size: 12px;
      font-weight: 720;
      white-space: nowrap;
    }

    .ticket-report-table tfoot td {
      background: #f7fbfa;
      color: var(--ink);
      font-weight: 820;
    }

    .excel-panel th,
    .excel-panel td {
      border: 1px solid #cfd8d6;
      padding: 8px 10px;
    }

    .excel-panel th {
      background: #eef3f2;
      color: #27312f;
    }

    .excel-panel tr:last-child td {
      border-bottom: 1px solid #cfd8d6;
    }

    th,
    td {
      text-align: left;
      border-bottom: 1px solid var(--line);
      padding: 12px 14px;
      vertical-align: top;
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    th {
      color: var(--muted);
      font-size: 12px;
      background: #f9fbfb;
      font-weight: 700;
    }

    td {
      font-size: 14px;
    }

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

    .settings-sheet {
      display: grid;
      gap: 2px;
      max-width: 760px;
    }

    .settings-row {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      min-height: 58px;
      padding: 10px 0;
    }

    .settings-checkbox-label {
      justify-content: flex-start;
      width: max-content;
    }

    .settings-checkbox-input {
      width: auto;
      min-height: auto;
    }

    .settings-actions-row {
      border-top: 1px solid var(--line);
      margin-top: 4px;
      padding-top: 14px;
    }

    .staff-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 12px;
    }

			    .assign-form {
			      display: grid;
			      grid-template-columns: minmax(150px, 180px) minmax(150px, 180px) minmax(118px, 138px) minmax(118px, 138px) auto minmax(24px, 1fr) auto;
			      gap: 10px;
			      align-items: end;
			      max-width: none;
			    }

			    .assign-customer-field,
			    .assign-sales-field,
			    .assign-ratio-field,
			    .assign-company-field {
			      min-width: 0;
			    }

		    .assign-form select,
		    .assign-form input,
		    .assign-form > .btn {
		      min-height: 42px;
		    }

		    .assign-ratio-field input {
		      width: 100%;
		      text-align: center;
		    }

		    .assign-company-ratio {
		      min-height: 42px;
		      border: 1px solid var(--line-strong);
		      border-radius: var(--radius);
		      background: #f9fbfb;
		      display: inline-grid;
		      place-items: center;
	      padding-inline: 9px;
	      color: var(--muted);
	      font-size: 12px;
	      font-weight: 780;
	      white-space: nowrap;
	    }

	    .assign-company-ratio strong {
	      color: var(--ink);
	      font-size: 14px;
	    }

	    .assign-spacer {
	      min-width: 24px;
	    }

	    .staff-add-inline {
	      justify-self: end;
	      white-space: nowrap;
	    }

	    .staff-toolbar {
	      display: flex;
	      justify-content: flex-end;
	    }

    .table-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }

    .table-actions .btn {
      min-height: 32px;
      padding: 0 9px;
      font-size: 12px;
    }

    .staff-settings-btn {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      font-weight: 820;
    }

    .staff-settings-btn:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      color: #fff;
    }

    .staff-card {
      min-height: 148px;
      padding: 14px;
      display: grid;
      gap: 12px;
      align-content: space-between;
    }

    .staff-card h3 {
      margin: 0;
      font-size: 16px;
    }

    .staff-card span {
      color: var(--muted);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .form-grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .loan-primary-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .field {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    label,
    .label {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-height: 42px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      padding: 9px 10px;
      outline: none;
    }

    input[type="checkbox"] {
      accent-color: var(--primary);
    }

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

    input:focus,
    select:focus,
    textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
    }

    .file-upload-control {
      min-height: 82px;
      display: grid;
      align-content: center;
      gap: 6px;
      padding: 14px;
      border: 1px dashed var(--line-strong);
      border-radius: var(--radius);
      background: var(--surface-2);
    }

    .file-upload-control input[type="file"] {
      min-height: auto;
      padding: 0;
      border: 0;
      background: transparent;
    }

    .field-hint {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .attachment-section {
      display: grid;
      gap: 14px;
    }

    .attachment-group {
      display: grid;
      gap: 10px;
    }

    .attachment-group h3 {
      margin: 0;
      font-size: 14px;
      font-weight: 800;
    }

    .attachment-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .attachment-card {
      min-width: 0;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      gap: 12px;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }

    .attachment-thumb {
      width: 72px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--surface-2);
      color: var(--muted);
      border: 1px solid var(--line);
    }

    .attachment-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .attachment-thumb i,
    .attachment-thumb svg {
      width: 24px;
      height: 24px;
    }

    .attachment-meta {
      min-width: 0;
      display: grid;
      gap: 7px;
    }

    .attachment-name {
      color: var(--ink);
      font-weight: 760;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .attachment-subline {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .attachment-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .attachment-actions .btn {
      min-height: 34px;
      padding: 6px 9px;
      font-size: 12px;
    }

    .inline-wheel-select {
      --inline-wheel-height: 42px;
      --inline-wheel-item-height: 42px;
      --inline-wheel-visible-items: 7;
      --inline-wheel-zone: 66.666%;
      --inline-wheel-selected-scale: 1.08;
      position: relative;
      width: 100%;
      min-width: 0;
      font: inherit;
    }

    .inline-wheel-select *,
    .inline-wheel-select *::before,
    .inline-wheel-select *::after {
      box-sizing: border-box;
    }

    select.inline-wheel-native {
      position: absolute !important;
      width: 1px !important;
      min-width: 1px !important;
      height: 1px !important;
      min-height: 1px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      opacity: 0 !important;
      pointer-events: none !important;
      clip-path: inset(50%);
    }

    .inline-wheel-face {
      position: relative;
      z-index: 10;
      width: 100%;
      min-height: var(--inline-wheel-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0 10px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      font: inherit;
      font-size: 15px;
      text-align: left;
      cursor: pointer;
      touch-action: manipulation;
    }

    .inline-wheel-face.is-open {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
    }

    .inline-wheel-select.is-disabled .inline-wheel-face {
      opacity: 0.58;
      cursor: not-allowed;
    }

    .inline-wheel-select.is-invalid .inline-wheel-face {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.14);
    }

    .inline-wheel-caret {
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-right: 2px solid var(--muted);
      border-bottom: 2px solid var(--muted);
      transform: rotate(45deg) translateY(-2px);
    }

    .inline-wheel-dropdown,
    .inline-wheel-popover {
      position: absolute;
      display: none;
      overflow: hidden;
    }

    .inline-wheel-dropdown {
      z-index: 20;
      top: calc(100% + 8px);
      left: 0;
      right: 0;
      max-height: min(320px, 52vh);
      overflow-y: auto;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
      box-shadow: var(--shadow);
    }

    .inline-wheel-option {
      min-height: 42px;
      display: flex;
      align-items: center;
      padding: 0 12px;
      color: var(--ink);
      cursor: pointer;
    }

    .inline-wheel-option + .inline-wheel-option {
      border-top: 1px solid rgba(220, 228, 226, 0.78);
    }

    .inline-wheel-option:hover,
    .inline-wheel-option.is-selected {
      background: var(--primary-soft);
      color: var(--primary-dark);
    }

    .inline-wheel-option.is-disabled {
      color: var(--muted);
      opacity: 0.5;
      cursor: not-allowed;
    }

    .inline-wheel-popover {
      z-index: 21;
      top: 50%;
      left: 0;
      width: var(--inline-wheel-zone);
      height: calc(var(--inline-wheel-item-height) * var(--inline-wheel-visible-items));
      transform: translateY(-50%);
      pointer-events: none;
      overflow: visible;
    }

    .inline-wheel-select[data-open="dropdown"] .inline-wheel-dropdown {
      display: block;
    }

    .inline-wheel-frame {
      position: relative;
      height: 100%;
      border: 0;
      border-radius: var(--radius);
      overflow: hidden;
      background: transparent;
    }

    .inline-wheel-track {
      position: relative;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
      touch-action: none;
    }

    .inline-wheel-track.is-dragging .inline-wheel-item {
      transition: none;
    }

    .inline-wheel-list {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }

    .inline-wheel-item {
      height: var(--inline-wheel-item-height);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1;
      text-align: center;
      user-select: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition:
        color 140ms ease,
        opacity 140ms ease,
        transform 140ms ease,
        font-weight 140ms ease;
    }

    .inline-wheel-item[data-distance="0"] {
      color: var(--ink);
      font-weight: 760;
      transform: scale(var(--inline-wheel-selected-scale));
      opacity: 1;
    }

    .inline-wheel-item[data-distance="1"] {
      color: color-mix(in srgb, var(--ink) 78%, var(--muted));
      opacity: 0.78;
    }

    .inline-wheel-item[data-distance="2"] {
      color: var(--muted);
      opacity: 0.52;
    }

    .inline-wheel-item[data-distance="3"] {
      color: var(--muted);
      opacity: 0.32;
    }

    .inline-wheel-item[data-distance="far"] {
      opacity: 0.12;
    }

    .inline-wheel-center {
      pointer-events: none;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      height: var(--inline-wheel-height);
      border-top: 1px solid rgba(15, 118, 110, 0.18);
      border-bottom: 1px solid rgba(15, 118, 110, 0.18);
      transform: translateY(-50%);
      background: rgba(223, 244, 241, 0.24);
    }

    .inline-wheel-fade {
      pointer-events: none;
      position: absolute;
      z-index: 5;
      left: 0;
      right: 0;
      height: calc(var(--inline-wheel-item-height) * 2.1);
    }

    .inline-wheel-fade.top {
      top: 0;
      background: linear-gradient(rgba(255,255,255,0.96), rgba(255,255,255,0));
    }

    .inline-wheel-fade.bottom {
      bottom: 0;
      background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.9));
    }

    fieldset {
      border: 0;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 14px;
    }

    legend {
      font-weight: 780;
      padding: 0;
      margin: 0 0 2px;
      font-size: 15px;
    }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(11, 20, 19, 0.46);
      display: grid;
      place-items: center;
      padding: 20px;
      z-index: 50;
    }

    .modal {
      width: min(960px, 100%);
      max-height: min(90vh, 880px);
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
    }

    .modal.small {
      width: min(760px, 100%);
    }

    .modal-head,
    .modal-foot {
      padding: 16px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #fbfdfd;
    }

    .modal-head {
      border-bottom: 1px solid var(--line);
    }

    .modal-foot {
      border-top: 1px solid var(--line);
      justify-content: flex-end;
      flex-wrap: wrap;
    }

    .modal-head h2 {
      margin: 0;
      font-size: 18px;
      letter-spacing: 0;
    }

    .modal-body {
      padding: 18px;
      overflow: auto;
      display: grid;
      gap: 18px;
    }

    .user-form-backdrop {
      place-items: start center;
      padding-top: clamp(58px, 14vh, 126px);
      overflow-y: auto;
    }

    .user-form-modal {
      width: min(430px, calc(100vw - 34px));
      max-height: none;
      grid-template-rows: auto auto;
    }

    .user-form-modal .modal-head {
      padding: 14px 16px;
    }

    .user-form-modal .modal-body {
      padding: 16px;
      gap: 12px;
      overflow: visible;
    }

    .user-form-modal .form-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .user-form-modal .field {
      gap: 5px;
    }

    .user-form-modal input {
      min-height: 40px;
      padding: 8px 10px;
    }

    .user-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 4px;
    }

    .user-form-actions .btn {
      min-height: 38px;
    }

    .details-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .detail-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 10px;
      display: grid;
      gap: 5px;
      min-height: 64px;
      background: #fcfdfd;
    }

    .detail-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .detail-item strong {
      overflow-wrap: anywhere;
    }

	    button.detail-item.copyable,
	    button.detail-item.detail-link {
	      width: 100%;
	      appearance: none;
	      -webkit-appearance: none;
	      color: inherit;
	      font: inherit;
	      text-align: left;
	    }

    .detail-copy-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .detail-copy-row strong {
      min-width: 0;
      flex: 1 1 auto;
    }

    .detail-copy-row i {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      color: var(--primary);
    }

	    .detail-item.copyable,
	    .detail-item.detail-link {
	      cursor: pointer;
	      transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
	    }

	    .detail-item.copyable:hover,
	    .detail-item.copyable:focus-within,
	    .detail-item.detail-link:hover,
	    .detail-item.detail-link:focus-within {
	      border-color: rgba(15, 118, 110, 0.42);
	      box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.09);
	    }

    .detail-item.copyable:disabled {
      cursor: default;
      opacity: 1;
    }

    .payment-preview {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 12px;
      display: grid;
      gap: 10px;
      background: #fbfdfd;
    }

	    .payment-entry-grid {
	      display: grid;
	      grid-template-columns: minmax(0, 1.2fr) minmax(210px, 0.8fr);
	      gap: 14px;
	      align-items: start;
	    }

	    .payment-entry-grid-solo {
	      grid-template-columns: minmax(0, 1fr);
	    }

		    .payment-left,
		    .payment-code-panel {
		      display: grid;
		      gap: 12px;
		      min-width: 0;
		    }

	    .payment-readonly-panel {
	      display: grid;
	      gap: 10px;
	    }

	    .payment-amount-input {
	      min-height: 58px;
	      font-size: 24px;
	      font-weight: 760;
	      border-color: #93c5fd;
	      background: #f8fbff;
	      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
	    }

	    .payment-amount-input:focus {
	      border-color: #3b82f6;
	      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
	    }

	    .payment-meta-grid {
	      gap: 10px;
	    }

	    #payment-form .modal-body,
	    #payment-form .payment-entry-grid,
	    #payment-form .payment-left,
	    #payment-form .payment-code-panel,
	    #payment-form .payment-preview,
	    #payment-form .preview-grid,
	    #payment-form .field,
	    #payment-form input,
	    #payment-form select,
	    #payment-form textarea {
	      min-width: 0;
	      max-width: 100%;
	    }

    .payment-code-panel {
      border-left: 1px solid var(--line);
      padding-left: 14px;
    }

    .payment-code-panel.verification-attention {
      animation: verify-panel-shake 250ms ease-in-out;
    }

    .verification-field input {
      transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    }

    .verification-field.invalid input {
      border-color: var(--danger);
      background: #fffafa;
      box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.14);
      animation: verify-shake 210ms ease-in-out;
    }

    .verification-error {
      display: none;
      min-height: 24px;
      border: 1px solid #efb7b7;
      background: var(--danger-soft);
      color: var(--danger);
      border-radius: 4px;
      padding: 5px 8px;
      font-size: 12px;
      font-weight: 760;
    }

    .verification-field.invalid .verification-error {
      display: block;
    }

    @keyframes verify-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-5px); }
      55% { transform: translateX(5px); }
      78% { transform: translateX(-3px); }
    }

    @keyframes verify-panel-shake {
      0%, 100% { transform: translateX(0); }
      22% { transform: translateX(-7px); }
      52% { transform: translateX(7px); }
      76% { transform: translateX(-4px); }
    }

    .preview-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

	    .preview-item {
	      border: 1px solid var(--line);
	      border-radius: var(--radius);
	      padding: 9px;
	      display: grid;
	      gap: 4px;
	      min-height: 58px;
	      min-width: 0;
	    }

	    .preview-item span {
	      color: var(--muted);
	      font-size: 12px;
	    }

	    .preview-item strong {
	      overflow-wrap: anywhere;
	    }

    .code-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 82px;
      min-height: 38px;
      padding: 0 12px;
      border-radius: var(--radius);
      background: var(--accent-soft);
      color: var(--accent);
      font-weight: 800;
      letter-spacing: 0.08em;
    }

    .date-input {
      font-variant-numeric: tabular-nums;
    }

    .date-presets {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .date-presets button {
      min-height: 28px;
      border: 1px solid var(--line-strong);
      background: #fff;
      border-radius: 4px;
      padding: 0 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .loan-auto-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .auto-field {
      min-height: 64px;
      border: 1px solid var(--line);
      background: #fbfdfd;
      padding: 10px;
      display: grid;
      gap: 5px;
      align-content: center;
    }

    .auto-field span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .auto-field strong {
      font-size: 15px;
      overflow-wrap: anywhere;
    }

    .custom-type-row {
      grid-column: 1 / -1;
    }

    .btn {
      min-height: 40px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius);
      background: var(--surface);
      color: var(--ink);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0 12px;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      text-decoration: none;
    }

    .btn:hover {
      border-color: var(--primary);
      background: var(--surface-2);
    }

    .btn:disabled {
      cursor: not-allowed;
      opacity: 0.48;
      border-color: var(--line);
      background: #f6f7f7;
      color: var(--muted);
    }

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

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

    .staff-settings-btn,
    .staff-settings-btn:hover {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
      font-weight: 820;
    }

    .staff-settings-btn:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
    }

    .btn.danger {
      color: var(--danger);
      border-color: #efb7b7;
      background: #fffafa;
    }

    .btn.delete-customer-btn,
    .btn.delete-user-btn,
    .btn.delete-confirm-btn {
      border-color: #991b1b;
      background: #b91c1c;
      color: #fff;
    }

    .btn.delete-customer-btn:hover,
    .btn.delete-user-btn:hover,
    .btn.delete-confirm-btn:hover {
      background: #991b1b;
      border-color: #7f1d1d;
    }

    .btn.ghost {
      background: transparent;
    }

    .icon-button {
      width: 40px;
      min-width: 40px;
      padding: 0;
    }

    .card-actions .btn {
      min-height: 38px;
      padding: 0 8px;
      font-size: 13px;
    }

    .icon,
    [data-lucide] {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      stroke-width: 2.1;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      border-radius: 999px;
      padding: 0 9px;
      font-size: 12px;
      font-weight: 760;
      background: var(--surface-2);
      color: var(--muted);
      white-space: nowrap;
    }

    .pill.ok {
      background: var(--ok-soft);
      color: var(--ok);
    }

    .pill.soon,
    .pill.today {
      background: var(--warn-soft);
      color: var(--warn);
    }

    .pill.overdue,
    .pill.danger {
      background: var(--danger-soft);
      color: var(--danger);
    }

    .pill.settled {
      background: var(--accent-soft);
      color: var(--accent);
    }

    .empty-state {
      border: 1px dashed var(--line-strong);
      border-radius: var(--radius);
      padding: 22px;
      color: var(--muted);
      text-align: center;
      background: rgba(255, 255, 255, 0.62);
    }

    .toast-root {
      position: fixed;
      right: 18px;
      bottom: 18px;
      display: grid;
      gap: 8px;
      z-index: 80;
    }

    .toast {
      min-height: 42px;
      max-width: min(420px, calc(100vw - 36px));
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--surface);
      color: var(--ink);
      box-shadow: var(--shadow);
      padding: 11px 13px;
      display: flex;
      align-items: center;
      gap: 9px;
      overflow-wrap: anywhere;
    }

    .toast.ok {
      border-color: #9bd6ad;
    }

    .toast.danger {
      border-color: #efa4a4;
    }

    details {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fcfdfd;
      padding: 10px 12px;
    }

    summary {
      cursor: pointer;
      font-weight: 700;
    }

    pre {
      overflow-x: hidden;
      margin: 10px 0 0;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 12px;
      color: var(--muted);
    }

    @media (max-width: 1080px) {
      .dashboard-grid {
        grid-template-columns: 1fr;
      }

      .sales-profile-panel {
        grid-template-columns: 1fr;
      }

      .sales-total-amount {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 18px;
        justify-items: start;
        text-align: left;
      }

      .sales-data-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .sales-data-cell:nth-child(4n) {
        border-right: 1px solid var(--line);
      }

      .sales-data-cell:nth-child(3n) {
        border-right: 0;
      }
    }

    @media (max-width: 820px) {
      body {
        min-height: 100dvh;
      }

      .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr);
        align-content: start;
      }

      .sidebar {
        position: fixed;
        left: 0;
        right: 0;
        top: auto;
        bottom: 0;
        z-index: 40;
        min-height: auto;
        height: auto;
        border-right: 0;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        gap: 0;
        background: rgba(251, 253, 253, 0.98);
        box-shadow: 0 -10px 24px rgba(23, 32, 31, 0.08);
      }

      .brand-lockup {
        display: none;
      }

      .nav {
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding: 0 2px 2px;
      }

      .nav-group {
        display: contents;
      }

      .nav-group + .nav-group {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
      }

      .nav-group-label {
        display: none;
      }

      .nav-button {
        width: 86px;
        min-width: 86px;
        flex: 0 0 86px;
        min-height: 56px;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 5px 4px;
        border-radius: 6px;
        font-size: 11px;
        text-align: center;
        line-height: 1.15;
        scroll-snap-align: start;
      }

      .sidebar-footer {
        display: none;
      }

      .main {
        padding-bottom: 0;
        scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
      }

      .topbar {
        min-height: 60px;
        padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
        gap: 8px;
      }

      .page-title,
      .page-title.notice-title {
        font-size: 21px;
        line-height: 1.2;
      }

	      .topbar-actions {
	        gap: 8px;
	      }

      .topbar-meta {
        font-size: 12px;
        gap: 6px 10px;
      }

      .topbar-logout {
        display: inline-flex;
        min-height: 34px;
        padding: 0 10px;
        font-size: 12px;
      }

      .notice-card {
        grid-template-columns: 1fr;
      }

      .notice-actions {
        justify-content: flex-start;
      }
    }

    @media (max-width: 760px) {
      .auth-shell {
        min-height: 100dvh;
        padding: 14px;
        place-items: stretch;
        align-items: start;
      }

      .auth-panel {
        grid-template-columns: 1fr;
        width: 100%;
        box-shadow: none;
      }

      .auth-brand {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 22px;
      }

      .auth-brand h1 {
        font-size: 30px;
      }

      .auth-form {
        padding: 22px;
      }

	      .stats-grid,
	      .filter-bar,
	      .form-grid,
      .form-grid.three,
      .attachment-grid,
      .details-grid,
      .preview-grid,
      .payment-entry-grid,
      .assign-form,
      .settings-row {
	        grid-template-columns: 1fr;
	      }

		      .customer-toolbar {
		        grid-template-columns: minmax(0, 1fr) minmax(92px, 108px) minmax(112px, 130px);
		      }

		      .customer-toolbar .customer-compact-toggle {
		        grid-column: 1;
		      }

		      .customer-toolbar .customer-closed-toggle {
		        grid-column: 2;
		      }

		      .customer-toolbar .customer-add-button {
		        grid-column: 3;
		        justify-self: stretch;
		      }

	      .customer-simple-panel {
	        overflow-x: hidden;
	      }

	      .customer-simple-panel table {
	        min-width: 0;
	        width: 100%;
	        table-layout: fixed;
	      }

	      .customer-simple-table th,
	      .customer-simple-table td {
	        padding: 8px 6px;
	        font-size: 12px;
	        overflow: hidden;
	        text-overflow: ellipsis;
	      }

	      .customer-simple-table th:nth-child(1),
	      .customer-simple-table td:nth-child(1) {
	        width: 30%;
	      }

	      .customer-simple-table th:nth-child(2),
	      .customer-simple-table td:nth-child(2) {
	        width: 28%;
	      }

	      .customer-simple-table th:nth-child(3),
	      .customer-simple-table td:nth-child(3),
	      .customer-simple-table th:nth-child(4),
	      .customer-simple-table td:nth-child(4) {
	        width: 21%;
	      }

      .topbar {
        align-items: flex-start;
        flex-direction: row;
      }

      .topbar-meta {
        text-align: left;
        justify-content: flex-start;
      }

      .payment-code-panel {
        border-left: 0;
        border-top: 1px solid var(--line);
        padding-left: 0;
        padding-top: 12px;
      }

      .content {
        padding: 14px;
        gap: 16px;
      }

      .content-band {
        gap: 12px;
      }

      .section-heading {
        min-height: auto;
      }

      .toolbar,
      .section-heading.action-heading {
        justify-content: stretch;
      }

      .toolbar .btn,
      .section-heading.action-heading .btn {
        width: 100%;
      }

      .customer-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .customer-card {
        min-height: auto;
      }

      .customer-card .card-head {
        padding: 13px;
      }

      .customer-card .name-row {
        align-items: center;
      }

      .customer-card h3 {
        font-size: 17px;
      }

      .card-body {
        padding: 12px 13px;
      }

      .bar-metric {
        grid-template-columns: minmax(88px, 104px) minmax(0, 1fr);
        gap: 10px;
      }

      .due-line {
        gap: 7px 10px;
      }

      .card-actions {
        grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
        padding: 10px;
      }

      .card-actions .span-2 {
        grid-column: auto;
      }

      .card-actions .btn {
        min-height: 36px;
        font-size: 12px;
      }

      .loan-auto-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sales-data-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sales-data-cell,
      .sales-data-cell:nth-child(3n),
      .sales-data-cell:nth-child(4n) {
        border-right: 1px solid var(--line);
      }

      .sales-data-cell:nth-child(2n) {
        border-right: 0;
      }

      .sales-total-amount strong {
        font-size: 30px;
      }
    }

    @media (max-width: 520px) {
      .topbar {
        align-items: stretch;
      }

      .topbar > div:first-child {
        min-width: 0;
      }

      .topbar-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
      }

      .topbar-meta {
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }

      .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .stat-card {
        min-height: 82px;
        padding: 10px;
      }

      .stat-card span {
        font-size: 12px;
      }

      .stat-card strong {
        font-size: 22px;
      }

      .sales-profile-panel {
        padding: 16px;
        gap: 14px;
        min-height: auto;
      }

      .sales-profile-main h2 {
        font-size: 24px;
      }

      .sales-profile-meta {
        gap: 6px 10px;
      }

      .sales-total-amount {
        padding-top: 14px;
      }

      .sales-total-amount strong {
        font-size: 28px;
      }

      .sales-data-grid {
        grid-template-columns: 1fr 1fr;
      }

      .sales-data-cell {
        min-height: 72px;
        padding: 11px;
      }

      .sales-table-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .sales-summary-grid {
        grid-template-columns: 1fr;
      }

      .sales-summary-card {
        min-height: 136px;
        grid-template-columns: minmax(0, 1fr) 78px;
        padding: 12px;
      }

      .donut {
        width: 74px;
        height: 74px;
      }

      .donut-inner {
        width: 52px;
        height: 52px;
        font-size: 15px;
      }

      .filter-bar {
        gap: 8px;
      }

      .notice-card {
        padding: 12px;
        gap: 10px;
      }

      .notice-top {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
      }

      .notice-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .notice-actions .btn {
        width: 100%;
      }

      .table-wrap {
        margin-inline: -1px;
      }

      table {
        min-width: 680px;
      }

      .excel-panel table {
        min-width: 820px;
      }

      th,
      td {
        padding: 10px 11px;
      }

      .modal-backdrop {
        padding: 0;
        place-items: stretch;
      }

      .modal,
      .modal.small {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
      }

      .modal-head,
      .modal-foot {
        padding: 12px 14px;
      }

      .modal-head h2 {
        font-size: 17px;
        line-height: 1.25;
      }

      .modal-body {
        padding: 14px;
        gap: 16px;
      }

      .modal-foot {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
      }

      .modal-foot .btn {
        flex: 1 1 0;
      }

      .attachment-card {
        grid-template-columns: 58px minmax(0, 1fr);
      }

      .attachment-thumb {
        width: 58px;
      }

      .modal-backdrop.user-form-backdrop {
        padding: clamp(48px, 10dvh, 86px) 18px 18px;
        place-items: start center;
      }

      .modal.small.user-form-modal {
        width: min(430px, calc(100vw - 36px));
        height: auto;
        max-height: calc(100dvh - 78px);
        border: 1px solid var(--line);
        border-radius: var(--radius);
      }

      .user-form-modal .modal-head {
        padding: 12px 14px;
      }

      .user-form-modal .modal-body {
        padding: 14px;
        gap: 11px;
        overflow: visible;
      }

      .user-form-modal .form-grid {
        gap: 9px;
      }

      .user-form-modal input {
        min-height: 40px;
        height: 40px;
        padding: 7px 10px;
      }

      .user-form-actions {
        padding-top: 3px;
      }

      .details-grid,
      .preview-grid,
      .loan-auto-grid {
        grid-template-columns: 1fr;
      }

	      #payment-form .modal-body {
	        overflow-x: hidden;
	      }

	      #payment-form .payment-entry-grid,
	      #payment-form .payment-left,
	      #payment-form .payment-code-panel,
	      #payment-form .payment-preview,
	      #payment-form .preview-grid {
	        width: 100%;
	      }

	      #payment-form .payment-left,
	      #payment-form .payment-code-panel {
	        gap: 10px;
	      }

	      #payment-form .payment-meta-grid {
	        grid-template-columns: 1fr;
	        gap: 10px;
	      }

	      #payment-form input,
	      #payment-form select,
	      #payment-form textarea,
	      #payment-form .payment-amount-input {
	        min-height: 42px;
	        height: 42px;
	        padding: 8px 10px;
	        font-size: 15px;
	      }

	      #payment-form input[type="date"] {
	        appearance: none;
	        -webkit-appearance: none;
	        min-inline-size: 0;
	      }

	      #payment-form .payment-amount-input {
	        font-weight: 760;
	      }

	      #payment-form textarea {
	        min-height: 68px;
	        height: 68px;
	      }

      .toast-root {
        right: 12px;
        left: 12px;
        bottom: calc(86px + env(safe-area-inset-bottom));
      }

      .toast {
        max-width: none;
      }
    }

    /* Lyra system-interface polish pass — customer operations, June 2026 */
    :root {
      --bg: #eef3f2;
      --surface-raised: #fbfdfc;
      --ink-soft: #34413f;
      --line: #d5dfdc;
      --line-strong: #b8c7c3;
      --primary: #0b6f68;
      --primary-dark: #084e49;
      --primary-soft: #dcefed;
      --accent: #365caa;
      --accent-soft: #e5ecff;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --shadow-sm: 0 1px 0 rgba(20,32,31,.04), 0 8px 22px rgba(20,32,31,.06);
      --shadow-md: 0 18px 38px rgba(20,32,31,.11);
      --shadow: var(--shadow-md);
    }

    body { background: radial-gradient(circle at 72% -8%, rgba(11,111,104,.09), transparent 28%), var(--bg); }
    .auth-shell { background: radial-gradient(circle at 18% 12%, rgba(11,111,104,.16), transparent 34%), linear-gradient(135deg, #edf4f2 0%, #f8fbfa 58%, #e6eeeb 100%); }
    .auth-panel { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
    .auth-brand { background: linear-gradient(155deg, #0a4f4a 0%, #0d766e 68%, #16887e 100%); color: white; min-height: 360px; position: relative; overflow: hidden; }
    .auth-brand::after { content: ""; position: absolute; right: -54px; bottom: -72px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none; }
    .auth-brand h1 { max-width: 9ch; color: #fff; text-wrap: balance; }
    .auth-brand h1.brand-title { max-width: none; text-wrap: auto; }
    .auth-brand p { color: rgba(255,255,255,.82); font-weight: 560; }
    .auth-kicker { display: inline-flex; margin-bottom: 18px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.36); border-radius: 999px; color: rgba(255,255,255,.84); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }

    .app-shell { background: var(--bg); }
    .sidebar { background: linear-gradient(180deg, #f9fcfb 0%, #eef5f3 100%); border-right-color: var(--line-strong); box-shadow: 1px 0 0 rgba(255,255,255,.8) inset; }
    .brand-lockup { min-height: 60px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
    .brand-mark { box-shadow: 0 8px 18px rgba(11,95,89,.18); }
    .nav-group-label { letter-spacing: .06em; text-transform: uppercase; }
    .nav-button { border-radius: var(--radius-md); font-weight: 680; color: var(--ink-soft); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease; }
    .nav-button:hover { background: #e8f0ee; transform: translateX(1px); }
    .nav-button.active { background: #d8ece9; color: var(--primary-dark); border-color: #a9d5cf; box-shadow: inset 3px 0 0 var(--primary); }

    .main { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 160px); }
    .topbar { background: rgba(253,255,254,.92); backdrop-filter: blur(12px); border-bottom-color: var(--line-strong); box-shadow: 0 8px 26px rgba(20,32,31,.05); }
    .page-title { letter-spacing: -.02em; }
    .topbar-meta { color: var(--muted); font-variant-numeric: tabular-nums; }
    .content { padding: 24px; gap: 22px; }
    .content-band { gap: 14px; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; min-height: 34px; }
    .section-heading h2 { margin: 2px 0 0; font-size: 19px; letter-spacing: -.01em; }
    .section-kicker { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

    .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ops-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-card, .customer-card, .notice-card, .record-panel, .staff-card, .sales-summary-card, .sales-profile-panel, .sales-shareholder-panel, .sales-data-panel, .sales-customer-panel, .excel-panel { border-color: var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    .stat-card { min-height: 118px; background: linear-gradient(180deg, #fff 0%, #f9fbfa 100%); position: relative; overflow: hidden; }
    .stat-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--primary), rgba(11,111,104,.12)); }
    .ops-stats-grid .stat-card.exposure-card { grid-column: 1 / -1; min-height: 82px; display: grid; gap: 6px; align-content: center; justify-items: center; text-align: center; }
    .ops-stats-grid .stat-card.exposure-card strong { width: 100%; text-align: center; font-size: clamp(22px, 2.8vw, 32px); overflow-wrap: normal; white-space: nowrap; }
    .stat-card strong, .summary-lines strong, .sales-data-cell strong, td { font-variant-numeric: tabular-nums; }
    .sales-summary-grid { gap: 14px; }
    .sales-summary-card { padding: 18px; background: #fff; overflow: hidden; }
    .donut { background: conic-gradient(var(--primary) calc(var(--percent) * 1%), #dfe9e6 0); box-shadow: inset 0 0 0 1px rgba(11,111,104,.08); }
    .donut-inner { color: var(--primary-dark); box-shadow: inset 0 0 0 1px #cfdfdb; }
    .sales-profile-panel, .sales-shareholder-panel, .sales-data-panel, .sales-customer-panel { border-color: var(--line-strong); background: var(--surface); }
    .sales-data-cell { background: linear-gradient(180deg, #fff, #fbfdfc); }
    .sales-data-cell.overdue strong { color: var(--danger); }
    .sales-data-cell.positive strong { color: var(--ok); }
    .filter-bar { padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: rgba(255,255,255,.78); box-shadow: var(--shadow-sm); }

    .customer-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
    .customer-card { position: relative; background: #fff; min-height: 318px; transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease; }
    .customer-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .customer-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--primary); }
    .customer-card[data-status="overdue"]::before { background: var(--danger); }
    .customer-card[data-status="today"]::before, .customer-card[data-status="soon"]::before { background: var(--warn); }
    .customer-card[data-status="settled"]::before { background: var(--accent); }
    .customer-card.inactive-card { opacity: 1; background: #fffafa; border-color: #e7b8b8; }
    .customer-card.inactive-card::before, .customer-card[data-status="inactive"]::before { background: #b26868; }
    .customer-card .card-head { padding-left: 20px; background: linear-gradient(180deg, #fff, #fbfdfc); }
    .customer-card h3 { font-size: 19px; letter-spacing: -.01em; }
    .phone-line { color: var(--ink); font-variant-numeric: tabular-nums; }
    .card-meta-line { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
    .bar-copy strong { font-size: 16px; font-variant-numeric: tabular-nums; }
    .bar-track { height: 10px; border-radius: 999px; background: #edf4f2; }
    .bar-fill.principal { background: linear-gradient(90deg, #7fcaa7, #2b9a78); }
    .bar-fill.interest { background: linear-gradient(90deg, #f0c85f, #c98115); }
    .due-line { border-top-style: dashed; }
    .card-actions { background: #fbfdfc; }
    .card-actions .btn[data-action="open-payment"] { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 820; }
    .card-actions .btn[data-action="open-payment"]:hover { background: var(--primary-dark); }
    .card-actions .btn.danger { background: transparent; color: #8f2525; border-color: #e3b8b8; }

    .pill { border: 1px solid transparent; font-weight: 830; }
    .pill.ok { border-color: #b7e4c8; }
    .pill.soon, .pill.today { border-color: #efd69b; }
    .pill.overdue, .pill.danger { border-color: #efb5b5; }
    .pill.settled { border-color: #c7d4ff; }

    .record-panel { background: #fff; }
	    .record-panel.table-wrap { overflow-x: auto; overflow-y: hidden; }
	    table { min-width: max(760px, 100%); table-layout: auto; }
	    .audit-table { min-width: max(860px, 100%); }
	    .excel-panel table, .payment-record-table { min-width: max(920px, 100%); }
	    .excel-panel .staff-management-table { min-width: 1080px; }
    th { position: sticky; top: 0; z-index: 1; background: #edf4f2; color: #3d4d4a; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
    td { color: var(--ink-soft); overflow-wrap: normal; word-break: normal; }
    td:nth-child(3), td:nth-child(4), td:nth-child(5), td:nth-child(6) { white-space: nowrap; }
    tbody tr:hover td { background: #f7fbfa; }
    .selectable-table tbody tr.row-selected td {
      background: #f7fbfa;
    }
	    details { border-color: var(--line-strong); background: #f7fbfa; }
	    .audit-table details {
	      display: inline-grid;
	      min-width: max-content;
	      padding: 0;
	      border: 0;
	      background: transparent;
	    }
	    .audit-table summary {
	      min-height: 32px;
	      display: inline-flex;
	      align-items: center;
	      justify-content: center;
	      padding: 0 10px;
	      border: 1px solid var(--primary);
	      border-radius: var(--radius-md);
	      background: var(--primary);
	      color: #fff;
	      font-weight: 820;
	      white-space: nowrap;
	      list-style: none;
	    }
	    .audit-table summary::-webkit-details-marker {
	      display: none;
	    }
	    .audit-table details[open] summary {
	      margin-bottom: 8px;
	    }
	    pre { overflow-x: auto; white-space: pre-wrap; }

    .modal-backdrop { backdrop-filter: blur(5px); }
    .modal { border-radius: var(--radius-lg); border-color: var(--line-strong); }
    .modal-head, .modal-foot { background: #f7fbfa; }
    .detail-item, .preview-item, .payment-preview, .auto-field { border-color: var(--line-strong); border-radius: var(--radius-md); background: var(--surface-raised); }
    .payment-code-panel { background: linear-gradient(180deg, #fbfdfc, #f3f8f6); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; }

    .btn { border-radius: var(--radius-md); font-weight: 760; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(20,32,31,.08); }
    .btn:disabled { transform: none; box-shadow: none; }
    button:focus-visible, .btn:focus-visible, .nav-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(11,111,104,.26); outline-offset: 2px; }

    @media (max-width: 1080px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
	    @media (max-width: 820px) {
	      .sidebar { background: rgba(248,252,250,.98); box-shadow: 0 -12px 30px rgba(20,32,31,.12); }
	      .nav-button:hover { transform: none; }
	      .nav-button.active { box-shadow: inset 0 -3px 0 var(--primary); }
	      .content { padding: 18px 16px; }
	      .table-wrap { -webkit-overflow-scrolling: touch; }
	      .app-shell[data-view="payments"] .record-panel.table-wrap.excel-panel {
	        border: 0;
	        border-radius: 0;
	        box-shadow: none;
	        background: transparent;
	      }
	      .app-shell[data-view="customers"] .content {
	        padding-bottom: calc(150px + env(safe-area-inset-bottom));
	      }
      .app-shell[data-view="staff"] .content {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        min-height: calc(100dvh + 24px);
        padding-bottom: calc(132px + env(safe-area-inset-bottom));
      }

	      .app-shell[data-view="staff"] .content > *,
	      .app-shell[data-view="staff"] .content-band > *,
	      .app-shell[data-view="staff"] .assign-form,
	      .app-shell[data-view="staff"] .section-heading.action-heading,
	      .app-shell[data-view="staff"] .record-panel.table-wrap {
	        min-width: 0;
	        max-width: 100%;
	      }

	      .app-shell[data-view="staff"] .record-panel.table-wrap {
	        width: 100%;
	        overflow-x: auto;
	        overflow-y: hidden;
	        overscroll-behavior-x: contain;
	      }

	      .app-shell[data-view="staff"] .staff-management-table {
	        min-width: max(860px, 100%);
	      }
    }
    @media (max-width: 760px) {
      .auth-brand { min-height: 230px; }
      .auth-brand h1 { max-width: none; }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .customer-grid { grid-template-columns: 1fr; }
      .shareholder-payout-grid { grid-template-columns: 1fr; }
      .payment-code-panel { border-left: 1px solid var(--line); padding: 12px; }
    }
    @media (max-width: 520px) {
      .auth-panel, .auth-form, .auth-brand, #login-form, #login-form .field { min-width: 0; max-width: 100%; }
      .auth-form { padding-inline: 20px; overflow: hidden; }
      .auth-form input, .auth-form .btn.primary { width: 100%; max-width: 100%; }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat-card strong { font-size: 20px; }
      .customer-card .card-head { padding-left: 17px; }
      .card-meta-line { display: grid; gap: 4px; }
    }

    /* Mobile operations pass — compact topbar, stable bottom nav, sales drilldown */
    .nav-badge {
      position: absolute;
      top: -7px;
      right: -9px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border: 1px solid #fbfdfd;
      border-radius: 999px;
      background: #dc2626;
      color: #fff;
      display: inline-grid;
      place-items: center;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    .sales-summary-button {
      width: 100%;
      border: 1px solid var(--line-strong);
      color: inherit;
      text-align: left;
      cursor: pointer;
      font: inherit;
    }

    .sales-summary-button:hover {
      border-color: #99cfc8;
      transform: translateY(-1px);
    }

    .sales-preview-head {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 42px;
    }

    .sales-preview-head h2 {
      margin: 2px 0 0;
      font-size: 20px;
      line-height: 1.2;
    }

    .sales-preview-back {
      flex: 0 0 auto;
      min-height: 36px;
      padding-inline: 10px;
    }

    .shareholder-funds-button {
      min-height: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--primary-dark);
      font: inherit;
      font-weight: 820;
      text-align: left;
      justify-content: flex-start;
    }

    .shareholder-funds-button:hover {
      background: transparent;
      color: var(--primary);
      text-decoration: underline;
    }

    .shareholder-payout-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
      gap: 14px;
    }

    .shareholder-payout-card {
      display: grid;
      gap: 14px;
      padding: 16px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow-sm);
    }

    .shareholder-payout-card header,
    .shareholder-payout-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .shareholder-payout-card h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.2;
    }

	    .shareholder-loan-count,
	    .shareholder-payout-more {
	      appearance: none;
	      border: 0;
	      background: transparent;
	      padding: 0;
	      color: var(--muted);
	      font: inherit;
	      font-size: 12px;
	      font-weight: 720;
	      text-align: left;
	      cursor: pointer;
	    }

	    .shareholder-loan-count:hover,
	    .shareholder-payout-more:hover {
	      color: var(--primary-dark);
	      text-decoration: underline;
	    }

    .shareholder-payout-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .shareholder-payout-loans {
      display: grid;
      gap: 6px;
      padding-top: 4px;
      border-top: 1px dashed var(--line);
    }

		    .shareholder-payout-loans > div {
		      display: grid;
		      grid-template-columns: minmax(0, 1fr) auto auto;
		      align-items: center;
		      gap: 10px;
		      min-height: 28px;
		      color: var(--ink-soft);
		      font-size: 13px;
		    }

	    .shareholder-payout-actions {
	      justify-content: flex-start;
	    }

	    .shareholder-payout-actions .field-hint {
	      margin-right: auto;
	    }

	    .shareholder-payment-action,
	    .shareholder-record-action {
	      min-height: 42px;
	      padding-inline: 14px;
	    }

		    .shareholder-payout-loans span {
		      min-width: 0;
		      overflow: hidden;
		      text-overflow: ellipsis;
		      white-space: nowrap;
		    }

		    .shareholder-payout-rate {
		      color: var(--primary-dark);
		      font-size: 12px;
		      font-weight: 820;
		      white-space: nowrap;
		    }

		    .shareholder-payout-loans strong {
		      color: var(--ink);
		      white-space: nowrap;
		      font-variant-numeric: tabular-nums;
		    }

    .selectable-table tfoot td {
      background: #edf4f2;
      color: var(--ink);
      font-weight: 850;
      border-top: 1px solid var(--line-strong);
    }

    @media (max-width: 820px) {
      .nav {
        scroll-snap-type: none;
        scroll-behavior: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

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

      .nav-button {
        scroll-snap-align: none;
      }

      .sidebar {
        border-bottom: 0;
      }

      .nav-button.active {
        box-shadow: inset 0 -3px 0 var(--primary);
        background: #d8ece9;
        border-color: #a9d5cf;
      }
    }

    @media (max-width: 520px) {
      .topbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 56px;
        padding: calc(8px + env(safe-area-inset-top)) 10px 8px;
        gap: 8px;
      }

      .topbar > div:first-child {
        min-width: 0;
        display: flex;
        align-items: center;
      }

      .page-title,
      .page-title.notice-title {
        min-height: 34px;
        display: flex;
        align-items: center;
        font-size: 20px;
        line-height: 1.15;
        white-space: nowrap;
      }

      .topbar-actions {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        min-width: 0;
      }

      .topbar-meta {
        order: 0;
        display: grid;
        justify-items: end;
        gap: 1px;
        max-width: 128px;
        font-size: 10px;
        line-height: 1.15;
        text-align: right;
      }

      .topbar-meta span {
        max-width: 128px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .topbar-meta .topbar-account-badge {
        order: 1;
        min-height: 32px;
        max-width: 128px;
        gap: 6px;
        padding: 3px 7px;
      }

      .topbar-meta .topbar-clock {
        order: 2;
      }

      .topbar-account-badge i {
        width: 14px;
        height: 14px;
      }

      .topbar-account-copy {
        max-width: 82px;
      }

      .topbar-account-copy strong {
        font-size: 11px;
      }

      .topbar-account-copy small {
        display: none;
      }

      .topbar-logout {
        order: 1;
        min-height: 32px;
        padding: 0 8px;
        font-size: 11px;
        white-space: nowrap;
      }

	      .app-shell[data-view="staff"] .content {
	        padding-inline: 10px;
	      }

	      .app-shell[data-view="staff"] .section-heading.action-heading {
	        display: grid;
	        grid-template-columns: 1fr;
	        justify-content: stretch;
	      }

	      .app-shell[data-view="staff"] .section-heading.action-heading .btn,
	      .app-shell[data-view="staff"] .assign-form > .btn {
	        width: 100%;
	      }

		      .app-shell[data-view="staff"] .assign-company-ratio {
		        width: 100%;
		      }

      .ops-summary-band {
        gap: 8px;
      }

      .ops-summary-band .section-heading h2 {
        font-size: 16px;
      }

      .ops-summary-band .section-kicker {
        font-size: 10px;
      }

      .ops-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      .ops-stats-grid .stat-card {
        min-height: 58px;
        padding: 7px 5px;
        border-radius: 8px;
      }

      .ops-stats-grid .stat-card span {
        font-size: 10px;
        line-height: 1.15;
      }

      .ops-stats-grid .stat-card strong {
        font-size: clamp(13px, 4vw, 17px);
        line-height: 1.15;
        overflow-wrap: anywhere;
      }

      .ops-stats-grid .stat-card.exposure-card {
        grid-column: 1 / -1;
        min-height: 54px;
        gap: 6px;
        align-content: center;
        justify-items: center;
        text-align: center;
      }

      .ops-stats-grid .stat-card.exposure-card strong {
        text-align: center;
        font-size: clamp(18px, 6vw, 24px);
        overflow-wrap: normal;
        white-space: nowrap;
      }

      .sales-summary-grid {
        grid-template-columns: 1fr;
      }

      .sales-summary-card {
        min-height: 118px;
        grid-template-columns: minmax(0, 1fr) 64px;
        padding: 12px;
      }

      .sales-summary-card h3 {
        font-size: 16px;
      }

      .donut {
        width: 62px;
        height: 62px;
      }

      .donut-inner {
        width: 44px;
        height: 44px;
        font-size: 13px;
      }

      .sales-preview-head {
        align-items: flex-start;
        gap: 10px;
      }

      .sales-preview-head h2 {
        font-size: 18px;
      }

      .sales-preview-back {
        min-height: 34px;
      }

      .notification-setup-heading {
        gap: 8px;
      }

      .notification-setup-heading h2 {
        font-size: 16px;
        line-height: 1.2;
      }

	      .notification-setup-btn {
	        min-height: 30px;
	        padding: 0 8px;
	        font-size: 11px;
	        white-space: nowrap;
	      }

      .notification-setup-heading .notification-compat-note {
        font-size: 11px;
      }
	    }

    /* Arden login restraint correction — keep mature app CSS, simplify only entry screen */
    .auth-shell {
      background: linear-gradient(180deg, rgba(15, 118, 110, 0.06), transparent 34%), var(--bg);
    }

    .auth-panel {
      width: min(860px, 100%);
      grid-template-columns: minmax(240px, 0.72fr) minmax(320px, 1fr);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
    }

    .auth-brand {
      min-height: 0;
      padding: 34px;
      background: linear-gradient(180deg, #f8fbfb, #edf5f4);
      color: var(--ink);
      border-right: 1px solid var(--line);
      overflow: hidden;
    }

    .auth-brand::after,
    .auth-kicker {
      display: none !important;
    }

    .auth-brand h1 {
      max-width: 8ch;
      margin: 0 0 10px;
      color: var(--ink);
      font-size: clamp(30px, 3.8vw, 42px);
      line-height: 1.08;
      letter-spacing: -0.02em;
    }

    .auth-brand p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.5;
    }

    .auth-form {
      padding: 34px;
      background: var(--surface);
    }

    .theme-settings-panel {
      max-width: 760px;
    }

    .theme-setting-row {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      gap: 16px;
      align-items: center;
      min-height: 58px;
      padding: 10px 0;
    }

    .theme-toggle-line {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }

    .theme-toggle {
      position: relative;
      display: inline-flex;
      flex: 0 0 auto;
    }

    .theme-toggle input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    .theme-toggle-track {
      position: relative;
      width: 104px;
      height: 36px;
      padding: 4px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: var(--surface-2);
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      justify-items: center;
    }

    .theme-toggle-track i,
    .theme-toggle-track svg {
      width: 16px;
      height: 16px;
      z-index: 1;
      color: var(--muted);
    }

    .theme-toggle-thumb {
      position: absolute;
      left: 3px;
      top: 50%;
      width: 46px;
      height: 28px;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: 0 4px 12px rgba(20, 32, 31, 0.12);
      transform: translateY(-50%);
      transition: transform 140ms ease, background-color 140ms ease;
      z-index: 0;
    }

    .theme-toggle input:checked + .theme-toggle-track .theme-toggle-thumb {
      transform: translate(50px, -50%);
      background: #17201f;
    }

    .theme-toggle input:checked + .theme-toggle-track .theme-icon-moon,
    .theme-toggle input:not(:checked) + .theme-toggle-track .theme-icon-sun {
      color: var(--primary);
    }

    .theme-toggle input:focus-visible + .theme-toggle-track {
      outline: 3px solid rgba(11,111,104,.26);
      outline-offset: 2px;
    }

    .theme-mode-text {
      color: var(--muted);
      font-size: 13px;
      font-weight: 760;
      white-space: nowrap;
    }

    :root[data-theme="dark"] {
      --bg: #121918;
      --surface: #1b2422;
      --surface-2: #24302e;
      --surface-raised: #202a28;
      --ink: #edf5f3;
      --ink-soft: #c8d4d1;
      --muted: #98a8a4;
      --line: #31413d;
      --line-strong: #465c56;
      --primary: #4ccbc0;
      --primary-dark: #8be0d8;
      --primary-soft: #173f3b;
      --accent: #9aa8ff;
      --accent-soft: #252b4c;
      --warn: #f3b554;
      --warn-soft: #3a2b12;
      --danger: #fca5a5;
      --danger-soft: #3a1d1d;
      --ok: #7ddf9f;
      --ok-soft: #173523;
      --shadow-sm: 0 1px 0 rgba(255,255,255,.03), 0 10px 26px rgba(0,0,0,.24);
      --shadow-md: 0 18px 42px rgba(0,0,0,.32);
      --shadow: var(--shadow-md);
      color-scheme: dark;
    }

    :root[data-theme="dark"] body {
      background: radial-gradient(circle at 72% -8%, rgba(76,203,192,.08), transparent 30%), var(--bg);
    }

    :root[data-theme="dark"] .auth-shell {
      background: linear-gradient(180deg, rgba(76,203,192,.06), transparent 34%), var(--bg);
    }

    :root[data-theme="dark"] .auth-brand,
    :root[data-theme="dark"] .auth-form,
    :root[data-theme="dark"] .auth-panel,
    :root[data-theme="dark"] th,
    :root[data-theme="dark"] .auto-field,
    :root[data-theme="dark"] .assign-form .field > strong,
    :root[data-theme="dark"] .sales-table-head {
      background: var(--surface);
      color: var(--ink);
    }

    :root[data-theme="dark"] .sidebar {
      background: linear-gradient(180deg, #18211f 0%, #121918 100%);
      box-shadow: 1px 0 0 rgba(255,255,255,.04) inset;
    }

    :root[data-theme="dark"] .main {
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 160px);
    }

    :root[data-theme="dark"] .topbar {
      background: rgba(24, 33, 31, 0.92);
      box-shadow: 0 8px 26px rgba(0,0,0,.18);
    }

    :root[data-theme="dark"] .brand-mark {
      background: rgba(255,255,255,.9);
      border-color: rgba(255,255,255,.16);
      box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.28);
    }

    :root[data-theme="dark"] .nav-button:hover {
      background: var(--surface-2);
    }

    :root[data-theme="dark"] .nav-button.active {
      background: #173f3b;
      color: #9ce9e1;
      border-color: #2f6962;
    }

    :root[data-theme="dark"] input,
    :root[data-theme="dark"] select,
    :root[data-theme="dark"] textarea,
    :root[data-theme="dark"] .inline-wheel-face,
    :root[data-theme="dark"] .inline-wheel-dropdown,
    :root[data-theme="dark"] .card-meta-line,
    :root[data-theme="dark"] .detail-item,
    :root[data-theme="dark"] .preview-item,
    :root[data-theme="dark"] .payment-preview {
      background: var(--surface-raised);
      color: var(--ink);
    }

    :root[data-theme="dark"]

	    :root[data-theme="dark"] .empty-state {
	      border-color: rgba(139, 224, 216, 0.24);
	      background: rgba(32, 42, 40, 0.74);
	      color: var(--muted);
	      box-shadow: inset 0 0 0 1px rgba(76, 203, 192, 0.08);
	    }

    :root[data-theme="dark"] .btn.danger {
      background: #321c1c;
      border-color: #743b3b;
      color: #fca5a5;
    }

	    :root[data-theme="dark"] .btn:disabled {
	      background: #202827;
	      color: var(--muted);
	    }

	    :root[data-theme="dark"] input[type="checkbox"] {
	      accent-color: var(--primary);
	    }

	    :root[data-theme="dark"],
	    :root[data-theme="dark"] body,
	    :root[data-theme="dark"] #app {
	      background-color: var(--bg);
	    }

	    :root[data-theme="dark"] .app-shell {
	      background: var(--bg);
	    }

	    :root[data-theme="dark"] .main {
	      background: linear-gradient(180deg, #101716 0%, var(--bg) 120px);
	    }

	    :root[data-theme="dark"] .topbar {
	      background: rgba(16, 23, 22, 0.96);
	      border-bottom-color: rgba(139, 224, 216, 0.22);
	      box-shadow: 0 8px 26px rgba(0,0,0,.24);
	    }

	    :root[data-theme="dark"] .topbar-account-badge {
	      border-color: rgba(139, 224, 216, 0.28);
	      background: #202a28;
	      color: var(--ink);
	      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
	    }

	    :root[data-theme="dark"] .topbar-account-badge i {
	      color: var(--primary);
	    }

	    :root[data-theme="dark"] .topbar-account-copy strong {
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .topbar-account-copy small {
	      color: #a9bbb7;
	    }

	    :root[data-theme="dark"] .filter-bar {
	      border-color: rgba(139, 224, 216, 0.26);
	      background: rgba(27, 36, 34, 0.82);
	      box-shadow:
	        0 0 0 1px rgba(76, 203, 192, 0.12),
	        0 12px 28px rgba(0,0,0,.24);
	    }

	    :root[data-theme="dark"] .filter-bar input,
	    :root[data-theme="dark"] .filter-bar select,
	    :root[data-theme="dark"] #customer-search {
	      border-color: rgba(139, 224, 216, 0.28);
	      background: #202a28;
	      color: var(--ink);
	      box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
	    }

	    :root[data-theme="dark"] .inline-wheel-option + .inline-wheel-option {
	      border-top-color: rgba(70, 92, 86, 0.72);
	    }

	    :root[data-theme="dark"] .inline-wheel-option:hover,
	    :root[data-theme="dark"] .inline-wheel-option.is-selected {
	      background: var(--primary-soft);
	      color: var(--primary-dark);
	    }

	    :root[data-theme="dark"] .inline-wheel-fade.top {
	      background: linear-gradient(rgba(27,36,34,0.96), rgba(27,36,34,0));
	    }

	    :root[data-theme="dark"] .inline-wheel-fade.bottom {
	      background: linear-gradient(rgba(27,36,34,0), rgba(27,36,34,0.9));
	    }

	    :root[data-theme="dark"] .inline-wheel-center {
	      background: rgba(23, 63, 59, 0.34);
	      border-color: rgba(139, 224, 216, 0.22);
	    }

	    :root[data-theme="dark"] #customer-search::placeholder {
	      color: #7f928e;
	    }

	    :root[data-theme="dark"] .modal,
	    :root[data-theme="dark"] .modal-body {
	      background: var(--surface);
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .modal-head,
	    :root[data-theme="dark"] .modal-foot {
	      border-color: rgba(139, 224, 216, 0.2);
	      background: #202a28;
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .file-upload-control,
	    :root[data-theme="dark"] .attachment-thumb {
	      background: #202a28;
	      border-color: rgba(139, 224, 216, 0.28);
	    }

	    :root[data-theme="dark"] .attachment-card {
	      background: var(--surface-raised);
	      border-color: rgba(139, 224, 216, 0.24);
	    }

	    :root[data-theme="dark"] .payment-code-panel {
	      border-color: rgba(139, 224, 216, 0.22);
	      background: linear-gradient(180deg, #202a28, #1b2422);
	    }

	    :root[data-theme="dark"] .date-presets button {
	      border-color: rgba(139, 224, 216, 0.24);
	      background: #202a28;
	      color: var(--ink-soft);
	    }

	    :root[data-theme="dark"] .date-presets button:hover {
	      border-color: rgba(139, 224, 216, 0.44);
	      background: #24302e;
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .btn {
	      border-color: var(--line-strong);
	      background: var(--surface-raised);
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .demo-login-button small {
	      color: var(--muted);
	    }

	    :root[data-theme="dark"] .btn:hover {
	      background: #263331;
	      border-color: rgba(139, 224, 216, 0.36);
	    }

	    :root[data-theme="dark"] .btn.primary {
	      border-color: var(--primary);
	      background: var(--primary);
	      color: #071312;
	    }

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

	    :root[data-theme="dark"] .staff-settings-btn,
	    :root[data-theme="dark"] .card-actions .btn[data-action="open-payment"],
	    :root[data-theme="dark"] .audit-table summary {
	      border-color: var(--primary);
	      background: var(--primary);
	      color: #071312;
	      font-weight: 820;
	    }

	    :root[data-theme="dark"] .staff-settings-btn:hover,
	    :root[data-theme="dark"] .card-actions .btn[data-action="open-payment"]:hover,
	    :root[data-theme="dark"] .audit-table summary:hover {
	      border-color: var(--primary-dark);
	      background: var(--primary-dark);
	      color: #071312;
	    }

	    :root[data-theme="dark"] .verification-field.invalid input {
	      border-color: #fca5a5;
	      background: #321c1c;
	      color: var(--ink);
	    }

		    :root[data-theme="dark"] .customer-card,
		    :root[data-theme="dark"] .stat-card,
		    :root[data-theme="dark"] .sales-summary-card,
	    :root[data-theme="dark"] .notice-card,
	    :root[data-theme="dark"] .record-panel,
	    :root[data-theme="dark"] .staff-card,
	    :root[data-theme="dark"] .shareholder-payout-card,
	    :root[data-theme="dark"] .sales-profile-panel,
	    :root[data-theme="dark"] .sales-shareholder-panel,
	    :root[data-theme="dark"] .sales-data-panel,
	    :root[data-theme="dark"] .sales-customer-panel,
	    :root[data-theme="dark"] .excel-panel {
	      border-color: rgba(139, 224, 216, 0.24);
	      background: #1b2422;
	      box-shadow:
	        0 0 0 1px rgba(76, 203, 192, 0.13),
		        0 14px 30px rgba(0,0,0,.28);
		    }

		    :root[data-theme="dark"] .sales-data-cell {
		      border-color: rgba(139, 224, 216, 0.18);
		      background: linear-gradient(180deg, #202a28 0%, #1b2422 100%);
		      color: var(--ink);
		    }

	    :root[data-theme="dark"] .selectable-table tfoot td {
	      border-color: rgba(139, 224, 216, 0.22);
	      background: #202a28;
	      color: var(--ink);
	    }

		    :root[data-theme="dark"] .sales-data-cell span {
		      color: var(--muted);
		    }

		    :root[data-theme="dark"] .sales-data-cell strong {
		      color: var(--ink);
		    }

		    :root[data-theme="dark"] .sales-data-cell.overdue strong {
		      color: #ff8686;
		    }

	    :root[data-theme="dark"] .sales-shareholder-card {
	      border-color: rgba(139, 224, 216, 0.18);
	      background: #202a28;
	    }

	    :root[data-theme="dark"] .customer-card:hover {
	      border-color: rgba(139, 224, 216, 0.38);
	      box-shadow:
	        0 0 0 1px rgba(76, 203, 192, 0.22),
	        0 18px 38px rgba(0,0,0,.36);
	    }

	    :root[data-theme="dark"] .customer-card .card-head,
	    :root[data-theme="dark"] .card-actions {
	      border-color: rgba(139, 224, 216, 0.18);
	      background: #202a28;
	    }

	    :root[data-theme="dark"] .card-body {
	      background: #1b2422;
	    }

	    :root[data-theme="dark"] .card-meta-line,
	    :root[data-theme="dark"] .metric,
	    :root[data-theme="dark"] .auto-field {
	      border-color: rgba(139, 224, 216, 0.18);
	      background: #24302e;
	      color: var(--ink-soft);
	    }

	    :root[data-theme="dark"] .phone-line,
	    :root[data-theme="dark"] .customer-card h3,
	    :root[data-theme="dark"] .bar-copy strong,
	    :root[data-theme="dark"] .summary-lines strong {
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .customer-card .subline,
	    :root[data-theme="dark"] .id-line,
	    :root[data-theme="dark"] .due-line,
	    :root[data-theme="dark"] .bar-copy span,
	    :root[data-theme="dark"] .card-meta-line {
	      color: var(--muted);
	    }

	    :root[data-theme="dark"] .bar-track {
	      border-color: rgba(139, 224, 216, 0.16);
	      background: #121918;
	    }

	    :root[data-theme="dark"] .customer-card.inactive-card {
	      border-color: rgba(252, 165, 165, 0.62);
	      background: linear-gradient(180deg, #3a2424 0%, #271b1b 100%);
	      box-shadow:
	        0 0 0 1px rgba(252, 165, 165, 0.26),
	        0 0 24px rgba(185, 28, 28, 0.2),
	        0 14px 30px rgba(0,0,0,.3);
	    }

	    :root[data-theme="dark"] .customer-card.inactive-card::before,
	    :root[data-theme="dark"] .customer-card[data-status="inactive"]::before {
	      width: 7px;
	      background: #ef6b6b;
	      box-shadow: 0 0 18px rgba(239, 107, 107, 0.46);
	    }

	    :root[data-theme="dark"] .customer-card[data-status="soon"],
	    :root[data-theme="dark"] .customer-card[data-status="today"] {
	      border-color: rgba(243, 181, 84, 0.58);
	      background: linear-gradient(180deg, #33281b 0%, #211c15 100%);
	      box-shadow:
	        0 0 0 1px rgba(243, 181, 84, 0.22),
	        0 0 22px rgba(180, 83, 9, 0.18),
	        0 14px 30px rgba(0,0,0,.28);
	    }

	    :root[data-theme="dark"] .customer-card[data-status="soon"]::before,
	    :root[data-theme="dark"] .customer-card[data-status="today"]::before {
	      width: 7px;
	      background: #f3b554;
	      box-shadow: 0 0 18px rgba(243, 181, 84, 0.42);
	    }

	    :root[data-theme="dark"] .customer-card[data-status="soon"] .card-head,
	    :root[data-theme="dark"] .customer-card[data-status="today"] .card-head,
	    :root[data-theme="dark"] .customer-card[data-status="soon"] .card-actions,
	    :root[data-theme="dark"] .customer-card[data-status="today"] .card-actions {
	      border-color: rgba(243, 181, 84, 0.3);
	      background: rgba(55, 42, 24, 0.9);
	    }

	    :root[data-theme="dark"] .customer-card[data-status="soon"] .card-body,
	    :root[data-theme="dark"] .customer-card[data-status="today"] .card-body {
	      background: rgba(34, 28, 20, 0.98);
	    }

	    :root[data-theme="dark"] .customer-card[data-status="soon"] .card-meta-line,
	    :root[data-theme="dark"] .customer-card[data-status="today"] .card-meta-line {
	      border-color: rgba(243, 181, 84, 0.25);
	      background: rgba(46, 37, 24, 0.86);
	    }

	    :root[data-theme="dark"] .customer-card.inactive-card .card-head,
	    :root[data-theme="dark"] .customer-card.inactive-card .card-actions {
	      border-color: rgba(252, 165, 165, 0.36);
	      background: rgba(63, 38, 38, 0.92);
	    }

	    :root[data-theme="dark"] .customer-card.inactive-card .card-body {
	      background: rgba(43, 29, 29, 0.98);
	    }

	    :root[data-theme="dark"] .customer-card.inactive-card .card-meta-line {
	      border-color: rgba(252, 165, 165, 0.3);
	      background: rgba(50, 37, 35, 0.9);
	    }

	    :root[data-theme="dark"] .card-actions .btn:not(.primary):not([data-action="open-payment"]) {
	      border-color: rgba(139, 224, 216, 0.18);
	      background: #24302e;
	      color: var(--ink);
	    }

	    :root[data-theme="dark"] .btn.delete-customer-btn,
	    :root[data-theme="dark"] .btn.delete-user-btn,
	    :root[data-theme="dark"] .btn.delete-confirm-btn,
	    :root[data-theme="dark"] .card-actions .btn.delete-customer-btn,
	    :root[data-theme="dark"] .customer-card.inactive-card .card-actions .btn.delete-customer-btn,
	    :root[data-theme="dark"] .customer-card[data-status="inactive"] .card-actions .btn.delete-customer-btn {
	      border-color: rgba(252, 165, 165, 0.62);
	      background: #b91c1c;
	      color: #fff;
	      box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.16);
	    }

	    :root[data-theme="dark"] .btn.delete-customer-btn:hover,
	    :root[data-theme="dark"] .btn.delete-user-btn:hover,
	    :root[data-theme="dark"] .btn.delete-confirm-btn:hover,
	    :root[data-theme="dark"] .card-actions .btn.delete-customer-btn:hover,
	    :root[data-theme="dark"] .customer-card.inactive-card .card-actions .btn.delete-customer-btn:hover,
	    :root[data-theme="dark"] .customer-card[data-status="inactive"] .card-actions .btn.delete-customer-btn:hover {
	      background: #991b1b;
	      border-color: rgba(252, 165, 165, 0.74);
	    }

	    :root[data-theme="dark"] .excel-panel {
	      border-color: rgba(139, 224, 216, 0.24);
	    }

	    :root[data-theme="dark"] .excel-panel th,
	    :root[data-theme="dark"] .excel-panel td {
	      border-color: rgba(139, 224, 216, 0.18);
	    }

	    :root[data-theme="dark"] .audit-table details[open] {
	      background: transparent;
	    }

	    :root[data-theme="dark"] .audit-table pre {
	      border-color: rgba(139, 224, 216, 0.18);
	      color: var(--ink-soft);
	    }

		    :root[data-theme="dark"] .selectable-table tbody tr:hover td,
		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td {
		      background: #f7fbfa;
		      color: #111827;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td {
		      border-color: #111827;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td > *:not(.table-actions):not(.btn):not(.pill) {
		      color: #111827;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td a,
		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td span:not(.pill),
		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td strong,
		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td pre {
		      color: #111827;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill {
		      color: var(--muted);
		      background: #eef4f3;
		      border-color: #cfd8d6;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.ok {
		      color: #15803d;
		      background: #dcfce7;
		      border-color: #b7e4c8;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.soon,
		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.today {
		      color: #b45309;
		      background: #fff2cf;
		      border-color: #efd69b;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.overdue,
		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.danger {
		      color: #b91c1c;
		      background: #fde2e2;
		      border-color: #efb5b5;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.settled {
		      color: #4f46e5;
		      background: #e8e7ff;
		      border-color: #c7d4ff;
		    }

		    :root[data-theme="dark"] .selectable-table tbody tr.row-selected td .pill.inactive {
		      color: #4b5563;
		      background: #e5e7eb;
		      border-color: #cbd5e1;
		    }

		    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .btn:not(.staff-settings-btn):not(.danger):not(.delete-user-btn) {
		      border-color: #cfd8d6;
		      background: #ffffff;
		      color: #111827;
		    }

		    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .btn.danger {
		      border-color: #991b1b;
		      background: #b91c1c;
		      color: #fff;
		    }

		    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .btn[data-action="view-sales-customers"],
		    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .btn[data-action="toggle-user"]:not(.danger) {
		      border-color: #0b6f68;
		      background: #0f766e;
		      color: #fff;
		    }

		    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .table-actions .btn[data-action="view-sales-customers"]:not(.staff-settings-btn):not(.danger):not(.delete-user-btn),
		    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .table-actions .btn[data-action="toggle-user"]:not(.staff-settings-btn):not(.danger):not(.delete-user-btn) {
		      border-color: #0b6f68;
		      background: #0f766e;
		      color: #fff;
		    }

	    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .staff-settings-btn {
	      border-color: #0b6f68;
	      background: #0b6f68;
	      color: #fff;
	    }

	    :root[data-theme="dark"] .staff-management-table tbody tr.row-selected td .delete-user-btn {
	      border-color: #991b1b;
	      background: #b91c1c;
	      color: #fff;
	    }

	    @media (max-width: 820px) {
	      :root {
	        --mobile-bottom-nav-space: calc(71px + env(safe-area-inset-bottom));
	      }

	      #app,
	      .app-shell {
	        height: 100dvh;
	        min-height: 0;
	        overflow: hidden;
	      }

	      .app-shell {
	        grid-template-rows: minmax(0, 1fr);
	      }

	      .main {
	        height: calc(100dvh - var(--mobile-bottom-nav-space));
	        max-height: calc(100dvh - var(--mobile-bottom-nav-space));
	        min-height: 0;
	        display: flex;
	        flex-direction: column;
	        overflow: hidden;
	        overscroll-behavior: none;
	        -webkit-overflow-scrolling: auto;
	        padding-bottom: 0;
	        scroll-padding-bottom: 0;
	      }

	      .topbar {
	        position: relative;
	        top: auto;
	        flex: 0 0 auto;
	        z-index: 45;
	      }

		      .content {
		        flex: 1 1 0;
		        min-height: 0;
		        height: 0;
		        align-content: start;
		        grid-auto-rows: max-content;
		        overflow-x: hidden;
		        overflow-y: auto;
		        overscroll-behavior-x: none;
		        overscroll-behavior-y: contain;
		        -webkit-overflow-scrolling: touch;
	        touch-action: pan-x pan-y;
	        padding-bottom: calc(128px + env(safe-area-inset-bottom));
		        scroll-padding-bottom: calc(118px + env(safe-area-inset-bottom));
		      }

		      .content > .content-band {
		        align-self: start;
		        align-content: start;
		      }

		      .app-shell[data-view="dashboard"] .content,
		      .app-shell[data-view="customers"] .content,
		      .app-shell[data-view="notifications"] .content,
	      .app-shell[data-view="payments"] .content,
	      .app-shell[data-view="staff"] .content,
	      .app-shell[data-view="audit"] .content,
	      .app-shell[data-view="settings"] .content {
	        min-height: 0;
	        padding-bottom: calc(128px + env(safe-area-inset-bottom));
	      }

	      .content > .content-band:last-child {
	        margin-bottom: 10px;
	      }

	      .app-shell[data-view="payments"] .record-panel.table-wrap.excel-panel,
	      :root[data-theme="dark"] .app-shell[data-view="payments"] .record-panel.table-wrap.excel-panel {
	        border: 0;
	        border-radius: 0;
	        box-shadow: none;
	        background: transparent;
	      }

	      .app-shell[data-view="notifications"] .notification-setup-heading {
	        min-height: auto;
		        display: grid;
		        grid-template-columns: minmax(0, 1fr) auto;
		        align-items: center;
		        justify-content: stretch;
		        gap: 10px;
		      }

		      .app-shell[data-view="notifications"] .notification-setup-heading h2 {
		        display: none;
		      }

		      .app-shell[data-view="notifications"] .notification-setup-heading .section-kicker {
		        letter-spacing: 0;
		        text-transform: none;
		      }

		      .app-shell[data-view="notifications"] .notification-setup-heading .notification-compat-note {
		        margin: 2px 0 0;
		        max-width: 100%;
		        white-space: nowrap;
		        overflow: hidden;
		        text-overflow: ellipsis;
		      }

		      .app-shell[data-view="notifications"] .notice-card {
		        min-height: 64px;
		        padding: 10px 12px;
		        display: grid;
		        grid-template-columns: minmax(0, 1fr) auto;
		        gap: 12px;
		        align-items: center;
		      }

		      .app-shell[data-view="notifications"] .notice-top {
		        flex-direction: row;
		        align-items: center;
		        gap: 10px;
		      }

		      .app-shell[data-view="notifications"] .notice-actions {
		        display: flex;
		        flex-wrap: nowrap;
		        justify-content: flex-end;
		        gap: 6px;
		      }

		      .app-shell[data-view="notifications"] .notice-actions .btn {
		        width: 34px;
		        min-width: 34px;
		        min-height: 32px;
		        padding: 0;
		        justify-content: center;
		        gap: 0;
		        white-space: nowrap;
		        font-size: 0;
		      }

		      .app-shell[data-view="notifications"] .notice-actions .btn i {
		        width: 15px;
		        height: 15px;
		      }
		    }

	    @media (max-width: 520px) {
	      .content,
	      .app-shell[data-view="dashboard"] .content,
	      .app-shell[data-view="customers"] .content,
	      .app-shell[data-view="notifications"] .content,
	      .app-shell[data-view="payments"] .content,
	      .app-shell[data-view="staff"] .content,
	      .app-shell[data-view="audit"] .content,
	      .app-shell[data-view="settings"] .content {
	        padding-bottom: calc(138px + env(safe-area-inset-bottom));
	      }
	    }

	    @media (max-width: 760px) {
	      .auth-shell {
	        place-items: center;
	        align-items: center;
	      }
      .auth-panel {
        grid-template-columns: 1fr;
        width: min(100%, calc(100vw - 28px));
        max-width: calc(100vw - 28px);
      }
      .auth-brand {
        padding: 22px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }
      .auth-brand h1 {
        max-width: none;
        font-size: 30px;
      }
      .auth-shell {
        padding: 14px;
      }
	      .theme-setting-row {
	        grid-template-columns: minmax(0, 1fr);
	        gap: 8px;
	      }
	    }

	    @media (max-width: 760px) {
	      .auth-shell {
	        min-height: 100dvh;
	        height: 100dvh;
	        align-content: center;
	        place-items: center;
	        gap: 18px;
	        padding: clamp(22px, 7dvh, 58px) 22px;
	        overflow-y: auto;
	        background: linear-gradient(180deg, #edf6f4 0%, #f7fbfa 100%);
	      }

	      .auth-panel {
	        width: min(100%, 360px);
	        max-width: 360px;
	        display: grid;
	        gap: 22px;
	        border: 0;
	        border-radius: 0;
	        background: transparent;
	        box-shadow: none;
	        overflow: visible;
	      }

	      .auth-brand {
	        min-height: 0;
	        padding: 0;
	        border: 0;
	        background: transparent;
	        color: var(--ink);
	        text-align: center;
	      }

	      .auth-brand::after,
	      .auth-brand p {
	        display: none !important;
	      }

	      .auth-brand h1 {
	        max-width: none;
	        margin: 0;
	        color: var(--ink);
	        font-size: 30px;
	        line-height: 1.18;
	        font-weight: 820;
	      }

	      .auth-form {
	        width: 100%;
	        padding: 0;
	        background: transparent;
	        overflow: visible;
	      }

	      #login-form {
	        width: 100%;
	        display: grid;
	        grid-template-columns: 1fr;
	        gap: 14px;
	      }

	      #login-form .field {
	        gap: 7px;
	      }

	      #login-form label {
	        color: #516360;
	        font-weight: 780;
	      }

	      #login-form input {
	        min-height: 48px;
	        border-color: #c9d8d5;
	        background: rgba(255, 255, 255, 0.74);
	        box-shadow: none;
	      }

	      #login-form .btn.primary {
	        min-height: 48px;
	        width: 100%;
	        box-shadow: none;
	      }

	      .demo-login-grid {
	        grid-template-columns: 1fr 1fr;
	      }

	      .demo-login-button {
	        justify-content: center;
	        padding-inline: 10px;
	      }

	      .demo-login-button small {
	        display: none;
	      }

	      :root[data-theme="dark"] .auth-shell {
	        background: linear-gradient(180deg, #121918 0%, #17201f 100%);
	      }

	      :root[data-theme="dark"] .auth-panel,
	      :root[data-theme="dark"] .auth-brand,
	      :root[data-theme="dark"] .auth-form {
	        background: transparent;
	      }

	      :root[data-theme="dark"] #login-form input,
	      :root[data-theme="dark"]

	      :root[data-theme="dark"] #login-form label,
	      :root[data-theme="dark"]
	    }

	    /* Unified mobile page shell: topbar stays outside the scrolling area on every role/view. */
	    @media (max-width: 820px) {
	      html,
	      body,
	      #app {
	        width: 100%;
	        height: 100%;
	        min-height: 100dvh;
	        overflow: hidden;
	        overscroll-behavior: none;
	      }

	      .app-shell {
	        height: 100dvh;
	        min-height: 0;
	        display: grid;
	        grid-template-columns: 1fr;
	        grid-template-rows: minmax(0, 1fr);
	        overflow: hidden;
	      }

	      .main {
	        height: calc(100dvh - var(--mobile-bottom-nav-space));
	        max-height: calc(100dvh - var(--mobile-bottom-nav-space));
	        min-height: 0;
	        display: flex;
	        flex-direction: column;
	        overflow: hidden;
	        overscroll-behavior: none;
	        -webkit-overflow-scrolling: auto;
	        touch-action: pan-x pan-y;
	        padding-bottom: 0;
	        scroll-padding-bottom: 0;
	      }

	      .topbar {
	        position: relative;
	        top: auto;
	        flex: 0 0 auto;
	        z-index: 45;
	      }

	      .content,
	      .app-shell .content {
	        flex: 1 1 0;
	        min-height: 0;
	        height: 0;
	        align-content: start;
	        grid-auto-rows: max-content;
	        overflow-x: hidden;
	        overflow-y: auto;
	        overscroll-behavior-x: none;
	        overscroll-behavior-y: contain;
	        -webkit-overflow-scrolling: touch;
	        touch-action: pan-x pan-y;
	        padding-bottom: calc(138px + env(safe-area-inset-bottom));
	        scroll-padding-bottom: calc(128px + env(safe-area-inset-bottom));
	      }

	      .content > .content-band {
	        align-self: start;
	        align-content: start;
	      }

	      .content > .content-band:last-child {
	        margin-bottom: 10px;
	      }
	    }

	    .stats-grid.ops-stats-grid {
	      grid-template-columns: repeat(3, minmax(0, 1fr));
	      width: 100%;
	    }

	    .stats-grid.ops-stats-grid .stat-card.exposure-card {
	      grid-column: 1 / -1;
	      justify-items: stretch;
	      text-align: left;
	    }

	    .stats-grid.ops-stats-grid .stat-card.exposure-card span {
	      width: 100%;
	      justify-self: start;
	      text-align: left;
	    }

	    .stats-grid.ops-stats-grid .stat-card.exposure-card strong {
	      width: 100%;
	      justify-self: center;
	      text-align: center;
	    }

	    @media (max-width: 520px) {
	      .stats-grid.ops-stats-grid {
	        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	      }

	      .stats-grid.ops-stats-grid .stat-card.exposure-card span {
	        text-align: left;
	      }

	      .stats-grid.ops-stats-grid .stat-card.exposure-card strong {
	        text-align: center;
	      }
	    }

	    :root[data-theme="dark"] .empty-state,
	    :root[data-theme="dark"] .auth-form .empty-state,
	    :root[data-theme="dark"] .content .empty-state,
	    :root[data-theme="dark"] .modal-body .empty-state {
	      border-color: rgba(139, 224, 216, 0.24);
	      background: rgba(32, 42, 40, 0.74);
	      color: var(--muted);
	      box-shadow: inset 0 0 0 1px rgba(76, 203, 192, 0.08);
	    }

	    :root[data-theme="dark"] .auth-form .auth-loading-state {
	      border-color: transparent;
	      background: transparent;
	      box-shadow: none;
	    }