.report-grid,
  .settings-grid {
    display: grid;
    gap: 16px;
  }

  .report-grid,
  .settings-grid,
  .two-column {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  }

  .report-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    position: relative;
    z-index: 18;
    padding-bottom: 0;
    background: transparent;
  }

  .page[data-page="reports"].is-active > .report-tools > .report-card {
    min-height: 78px;
    padding: 16px 18px;
  }

  .two-column {
    display: grid;
    gap: 16px;
  }

  .panel,
  .metric-card {
    border: 1px solid rgba(181, 202, 216, 0.86);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(243, 249, 252, 0.94) 55%, rgba(232, 242, 248, 0.92)),
      linear-gradient(180deg, #ffffff, #edf4f8);
    box-shadow: var(--shadow);
  }

  .panel {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 18px;
  }

  .account-info-forms {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: start center;
    gap: 12px;
    margin: 0;
    padding: clamp(14px, 4vw, 36px);
    overflow: auto;
    background: rgba(7, 24, 39, .32);
    backdrop-filter: blur(5px);
  }

  .account-info-form {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    position: relative;
    z-index: 4;
    width: min(1120px, 100%);
    padding: 16px;
    border: 1px solid rgba(181, 202, 216, .92);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 248, 252, .98));
    box-shadow: 0 24px 70px rgba(7, 24, 39, .24);
    pointer-events: auto;
  }

  .account-info-form input,
  .account-info-form select,
  .account-info-form textarea,
  .account-info-form button {
    pointer-events: auto;
  }

  .account-info-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: start center;
    padding: clamp(14px, 4vw, 36px);
    overflow: auto;
    background: rgba(7, 24, 39, .36);
    backdrop-filter: blur(5px);
  }

  .account-info-editor {
    width: min(1120px, 100%);
    padding: 16px;
    border: 1px solid rgba(181, 202, 216, .92);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(241, 248, 252, .98));
    box-shadow: 0 24px 70px rgba(7, 24, 39, .24);
    pointer-events: auto;
  }

  .account-info-form .manual-form-actions {
    grid-column: 1 / -1;
  }

  .account-info-editor .manual-form-actions {
    grid-column: 1 / -1;
  }

  .account-info-grid {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .account-info-records-panel {
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    margin-bottom: 0;
    padding: 6px 12px 2px;
    padding-bottom: 2px;
    overflow: hidden;
    background: #ffffff;
  }

  .account-info-records-panel > .panel-header {
    min-height: 30px;
    margin-bottom: 6px;
    gap: 8px;
  }

  .account-info-records-panel .records-title {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 28px;
    min-width: 0;
  }

  .account-info-records-panel .records-title h2,
  .account-info-section-title-text {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
    color: var(--navy);
    font-size: inherit;
    font-weight: 700;
  }

  .account-info-bank-filters {
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .account-info-bank-chip {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 188, 214, 0.42);
    border-radius: 7px;
    padding: 0 10px;
    background: linear-gradient(135deg, rgba(0, 212, 239, 0.16), rgba(255, 255, 255, 0.88));
    color: var(--navy-soft);
    font-size: 11px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    cursor: pointer;
  }

  .account-info-bank-chip.is-active,
  .account-info-bank-chip:hover {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand), var(--brand-strong));
    color: #ffffff;
    box-shadow: 0 6px 12px rgba(0, 188, 214, 0.18);
  }

  .account-info-personal-search {
    flex: 0 1 180px;
    min-width: 120px;
    max-width: 220px;
    min-height: 28px;
    height: 28px;
    margin: 0;
    border: 1px solid #b8cbd8;
    border-radius: 7px;
    padding: 0 10px;
    background: #ffffff;
    color: #02091e;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
  }

  .account-info-personal-search:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 2px rgba(0, 188, 214, 0.18);
  }

  .account-info-records-panel .table-wrap {
    flex: 1 1 auto;
    min-height: 120px;
    overflow: auto;
    scrollbar-gutter: stable;
    margin-bottom: 0;
  }

  .account-info-records-panel .table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .account-info-records-panel .table-wrap::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(224, 238, 246, 0.9);
  }

  .account-info-records-panel .table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #10c2d5, #607d95);
  }

  .account-info-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    color: var(--navy);
  }

  .account-info-table th,
  .account-info-table td {
    height: 36px;
    padding: 7px 8px;
    max-width: 170px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .account-info-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #f7fbfe, #e7f2f8);
    box-shadow: 0 1px 0 var(--line);
    color: var(--navy-soft);
    font-weight: 900;
  }

  .account-info-table tbody tr {
    cursor: pointer;
  }

  .account-info-table:not(.hover-locked) tbody tr:hover td,
  .account-info-table tbody tr.is-hover-pinned td {
    background: rgba(207, 230, 242, .96);
    color: #032f49;
  }

  .account-info-table a {
    color: #0b6d91;
    text-decoration: underline;
  }

  .account-info-table .account-info-bank-web-cell {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .account-info-table .account-info-bank-web-cell a {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .account-info-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    vertical-align: middle;
  }

  .account-info-row-actions .icon-button {
    width: 28px;
    height: 28px;
    padding: 0;
  }

  .account-info-row-actions .action-column-icon {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .account-info-empty {
    color: #31526c;
    font-weight: 800;
    text-align: center;
  }

  .metric-card {
    padding: 16px;
  }

  .metric-card span,
  .report-card p {
    color: var(--muted);
  }

  .metric-card strong,
  .report-card strong {
    display: block;
    margin: 0;
    font-size: 25px;
    color: var(--navy);
  }

  .metric-card em {
    font-style: normal;
    font-weight: 800;
  }

  .metric-card em.good {
    color: #008f96;
  }

  .metric-card em.warn {
    color: var(--accent-strong);
  }

  .metric-card em.calm {
    color: #0a86a0;
  }

  .dashboard-page {
    position: relative;
    isolation: isolate;
    gap: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 229, 255, 0.28);
    border-radius: 0;
    padding: 16px 18px 18px;
    background:
      linear-gradient(135deg, rgba(2, 5, 30, 0.98), rgba(3, 18, 43, 0.97) 48%, rgba(1, 8, 24, 0.98)),
      repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.08) 0 1px, transparent 1px 48px),
      repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.06) 0 1px, transparent 1px 38px);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      inset 0 0 44px rgba(0, 229, 255, 0.08);
  }

  .page[data-page="dashboard"].is-active {
    height: calc(100vh - 76px);
    height: calc(100dvh - 76px);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    gap: 16px;
    overflow: hidden;
  }

  .page[data-page="dashboard"].is-active > .dashboard-metrics {
    flex: 0 0 auto;
    min-height: 0;
  }

  .dashboard-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(90deg, transparent 0 11%, rgba(0, 229, 255, 0.13) 11% 11.3%, transparent 11.3% 100%),
      linear-gradient(90deg, transparent 0 72%, rgba(0, 229, 255, 0.1) 72% 72.3%, transparent 72.3% 100%),
      linear-gradient(180deg, transparent 0 33%, rgba(0, 229, 255, 0.1) 33% 33.4%, transparent 33.4% 100%),
      repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.07) 0 1px, transparent 1px 68px),
      repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 54px);
    opacity: 0.78;
    pointer-events: none;
  }

  .dashboard-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 0;
    pointer-events: none;
  }

  .dashboard-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
  }

  .dashboard-metric-card {
    --metric-accent: #00e5ff;
    --metric-accent-rgb: 0, 229, 255;
    --metric-number-size: clamp(11px, 12cqi, 20px);
    position: relative;
    container-type: inline-size;
    container-name: metric-card;
    min-height: 84px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: start;
    row-gap: 6px;
    border: 1px solid rgba(var(--metric-accent-rgb), 0.72);
    border-radius: 0;
    padding: 12px 14px;
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.16), rgba(0, 37, 71, 0.92) 38%, rgba(0, 15, 38, 0.98)),
      repeating-linear-gradient(90deg, rgba(var(--metric-accent-rgb), 0.08) 0 1px, transparent 1px 18px);
    clip-path: polygon(0 16px, 16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.34),
      0 16px 36px rgba(0, 3, 22, 0.38),
      0 0 30px rgba(var(--metric-accent-rgb), 0.16),
      inset 0 0 28px rgba(var(--metric-accent-rgb), 0.12);
  }

  .dashboard-metric-card::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(var(--metric-accent-rgb), 0.24);
    clip-path: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px));
    pointer-events: none;
  }

  .dashboard-metric-card .metric-label {
    position: relative;
    z-index: 1;
    color: var(--metric-accent);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.2;
  }

  .dashboard-metric-card strong {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #f0feff;
    font-size: var(--metric-number-size);
    line-height: 1.15;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-shadow:
      0 0 18px rgba(var(--metric-accent-rgb), 0.5),
      0 0 34px rgba(var(--metric-accent-rgb), 0.22);
  }

  .dashboard-metric-card.current-balance {
    --metric-accent: #00e5ff;
    --metric-accent-rgb: 0, 229, 255;
  }

  .dashboard-metric-card.fund-in,
  .dashboard-metric-card.remaining-limit,
  .dashboard-metric-card.total-deposit {
    --metric-accent: #1dffbd;
    --metric-accent-rgb: 29, 255, 189;
  }

  .dashboard-metric-card.fund-out,
  .dashboard-metric-card.total-payout {
    --metric-accent: #9b1234;
    --metric-accent-rgb: 155, 18, 52;
  }

  .dashboard-metric-card.manual-withdrawal {
    --metric-accent: #0b84ff;
    --metric-accent-rgb: 11, 132, 255;
  }

  .dashboard-metric-card.fund-out .metric-label,
  .dashboard-metric-card.manual-withdrawal .metric-label,
  .dashboard-metric-card.total-payout .metric-label {
    font-size: 10px;
  }

  .dashboard-metric-card.fund-out strong,
  .dashboard-metric-card.manual-withdrawal strong,
  .dashboard-metric-card.total-payout strong {
    font-size: var(--metric-number-size);
  }

  .dashboard-metric-card.active-accounts {
    --metric-accent: #f3b546;
    --metric-accent-rgb: 243, 181, 70;
  }

  .dashboard-page .operation-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 229, 255, 0.6);
    border-radius: 0;
    color: #d9fbff;
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.1), rgba(0, 25, 60, 0.94) 40%, rgba(0, 11, 32, 0.98)),
      repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 44px),
      repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.04) 0 1px, transparent 1px 36px);
    clip-path: polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
    box-shadow:
      0 18px 44px rgba(0, 4, 24, 0.38),
      0 0 34px rgba(0, 229, 255, 0.14),
      inset 0 0 36px rgba(0, 229, 255, 0.08);
  }

  .dashboard-page .operation-panel * {
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
  }

  .dashboard-page .operation-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background:
      linear-gradient(90deg, #00e5ff, transparent 18%, #1dffbd 42%, transparent 64%, #2fa8ff),
      repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0 8px, transparent 8px 16px);
  }

  .dashboard-page .operation-panel::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 22px;
    width: 110px;
    height: 16px;
    border: 1px solid rgba(0, 229, 255, 0.48);
    background:
      linear-gradient(90deg, rgba(0, 229, 255, 0.78) 0 58%, rgba(0, 229, 255, 0.16) 58% 100%);
    pointer-events: none;
  }

  .dashboard-page .operation-panel .panel-header {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-bottom: 6px;
    align-items: center;
    gap: 8px;
    min-height: 28px;
  }

  .dashboard-page .operation-panel .records-title[data-operation-accounts-title] {
    display: inline-flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
    min-height: 28px;
  }

  .dashboard-page .operation-panel h2,
  .dashboard-page .operation-panel .operation-accounts-section-title-text {
    margin: 0;
    flex: 0 0 auto;
    order: 1;
    white-space: nowrap;
    color: #eaffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    min-height: 28px;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.46);
  }

  .dashboard-page .operation-panel .operation-accounts-shift-filter {
    flex: 0 0 auto;
    order: 2;
    min-width: 96px;
    max-width: 120px;
    width: auto;
    /* Match bank chips (not search): same 26px box */
    min-height: 26px;
    height: 26px;
    max-height: 26px;
    margin: 0;
    border: 1px solid rgba(0, 229, 255, 0.42);
    border-radius: 6px;
    padding: 0 8px;
    background: rgba(0, 12, 28, 0.72);
    color: #eaffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    box-sizing: border-box;
    cursor: pointer;
  }

  .dashboard-page .operation-panel .operation-accounts-shift-filter:focus {
    outline: none;
    border-color: rgba(0, 229, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.22);
  }

  .dashboard-page .operation-panel .operation-accounts-shift-filter option {
    background: #041018;
    color: #eaffff;
  }

  .dashboard-page .operation-panel .account-info-bank-filters {
    flex: 0 1 auto;
    order: 3;
    gap: 4px;
  }

  .dashboard-page .operation-panel .account-info-bank-chip {
    min-height: 26px;
    height: 26px;
    border-color: rgba(0, 229, 255, 0.48);
    border-radius: 6px;
    padding: 0 8px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(0, 25, 60, 0.72));
    color: #eaffff;
    font-size: 16px;
    line-height: 1.15;
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  .dashboard-page .operation-panel .account-info-bank-chip.is-active,
  .dashboard-page .operation-panel .account-info-bank-chip:hover {
    border-color: rgba(0, 229, 255, 0.9);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.92), rgba(0, 140, 180, 0.95));
    color: #041018;
    box-shadow: 0 4px 8px rgba(0, 229, 255, 0.22);
  }

  .dashboard-page .operation-panel .operation-accounts-search {
    flex: 0 1 180px;
    order: 4;
    min-width: 120px;
    max-width: 220px;
    min-height: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid rgba(0, 229, 255, 0.42);
    border-radius: 6px;
    padding: 0 8px;
    background: rgba(0, 12, 28, 0.72);
    color: #eaffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    box-sizing: border-box;
  }

  .dashboard-page .operation-panel .operation-accounts-search::placeholder {
    color: rgba(234, 255, 255, 0.55);
  }

  .dashboard-page .operation-panel .operation-accounts-search:focus {
    outline: none;
    border-color: rgba(0, 229, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.22);
  }

  .dashboard-page .operation-panel .small-button {
    min-height: 26px;
    padding: 0 10px;
    border-color: rgba(0, 229, 255, 0.58);
    background:
      linear-gradient(180deg, rgba(0, 229, 255, 0.22), rgba(0, 53, 90, 0.86));
    color: #eaffff;
    font-size: 16px;
    line-height: 1.15;
    box-shadow:
      0 0 16px rgba(0, 229, 255, 0.22),
      inset 0 0 12px rgba(0, 229, 255, 0.16);
  }

  .dashboard-page .table-wrap {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 229, 255, 0.42);
    border-radius: 0;
    /* Horizontal scroll on wrap; vertical scroll lives on tbody only */
    overflow-x: auto;
    overflow-y: hidden;
    /* No scrollbar-gutter here — vertical bar is on tbody; stable gutter left a dark empty strip */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 200, 220, 0.55) rgba(0, 20, 40, 0.45);
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(180deg, rgba(0, 42, 75, 0.18), rgba(0, 12, 32, 0.22));
    box-shadow: inset 0 0 18px rgba(0, 229, 255, 0.06);
  }

  .dashboard-page .table-wrap::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  .dashboard-page .table-wrap::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(0, 20, 40, 0.45);
  }

  .dashboard-page .table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.5), rgba(0, 140, 180, 0.62));
  }

  .dashboard-page .operation-accounts-table {
    --oa-v-scrollbar: 7px;
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    /* Col sum: 78+98+88+74+108+156+126*5 = 1236 */
    width: max(100%, 1240px);
    min-width: 1240px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Header outside vertical scrollport; body rows scroll beside thin scrollbar only.
     Do NOT use scrollbar-gutter:stable — it reserves classic (~15px) width while the
     custom thin bar is 7px, leaving a dark gap between MANUAL and the thumb. */
  .dashboard-page .operation-accounts-table thead {
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    /* Match always-on thin tbody scrollbar so header/body columns stay aligned */
    padding-right: var(--oa-v-scrollbar);
    box-sizing: border-box;
  }

  .dashboard-page .operation-accounts-table tbody {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: scroll; /* always reserve exact thin scrollbar width (no classic gutter) */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 200, 220, 0.55) rgba(0, 20, 40, 0.45);
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-page .operation-accounts-table thead tr,
  .dashboard-page .operation-accounts-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .dashboard-page .operation-accounts-table tbody::-webkit-scrollbar {
    width: var(--oa-v-scrollbar);
    height: 7px;
  }

  .dashboard-page .operation-accounts-table tbody::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(0, 20, 40, 0.45);
  }

  .dashboard-page .operation-accounts-table tbody::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.5), rgba(0, 140, 180, 0.62));
  }

  .dashboard-page .operation-accounts-table thead th {
    border-bottom-color: rgba(0, 229, 255, 0.38);
    border-left: none;
    border-right: none;
    background:
      linear-gradient(180deg, rgba(0, 229, 255, 0.2), rgba(0, 41, 76, 0.9));
    color: #d9ffff;
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.15;
    padding: 7px 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    text-shadow:
      0 0 10px rgba(0, 229, 255, 0.58),
      0 1px 0 rgba(0, 16, 32, 0.9);
    box-shadow: 0 1px 0 rgba(0, 229, 255, 0.38);
  }

  .dashboard-page .operation-accounts-table thead th,
  .dashboard-page .operation-accounts-table td {
    min-width: 72px;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(1),
  .dashboard-page .operation-accounts-table td:nth-child(1) {
    width: 78px;
    min-width: 78px;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(2),
  .dashboard-page .operation-accounts-table td:nth-child(2) {
    width: 98px;
    min-width: 98px;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(3),
  .dashboard-page .operation-accounts-table td:nth-child(3) {
    width: 88px;
    min-width: 88px;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(4),
  .dashboard-page .operation-accounts-table td:nth-child(4) {
    width: 120px;
    min-width: 120px;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(5),
  .dashboard-page .operation-accounts-table td:nth-child(5) {
    width: 74px;
    min-width: 74px;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(6),
  .dashboard-page .operation-accounts-table td:nth-child(6) {
    width: 108px;
    min-width: 108px;
  }

  /* Account Code: always show full text (no ellipsis). Fits MBBI-KKxxxxxxxx / VOCBC-KK######. */
  .dashboard-page .operation-accounts-table thead th:nth-child(7),
  .dashboard-page .operation-accounts-table td:nth-child(7) {
    width: 156px;
    min-width: 156px;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .dashboard-page .operation-accounts-table thead th:nth-child(8),
  .dashboard-page .operation-accounts-table td:nth-child(8),
  .dashboard-page .operation-accounts-table thead th:nth-child(9),
  .dashboard-page .operation-accounts-table td:nth-child(9),
  .dashboard-page .operation-accounts-table thead th:nth-child(10),
  .dashboard-page .operation-accounts-table td:nth-child(10),
  .dashboard-page .operation-accounts-table thead th:nth-child(11),
  .dashboard-page .operation-accounts-table td:nth-child(11),
  .dashboard-page .operation-accounts-table thead th:nth-child(12),
  .dashboard-page .operation-accounts-table td:nth-child(12) {
    min-width: 126px;
    width: 126px;
  }

  .dashboard-page .operation-accounts-table tbody tr {
    height: 32px;
    background: rgba(242, 251, 253, 0.72);
    position: relative;
    z-index: 0;
    transition: background 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  }

  .dashboard-page .operation-accounts-table tbody tr::after {
    content: none;
    display: none;
  }

  .dashboard-page .operation-accounts-table tbody tr:nth-child(even) {
    background: rgba(232, 247, 250, 0.74);
  }

  .dashboard-page .operation-accounts-table tbody tr.account-type-per td,
  .dashboard-page .operation-accounts-table tbody tr.account-type-biz td {
    border-top: 0;
    border-bottom: 0;
  }

  .dashboard-page .operation-accounts-table tbody tr.account-station-a td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-b td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-mio td {
    border-top: 0;
    border-bottom: 0;
  }

  .dashboard-page .operation-accounts-table tbody tr.account-station-accvn td {
    border-top: 0;
    border-bottom: 0;
  }

  .panel-note {
    margin: 0 0 14px;
    color: rgba(210, 236, 245, 0.86);
    font-size: 0.92rem;
    line-height: 1.45;
  }

  .page[data-page="ip-access"] .panel-note,
  .page[data-page="merchant"] .panel-note {
    color: #3d566a;
    font-weight: 700;
  }

  .merchant-env-switch {
    display: inline-flex;
    gap: 4px;
  }

  .merchant-env-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 2px 4px 2px 2px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .merchant-env-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 42px;
    border-radius: 999px;
    background: #e0a21a;
    box-shadow: inset 0 0 0 1px #c48a10;
    transition: background 160ms ease, box-shadow 160ms ease;
  }

  .merchant-env-toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    transition: transform 160ms ease;
  }

  .merchant-env-toggle.is-production .merchant-env-toggle-track {
    background: #22a06b;
    box-shadow: inset 0 0 0 1px #1a8558;
  }

  .merchant-env-toggle.is-production .merchant-env-toggle-thumb {
    transform: translateX(18px);
  }

  .merchant-env-toggle-label {
    min-width: 72px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: left;
  }

  .merchant-env-toggle.is-testing .merchant-env-toggle-label {
    color: #8a5a00;
  }

  .merchant-env-toggle.is-production .merchant-env-toggle-label {
    color: #146c2e;
  }

  .merchant-env-toggle:hover .merchant-env-toggle-track,
  .merchant-env-toggle:focus-visible .merchant-env-toggle-track {
    filter: brightness(1.04);
  }

  .merchant-env-toggle:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.45);
    outline-offset: 2px;
  }

  .merchant-env-toggle:disabled {
    opacity: 1;
    cursor: default;
  }

  .merchant-env-toggle:disabled:hover .merchant-env-toggle-track {
    filter: none;
  }

  .merchant-env-switch .merchant-status-badge {
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(0, 168, 199, 0.22);
    border-radius: 8px;
    background: transparent;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
  }

  .merchant-env-switch .merchant-status-badge.is-active[data-merchant-status="active"] {
    border-color: rgba(20, 140, 70, 0.5);
    background: rgba(198, 246, 213, 0.92);
    color: #146c2e;
  }

  .merchant-env-switch .merchant-status-badge.is-active[data-merchant-status="inactive"] {
    border-color: rgba(150, 40, 40, 0.45);
    background: rgba(255, 218, 218, 0.92);
    color: #8a1f1f;
  }

  .merchant-row.is-selected td {
    background: rgba(223, 249, 253, 0.72);
  }

  .merchant-ip-box {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    max-width: 190px;
    padding: 0 10px;
    border: 1px solid rgba(0, 168, 199, 0.22);
    border-radius: 8px;
    background: #fff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .merchant-ip-box.is-open {
    border-color: rgba(0, 168, 199, 0.55);
    background: rgba(223, 249, 253, 0.92);
  }

  .merchant-ip-expand td {
    padding: 12px 14px 16px;
    background: rgba(247, 252, 253, 0.96);
    border-top: 0;
  }

  .merchant-ip-editor {
    display: grid;
    gap: 12px;
  }

  .merchant-ip-editor[hidden] {
    display: none !important;
  }

  [data-merchant-detail-host] {
    display: none;
  }

  .merchant-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 0 0 16px;
  }

  .merchant-detail-grid section {
    display: grid;
    gap: 4px;
  }

  .merchant-detail-grid span {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
  }

  .merchant-detail-grid strong {
    word-break: break-all;
    color: var(--navy);
  }

  .dashboard-page .operation-accounts-table tbody tr.account-station-smp td {
    border-top: 0;
    border-bottom: 0;
  }

  .dashboard-page .operation-accounts-table tbody tr:active,
  .dashboard-page .operation-accounts-table tbody tr:focus,
  .dashboard-page .operation-accounts-table tbody tr:focus-within {
    background: rgba(242, 251, 253, 0.72);
    box-shadow: none;
    filter: none;
  }

  .dashboard-page .operation-accounts-table tbody tr:nth-child(even):active,
  .dashboard-page .operation-accounts-table tbody tr:nth-child(even):focus,
  .dashboard-page .operation-accounts-table tbody tr:nth-child(even):focus-within {
    background: rgba(232, 247, 250, 0.74);
  }

  .dashboard-page .operation-accounts-table tbody tr:active td,
  .dashboard-page .operation-accounts-table tbody tr:focus td,
  .dashboard-page .operation-accounts-table tbody tr:focus-within td {
    background: linear-gradient(180deg, rgba(245, 252, 254, 0.74) 0%, rgba(232, 247, 250, 0.64) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 80, 100, 0.04);
    color: #000000;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:active,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus-within,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:nth-child(even):active,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:nth-child(even):focus,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:nth-child(even):focus-within {
    background:
      linear-gradient(100deg, rgba(218, 253, 255, 0.32), rgba(79, 229, 240, 0.22) 20%, rgba(0, 183, 207, 0.24) 48%, rgba(255, 255, 255, 0.06) 74%, transparent 100%),
      linear-gradient(135deg, rgba(0, 212, 239, 0.28), rgba(7, 57, 72, 0.46)),
      rgba(255, 255, 255, 0.055);
    box-shadow:
      0 0 22px rgba(0, 231, 255, 0.34),
      0 10px 26px rgba(0, 202, 232, 0.18);
    filter: none;
    z-index: 1;
  }

  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:active td,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus td,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus-within td {
    background:
      linear-gradient(100deg, rgba(218, 253, 255, 0.28), rgba(79, 229, 240, 0.18) 22%, rgba(0, 183, 207, 0.16) 50%, rgba(255, 255, 255, 0.05) 76%, transparent 100%),
      linear-gradient(180deg, rgba(0, 42, 58, 0.42), rgba(0, 28, 42, 0.36));
    color: #f7ffff !important;
    box-shadow:
      inset 0 1px 0 rgba(234, 254, 255, 0.28),
      inset 0 -1px 0 rgba(0, 12, 20, 0.18),
      0 0 16px rgba(0, 231, 255, 0.12);
    text-shadow:
      0 1px 2px rgba(0, 8, 20, 0.96),
      0 0 10px rgba(0, 231, 255, 0.42);
  }

  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:active td:first-child,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus td:first-child,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:focus-within td:first-child {
    background:
      linear-gradient(90deg, #e7fdff 0, #8cf5ff 2px, #00c8df 5px, #007d96 7px, transparent 9px),
      linear-gradient(100deg, rgba(218, 253, 255, 0.32), rgba(79, 229, 240, 0.22) 20%, rgba(0, 183, 207, 0.24) 48%, rgba(255, 255, 255, 0.06) 74%, transparent 100%),
      linear-gradient(180deg, rgba(0, 42, 58, 0.42), rgba(0, 28, 42, 0.36));
    box-shadow:
      inset 3px 0 0 rgba(226, 253, 255, 0.96),
      inset 7px 0 0 rgba(0, 183, 207, 0.28),
      inset 0 1px 0 rgba(234, 254, 255, 0.28),
      inset 0 -1px 0 rgba(0, 12, 20, 0.18);
  }

  .dashboard-page .operation-accounts-table td {
    height: 34px;
    border-left: none;
    border-right: none;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(245, 252, 254, 0.74) 0%, rgba(232, 247, 250, 0.64) 100%);
    color: #000000;
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.2;
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 80, 100, 0.04);
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, text-shadow 140ms ease, color 140ms ease;
  }

  .dashboard-page .operation-accounts-table tbody tr:nth-child(even) td {
    background: linear-gradient(180deg, rgba(238, 249, 252, 0.7) 0%, rgba(223, 243, 247, 0.6) 100%);
  }

  .dashboard-page .operation-accounts-table tbody tr.account-type-per td,
  .dashboard-page .operation-accounts-table tbody tr.account-type-biz td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-a td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-b td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-mio td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-accvn td,
  .dashboard-page .operation-accounts-table tbody tr.account-station-smp td {
    color: #000000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  .dashboard-page .operation-accounts-table tbody td:first-child {
    background: linear-gradient(180deg, rgba(245, 252, 254, 0.74) 0%, rgba(232, 247, 250, 0.64) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 rgba(0, 80, 100, 0.04);
  }

  .dashboard-page .operation-accounts-table tbody tr:nth-child(even) td:first-child {
    background: linear-gradient(180deg, rgba(238, 249, 252, 0.7) 0%, rgba(223, 243, 247, 0.6) 100%);
  }

  .dashboard-page .operation-accounts-table tbody tr {
    cursor: pointer;
  }

  .dashboard-page .operation-accounts-table:not(.hover-locked) tbody tr:hover,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned {
    background:
      linear-gradient(100deg, rgba(218, 253, 255, 0.32), rgba(79, 229, 240, 0.22) 20%, rgba(0, 183, 207, 0.24) 48%, rgba(255, 255, 255, 0.06) 74%, transparent 100%),
      linear-gradient(135deg, rgba(0, 212, 239, 0.28), rgba(7, 57, 72, 0.46)),
      rgba(255, 255, 255, 0.055);
    box-shadow:
      0 0 22px rgba(0, 231, 255, 0.34),
      0 10px 26px rgba(0, 202, 232, 0.18);
    filter: none;
    z-index: 1;
  }

  .dashboard-page .operation-accounts-table:not(.hover-locked) tbody tr:nth-child(even):hover,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned:nth-child(even) {
    background:
      linear-gradient(100deg, rgba(218, 253, 255, 0.32), rgba(79, 229, 240, 0.22) 20%, rgba(0, 183, 207, 0.24) 48%, rgba(255, 255, 255, 0.06) 74%, transparent 100%),
      linear-gradient(135deg, rgba(0, 212, 239, 0.28), rgba(7, 57, 72, 0.46)),
      rgba(255, 255, 255, 0.055);
  }

  .dashboard-page .operation-accounts-table:not(.hover-locked) tbody tr:hover td,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned td {
    background:
      linear-gradient(100deg, rgba(218, 253, 255, 0.28), rgba(79, 229, 240, 0.18) 22%, rgba(0, 183, 207, 0.16) 50%, rgba(255, 255, 255, 0.05) 76%, transparent 100%),
      linear-gradient(180deg, rgba(0, 42, 58, 0.42), rgba(0, 28, 42, 0.36));
    color: #f7ffff !important;
    box-shadow:
      inset 0 1px 0 rgba(234, 254, 255, 0.28),
      inset 0 -1px 0 rgba(0, 12, 20, 0.18),
      0 0 16px rgba(0, 231, 255, 0.12);
    text-shadow:
      0 1px 2px rgba(0, 8, 20, 0.96),
      0 0 10px rgba(0, 231, 255, 0.42);
  }

  .dashboard-page .operation-accounts-table:not(.hover-locked) tbody tr:hover td:first-child,
  .dashboard-page .operation-accounts-table tbody tr.is-hover-pinned td:first-child {
    background:
      linear-gradient(90deg, #e7fdff 0, #8cf5ff 2px, #00c8df 5px, #007d96 7px, transparent 9px),
      linear-gradient(100deg, rgba(218, 253, 255, 0.32), rgba(79, 229, 240, 0.22) 20%, rgba(0, 183, 207, 0.24) 48%, rgba(255, 255, 255, 0.06) 74%, transparent 100%),
      linear-gradient(180deg, rgba(0, 42, 58, 0.42), rgba(0, 28, 42, 0.36));
    box-shadow:
      inset 3px 0 0 rgba(226, 253, 255, 0.96),
      inset 7px 0 0 rgba(0, 183, 207, 0.28),
      inset 0 1px 0 rgba(234, 254, 255, 0.28),
      inset 0 -1px 0 rgba(0, 12, 20, 0.18);
  }

  .dashboard-page .operation-accounts-table tbody td:nth-child(8),
  .dashboard-page .operation-accounts-table tbody td:nth-child(9),
  .dashboard-page .operation-accounts-table tbody td:nth-child(10),
  .dashboard-page .operation-accounts-table tbody td:nth-child(11),
  .dashboard-page .operation-accounts-table tbody td:nth-child(12),
  .dashboard-page .operation-accounts-table tbody td.numeric {
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.01em;
    text-align: center;
    padding: 4px 6px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    color: #000000 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  }

  .dashboard-page .operation-accounts-table thead th {
    font-family: Calibri, "Segoe UI", Candara, Arial, sans-serif;
    color: #d9ffff;
    font-weight: 950;
    letter-spacing: 0;
    text-shadow:
      0 0 10px rgba(0, 229, 255, 0.58),
      0 1px 0 rgba(0, 16, 32, 0.9);
  }

  .dashboard-page::before,
  .dashboard-page::after {
    z-index: 0;
  }

  .dashboard-page > * {
    position: relative;
    z-index: 1;
  }

  .dashboard-page {
    border-color: rgba(0, 229, 255, 0.34);
    border-radius: 0;
    margin: -6px -18px -18px;
    height: calc(100vh - 76px);
    height: calc(100dvh - 76px);
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
    padding: 16px 18px 18px;
    background:
      linear-gradient(180deg, rgba(1, 9, 20, 0.34), rgba(1, 9, 20, 0.74)),
url("login-background-cyber-gold.webp") center / cover no-repeat,
      linear-gradient(135deg, #030915, #061827);
    box-shadow:
      inset 0 0 0 1px rgba(0, 229, 255, 0.12),
      inset 0 0 70px rgba(0, 229, 255, 0.1);
  }

  .dashboard-page::before {
    z-index: 0;
    background:
      radial-gradient(circle at 22% 34%, rgba(0, 229, 255, 0.22), transparent 26%),
      radial-gradient(circle at 86% 58%, rgba(243, 181, 70, 0.18), transparent 30%),
      linear-gradient(90deg, rgba(0, 229, 255, 0.12), transparent 42%, rgba(243, 181, 70, 0.12)),
      repeating-linear-gradient(90deg, rgba(0, 229, 255, 0.08) 0 1px, transparent 1px 78px),
      repeating-linear-gradient(0deg, rgba(255, 210, 121, 0.05) 0 1px, transparent 1px 60px);
    opacity: 1;
  }

  .dashboard-page::after {
    z-index: 0;
    inset: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .dashboard-metric-card {
    border-color: rgba(0, 229, 255, 0.42);
    border-radius: 8px;
    padding: 12px 14px 10px 22px;
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(2, 18, 31, 0.78) 58%, rgba(243, 181, 70, 0.08)),
      linear-gradient(180deg, rgba(1, 20, 32, 0.72), rgba(1, 9, 20, 0.86));
    clip-path: none;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.24),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      inset 0 0 22px rgba(0, 229, 255, 0.08);
    backdrop-filter: blur(4px);
    transform: translate3d(0, 0, 0);
    transition:
      transform 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      background 180ms ease;
    will-change: transform;
    cursor: pointer;
  }

  .dashboard-metric-card::before {
    border-radius: 6px;
    background:
      linear-gradient(90deg, #e7fdff 0, #8cf5ff 2px, #00c8df 5px, #007d96 7px, transparent 9px),
      linear-gradient(100deg, rgba(218, 253, 255, 0.32), rgba(79, 229, 240, 0.22) 20%, rgba(0, 183, 207, 0.24) 48%, rgba(255, 255, 255, 0.06) 74%, transparent 100%),
      linear-gradient(135deg, rgba(0, 212, 239, 0.28), rgba(7, 57, 72, 0.46)),
      rgba(255, 255, 255, 0.055);
    box-shadow:
      inset 3px 0 0 rgba(226, 253, 255, 0.96),
      inset 7px 0 0 rgba(0, 183, 207, 0.28),
      0 0 22px rgba(0, 231, 255, 0.26),
      inset 0 1px 0 rgba(234, 254, 255, 0.28);
    clip-path: none;
    transition:
      opacity 180ms ease,
      transform 180ms ease,
      box-shadow 180ms ease;
  }

  .dashboard-metric-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      linear-gradient(105deg, transparent 0 24%, rgba(255, 255, 255, 0.2) 42%, transparent 62%),
      radial-gradient(circle at 12% 50%, rgba(var(--metric-accent-rgb), 0.26), transparent 34%);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-38%);
    transition:
      opacity 180ms ease,
      transform 320ms ease;
  }

  .dashboard-metrics:not(.hover-locked) .dashboard-metric-card:hover,
  .dashboard-metric-card.is-hover-pinned {
    border-color: rgba(var(--metric-accent-rgb), 0.82);
    background:
      linear-gradient(135deg, rgba(var(--metric-accent-rgb), 0.2), rgba(2, 18, 31, 0.72) 58%, rgba(243, 181, 70, 0.12)),
      linear-gradient(180deg, rgba(1, 20, 32, 0.68), rgba(1, 9, 20, 0.8));
    box-shadow:
      0 22px 42px rgba(0, 0, 0, 0.32),
      0 0 28px rgba(var(--metric-accent-rgb), 0.28),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 0 26px rgba(var(--metric-accent-rgb), 0.16);
    transform: translate3d(0, -7px, 0) scale(1.015);
  }

  .dashboard-metrics:not(.hover-locked) .dashboard-metric-card:hover::before,
  .dashboard-metric-card.is-hover-pinned::before {
    opacity: 0.95;
    transform: translateX(3px);
    box-shadow:
      inset 3px 0 0 rgba(226, 253, 255, 0.98),
      inset 7px 0 0 rgba(0, 183, 207, 0.38),
      0 0 28px rgba(var(--metric-accent-rgb), 0.34),
      inset 0 1px 0 rgba(234, 254, 255, 0.34);
  }

  .dashboard-metrics:not(.hover-locked) .dashboard-metric-card:hover::after,
  .dashboard-metric-card.is-hover-pinned::after {
    opacity: 1;
    transform: translateX(44%);
  }

  .dashboard-metric-card:active {
    transform: translate3d(0, -3px, 0) scale(1.006);
  }

  .dashboard-metric-card.is-hover-pinned:active {
    transform: translate3d(0, -7px, 0) scale(1.015);
  }

  @media (prefers-reduced-motion: reduce) {
    .dashboard-metric-card,
    .dashboard-metric-card::before,
    .dashboard-metric-card::after {
      transition: none;
    }

    .dashboard-metrics:not(.hover-locked) .dashboard-metric-card:hover,
    .dashboard-metric-card.is-hover-pinned,
    .dashboard-metric-card:active {
      transform: none;
    }

  }

  .dashboard-metric-card .metric-label {
    color: #f4ffff;
    text-shadow:
      0 1px 2px rgba(0, 8, 20, 0.96),
      0 0 10px rgba(0, 231, 255, 0.44);
  }

  .dashboard-metric-card strong {
    color: #f7ffff;
    text-shadow:
      0 2px 3px rgba(0, 8, 20, 0.92),
      0 0 18px rgba(0, 229, 255, 0.42),
      0 0 22px rgba(243, 181, 70, 0.12);
  }

  .dashboard-metric-card.fund-out .metric-label,
  .dashboard-metric-card.manual-withdrawal .metric-label,
  .dashboard-metric-card.total-payout .metric-label {
    color: #f4ffff;
  }

  .dashboard-metric-card.fund-out,
  .dashboard-metric-card.total-payout {
    --metric-accent: #9b1234;
    --metric-accent-rgb: 155, 18, 52;
  }

  .dashboard-metric-card.manual-withdrawal {
    --metric-accent: #0b84ff;
    --metric-accent-rgb: 11, 132, 255;
  }

  .dashboard-page .operation-panel {
    border-color: rgba(0, 229, 255, 0.42);
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(2, 16, 29, 0.36) 52%, rgba(243, 181, 70, 0.08)),
      linear-gradient(180deg, rgba(1, 15, 25, 0.32), rgba(1, 9, 20, 0.44));
    clip-path: none;
    backdrop-filter: none;
    box-shadow:
      0 22px 56px rgba(0, 0, 0, 0.28),
      0 0 24px rgba(0, 229, 255, 0.12),
      inset 0 0 30px rgba(0, 229, 255, 0.08);
  }

  .dashboard-page .operation-panel::before {
    height: 3px;
    background: linear-gradient(90deg, #00e5ff, transparent 38%, #f3b546 72%, transparent);
  }

  .dashboard-page .operation-panel::after {
    display: none;
  }

  .dashboard-page .operation-panel h2,
  .dashboard-page .operation-panel .operation-accounts-section-title-text {
    color: #ffffff;
    font-weight: 700;
    text-shadow:
      0 0 18px rgba(0, 229, 255, 0.48),
      0 0 20px rgba(243, 181, 70, 0.16);
  }

  .dashboard-page .operation-panel .small-button {
    border-color: rgba(0, 229, 255, 0.54);
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.86), rgba(8, 101, 122, 0.88) 58%, rgba(243, 181, 70, 0.26));
  }

  .dashboard-page .table-wrap {
    border-color: rgba(0, 229, 255, 0.32);
    border-radius: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    background:
      linear-gradient(180deg, rgba(0, 34, 50, 0.16), rgba(1, 12, 22, 0.2));
  }

  .dashboard-page .operation-accounts-table thead th {
    background:
      linear-gradient(180deg, rgba(0, 229, 255, 0.18), rgba(2, 31, 47, 0.95));
    color: #a8fbff;
  }

  .dashboard-page .operation-accounts-table tbody tr {
    background: rgba(242, 251, 253, 0.72);
  }

  .dashboard-page .operation-accounts-table tbody tr:nth-child(even) {
    background: rgba(232, 247, 250, 0.74);
  }

  @media (max-width: 1180px) {
    .dashboard-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }

    .dashboard-metric-card strong {
      font-size: var(--metric-number-size);
    }

    .dashboard-metric-card.fund-out strong,
    .dashboard-metric-card.manual-withdrawal strong,
    .dashboard-metric-card.total-payout strong {
      font-size: var(--metric-number-size);
    }
  }

  @media (max-width: 720px) {
    .dashboard-page {
      margin: 0;
      height: calc(100dvh - 96px);
      min-height: calc(100dvh - 96px);
      padding: 12px;
    }

    .page[data-page="dashboard"].is-active {
      height: calc(100dvh - 96px);
    }

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

    .dashboard-metric-card {
      --metric-number-size: clamp(10px, 11cqi, 16px);
      min-height: 70px;
      padding: 8px 8px 6px 16px;
    }

    .dashboard-metric-card .metric-label,
    .dashboard-metric-card.fund-out .metric-label,
    .dashboard-metric-card.manual-withdrawal .metric-label,
    .dashboard-metric-card.total-payout .metric-label {
      font-size: clamp(7px, 6.5cqi, 9px);
      letter-spacing: 0.02em;
      line-height: 1.2;
    }

    .dashboard-metric-card strong,
    .dashboard-metric-card.fund-out strong,
    .dashboard-metric-card.manual-withdrawal strong,
    .dashboard-metric-card.total-payout strong {
      font-size: var(--metric-number-size);
      line-height: 1.2;
      overflow-wrap: anywhere;
      letter-spacing: 0;
    }
  }

  @media (max-width: 480px) {
    .dashboard-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }

    .dashboard-metric-card {
      --metric-number-size: clamp(10px, 12cqi, 14px);
      min-height: 66px;
      padding: 7px 6px 5px 14px;
    }

    .dashboard-metric-card .metric-label,
    .dashboard-metric-card.fund-out .metric-label,
    .dashboard-metric-card.manual-withdrawal .metric-label,
    .dashboard-metric-card.total-payout .metric-label {
      font-size: clamp(7px, 6.5cqi, 9px);
      line-height: 1.15;
    }

    .dashboard-metric-card strong,
    .dashboard-metric-card.fund-out strong,
    .dashboard-metric-card.manual-withdrawal strong,
    .dashboard-metric-card.total-payout strong {
      font-size: var(--metric-number-size);
      line-height: 1.2;
      letter-spacing: 0;
    }
  }

  .panel-header {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
  }

  .manual-withdraw-header {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .manual-withdraw-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .manual-withdraw-title h2 {
    margin: 0;
  }

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

  .records-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .records-title h2 {
    margin: 0;
  }

  .withdrawal-records-panel > .panel-header,
  .deposit-history-panel > .panel-header,
  .report-sheet-panel > .panel-header,
  .attendance-records-panel > .panel-header,
  .attendance-summary-panel > .panel-header {
    min-height: 30px;
    margin-bottom: 6px;
    gap: 8px;
  }

  .withdrawal-records-panel .records-title,
  .deposit-history-panel .records-title,
  .report-sheet-panel .records-title,
  .attendance-records-panel .records-title,
  .attendance-summary-panel .records-title {
    min-height: 28px;
  }

  .withdrawal-records-panel .refresh-button,
  .withdrawal-records-panel .filter-toggle,
  .withdrawal-records-panel .action-column-toggle,
  .deposit-history-panel .filter-toggle,
  .report-sheet-panel .filter-toggle,
  .attendance-records-panel .filter-toggle,
  .attendance-summary-panel .filter-toggle,
  .attendance-schedule-panel .filter-toggle,
  .attendance-schedule-panel .action-column-toggle {
    width: 28px;
    min-height: 28px;
    border-radius: 7px;
    padding: 0;
  }

  .refresh-button svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .refresh-button.is-loading svg {
    animation: refreshSpin 0.8s linear infinite;
  }

  .refresh-button.is-auto-pulse svg {
    animation: refreshSpin 0.8s linear 3;
  }

  .auto-refresh-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    border-radius: 7px;
    border: 1px solid rgba(80, 151, 170, 0.35);
    background: linear-gradient(180deg, #ffffff, #eef8fb);
    color: var(--navy);
    font-weight: 800;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.01em;
    padding: 0 8px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 133, 155, 0.06);
    cursor: pointer;
  }

  .auto-refresh-toggle.is-on {
    border-color: rgba(5, 166, 188, 0.55);
    background: linear-gradient(180deg, #e8fbff, #d5f4fa);
    color: var(--brand-strong);
  }

  .auto-refresh-toggle:focus {
    outline: 2px solid rgba(5, 207, 231, 0.35);
    outline-offset: 1px;
  }

  .auto-refresh-toggle:hover {
    border-color: rgba(5, 166, 188, 0.5);
  }

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

  .filter-toggle {
    display: inline-grid;
    place-items: center;
  }

  .filter-toggle.is-active,
  .action-column-toggle.is-active {
    background: #e8fbff;
    border-color: var(--brand);
    color: #007991;
    box-shadow: 0 8px 22px rgba(5, 207, 231, 0.18);
  }

  .filter-icon {
    width: 20px;
    height: 18px;
    background: #02091e;
    clip-path: polygon(0 0, 100% 0, 62% 48%, 62% 82%, 38% 100%, 38% 48%);
  }

  .filter-icon::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 3px auto 0;
    background: #ffffff;
    clip-path: polygon(0 0, 100% 0, 58% 48%, 58% 74%, 42% 86%, 42% 48%);
  }

  .action-column-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .menu-parent {
    position: relative;
    padding-right: 34px;
  }

  .menu-parent::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-62%) rotate(45deg);
  }

  .menu-group.is-open .menu-parent::after {
    transform: translateY(-62%) rotate(45deg);
  }

  .submenu {
    display: grid;
    gap: 5px;
    margin-left: 10px;
    padding-left: 12px;
    border-left: 1px solid rgba(0, 231, 255, 0.24);
  }

  .menu-group.is-open .submenu[hidden] {
    display: grid;
  }

  .submenu-item {
    width: 100%;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    background: transparent;
    color: #a8d9e4;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
  }

  .submenu-item:hover,
  .submenu-item.is-active {
    background:
      linear-gradient(90deg, #e7fdff 0, #8cf5ff 2px, #00c8df 5px, transparent 7px),
      linear-gradient(100deg, rgba(218, 253, 255, 0.2), rgba(0, 212, 239, 0.18), rgba(255, 255, 255, 0.04));
    color: #ffffff;
    box-shadow: inset 3px 0 0 rgba(226, 253, 255, 0.92), 0 8px 18px rgba(0, 202, 232, 0.14), 0 0 12px rgba(0, 231, 255, 0.18);
  }

  .manual-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    align-items: end;
  }

  .page[data-page="test-transaction"] .manual-form > .field-error,
  .page[data-page="test-transaction"] .manual-form > [data-test-transaction-result],
  .page[data-page="test-transaction"] .manual-form > .manual-form-actions {
    grid-column: 1 / -1;
  }

  .manual-form label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: #324a5c;
    font-size: 12px;
    font-weight: 900;
  }

  .field-error {
    display: block;
    min-height: 14px;
    margin-top: 4px;
    color: var(--danger);
    font-size: 11px;
    font-weight: 900;
  }

  .field-error.is-success {
    color: var(--good);
  }

  .field-error.is-error {
    color: var(--danger);
  }

  .field-error:empty {
    visibility: hidden;
  }

  .manual-form input,
  .manual-form select,
  .manual-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    border-color: #b8cbd8;
    color: #02091e;
    font-size: 15px;
    font-weight: 900;
  }

  .manual-form input[readonly],
  .manual-form input:disabled {
    background: linear-gradient(180deg, #eef6fa, #e2edf4);
    color: #05112b;
  }

  .manual-form select.is-locked,
  .manual-form select[data-attendance-schedule-user-select]:disabled,
  .manual-form select[data-attendance-schedule-off-user-select]:disabled {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: linear-gradient(180deg, #eef6fa, #e2edf4);
    background-image: none;
    color: #05112b;
    cursor: default;
    opacity: 1;
    padding-right: 12px;
    pointer-events: none;
  }

  .manual-form select.is-locked::-ms-expand,
  .manual-form select[data-attendance-schedule-user-select]:disabled::-ms-expand,
  .manual-form select[data-attendance-schedule-off-user-select]:disabled::-ms-expand {
    display: none;
  }

  .manual-form input:disabled {
    cursor: not-allowed;
    opacity: 0.72;
  }

  .pay-type-toggle {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 0 14px;
    background: linear-gradient(180deg, #ffffff, #edf5f9);
    color: #02091e;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
  }

  .pay-type-toggle::after {
    content: '\21c4';
    position: absolute;
    right: 14px;
    color: #168ea2;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
  }

  .pay-type-toggle:hover,
  .pay-type-toggle:focus-visible,
  .pay-type-toggle.is-qr-image {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0, 212, 239, 0.12);
    outline: 0;
  }

  .withdrawal-form.is-qr-pay .withdrawal-field-bank input,
  .withdrawal-form.is-qr-pay .withdrawal-field-account-name input,
  .withdrawal-form.is-qr-pay .withdrawal-field-account-number input,
  .withdrawal-form.is-qr-pay .withdrawal-field-amount input,
  .withdrawal-form.is-qr-pay .withdrawal-field-remarks input {
    border-color: #8ed9e5;
    box-shadow: 0 0 0 3px rgba(0, 212, 239, 0.12);
  }

  .manual-form input.is-invalid,
  .manual-form select.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.1);
  }

  .withdrawal-form {
    grid-template-columns: repeat(5, minmax(160px, 1fr));
    column-gap: 12px;
    row-gap: 18px;
    align-items: end;
    margin-top: 12px;
  }

  .withdrawal-field-bank {
    grid-column: auto;
  }

  @media (min-width: 1181px) {
    .withdrawal-field-bank {
      grid-column: 1;
      grid-row: 2;
    }

    .withdrawal-field-account-name {
      grid-column: 2;
      grid-row: 2;
    }

    .withdrawal-field-account-number {
      grid-column: 3;
      grid-row: 2;
    }

    .withdrawal-field-amount {
      grid-column: 4;
      grid-row: 2;
    }

    .withdrawal-field-remarks {
      grid-column: 5;
      grid-row: 2;
    }
  }

  .account-image-field {
    grid-column: 3;
    grid-row: 1;
  }

  .account-image-field[hidden] {
    display: none;
  }

  .account-image-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    border: 2px dashed #9db8c8;
    border-radius: 8px;
    padding: 8px 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(229, 241, 248, 0.9));
    color: #52627f;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
  }

  .account-image-field:not(.is-disabled) .account-image-drop {
    border-color: var(--brand);
    background: linear-gradient(180deg, #f7feff, #e4fbff);
    color: #075c6d;
    box-shadow: 0 0 0 3px rgba(0, 212, 239, 0.12);
  }

  .account-image-field.is-disabled {
    opacity: 0.68;
  }

  .account-image-field.is-disabled .account-image-drop {
    cursor: not-allowed;
    border-style: solid;
    background: linear-gradient(180deg, #edf4f8, #dfeaf1);
    color: #6f8292;
  }

  .manual-form input.is-locked,
  .manual-form textarea.is-locked {
    background: #eef3f7;
    color: #3d4f63;
    cursor: not-allowed;
  }

  .account-image-drop.has-image {
    border-color: var(--brand);
    color: #075c6d;
    background: #ffffff;
  }

  .account-image-drop.is-dragging,
  .account-image-drop:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0, 212, 239, 0.12);
    outline: 0;
  }

  .account-image-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
  }

  .account-image-actions[hidden] {
    display: none;
  }

  .account-image-drop.has-image .account-image-actions,
  .account-image-actions.is-visible {
    display: flex;
  }

  .account-image-icon-button {
    display: grid;
    place-items: center;
    width: 34px;
    min-height: 34px;
    border: 1px solid #c4d5e1;
    border-radius: 8px;
    background: #ffffff;
    color: var(--navy);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  }

  .account-image-icon-button:hover,
  .account-image-icon-button:focus {
    border-color: var(--brand);
    box-shadow: 0 8px 22px rgba(0, 145, 170, 0.14);
    outline: 0;
  }

  .account-image-icon-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .account-image-drop.has-image [data-account-image-label] {
    display: inline;
  }

  .deposit-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: start;
    position: relative;
    z-index: 18;
    padding-bottom: 0;
    background: transparent;
  }

  .page[data-page="deposits"].is-active > .deposit-tools > [data-bank-statement-panel],
  .page[data-page="deposits"].is-active > .deposit-tools > .deposit-bank-file-panel {
    min-height: 44px;
    padding: 8px 12px;
  }

  .bank-statement-header {
    justify-content: flex-start;
    margin-bottom: 0;
  }

  .bank-statement-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .bank-statement-title h2 {
    margin: 0;
  }

  .deposit-transaction-form {
    grid-template-columns: minmax(260px, 1.2fr) minmax(200px, 0.8fr);
    align-items: end;
    margin-top: 12px;
  }

  .deposit-transaction-form .manual-form-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .deposit-file-field {
    grid-column: span 1;
  }

  .deposit-file-drop {
    display: grid;
    min-height: 46px;
    place-items: center;
    border: 2px dashed #9db8c8;
    border-radius: 8px;
    padding: 8px 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(229, 241, 248, 0.9));
    color: #52627f;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
  }

  .deposit-file-drop.is-dragging,
  .deposit-file-drop:focus,
  .deposit-file-drop.has-file {
    border-color: var(--brand);
    background: linear-gradient(180deg, #f7feff, #e4fbff);
    color: #075c6d;
    box-shadow: 0 0 0 3px rgba(0, 212, 239, 0.12);
    outline: 0;
  }

  .deposit-bank-file-title {
    margin-top: 14px;
    color: #324a5c;
    font-size: 12px;
    font-weight: 900;
  }

  .deposit-bank-file-panel {
    padding-bottom: 12px;
  }

  .deposit-bank-file-panel .panel-header {
    margin-bottom: 8px;
  }

  .deposit-bank-header {
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
  }

  .deposit-bank-header h2 {
    flex: 0 0 auto;
  }

  .deposit-bank-form {
    display: inline-flex;
    flex: 0 1 auto;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
  }

  .deposit-bank-form label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #324a5c;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }

  .deposit-bank-form input {
    width: 58px;
    height: 30px;
    min-height: 30px;
    padding: 0 8px;
    text-transform: uppercase;
  }

  .deposit-bank-form input::placeholder {
    text-transform: none;
  }

  .deposit-bank-form .manual-form-actions {
    grid-column: auto;
  }

  .deposit-bank-form .primary-button.compact {
    width: 58px;
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .deposit-bank-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0;
  }

  .deposit-bank-chip {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(0, 188, 214, 0.42);
    border-radius: 8px;
    padding: 0 12px;
    background: linear-gradient(135deg, rgba(0, 212, 239, 0.16), rgba(255, 255, 255, 0.88));
    color: var(--navy-soft);
    font-size: 12px;
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    cursor: pointer;
  }

  .deposit-bank-chip span {
    border-left: 1px solid rgba(0, 125, 145, 0.2);
    padding-left: 8px;
    color: #52627f;
    font-size: 11px;
  }

  .deposit-bank-chip.is-active,
  .deposit-bank-chip:hover {
    border-color: var(--brand);
    background: linear-gradient(180deg, var(--brand), var(--brand-strong));
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(0, 188, 214, 0.2);
  }

  .deposit-bank-chip.is-active span,
  .deposit-bank-chip:hover span {
    border-left-color: rgba(255, 255, 255, 0.38);
    color: rgba(255, 255, 255, 0.86);
  }

  .withdrawal-form .manual-form-actions {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: -6px;
  }

  .transaction-filter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
    margin-bottom: 10px;
  }

  .transaction-filter label {
    color: #324a5c;
    font-size: 12px;
    font-weight: 900;
  }

  .transaction-filter input,
  .transaction-filter select {
    min-height: 40px;
    border-color: #b8cbd8;
    color: #02091e;
    font-size: 13px;
    font-weight: 900;
  }

  .filter-summary {
    margin-bottom: 10px;
    color: #52627f;
    font-size: 12px;
    font-weight: 800;
  }

  .user-record-summary-table,
  .attendance-summary-table {
    margin-bottom: 0;
    max-height: none;
  }

  .page[data-page="attendance"] > .panel > .panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .attendance-daily-header {
    margin-top: 0;
  }

  .attendance-daily-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .attendance-summary-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .attendance-schedule-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
  }

  .attendance-schedule-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    justify-self: start;
  }

  .attendance-schedule-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-self: center;
  }

  .attendance-schedule-toolbar > .panel-actions {
    justify-self: end;
  }

  .attendance-schedule-panel > .panel-header .attendance-section-title h2 {
    margin: 0;
  }

  .attendance-schedule-title h2 {
    margin: 0;
  }

  .attendance-schedule-panel > .attendance-schedule-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  .attendance-schedule-request-form {
    margin: 0 0 14px;
  }

  .attendance-schedule-request-form .manual-form-actions {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .attendance-schedule-month-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #52627f;
    font-size: 12px;
    font-weight: 700;
  }

  .attendance-schedule-month-field select {
    width: 132px;
    height: 28px;
    min-height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(80, 151, 170, 0.35);
    background: linear-gradient(180deg, #ffffff, #eef8fb);
    color: var(--navy);
    font-weight: 800;
    font-size: 12px;
    padding: 4px 24px 4px 8px;
  }

  .attendance-schedule-week-toggles {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .attendance-schedule-week-toggles .ghost-button {
    min-height: 28px;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 800;
  }

  .attendance-schedule-week-toggles .ghost-button.is-active {
    background: #e8fbff;
    border-color: var(--brand);
    color: #007991;
    box-shadow: 0 8px 22px rgba(5, 207, 231, 0.18);
  }

  .attendance-schedule-table {
    margin-bottom: 0;
    flex: 1 1 0;
    min-height: 0;
    height: 0;
    overflow: auto;
    overflow-x: auto;
    overflow-y: auto;
    scrollbar-gutter: stable;
    border: 1px solid #d7e4ec;
    border-radius: 10px;
    background: #ffffff;
    scrollbar-color: rgba(6, 151, 177, 0.68) rgba(224, 238, 246, 0.9);
    scrollbar-width: thin;
  }

  .attendance-schedule-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .attendance-schedule-table::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(224, 238, 246, 0.9);
  }

  .attendance-schedule-table::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #10c2d5, #607d95);
  }

  .attendance-schedule-table table {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }

  .attendance-schedule-table th,
  .attendance-schedule-table td {
    padding: 8px 10px;
    white-space: nowrap;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
  }

  .attendance-schedule-table th:first-child,
  .attendance-schedule-table td:first-child,
  .attendance-schedule-table th:nth-child(2),
  .attendance-schedule-table td:nth-child(2),
  .attendance-schedule-table th:nth-child(3),
  .attendance-schedule-table td:nth-child(3) {
    text-align: left;
    position: sticky;
    background: #fff;
    z-index: 2;
    padding: 8px 10px;
  }

  .attendance-schedule-table th:first-child,
  .attendance-schedule-table td:first-child {
    left: 0;
    width: 96px;
    min-width: 96px;
    max-width: 120px;
  }

  .attendance-schedule-table th:nth-child(2),
  .attendance-schedule-table td:nth-child(2) {
    left: 96px;
    width: 100px;
    min-width: 100px;
    max-width: 120px;
  }

  .attendance-schedule-table th:nth-child(3),
  .attendance-schedule-table td:nth-child(3) {
    left: 196px;
    width: 78px;
    min-width: 78px;
    max-width: 96px;
    border-right: 1px solid #cfdce6;
    box-shadow: 6px 0 10px rgba(15, 35, 52, 0.05);
  }

  .attendance-schedule-table thead th:nth-child(3) {
    box-shadow: 0 2px 0 #d5e2ea, 6px 0 10px rgba(15, 35, 52, 0.05);
  }

  .attendance-schedule-table.has-actions .attendance-schedule-action-th,
  .attendance-schedule-table.has-actions .attendance-schedule-action-cell {
    position: sticky;
    right: 0;
    z-index: 2;
    width: 76px;
    min-width: 76px;
    max-width: 88px;
    text-align: center;
    background: #fff;
    border-left: 1px solid #cfdce6;
    box-shadow: -8px 0 14px rgba(15, 35, 52, 0.08);
  }

  .attendance-schedule-table.has-actions thead .attendance-schedule-action-th {
    z-index: 5;
    background: #eef5f9;
  }

  .attendance-schedule-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .attendance-schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: linear-gradient(180deg, #f4f8fb, #e8f1f6);
    color: #02091e;
    font-weight: 800;
    box-shadow: 0 2px 0 #d5e2ea;
  }

  .attendance-schedule-table thead th:first-child,
  .attendance-schedule-table thead th:nth-child(2),
  .attendance-schedule-table thead th:nth-child(3) {
    z-index: 5;
    background: linear-gradient(180deg, #f4f8fb, #e8f1f6);
  }

  .attendance-schedule-edit-toggle,
  .attendance-schedule-save-toggle,
  .attendance-schedule-cancel-toggle,
  .attendance-schedule-delete-toggle {
    width: 28px;
    min-height: 28px;
    border-radius: 7px;
    padding: 0;
  }

  .attendance-schedule-edit-toggle:hover,
  .attendance-schedule-edit-toggle:focus-visible,
  .attendance-schedule-save-toggle:hover,
  .attendance-schedule-save-toggle:focus-visible,
  .attendance-schedule-cancel-toggle:hover,
  .attendance-schedule-cancel-toggle:focus-visible,
  .attendance-schedule-delete-toggle:hover,
  .attendance-schedule-delete-toggle:focus-visible {
    background: #e8fbff;
    border-color: var(--brand);
    color: #007991;
    box-shadow: 0 8px 22px rgba(5, 207, 231, 0.18);
  }

  .attendance-schedule-person-row.is-zebra td,
  .attendance-schedule-person-row.is-zebra td:first-child,
  .attendance-schedule-person-row.is-zebra td:nth-child(2),
  .attendance-schedule-person-row.is-zebra td:nth-child(3) {
    background: #f8fbfd;
  }

  .attendance-schedule-person-row.is-editing {
    background: #f3fbfd;
  }

  .attendance-schedule-person-row.is-editing td,
  .attendance-schedule-person-row.is-editing td:first-child,
  .attendance-schedule-person-row.is-editing td:nth-child(2),
  .attendance-schedule-person-row.is-editing td:nth-child(3) {
    background: #eef9fc;
  }

  .attendance-schedule-cell-select {
    width: 100%;
    min-width: 78px;
    max-width: 108px;
    height: 28px;
    min-height: 28px;
    border: 1px solid rgba(80, 151, 170, 0.4);
    border-radius: 6px;
    background: #ffffff;
    color: #02091e;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 4px;
  }

  .attendance-schedule-custom-input {
    max-width: 118px;
    border-color: rgba(5, 166, 188, 0.65);
    box-shadow: 0 0 0 2px rgba(5, 207, 231, 0.18);
  }

  .attendance-schedule-shift-select {
    min-width: 88px;
    max-width: 110px;
  }

  .attendance-schedule-date-th {
    min-width: 64px;
    line-height: 1.2;
  }

  .attendance-schedule-date-th .attendance-schedule-date,
  .attendance-schedule-date-th .attendance-schedule-weekday {
    display: block;
  }

  .attendance-schedule-date-th .attendance-schedule-date {
    font-size: 12px;
    font-weight: 800;
  }

  .attendance-schedule-date-th .attendance-schedule-weekday {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #52627f;
  }

  .attendance-schedule-date-th.is-weekend,
  .attendance-schedule-person-row td.is-weekend {
    background: #f3f6f9;
  }

  .attendance-schedule-date-th.is-today,
  .attendance-schedule-person-row td.is-today {
    background: #e7f8ef;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35);
  }

  .attendance-schedule-date-th.is-today {
    color: #0b7a3a;
  }

  .attendance-schedule-table .attendance-schedule-station-row td {
    background: linear-gradient(90deg, #d9f2f7, #eef6f9 40%, #e8f2f7);
    color: #007991;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
    padding: 4px 10px;
    height: 26px;
    border-top: 1px solid #c5dde6;
    border-bottom: 1px solid #c5dde6;
    border-right: none;
    box-shadow: 0 1px 0 #c5dde6;
  }

  .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-label {
    position: sticky;
    top: var(--attendance-schedule-header-height, 49px);
    left: 0;
    z-index: 4;
    width: 274px;
    min-width: 274px;
    max-width: 274px;
    text-align: left;
    background: linear-gradient(90deg, #d9f2f7, #eef6f9 40%, #e8f2f7);
    border-right: 1px solid #cfdce6;
    box-shadow: inset 3px 0 0 #07a7bf, 6px 0 10px rgba(15, 35, 52, 0.05);
  }

  .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-fill {
    position: sticky;
    top: var(--attendance-schedule-header-height, 49px);
    left: auto;
    right: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    z-index: 3;
    background: linear-gradient(90deg, #d9f2f7, #eef6f9 40%, #e8f2f7);
    box-shadow: 0 1px 0 #c5dde6;
  }

  .attendance-schedule-table .attendance-schedule-station-row .attendance-schedule-station-action {
    position: sticky;
    top: var(--attendance-schedule-header-height, 49px);
    right: 0;
    left: auto;
    z-index: 4;
    width: 76px;
    min-width: 76px;
    max-width: 88px;
    background: linear-gradient(90deg, #d9f2f7, #eef6f9 40%, #e8f2f7);
    border-left: 1px solid #cfdce6;
    box-shadow: -8px 0 14px rgba(15, 35, 52, 0.08);
  }

  .attendance-schedule-shift-chip {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
  }

  .attendance-schedule-person-row td.is-empty-slot {
    color: #9aa8b5;
    font-weight: 600;
  }

  .attendance-schedule-person-row td.is-off {
    color: #007991;
    background: linear-gradient(180deg, #e8fbff 0%, #c5f3fa 100%);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--brand-strong);
  }

  .attendance-schedule-person-row td.is-off-cover {
    color: #8a5a00;
    background: linear-gradient(180deg, #fff8e8 0%, #ffe4a8 100%);
    font-weight: 800;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px #d4a017;
  }

  .attendance-schedule-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #d7e4ec;
    border-radius: 8px;
    background: #f7fafc;
  }

  .attendance-schedule-legend {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .attendance-schedule-legend li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #405468;
    font-size: 11px;
    font-weight: 700;
  }

  .attendance-schedule-legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(15, 35, 52, 0.08);
  }

  .attendance-schedule-legend-swatch.is-off {
    background: linear-gradient(180deg, #e8fbff, #c5f3fa);
    border-color: var(--brand-strong);
  }

  .attendance-schedule-legend-swatch.is-cover {
    background: linear-gradient(180deg, #fff8e8, #ffe4a8);
    border-color: #d4a017;
  }

  .attendance-schedule-legend-swatch.is-today {
    background: #e7f8ef;
    border-color: rgba(22, 163, 74, 0.55);
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.25);
  }

  .attendance-schedule-filters {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px 10px;
  }

  .attendance-schedule-filters label {
    display: grid;
    gap: 4px;
    margin: 0;
    color: #52627f;
    font-size: 11px;
    font-weight: 700;
  }

  .attendance-schedule-filters select {
    min-width: 110px;
    min-height: 30px;
    border: 1px solid #c4d5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #02091e;
    font-size: 12px;
    font-weight: 700;
    padding: 0 8px;
  }

  .attendance-summary-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin: 0;
    min-height: 44px;
    background: #ffffff;
  }

  .attendance-summary-header > .panel-actions {
    justify-self: end;
  }

  .attendance-summary-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-self: center;
  }

  .attendance-summary-month-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #52627f;
    font-size: 12px;
    font-weight: 700;
  }

  .attendance-summary-month-field select {
    width: 132px;
    height: 28px;
    min-height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(80, 151, 170, 0.35);
    background: linear-gradient(180deg, #ffffff, #eef8fb);
    color: var(--navy);
    font-weight: 800;
    font-size: 12px;
    padding: 4px 24px 4px 8px;
  }

  .attendance-summary-period-toggles {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .attendance-summary-period-toggles .ghost-button {
    min-height: 28px;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 800;
  }

  .attendance-summary-period-toggles .ghost-button.is-active {
    background: #e8fbff;
    border-color: var(--brand);
    color: #007991;
    box-shadow: 0 8px 22px rgba(5, 207, 231, 0.18);
  }

  .payroll-header-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
  }

  .payroll-scope {
    color: #007991;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  .payroll-rates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin: 0 0 8px;
    padding: 8px 10px;
    list-style: none;
    border: 1px solid rgba(80, 151, 170, 0.22);
    border-radius: 8px;
    background: #f6fcfe;
    color: #52627f;
    font-size: 12px;
    font-weight: 700;
  }

  .payroll-rates li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
  }

  .payroll-rates strong {
    color: var(--navy);
    font-weight: 800;
  }

  .payroll-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .payroll-table th,
  .payroll-table td {
    padding: 5px 6px;
    font-size: 12px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
  }

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

  .payroll-table tbody tr.is-zebra td {
    background: #f4fafc;
  }

  .payroll-table tfoot td {
    font-weight: 800;
    background: #e8fbff;
    border-top: 1px solid rgba(80, 151, 170, 0.28);
  }

  .payroll-payslip-col,
  .payroll-payslip-cell {
    width: 44px;
    max-width: 44px;
    text-align: center;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .payroll-payslip-toggle {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
  }

  .payroll-payslip-toggle .action-column-icon {
    width: 14px;
    height: 14px;
  }

  .payroll-payslip-modal {
    position: fixed;
    z-index: 92;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgba(5, 11, 35, 0.62);
    backdrop-filter: blur(7px);
    overflow: auto;
  }

  .payroll-payslip-modal[hidden] {
    display: none;
  }

  .payroll-payslip-card {
    display: grid;
    width: min(430px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    min-width: 0;
    max-height: min(92vh, 92dvh);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(6, 143, 168, 0.28);
    border-radius: 14px;
    background: #eef4f8;
    box-shadow: 0 32px 90px rgba(2, 10, 34, 0.42);
  }

  .payroll-payslip-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 8px 10px;
    background: linear-gradient(180deg, #f7fbfd, #eaf2f6);
    border-bottom: 1px solid #d5e2ea;
  }

  .payroll-payslip-toolbar .ghost-button,
  .payroll-payslip-toolbar .proof-close {
    min-height: 28px;
    padding: 0 8px;
    font-size: 12px;
  }

  .payroll-payslip-doc {
    min-width: 0;
    padding: 0 18px 16px;
    background: #ffffff;
    border-top: 4px solid var(--brand-strong);
  }

  .payroll-payslip-letterhead {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 16px 0 14px;
    border-bottom: 1px solid #dce7ee;
  }

  .payroll-payslip-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    background-color: #063041;
    background-size: contain;
    border-radius: 10px;
    box-shadow: 0 6px 14px rgba(6, 143, 168, 0.2);
  }

  .payroll-payslip-brand {
    min-width: 0;
  }

  .payroll-payslip-company {
    margin: 0;
    color: var(--brand-strong);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .payroll-payslip-letterhead h2 {
    margin: 2px 0 0;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.01em;
  }

  .payroll-payslip-body {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding-top: 14px;
    overflow-x: hidden;
  }

  .payroll-payslip-identity {
    display: grid;
    gap: 7px;
    min-width: 0;
  }

  .payroll-payslip-name {
    margin: 0;
    color: var(--navy);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.01em;
    overflow-wrap: anywhere;
  }

  .payroll-payslip-period {
    margin: 0;
    justify-self: start;
    border-radius: 999px;
    padding: 4px 10px;
    background: #e7f8fb;
    color: var(--brand-strong);
    font-size: 11px;
    font-weight: 800;
  }

  .payroll-payslip-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
  }

  .payroll-payslip-facts:empty {
    display: none;
  }

  .payroll-payslip-fact {
    min-width: 0;
    border: 1px solid #e1edf3;
    border-radius: 9px;
    padding: 8px 9px 7px;
    background: #f7fbfd;
  }

  .payroll-payslip-fact span {
    display: block;
    color: #6a7f91;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .payroll-payslip-fact strong {
    display: block;
    margin-top: 3px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
    overflow-wrap: anywhere;
  }

  .payroll-payslip-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    column-gap: 12px;
    min-width: 0;
    border: 1px solid #dce8ee;
    border-radius: 10px;
    padding: 2px 12px 4px;
    background: #fbfefe;
  }

  .payroll-payslip-lines-head,
  .payroll-payslip-line {
    display: contents;
  }

  .payroll-payslip-lines-head span,
  .payroll-payslip-line > span,
  .payroll-payslip-line > strong {
    padding: 8px 0;
    border-bottom: 1px solid #edf3f6;
    color: var(--navy);
    font-size: 12px;
  }

  .payroll-payslip-lines-head span {
    padding: 8px 0 7px;
    border-bottom-color: #d5e4eb;
    color: #4a6072;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .payroll-payslip-line > span:first-child {
    overflow-wrap: anywhere;
  }

  .payroll-payslip-lines-head span:last-child,
  .payroll-payslip-line > strong {
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
  }

  .payroll-payslip-sheet > .payroll-payslip-line:last-of-type > span,
  .payroll-payslip-sheet > .payroll-payslip-line:last-of-type > strong {
    border-bottom: 0;
  }

  .payroll-payslip-net {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #063041 0%, #0a5266 100%);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(6, 48, 65, 0.22);
  }

  .payroll-payslip-net span {
    color: #9feaf4;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .payroll-payslip-net strong {
    font-size: 16px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .payroll-payslip-note {
    margin: 2px 0 0;
    color: #7a8d9d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
  }

  .payroll-adjustment-cell {
    min-width: 0;
  }

  .payroll-adjustment-input,
  .payroll-amount-input {
    width: 100%;
    max-width: 88px;
    height: 26px;
    margin: 0 0 0 auto;
    padding: 2px 8px;
    border: 1px solid rgba(80, 151, 170, 0.35);
    border-radius: 8px;
    background: #ffffff;
    color: var(--navy);
    font: inherit;
    font-weight: 800;
    font-size: 13px;
    text-align: right;
  }

  .payroll-adjustment-input:focus,
  .payroll-amount-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(5, 207, 231, 0.18);
  }

  .payroll-table tbody tr.is-zebra .payroll-adjustment-input,
  .payroll-table tbody tr.is-zebra .payroll-amount-input {
    background: #ffffff;
  }

  .payroll-ot-hours-input.is-edited {
    border-color: var(--brand);
  }

  .attendance-filter-bar,
  .attendance-daily-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    min-height: 44px;
    background: #ffffff;
  }

  [data-attendance-time-in],
  [data-attendance-time-out] {
    position: relative;
    min-width: 118px;
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.02em;
  }

  [data-attendance-time-in]::before,
  [data-attendance-time-out]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
  }

  [data-attendance-time-in]::before {
    background: #7CFFB2;
    box-shadow: 0 0 0 3px rgba(124, 255, 178, 0.28);
  }

  [data-attendance-time-out]::before {
    background: #FF8E8E;
    box-shadow: 0 0 0 3px rgba(255, 142, 142, 0.3);
  }

  [data-attendance-time-in]:disabled,
  [data-attendance-time-out]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .attendance-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .attendance-section-title h2 {
    margin: 0;
  }

  .attendance-records-panel .attendance-rules {
    flex: 0 0 auto;
  }

  .attendance-summary-panel .attendance-rules {
    margin-bottom: 0;
  }

  .attendance-filter-bar .filter-toggle,
  .attendance-daily-header .filter-toggle,
  .attendance-summary-header .filter-toggle,
  .attendance-schedule-toolbar .filter-toggle {
    width: 28px;
    min-height: 28px;
    border-radius: 7px;
    padding: 0;
    flex: 0 0 auto;
  }

  .attendance-rules {
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    background: #f7fafc;
    color: #52627f;
    font-size: 12px;
    line-height: 1.45;
  }

  .attendance-rules p {
    margin: 0;
  }

  .attendance-rules p + p {
    margin-top: 6px;
  }

  .attendance-rules strong {
    color: #02091e;
  }

  .user-record-summary-table table,
  .attendance-summary-table table {
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
  }

  .user-record-summary-table th,
  .user-record-summary-table td,
  .attendance-summary-table th,
  .attendance-summary-table td {
    white-space: nowrap;
  }

  .attendance-summary-table th,
  .attendance-summary-table td {
    padding: 6px 8px;
    font-size: 12px;
    text-align: center;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    color: #02091e;
  }

  .attendance-summary-record-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7fafc;
    color: #02091e;
    font-weight: 800;
    box-shadow: 0 1px 0 #e2e8f0;
  }

  .attendance-daily-record-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7fafc;
    color: #02091e;
    font-weight: 800;
    box-shadow: 0 1px 0 #e2e8f0;
  }

  .attendance-summary-row td {
    background: #fff;
  }

  .attendance-summary-row.is-zebra td {
    background: #f8fbfd;
  }

  .attendance-summary-row.is-expanded td {
    background: #fff;
  }

  .attendance-summary-row.is-expanded.is-zebra td {
    background: #f8fbfd;
  }

  .attendance-summary-row.is-edited td {
    background: rgba(255, 196, 77, 0.08);
  }

  .attendance-daily-row.is-zebra td {
    background: #f8fbfd;
  }

  .attendance-daily-row.is-on-duty.is-zebra td {
    background: #e8f7ee;
  }

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

  .attendance-summary-actions .icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .attendance-summary-actions .action-column-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .attendance-detail-row td {
    vertical-align: top;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
  }

  .attendance-detail-cell {
    white-space: normal !important;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .attendance-detail-spacer {
    background: #f8fafc;
  }

  .attendance-detail-empty {
    margin: 0;
    color: #7a879c;
    font-size: 12px;
    font-weight: 700;
  }

  .attendance-detail-list {
    margin: 0;
    padding-left: 16px;
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
    font-weight: 700;
  }

  .account-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    align-items: end;
  }

  .account-transfer-switch-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    color: #324a5c;
    font-size: 12px;
    font-weight: 900;
  }

  .account-transfer-switches {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
  }

  .page[data-page="bank-transfer-types"] .account-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page[data-page="bank-transfer-types"] .account-form > .field-error,
  .page[data-page="bank-transfer-types"] .account-form > .manual-form-actions {
    grid-column: 1 / -1;
  }

  .page[data-page="bank-transfer-types"] .manual-form-actions {
    justify-content: flex-start;
  }

  .account-form[hidden] {
    display: none !important;
  }

  .account-transfer-type-field {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
  }

  .account-transfer-type-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
  }

  .account-transfer-type-checks {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-width: 0;
    min-height: 46px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 251, 0.92));
  }

  .account-transfer-type-empty {
    color: #7b8ea0;
    font-size: 14px;
    font-weight: 800;
  }

  .account-transfer-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
  }

  .account-transfer-check input {
    width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--brand);
  }

  .account-transfer-type-row .ghost-button {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 12px;
  }

  .account-transfer-type-cell {
    white-space: normal;
  }

  .account-detail-view {
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
  }

  .page[data-page="settings"] .account-form {
    gap: 8px 10px;
    margin-bottom: 8px;
  }

  .page[data-page="settings"] .account-form > label {
    gap: 4px;
    font-size: 11px;
  }

  .page[data-page="settings"] .account-form input:not([type="hidden"]):not([type="checkbox"]) {
    min-height: 34px;
    height: 34px;
    padding: 4px 10px;
  }

  .page[data-page="settings"] .account-transfer-type-field {
    gap: 4px;
  }

  .page[data-page="settings"] .account-transfer-type-checks {
    min-height: 34px;
    padding: 4px 10px;
  }

  .page[data-page="settings"] .account-transfer-type-row .ghost-button,
  .page[data-page="settings"] .account-form .manual-form-actions .primary-button.compact,
  .page[data-page="settings"] .account-form .manual-form-actions .ghost-button.compact {
    min-height: 34px;
    height: 34px;
  }

  @media (min-width: 981px) {
    .page[data-page="settings"] .account-form {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .page[data-page="settings"] .account-transfer-type-field,
    .page[data-page="settings"] .account-form > .manual-form-actions {
      grid-column: 1 / -1;
    }
  }

  .ip-access-table-form {
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .user-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    align-items: end;
    margin-bottom: 16px;
  }

  .announcement-form {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 16px;
    max-width: 1180px;
  }

  .announcement-message-field,
  .announcement-form .manual-form-actions {
    grid-column: 1 / -1;
  }

  .announcement-form textarea {
    min-height: 140px;
  }

  .announcement-records {
    margin-top: 18px;
  }

  .announcement-records th,
  .announcement-records td {
    vertical-align: middle;
  }

  .announcement-records th:last-child,
  .announcement-records td:last-child {
    width: 150px;
    text-align: center;
  }

  .announcement-message-cell {
    max-width: 320px;
    white-space: normal;
    line-height: 1.35;
  }

  .announcement-audit-cell {
    min-width: 190px;
    white-space: pre-line;
    line-height: 1.45;
  }

  .announcement-action-cell {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
  }

  .table-action-button {
    min-height: 28px;
    border: 1px solid #c4d5e1;
    border-radius: 7px;
    padding: 0 10px;
    background: linear-gradient(180deg, #ffffff, #edf4f8);
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
  }

  .table-action-button:hover,
  .table-action-button:focus {
    border-color: var(--brand);
    box-shadow: 0 7px 18px rgba(0, 145, 170, 0.14);
    outline: 0;
  }

  .table-action-button.danger {
    color: var(--danger);
    border-color: #f1b9b5;
  }

  .table-empty-cell {
    padding: 18px;
    color: #52627f;
    font-weight: 800;
    text-align: center;
  }

  .settings-wide {
    grid-column: 1 / -1;
  }

  .manual-form-wide {
    grid-column: span 2;
  }

  .manual-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .access-dropdown {
    position: relative;
  }

  .access-trigger {
    width: 100%;
    min-height: 40px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 11px 34px 11px 12px;
    background: linear-gradient(180deg, #ffffff, #edf5f9);
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .access-trigger::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 13px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--navy);
    transform: translateY(-50%);
  }

  .access-trigger:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(5, 207, 231, 0.16);
    outline: none;
  }

  .access-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    display: grid;
    gap: 2px;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 6px;
    background: linear-gradient(180deg, #ffffff, #edf5f9);
    box-shadow: 0 16px 34px rgba(18, 44, 64, 0.16);
  }

  .access-menu label {
    display: flex;
    grid-auto-flow: column;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    padding: 7px 8px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
  }

  .access-menu label:hover {
    background: #edf3ff;
  }

  .access-menu .access-all-option {
    margin-bottom: 4px;
    border-bottom: 1px solid #dce4f2;
    border-radius: 6px 6px 0 0;
    padding-bottom: 9px;
    color: #05839a;
  }

  .access-menu input {
    width: 14px;
    height: 14px;
    min-height: 14px;
    accent-color: var(--brand);
  }

  .bar-chart {
    display: flex;
    align-items: end;
    gap: 12px;
    height: 230px;
    padding-top: 18px;
  }

  .bar-chart span {
    flex: 1;
    min-width: 16px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #ffffff 0%, #dfeaf2 20%, #00d4ef 62%, #073d62 100%);
    box-shadow: 0 10px 24px rgba(0, 212, 239, 0.18);
  }

  .activity-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .activity-list li {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    color: var(--navy-soft);
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
  }

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

  .admin-file-card {
    display: grid;
    gap: 8px;
    align-content: start;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
  }

  .admin-file-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .admin-file-card strong {
    color: var(--navy);
    font-size: 28px;
    font-weight: 900;
  }

  .admin-file-card p {
    margin: 0 0 8px;
    color: var(--muted);
  }

  .admin-file-wide {
    grid-column: 1 / -1;
  }

  .api-key-heading {
    margin: 18px 0 8px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 900;
  }

  .page[data-page="merchant"] .api-key-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page[data-page="merchant"] .api-key-webhook-field,
  .page[data-page="merchant"] .api-key-form .manual-form-actions {
    grid-column: 1 / -1;
  }

  .page[data-page="merchant"] .api-key-form select {
    width: 100%;
    min-height: 42px;
    border-color: #b8cbd8;
    color: #02091e;
    font-size: 14px;
    font-weight: 800;
  }

  .api-key-form .access-dropdown {
    width: 100%;
    z-index: 8;
  }

  .api-key-form .access-trigger {
    min-height: 42px;
    font-size: 14px;
    font-weight: 800;
  }

  .api-key-form .access-menu input {
    width: 14px;
    height: 14px;
    min-height: 14px;
  }

  .api-key-webhook-field {
    grid-column: 1 / -1;
  }

  .api-key-form label {
    color: #33415f;
    font-size: 12px;
    font-weight: 900;
  }

  .api-key-form input {
    min-height: 42px;
    border-color: #b8cbd8;
    color: #02091e;
    font-size: 14px;
    font-weight: 800;
  }

  .api-key-secret {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 14px;
    border: 1px dashed #0895ae;
    border-radius: 8px;
    background: #f3fbfd;
  }

  .api-key-secret[hidden] {
    display: none;
  }

  .api-key-secret p {
    margin: 0;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800;
  }

  .api-key-secret code {
    display: block;
    overflow-wrap: anywhere;
    word-break: break-all;
    padding: 10px 12px;
    border-radius: 6px;
    background: #071827;
    color: #e8f7fb;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
  }

  .api-key-table {
    margin: 0 0 18px;
  }

  .api-key-table .account-action-cell {
    width: 90px;
    text-align: center;
  }

  .integration-docs-actions {
    margin: 0 0 12px;
    justify-content: flex-start;
  }

  .integration-docs-actions a.ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 13px;
  }

  .integration-docs {
    max-height: min(72vh, 760px);
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px 20px;
    background: linear-gradient(180deg, #ffffff, #f6fbfe);
    color: var(--navy-soft);
    text-align: left;
    line-height: 1.55;
  }

  .integration-docs h1,
  .integration-docs h2,
  .integration-docs h3 {
    margin: 1.1em 0 0.45em;
    color: var(--navy);
    font-weight: 900;
    letter-spacing: 0.01em;
  }

  .integration-docs h1 { font-size: 20px; margin-top: 0; }
  .integration-docs h2 { font-size: 16px; }
  .integration-docs h3 { font-size: 14px; }

  .integration-docs p,
  .integration-docs li {
    margin: 0 0 8px;
    font-size: 13px;
  }

  .integration-docs ul,
  .integration-docs ol {
    margin: 0 0 12px;
    padding-left: 22px;
  }

  .integration-docs code {
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    background: #eef6fa;
    border: 1px solid rgba(8, 149, 174, 0.18);
    border-radius: 4px;
    padding: 1px 5px;
  }

  .integration-docs pre {
    margin: 0 0 14px;
    overflow: auto;
    border: 1px solid rgba(8, 149, 174, 0.22);
    border-radius: 8px;
    padding: 12px;
    background: #071827;
    color: #e8f7fb;
  }

  .integration-docs pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 12px;
    white-space: pre;
  }

  .integration-docs table {
    min-width: 0;
    width: 100%;
    margin: 0 0 14px;
    font-size: 12px;
  }

  .integration-docs th,
  .integration-docs td {
    height: auto;
    text-align: left;
    white-space: normal;
    vertical-align: top;
    padding: 8px 10px;
  }

  .integration-docs hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 16px 0;
  }

  .local-usage-note {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
  }

  .local-usage-table {
    margin: 0 0 10px;
  }

  .local-usage-table th,
  .local-usage-table td {
    font-size: 13px;
  }

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

  .id-sequence-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(180deg, #ffffff, #f6f9ff);
  }

  .id-sequence-card h3 {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--navy);
    font-size: 15px;
  }

  .id-sequence-card label {
    color: #33415f;
    font-size: 12px;
    font-weight: 900;
  }

  .id-sequence-card input {
    min-height: 42px;
    border-color: #b8cbd8;
    color: #02091e;
    font-size: 14px;
    font-weight: 900;
  }

  .id-preview {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px dashed #b9c7df;
    border-radius: 8px;
    padding: 10px 12px;
    background: #ffffff;
  }

  .id-preview span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .id-preview strong {
    color: var(--navy);
    font-size: 16px;
    font-weight: 900;
  }

  .id-sequence-actions {
    grid-column: 1 / -1;
  }

  .web-update-form {
    display: grid;
    grid-template-columns: minmax(180px, 0.4fr) minmax(260px, 1fr) auto;
    align-items: end;
    gap: 14px;
  }

  .web-update-form label {
    color: #33415f;
    font-size: 12px;
    font-weight: 900;
  }

  .web-update-form input,
  .web-update-form textarea {
    border-color: #b8cbd8;
    color: #02091e;
    font-size: 14px;
    font-weight: 900;
  }

  .web-update-form textarea {
    min-height: 70px;
    resize: vertical;
  }

  .web-update-actions {
    align-self: end;
  }

  .web-update-table {
    margin-top: 14px;
  }

  .web-update-table td:nth-child(3) {
    min-width: 260px;
    white-space: pre-wrap;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    scrollbar-color: rgba(6, 151, 177, 0.68) rgba(224, 238, 246, 0.9);
    scrollbar-width: thin;
  }

  .table-wrap.attendance-schedule-table {
    overflow-x: auto;
    overflow-y: auto;
  }

  .table-wrap::-webkit-scrollbar {
    height: 10px;
  }

  .table-wrap::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(224, 238, 246, 0.9);
  }

  .table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #10c2d5, #607d95);
  }

  .withdrawal-records-panel,
  .deposit-history-panel,
  .report-sheet-panel,
  .attendance-records-panel {
    position: relative;
    z-index: 12;
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    max-height: none;
    margin-bottom: 0;
    padding: 6px 12px 2px;
    padding-bottom: 2px;
    overflow: hidden;
  }

  .page[data-page="attendance"].is-active > .attendance-records-panel {
    padding: 8px 12px;
    background: #ffffff;
  }

  .page[data-page="attendance"].is-active > .attendance-records-panel .table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow: auto;
  }

  .page[data-page="attendance"].is-active > .attendance-summary-panel .table-wrap {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
  }

  .withdrawal-records-panel .table-wrap,
  .deposit-history-panel .table-wrap,
  .report-sheet-panel .table-wrap,
  .attendance-records-panel .table-wrap {
    flex: 1 1 auto;
    min-height: 220px;
    overflow: auto;
    scrollbar-gutter: stable;
    margin-bottom: 0;
  }

  .page[data-page="attendance"].is-active > .attendance-records-panel .table-wrap {
    min-height: 0;
  }

  .withdrawal-records-panel .table-wrap::-webkit-scrollbar,
  .deposit-history-panel .table-wrap::-webkit-scrollbar,
  .report-sheet-panel .table-wrap::-webkit-scrollbar,
  .attendance-records-panel .table-wrap::-webkit-scrollbar,
  .attendance-schedule-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .withdrawal-records-panel .table-wrap::-webkit-scrollbar-track,
  .deposit-history-panel .table-wrap::-webkit-scrollbar-track,
  .report-sheet-panel .table-wrap::-webkit-scrollbar-track,
  .attendance-records-panel .table-wrap::-webkit-scrollbar-track,
  .attendance-schedule-table::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(224, 238, 246, 0.9);
  }

  .withdrawal-records-panel .table-wrap::-webkit-scrollbar-thumb,
  .deposit-history-panel .table-wrap::-webkit-scrollbar-thumb,
  .report-sheet-panel .table-wrap::-webkit-scrollbar-thumb,
  .attendance-records-panel .table-wrap::-webkit-scrollbar-thumb,
  .attendance-schedule-table::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #10c2d5, #607d95);
  }

  .withdrawal-record-table thead th,
  .deposit-history-table thead th,
  .report-sheet-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #f7fbfe, #e7f2f8);
    box-shadow: 0 1px 0 var(--line);
  }

  .account-management-table {
    margin-top: 16px;
  }

  .account-management-table table {
    min-width: 1180px;
  }

  .account-management-table th,
  .account-management-table td {
    height: auto;
    min-height: 42px;
    vertical-align: middle;
  }

  .account-management-table tbody tr {
    height: auto;
  }

  .page[data-page="users"].is-active > .user-management-panel .user-form {
    flex: 0 0 auto;
    margin-bottom: 8px;
  }

  .page[data-page="users"].is-active > .user-management-panel .user-management-table {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    overflow: auto;
  }

  .page[data-page="users"] .user-management-table table {
    min-width: 100%;
    width: 100%;
    table-layout: auto;
  }

  .page[data-page="users"] .user-management-table th,
  .page[data-page="users"] .user-management-table td {
    padding: 4px 4px;
    font-size: 12px;
    min-height: 28px;
    height: auto;
    line-height: 1.2;
  }

  .page[data-page="users"] .user-management-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, #f7fbfe, #e7f2f8);
  }

  .page[data-page="users"] .user-management-table th:nth-child(1),
  .page[data-page="users"] .user-management-table td:nth-child(1),
  .page[data-page="users"] .user-management-table th:nth-child(2),
  .page[data-page="users"] .user-management-table td:nth-child(2),
  .page[data-page="users"] .user-management-table th:nth-child(5),
  .page[data-page="users"] .user-management-table td:nth-child(5),
  .page[data-page="users"] .user-management-table th:nth-child(6),
  .page[data-page="users"] .user-management-table td:nth-child(6) {
    width: 1%;
    white-space: nowrap;
  }

  .page[data-page="users"] .user-management-table th:nth-child(3),
  .page[data-page="users"] .user-management-table td:nth-child(3),
  .page[data-page="users"] .user-management-table th:nth-child(4),
  .page[data-page="users"] .user-management-table td:nth-child(4) {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page[data-page="users"] .user-management-table .account-action-cell {
    gap: 4px;
  }

  .page[data-page="users"] .user-management-table .account-action-cell .small-button {
    padding: 3px 7px;
    font-size: 11px;
  }

  .operation-accounts-table {
    min-width: 1520px;
  }

  table {
    width: 100%;
    min-width: max(720px, 100%);
    border-collapse: collapse;
  }

  th,
  td {
    border-bottom: 1px solid var(--line);
    height: 42px;
    padding: 10px 10px;
    text-align: center;
    white-space: nowrap;
    color: var(--navy-soft);
    vertical-align: middle;
  }

  td .small-button,
  td .danger-button {
    margin-right: 6px;
  }

  .account-action-cell {
    vertical-align: middle;
    text-align: center;
    white-space: nowrap;
    min-width: 88px;
  }

  .account-action-cell .small-button,
  .account-action-cell .danger-button,
  .account-action-cell .icon-button,
  .account-action-cell .account-status-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 0;
    margin-left: 0;
  }

  .account-action-cell .small-button + .icon-button,
  .account-action-cell .small-button + .small-button,
  .account-action-cell .icon-button + .icon-button,
  .account-action-cell .account-status-switch + .icon-button,
  .account-action-cell .icon-button + .account-status-switch {
    margin-left: 6px;
  }

  .account-action-cell .icon-button {
    width: 32px;
    height: 32px;
    padding: 0;
  }

  .account-action-cell .action-column-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .blocklist-delete-toggle,
  .account-delete-toggle,
  .account-info-delete-toggle,
  .announcement-delete-toggle,
  .bank-delete-toggle,
  .account-transfer-delete-toggle,
  .user-delete-toggle {
    color: #ff6b7a;
  }

  .blocklist-delete-toggle:hover,
  .blocklist-delete-toggle:focus-visible,
  .account-delete-toggle:hover,
  .account-delete-toggle:focus-visible,
  .account-info-delete-toggle:hover,
  .account-info-delete-toggle:focus-visible,
  .announcement-delete-toggle:hover,
  .announcement-delete-toggle:focus-visible,
  .bank-delete-toggle:hover,
  .bank-delete-toggle:focus-visible,
  .account-transfer-delete-toggle:hover,
  .account-transfer-delete-toggle:focus-visible,
  .user-delete-toggle:hover,
  .user-delete-toggle:focus-visible {
    color: #ff8a96;
  }

  .account-status-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 2px 4px 2px 2px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  .account-status-switch-track {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #e85a6b;
    box-shadow: inset 0 0 0 1px #cf4456;
    transition: background 160ms ease, box-shadow 160ms ease;
  }

  .account-status-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    transition: transform 160ms ease;
  }

  .account-status-switch.is-active .account-status-switch-track {
    background: #22a06b;
    box-shadow: inset 0 0 0 1px #1a8558;
  }

  .account-status-switch.is-active .account-status-switch-thumb {
    transform: translateX(18px);
  }

  .account-status-switch-label {
    min-width: 44px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }

  .account-status-switch.is-active .account-status-switch-label {
    color: #1f9a64;
  }

  .account-status-switch.is-stop .account-status-switch-label {
    color: #d9485a;
  }

  .account-status-switch:hover .account-status-switch-track,
  .account-status-switch:focus-visible .account-status-switch-track {
    filter: brightness(1.04);
  }

  .account-status-switch:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.45);
    outline-offset: 2px;
  }

  .record-cell {
    min-width: 230px;
    text-align: left;
    white-space: normal;
  }

  .deposit-history-table {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
  }

  .deposit-history-table th,
  .deposit-history-table td {
    height: 36px;
    padding: 7px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .deposit-history-table th:nth-child(1),
  .deposit-history-table td:nth-child(1) {
    width: 14%;
    text-align: left;
  }

  .deposit-history-table th:nth-child(2),
  .deposit-history-table td:nth-child(2) {
    width: 15%;
    text-align: left;
  }

  .deposit-history-table th:nth-child(3),
  .deposit-history-table td:nth-child(3) {
    width: 9%;
    text-align: left;
  }

  .deposit-history-table th:nth-child(4),
  .deposit-history-table td:nth-child(4) {
    width: 32%;
    text-align: left;
  }

  .deposit-history-table th:nth-child(5),
  .deposit-history-table td:nth-child(5),
  .deposit-history-table th:nth-child(6),
  .deposit-history-table td:nth-child(6),
  .deposit-history-table th:nth-child(7),
  .deposit-history-table td:nth-child(7) {
    width: 10%;
    padding-left: 8px;
    padding-right: 8px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .deposit-history-table th:nth-child(8),
  .deposit-history-table td:nth-child(8) {
    width: 8%;
    padding-left: 6px;
    padding-right: 6px;
  }

  .deposit-remarks-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
    text-align: left;
  }

  .deposit-history-table .status-select {
    width: 68px;
    min-width: 68px;
    max-width: 68px;
    min-height: 28px;
    padding: 3px 4px;
    font-size: 11px;
  }

  .table-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 0 0;
    margin-top: -2px;
    margin-bottom: 0;
    color: var(--navy-soft);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
  }

  .table-pager[hidden] {
    display: none;
  }

  .pager-page-input {
    width: 38px;
    height: 18px;
    min-height: 18px;
    border: 1px solid var(--line-strong);
    border-radius: 0;
    background: #fff;
    color: var(--navy);
    font: inherit;
    font-size: 9px;
    line-height: 18px;
    padding: 0;
    text-align: center;
  }

  .pager-page-input::-webkit-outer-spin-button,
  .pager-page-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  .pager-nav-button {
    width: 34px;
    min-width: 34px;
    height: 18px;
    min-height: 18px;
    justify-content: center;
    padding: 0 5px;
    font-size: 9px;
    font-weight: 700;
    line-height: 18px;
    border-radius: 3px;
  }

  .withdrawal-record-table {
    width: max-content;
    min-width: 1240px;
  }

  .deposit-record-table a {
    color: inherit;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .withdrawal-record-table th,
  .withdrawal-record-table td {
    height: 36px;
    padding: 7px 8px;
  }

  .withdrawal-record-table th:nth-child(1),
  .withdrawal-record-table td:nth-child(1) {
    min-width: 56px;
  }

  .withdrawal-record-table th:nth-child(2),
  .withdrawal-record-table td:nth-child(2) {
    min-width: 70px;
  }

  .withdrawal-record-table th:nth-child(3),
  .withdrawal-record-table td:nth-child(3),
  .withdrawal-record-table th:nth-child(4),
  .withdrawal-record-table td:nth-child(4),
  .withdrawal-record-table th:nth-child(5),
  .withdrawal-record-table td:nth-child(5) {
    min-width: 64px;
  }

  .withdrawal-record-table td.live-timer-cell.is-ok {
    color: #039f7f;
  }

  .withdrawal-record-table td.live-timer-cell.is-warn {
    color: #c45a00;
  }

  .withdrawal-record-table td.live-timer-cell.is-late {
    color: #b42318;
    font-weight: 700;
  }

  .withdrawal-record-table th:nth-child(6),
  .withdrawal-record-table td:nth-child(6) {
    min-width: 150px;
  }

  .withdrawal-record-table th:nth-child(7),
  .withdrawal-record-table td:nth-child(7) {
    min-width: 82px;
  }

  .withdrawal-record-table th:nth-child(8),
  .withdrawal-record-table td:nth-child(8) {
    min-width: 70px;
  }

  .withdrawal-record-table th:nth-child(9),
  .withdrawal-record-table td:nth-child(9) {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .withdrawal-record-table td.withdrawal-account-name-cell.is-paying {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 800;
    color: #044a5c;
    line-height: 1.25;
    letter-spacing: 0.01em;
    background: linear-gradient(180deg, #eafcff, #d8f5fb);
    border: 1px solid rgba(8, 149, 174, 0.45);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(10, 142, 165, 0.1);
    padding: 6px 10px;
  }

  .withdrawal-record-table tbody tr.withdrawal-row-paying td.withdrawal-account-name-cell.is-paying {
    height: auto;
  }

  .withdrawal-record-table th:nth-child(10),
  .withdrawal-record-table td:nth-child(10) {
    min-width: 118px;
  }

  .withdrawal-record-table th:nth-child(11),
  .withdrawal-record-table td:nth-child(11) {
    min-width: 104px;
  }

  .withdrawal-record-table th:nth-child(12),
  .withdrawal-record-table td:nth-child(12) {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .withdrawal-record-table th:nth-child(13),
  .withdrawal-record-table td:nth-child(13),
  .withdrawal-record-table th:nth-child(14),
  .withdrawal-record-table td:nth-child(14),
  .withdrawal-record-table th:nth-child(15),
  .withdrawal-record-table td:nth-child(15),
  .withdrawal-record-table th:nth-child(16),
  .withdrawal-record-table td:nth-child(16) {
    min-width: 92px;
  }

  .withdrawal-record-table [data-batch-select-header],
  .withdrawal-record-table td.withdrawal-select-cell {
    min-width: 72px;
  }

  .withdrawal-record-table [data-super-admin-transaction],
  .withdrawal-record-table td.transaction-action-cell {
    min-width: 76px;
    width: 76px;
    text-align: center;
  }

  .transaction-action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }

  .transaction-action-reset,
  .transaction-action-delete {
    width: 28px;
    min-height: 28px;
    border-radius: 7px;
    padding: 0;
  }

  .transaction-action-delete:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
  }

  .transaction-action-reset:hover,
  .transaction-action-reset:focus-visible,
  .transaction-action-delete:hover:not(:disabled),
  .transaction-action-delete:focus-visible:not(:disabled) {
    background: #e8fbff;
    border-color: var(--brand);
    color: #007991;
    box-shadow: 0 8px 22px rgba(5, 207, 231, 0.18);
  }

  .record-cell strong,
  .record-cell span {
    display: block;
    color: var(--navy-soft);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
  }

  .record-cell span {
    color: var(--muted);
  }

  th {
    color: #4a6072;
    font-size: 12px;
    text-transform: uppercase;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(229, 240, 247, 0.78));
  }

  .numeric {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  th.numeric,
  td.numeric {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
  }

  tbody tr {
    height: 42px;
    transition: background 0.18s ease, box-shadow 0.18s ease;
  }

  tbody td {
    transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, text-shadow 0.18s ease;
  }

  .withdrawal-row-pending {
    background: #fff8e6;
  }

  .withdrawal-row-paying {
    background: #d4fbff;
  }

  .withdrawal-row-returned {
    background: #c7cdd4;
  }

  .withdrawal-row-mio-paid {
    background: #e1f2ff;
  }

  .withdrawal-row-pending td {
    border-bottom-color: #f1d99d;
  }

  .withdrawal-row-paying td {
    border-bottom-color: #8eeaf3;
  }

  .withdrawal-row-returned td {
    border-bottom-color: #aeb4bf;
  }

  .withdrawal-row-mio-paid td {
    border-bottom-color: #b6d8f4;
  }

  .wide-text {
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(0, 212, 239, 0.14);
    color: #057d8d;
    font-size: 12px;
    font-weight: 800;
  }

  .status.flagged,
  .status.review,
  .status.kyc-hold,
  .status.high {
    background: #fff3e6;
    color: var(--warn);
  }

  .status.pending,
  .status.medium {
    background: rgba(245, 189, 63, 0.2);
    color: #8a5a00;
  }

  .status.testing {
    background: rgba(14, 165, 233, 0.18);
    color: #0369a1;
  }

  .status.low,
  .status.approved,
  .status.verified,
  .status.success,
  .status.credit,
  .status.active {
    background: #dcfce7;
    color: #15803d;
  }

  .status.inactive {
    background: #f3f4f6;
    color: #4b5563;
  }

  .status.logged-out {
    background: #dceeff;
    color: #0b5d84;
  }

  .attendance-duty-status.is-on-duty {
    background: #dcfce7;
    color: #15803d;
    box-shadow: inset 0 0 0 1px rgba(21, 128, 61, 0.28);
  }

  .attendance-duty-status.is-on-duty::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  }

  .attendance-duty-status.is-off-duty {
    background: #eef2f7;
    color: #475569;
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.22);
  }

  .attendance-duty-status.is-off-duty::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: #64748b;
  }

  .attendance-daily-row.is-on-duty td {
    background: rgba(220, 252, 231, 0.35);
  }

  .attendance-daily-row.is-off-duty td {
    background: #ffffff;
  }

  .attendance-daily-record-table .attendance-duty-status {
    white-space: nowrap;
  }

  .status.debit {
    background: #fef3f2;
    color: var(--danger);
  }

  .status.returned,
  .status.cancelled {
    background: #fef3f2;
    color: var(--danger);
  }

  .status.stop {
    background: #fef3f2;
    color: var(--danger);
  }

  .status.mio-paid {
    background: #dceeff;
    color: #0b5d84;
  }

  .status-select {
    min-width: 118px;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
  }

  /* PENDING toggle for Paid process: keep select look + cyan ring until SUCCESS */
  .status-pending-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid var(--brand);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 251, 0.92));
    color: #8a5a00;
    box-shadow: 0 0 0 3px rgba(5, 207, 231, 0.16);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .status-pending-toggle:hover {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(5, 207, 231, 0.24);
  }

  .status-pending-toggle:disabled {
    opacity: 0.72;
    cursor: wait;
  }

  .status-callback-resend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid #dc2626;
    background: #fef2f2;
    color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .status-callback-resend:hover {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.22);
  }

  .status-cancel-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    border: 1px solid #dc2626;
    background: #fef2f2;
    color: #b91c1c;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .status-cancel-pending:hover {
    border-color: #b91c1c;
    background: #fee2e2;
  }

  .status-cancel-pending:disabled {
    opacity: 0.72;
    cursor: wait;
  }

  .status-callback-resend:disabled {
    opacity: 0.72;
    cursor: wait;
  }

  .account-code-select {
    min-width: 150px;
  }

  .process-action-button {
    min-width: 104px;
    min-height: 30px;
    padding: 5px 12px;
    border: 1px solid rgba(8, 176, 202, 0.48);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.46), transparent 38%),
      linear-gradient(135deg, #13d4e8, #0798b6 58%, #066e87);
    color: #ffffff;
    font-size: 12px;
    font-weight: 1000;
    box-shadow: 0 8px 18px rgba(0, 145, 170, 0.16);
  }

  .process-action-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(0, 145, 170, 0.22);
  }

  .process-action-button:disabled {
    cursor: wait;
    opacity: 0.68;
    transform: none;
  }

  .batch-approve-checkbox {
    width: 18px;
    height: 18px;
    min-height: 18px;
    accent-color: var(--brand);
  }

  .select-all-header {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
  }

  .process-proof-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--navy);
    font: inherit;
    font-weight: 900;
    text-decoration: underline;
    cursor: pointer;
  }

  .process-proof-button-paid {
    color: #059669;
  }

  .process-proof-button-reject {
    color: #dc2626;
  }

  .proof-modal {
    position: fixed;
    z-index: 55;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(5, 11, 35, 0.58);
  }

  .proof-modal[hidden] {
    display: none;
  }

  .proof-card {
    position: relative;
    display: grid;
    gap: 10px;
    width: fit-content;
    min-width: min(240px, calc(100vw - 44px));
    max-width: min(72vw, calc(100vw - 24px));
    max-height: 78vh;
    max-height: 78dvh;
    overflow: auto;
    border: 1px solid rgba(0, 187, 214, 0.58);
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(2, 10, 34, 0.34);
  }

  .proof-card h2 {
    text-align: center;
  }

  .proof-reason {
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #ffffff, #edf5f9);
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    text-align: center;
  }

  .proof-reason-value {
    color: #ce2020;
    font-weight: 400;
  }

  .proof-card img {
    width: auto;
    min-width: 180px;
    max-width: min(360px, 62vw);
    max-height: 52vh;
    border: 1px solid #d8edf3;
    border-radius: 8px;
    object-fit: contain;
  }

  .proof-images {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }

  .proof-images-pair img {
    max-width: min(300px, 34vw);
  }

  .proof-images-with-balance {
    flex-direction: column;
    align-items: center;
  }

  .proof-images-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    gap: 10px;
  }

  .proof-images-stack img {
    display: block;
    width: auto;
    max-width: min(360px, 62vw);
    max-height: 52vh;
    height: auto;
  }

  .proof-images-with-balance .proof-images-stack img {
    max-width: min(360px, 62vw);
    max-height: 52vh;
  }

  .proof-balance-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid rgba(0, 140, 180, 0.35);
    border-radius: 10px;
    background: linear-gradient(180deg, #eefbff, #dff4fa);
    color: #0a6f8a;
    font-weight: 900;
    font-size: 18px;
    text-align: center;
  }

  .proof-balance-copy {
    display: inline-grid;
    place-items: center;
    width: 28px;
    min-height: 28px;
    border: 1px solid rgba(0, 140, 180, 0.45);
    border-radius: 7px;
    padding: 0;
    background: #ffffff;
    color: #0a6f8a;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
  }

  .proof-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 30px;
  }

  .proof-actions h2 {
    margin: 0;
    min-height: 32px;
    font-size: 16px;
    line-height: 32px;
    white-space: nowrap;
  }

  .proof-close {
    justify-self: end;
    min-height: 32px;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 0 14px;
    background: linear-gradient(180deg, #ffffff, #edf5f9);
    color: var(--navy);
    font-weight: 900;
  }

  .proof-close[data-proof-copy] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    border-color: rgba(0, 140, 180, 0.45);
    padding: 0;
    background: linear-gradient(180deg, #e8f8fc, #d2eef6);
    color: #0a6f8a;
  }

  .proof-copy-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .proof-close[data-proof-copy][hidden] {
    display: none !important;
  }

  .proof-close-x {
    position: absolute;
    top: 7px;
    right: 7px;
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #5f7180;
    box-shadow: none;
    cursor: pointer;
  }

  .proof-close-x:hover {
    background: rgba(7, 29, 53, 0.07);
    color: var(--navy);
  }

  .proof-close-x svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }

  .announcement-modal {
    position: fixed;
    z-index: 70;
    inset: 0;
    display: grid;
    align-items: start;
    justify-items: center;
    padding: 24px;
    padding-top: 120px;
    background:
      radial-gradient(circle at 50% 24%, rgba(0, 212, 239, 0.18), transparent 34%),
      rgba(5, 11, 35, 0.58);
    backdrop-filter: blur(7px);
  }

  .announcement-modal[hidden] {
    display: none;
  }

  .announcement-card {
    display: grid;
    gap: 16px;
    width: min(760px, calc(100vw - 24px));
    max-height: 88vh;
    max-height: 88dvh;
    overflow: auto;
    border: 1px solid rgba(0, 187, 214, 0.58);
    border-radius: 10px;
    padding: 18px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 246, 250, 0.98));
    box-shadow: 0 32px 84px rgba(2, 10, 34, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .announcement-modal.is-ringing .announcement-card {
    animation: announcement-ring-pulse 0.62s ease-out 2;
  }

  @keyframes announcement-ring-pulse {
    0% {
      box-shadow: 0 32px 84px rgba(2, 10, 34, 0.36), 0 0 0 0 rgba(0, 212, 239, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      transform: translateY(0);
    }

    42% {
      box-shadow: 0 36px 90px rgba(2, 10, 34, 0.42), 0 0 0 9px rgba(0, 212, 239, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      transform: translateY(-2px);
    }

    100% {
      box-shadow: 0 32px 84px rgba(2, 10, 34, 0.36), 0 0 0 18px rgba(0, 212, 239, 0), inset 0 1px 0 rgba(255, 255, 255, 0.92);
      transform: translateY(0);
    }
  }

  .announcement-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid rgba(144, 174, 190, 0.32);
    padding-bottom: 12px;
  }

  .announcement-card-head h2 {
    color: var(--navy);
    font-size: 24px;
  }

  .announcement-card-head .eyebrow {
    color: #028294;
    font-size: 13px;
    font-weight: 950;
  }

  .announcement-screen-list {
    display: grid;
    gap: 12px;
    max-height: 68vh;
    overflow: auto;
    padding-right: 4px;
  }

  .announcement-screen-item,
  .announcement-screen-empty {
    border: 1px solid rgba(163, 190, 205, 0.72);
    border-radius: 9px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--navy);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  }

  .announcement-screen-item h3 {
    margin-bottom: 8px;
    color: #071827;
    font-size: 18px;
  }

  .announcement-screen-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
  }

  .announcement-screen-meta span {
    border: 1px solid rgba(0, 168, 199, 0.2);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(223, 249, 253, 0.86);
    color: #075c6d;
    font-size: 11px;
    font-weight: 900;
  }

  .announcement-screen-message {
    white-space: pre-wrap;
    color: #16283a;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
  }

  .announcement-screen-audit {
    margin-top: 12px;
    border-top: 1px solid rgba(144, 174, 190, 0.28);
    padding-top: 10px;
    white-space: pre-line;
    color: #52627f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
  }

  .announcement-screen-empty {
    padding: 22px;
    color: #52627f;
    font-weight: 900;
    text-align: center;
  }

  .account-update-modal {
    position: fixed;
    z-index: 88;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(5, 11, 35, 0.62);
    backdrop-filter: blur(7px);
  }

  .account-update-modal[hidden] {
    display: none;
  }

  .bank-sheet-edit-modal {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(5, 11, 35, 0.62);
    backdrop-filter: blur(7px);
  }

  .bank-sheet-edit-modal[hidden] {
    display: none;
  }

  .bank-sheet-edit-card {
    display: grid;
    gap: 16px;
    width: min(420px, calc(100vw - 24px));
    max-height: min(760px, 92vh);
    max-height: min(760px, 92dvh);
    overflow: auto;
    border: 1px solid rgba(0, 188, 214, 0.5);
    border-radius: 8px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff, #edf7fb);
    box-shadow: 0 30px 90px rgba(2, 10, 34, 0.42);
  }

  .bank-sheet-edit-head,
  .bank-sheet-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .bank-sheet-edit-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 22px;
  }

  .bank-sheet-edit-form {
    display: grid;
    gap: 12px;
  }

  .bank-sheet-edit-context {
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #c8d8e4;
    border-radius: 8px;
    background: #edf4f8;
    color: #33485a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
  }

  .bank-sheet-edit-form label {
    display: grid;
    gap: 6px;
    color: #33485a;
    font-size: 12px;
    font-weight: 900;
  }

  .bank-sheet-edit-form input {
    min-height: 38px;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
    color: var(--navy);
    font-weight: 900;
  }

  .bank-sheet-edit-form select {
    min-height: 38px;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
    color: var(--navy);
    font-weight: 900;
  }

  .bank-sheet-edit-card.attendance-summary-edit-card {
    width: min(520px, calc(100vw - 24px));
  }

  .attendance-summary-edit-section {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid #c8d8e4;
    border-radius: 8px;
    background: #f7fbfd;
  }

  .attendance-summary-edit-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #33485a;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .attendance-summary-edit-hint {
    margin: 0;
    color: #5d7384;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
  }

  .attendance-summary-edit-rows {
    display: grid;
    gap: 8px;
  }

  .attendance-summary-edit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px auto;
    gap: 8px;
    align-items: center;
  }

  .attendance-summary-edit-row.is-off {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .attendance-summary-edit-row input {
    min-height: 38px;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
    color: var(--navy);
    font-weight: 900;
  }

  .attendance-summary-edit-off-reason {
    color: #5d7384;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
  }

  .bank-sheet-edit-form input[readonly] {
    background: #edf4f8;
    color: #53677a;
  }

  .bank-sheet-edit-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .bank-sheet-edit-actions span {
    margin-right: auto;
    color: #53677a;
    font-size: 12px;
    font-weight: 900;
  }

  .bank-sheet-action-cell {
    min-width: 88px;
  }

  .account-update-card {
    display: grid;
    gap: 16px;
    width: min(560px, calc(100vw - 24px));
    max-height: min(760px, 92vh);
    max-height: min(760px, 92dvh);
    overflow: auto;
    border: 1px solid rgba(0, 188, 214, 0.5);
    border-radius: 8px;
    padding: 20px;
    background: linear-gradient(180deg, #ffffff, #edf7fb);
    box-shadow: 0 30px 90px rgba(2, 10, 34, 0.42);
  }

  .account-update-head,
  .account-update-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .account-update-head h2 {
    margin: 0;
    color: var(--navy);
    font-size: 22px;
  }

  .account-update-head .eyebrow {
    color: #087f92;
    text-shadow: none;
  }

  .account-update-target {
    display: grid;
    gap: 5px;
    color: #33485a;
    font-size: 12px;
    font-weight: 900;
  }

  .account-update-target-group {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    gap: 6px 8px;
  }

  .account-update-target-actions {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .account-update-save-status {
    grid-column: 1 / -1;
    min-height: 14px;
    color: #52687a;
    font-size: 11px;
    font-weight: 800;
  }

  .account-update-save-status.is-success {
    color: #057a55;
  }

  .account-update-save-status.is-error {
    color: #b91c1c;
  }

  .account-update-target input {
    width: 150px;
    min-height: 34px;
    border: 1px solid #c4d5e1;
    border-radius: 8px;
    padding: 0 10px;
    color: var(--navy);
    font-weight: 900;
  }

  .account-update-target input[readonly] {
    background: #f4f8fb;
  }

  .account-update-template {
    min-height: 280px;
    border: 1px solid #c4d5e1;
    border-radius: 8px;
    padding: 14px;
    overflow: auto;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
  }

  .account-update-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 12px;
    margin-bottom: 16px;
    font-family: "Courier New", monospace;
  }

  .account-update-summary span {
    color: #33485a;
  }

  .account-update-summary strong {
    color: #111827;
  }

  .account-update-section {
    display: grid;
    gap: 6px;
    margin-top: 14px;
  }

  .account-update-section h3 {
    margin: 0;
    color: var(--navy);
    font-size: 13px;
    font-weight: 950;
  }

  .account-update-grid {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #9fb4c5;
    font-family: "Courier New", monospace;
    font-size: 12px;
    line-height: 1.35;
  }

  .account-update-grid th,
  .account-update-grid td {
    border: 1px solid #9fb4c5;
    padding: 5px 7px;
    white-space: nowrap;
    text-align: left;
  }

  .account-update-grid td:first-child,
  .account-update-grid th:first-child {
    width: 44%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .account-update-grid th {
    background: #e9f4f8;
    color: var(--navy);
  }

  .account-update-grid td:nth-child(2),
  .account-update-grid th:nth-child(2) {
    width: 34%;
    min-width: 0;
    text-align: center;
  }

  .account-update-grid td:nth-child(3),
  .account-update-grid th:nth-child(3) {
    width: 22%;
    min-width: 0;
    text-align: center;
  }

  .app-alert {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background:
      radial-gradient(circle at 50% 28%, rgba(0, 212, 239, 0.18), transparent 34%),
      rgba(5, 11, 35, 0.62);
    backdrop-filter: blur(7px);
  }

  .app-alert[hidden] {
    display: none;
  }

  .app-alert-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 16px;
    width: min(460px, calc(100vw - 24px));
    max-height: min(90vh, 90dvh);
    overflow: auto;
    border: 1px solid rgba(0, 188, 214, 0.48);
    border-radius: 8px;
    padding: 22px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(237, 247, 251, 0.97)),
      linear-gradient(180deg, #ffffff, #e4f0f6);
    box-shadow: 0 30px 90px rgba(2, 10, 34, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  .app-alert-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(0, 188, 214, 0.55);
    border-radius: 50%;
    background: linear-gradient(135deg, #07839b, #1dd7ee);
    color: #ffffff;
    font-size: 26px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(0, 149, 178, 0.26);
  }

  .app-alert-copy {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .app-alert-copy .eyebrow {
    color: var(--brand-strong);
  }

  .app-alert-copy h2 {
    margin: 0;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.2;
  }

  .app-alert-copy p:last-child {
    margin: 0;
    color: #33485a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.55;
  }

  .app-alert-copy .app-alert-punch-message {
    display: grid;
    gap: 14px;
    width: 100%;
    font-weight: 600;
  }

  .app-alert.is-attendance-punch .app-alert-card {
    width: min(520px, calc(100vw - 24px));
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 18px;
    padding: 26px;
  }

  .app-alert.is-attendance-punch .app-alert-icon {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }

  .app-alert.is-attendance-punch .app-alert-copy h2 {
    display: none;
  }

  .app-alert-punch-heading {
    display: block;
    margin: 0;
    color: #0a5f72;
    font-size: clamp(34px, 7vw, 48px);
    font-weight: 900;
    letter-spacing: 0.02em;
    line-height: 1.05;
    text-align: center;
  }

  .app-alert.is-time-in .app-alert-punch-heading {
    color: #0b7a3a;
  }

  .app-alert.is-time-out .app-alert-punch-heading {
    color: #1a4f6b;
  }

  .app-alert-punch-details {
    display: grid;
    overflow: hidden;
    border: 1px solid #c7e2ea;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
  }

  .app-alert-punch-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 9px 14px;
  }

  .app-alert-punch-row + .app-alert-punch-row {
    border-top: 1px solid #d8e9ee;
  }

  .app-alert-punch-label {
    color: #607787;
    font-size: 13px;
    font-weight: 800;
  }

  .app-alert-punch-value {
    color: #0a3146;
    font-size: 16px;
    font-weight: 900;
    overflow-wrap: anywhere;
  }

  .app-alert-ok {
    grid-column: 2;
    justify-self: end;
    min-width: 120px;
    margin-top: 2px;
  }

  .app-password-confirm-card {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px 10px;
    width: min(340px, calc(100vw - 24px));
    padding: 12px 14px;
  }

  .app-password-confirm-card .app-alert-icon {
    width: 28px;
    height: 28px;
    font-size: 15px;
    box-shadow: 0 6px 14px rgba(0, 149, 178, 0.22);
  }

  .app-password-confirm-card .app-alert-copy {
    gap: 3px;
  }

  .app-password-confirm-card .app-alert-copy .eyebrow {
    display: none;
  }

  .app-password-confirm-card .app-alert-copy h2 {
    font-size: 15px;
    line-height: 1.2;
  }

  .app-password-confirm-card .app-alert-copy [data-app-password-confirm-message] {
    margin: 0;
    color: #33485a;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
  }

  .app-password-confirm-field {
    display: grid;
    gap: 3px;
    margin-top: 6px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 800;
  }

  .app-password-confirm-field input {
    min-height: 32px;
    border: 1px solid #b8cbd8;
    border-radius: 8px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
  }

  .app-password-confirm-actions {
    grid-column: 2;
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
  }

  .app-password-confirm-actions .primary-button.compact,
  .app-password-confirm-actions .ghost-button.compact {
    min-height: 30px;
    min-width: 0;
    padding: 0 12px;
    font-size: 12px;
  }

  .merchant-env-record-cell {
    min-width: 148px;
    max-width: 210px;
    white-space: pre-line;
    line-height: 1.25;
    font-size: 11px;
    font-weight: 700;
    color: #334155;
  }

  .report-card {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto auto;
    gap: 12px 16px;
    align-items: center;
    text-align: left;
    padding: 16px 18px;
  }

  .report-card-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
  }

  .report-card-head h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
  }

  .report-card-body {
    display: grid;
    gap: 4px;
    justify-items: end;
    text-align: right;
  }

  .report-card p {
    margin: 0;
    font-size: 13px;
    line-height: 1.25;
  }

  .report-card .small-button {
    justify-self: end;
    margin-top: 0;
  }

  .report-card strong {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
  }

  .report-insights {
    display: grid;
    gap: 12px;
  }

  .report-volume-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    cursor: pointer;
  }

  .report-volume-toggle:hover {
    color: var(--brand-strong);
  }

  .report-volume-chevron {
    display: inline-block;
    font-size: 13px;
    transition: transform 160ms ease;
  }

  .report-volume-toggle[aria-expanded="false"] .report-volume-chevron {
    transform: rotate(-90deg);
  }

  .report-volume-chart[hidden],
  .report-volume-legend[hidden],
  .report-volume-toolbar[hidden],
  .report-volume-detail[hidden],
  .report-volume-head p[hidden] {
    display: none;
  }

  .report-volume-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px 16px;
    margin-left: auto;
  }

  .report-volume-range {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.55);
  }

  .report-volume-range-btn {
    min-width: 42px;
    padding: 5px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  .report-volume-range-btn:hover {
    color: var(--navy-soft);
  }

  .report-volume-range-btn.is-active,
  .report-volume-range-btn[aria-pressed="true"] {
    background: var(--brand-strong);
    color: #fff;
  }

  .report-insight-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .report-insight-card {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px 16px;
  }

  .report-insight-card p,
  .report-insight-card span {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
  }

  .report-insight-card strong {
    overflow: hidden;
    color: var(--navy);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .report-volume-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px 14px;
  }

  .report-volume-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
  }

  .report-volume-head h2,
  .report-volume-head p {
    margin: 0;
  }

  .report-volume-head h2 {
    font-size: 17px;
  }

  .report-volume-head p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
  }

  .report-volume-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px 14px;
    color: var(--muted);
    font-size: 12px;
  }

  .report-volume-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .report-volume-legend i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
  }

  .report-volume-legend .is-fund-in {
    background: linear-gradient(180deg, #19b4c9 0%, var(--brand-strong) 100%);
  }

  .report-volume-legend .is-fund-out {
    background: linear-gradient(180deg, #9aafc0 0%, var(--accent-strong) 100%);
  }

  .report-volume-chart {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(96px, 1fr);
    align-items: start;
    gap: 10px;
    min-height: 0;
    padding: 14px 10px 8px;
    overflow-x: auto;
    border: 1px solid rgba(205, 219, 230, 0.9);
    border-radius: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(246, 250, 252, 0.9)),
      repeating-linear-gradient(
        to top,
        transparent 0,
        transparent 43px,
        rgba(121, 144, 164, 0.12) 44px
      );
  }

  .report-volume-group {
    display: grid;
    grid-template-rows: 170px max-content max-content;
    align-content: start;
    gap: 2px;
    min-width: 0;
    padding: 4px 2px 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: background-color 160ms ease, transform 160ms ease;
  }

  .report-volume-group:hover,
  .report-volume-group:focus-visible {
    background: rgba(6, 143, 168, 0.06);
    outline: none;
    transform: translateY(-2px);
  }

  .report-volume-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    height: 170px;
  }

  .report-volume-bar {
    display: block;
    width: min(26px, 36%);
    height: 0;
    min-height: 0;
    border-radius: 7px 7px 2px 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    animation: report-volume-bar-grow 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--volume-delay, 0ms);
    transform-origin: bottom center;
  }

  .report-volume-bar.is-fund-in {
    background: linear-gradient(180deg, #19b4c9 0%, var(--brand-strong) 100%);
    height: var(--bar-height, 0%);
  }

  .report-volume-bar.is-fund-out {
    background: linear-gradient(180deg, #9aafc0 0%, var(--accent-strong) 100%);
    height: var(--bar-height, 0%);
  }

  @keyframes report-volume-bar-grow {
    from {
      transform: scaleY(0.08);
      opacity: 0.35;
    }
    to {
      transform: scaleY(1);
      opacity: 1;
    }
  }

  .report-volume-values {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.2;
  }

  .report-volume-date {
    overflow: visible;
    color: var(--navy-soft);
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    word-break: break-word;
  }

  .report-volume-detail {
    margin: 0;
    color: var(--navy-soft);
    font-size: 12px;
    font-weight: 600;
  }

  .report-volume-empty {
    align-self: center;
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted);
    text-align: center;
  }

  .report-table,
  .report-sheet-panel {
    margin-top: 0;
    padding-top: 6px;
  }

  .report-sheet-table {
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
  }

  .report-sheet-table th,
  .report-sheet-table td {
    height: 36px;
    padding: 7px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tally-cell {
    text-align: center;
  }

  .tally-marker {
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .tally-marker.is-tally {
    background: rgba(32, 201, 151, 0.16);
    color: #057a55;
  }

  .tally-marker.is-not-tally {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
  }

  .report-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0, 212, 239, 0.18), rgba(215, 228, 239, 0.22));
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }

  .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 16px;
  }

  .setting-row input,
  .setting-row select {
    max-width: 240px;
  }

  .setting-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }

  .sheet-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }

  .sheet-list li {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    background: #f7f9ff;
    color: var(--navy-soft);
    font-size: 13px;
    font-weight: 800;
  }

  @media (max-width: 1180px) {
    .workspace {
      grid-template-columns: 260px minmax(0, 1fr);
    }

    .workspace.is-sidebar-collapsed {
      grid-template-columns: 72px minmax(0, 1fr);
    }

    .content {
      padding: 14px;
    }

    .topbar {
      min-height: 68px;
      margin: -14px -14px 6px;
      padding: 10px 14px;
    }

    .dashboard-page {
      margin: -6px -14px -14px;
      min-height: calc(100vh - 68px);
      min-height: calc(100dvh - 68px);
      padding: 14px;
    }

    .withdrawal-records-panel,
    .account-info-records-panel,
    .deposit-history-panel,
    .report-sheet-panel {
      max-height: none;
      margin-bottom: 0;
    }

    .page[data-page="withdrawals"].is-active,
    .page[data-page="account-info"].is-active,
    .page[data-page="deposits"].is-active,
    .page[data-page="reports"].is-active {
      height: calc(100vh - 80px);
      height: calc(100dvh - 80px);
      margin: 0 -14px -10px;
    }

    .panel {
      padding: 16px;
    }

    .withdrawal-form {
      grid-template-columns: repeat(4, minmax(160px, 1fr));
    }

    .account-image-field {
      grid-column: auto;
      grid-row: auto;
    }
  }

  @media (max-width: 980px) {
    .workspace,
    .workspace.is-sidebar-collapsed {
      display: grid;
      grid-template-columns: 84px minmax(0, 1fr);
      grid-template-areas:
        "brand top"
        "nav nav"
        "main main";
      align-items: start;
    }

    .sidebar {
      display: contents;
      position: static;
      height: auto;
      overflow: visible;
      padding: 0;
    }

    .sidebar-brand {
      grid-area: brand;
      position: sticky;
      top: 0;
      z-index: 45;
      justify-content: center;
      align-items: center;
      gap: 0;
      box-sizing: border-box;
      width: 84px;
      min-width: 84px;
      max-width: 84px;
      height: 84px;
      min-height: 84px;
      max-height: 84px;
      margin: 0;
      padding: 4px;
      padding-top: max(4px, env(safe-area-inset-top, 0px));
      border-bottom: 1px solid rgba(0, 220, 238, 0.42);
      border-right: 1px solid rgba(0, 220, 238, 0.28);
    }

    .sidebar-brand .sidebar-logo {
      width: 68px;
      max-width: 68px;
      max-height: 68px;
      aspect-ratio: 1;
    }

    .sidebar-brand::after,
    .workspace.is-sidebar-collapsed .sidebar-brand::after {
      content: none;
      display: none;
    }

    .workspace .sidebar-brand,
    .workspace.is-sidebar-collapsed .sidebar-brand {
      justify-content: center;
      box-sizing: border-box;
      width: 84px;
      min-width: 84px;
      max-width: 84px;
      height: 84px;
      min-height: 84px;
      max-height: 84px;
      margin: 0;
      padding: 4px;
      padding-top: max(4px, env(safe-area-inset-top, 0px));
      gap: 0;
    }

    .workspace .sidebar-brand > div:not(.klk-logo-image),
    .workspace.is-sidebar-collapsed .sidebar-brand > div:not(.klk-logo-image) {
      display: none;
    }

    .menu {
      grid-area: nav;
      position: relative;
      z-index: 46;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      gap: 6px;
      overflow: visible;
      -webkit-overflow-scrolling: touch;
      margin: 0;
      padding: 10px 12px;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
    }

    .workspace.is-sidebar-collapsed .menu {
      display: none;
    }

    .workspace:not(.is-sidebar-collapsed) .menu {
      display: flex;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      position: relative;
    }

    .menu-group {
      position: relative;
      flex: 0 0 auto;
      min-width: 0;
      z-index: 1;
    }

    .menu-group.is-open {
      z-index: 5;
    }

    .menu-group .menu-parent {
      position: relative;
    }

    .menu-group.is-open .menu-parent::after {
      transform: translateY(-38%) rotate(225deg);
    }

    .menu-group .submenu {
      position: absolute;
      top: calc(100% + 6px);
      left: auto;
      right: 0;
      z-index: 70;
      display: grid;
      gap: 4px;
      min-width: min(220px, calc(100vw - 24px));
      margin: 0;
      padding: 8px;
      border: 1px solid rgba(0, 231, 255, 0.42);
      border-left: 1px solid rgba(0, 231, 255, 0.42);
      border-radius: 10px;
      background:
        linear-gradient(145deg, rgba(3, 35, 50, 0.98), rgba(2, 18, 30, 0.96)),
        rgba(0, 20, 32, 0.96);
      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.42),
        0 0 18px rgba(0, 231, 255, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .menu-group .submenu[hidden] {
      display: none !important;
    }

    .menu-group.is-open .submenu:not([hidden]) {
      display: grid;
    }

    .menu-group .submenu-item {
      min-height: 38px;
      border-radius: 8px;
      white-space: nowrap;
    }

    .content {
      display: contents;
    }

    .topbar {
      grid-area: top;
      position: sticky;
      top: 0;
      z-index: 44;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "title icons"
        "meta meta";
      align-items: center;
      align-content: center;
      column-gap: 8px;
      row-gap: 4px;
      box-sizing: border-box;
      height: 84px;
      min-height: 84px;
      max-height: 84px;
      margin: 0;
      padding: 6px 12px;
      padding-top: max(6px, env(safe-area-inset-top, 0px));
      overflow: hidden;
      border-bottom: 1px solid rgba(0, 220, 238, 0.42);
      background:
        linear-gradient(100deg, rgba(157, 248, 255, 0.18), rgba(0, 213, 234, 0.12) 34%, transparent 62%),
        linear-gradient(135deg, rgba(2, 46, 66, 0.92), rgba(5, 20, 35, 0.96));
      color: #e9fdff;
      box-shadow: none;
      backdrop-filter: none;
      text-align: left;
    }

    .topbar-title {
      grid-area: title;
      min-width: 0;
      width: auto;
      text-align: left;
    }

    .topbar .eyebrow {
      margin: 0;
      color: #87e9f6;
      font-size: 10px;
      letter-spacing: 0.04em;
    }

    .topbar h1 {
      margin: 0;
      color: #f4ffff;
      font-size: 16px;
      line-height: 1.15;
      text-shadow: 0 0 10px rgba(0, 231, 255, 0.28);
    }

    .topbar-eyebrow-row {
      gap: 6px;
      min-height: 16px;
    }

    .topbar-clock {
      height: 16px;
      min-height: 16px;
      max-height: 16px;
      padding: 0 6px;
      font-size: 10px;
      letter-spacing: 0.04em;
      border-radius: 4px;
    }

    .topbar-actions {
      display: contents;
    }

    .topbar-icons {
      grid-area: icons;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 6px;
      margin-left: 0;
      order: 0;
      width: auto;
    }

    .topbar-meta {
      grid-area: meta;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    .topbar-meta .user-label {
      order: 0;
      width: auto;
      max-width: calc(100% - 96px);
      color: #c8f6ff;
      font-size: 11px;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-meta [data-logout] {
      order: 0;
    }

    .topbar-actions .user-label,
    .topbar-meta .user-label {
      width: auto;
      max-width: calc(100% - 96px);
      color: #c8f6ff;
      font-size: 11px;
      text-align: right;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar .icon-button,
    .topbar .ghost-button {
      min-height: 32px;
      border: 1px solid rgba(72, 168, 186, 0.72);
      border-radius: 8px;
      background:
        radial-gradient(120% 80% at 18% 12%, rgba(255, 255, 255, 0.22), transparent 42%),
        linear-gradient(180deg, rgba(18, 68, 86, 0.96), rgba(4, 32, 46, 0.98));
      color: #dffcff;
      box-shadow:
        inset 0 1px 0 rgba(220, 252, 255, 0.34),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    }

    .topbar .icon-button {
      width: 32px;
      min-width: 32px;
      height: 32px;
      padding: 0;
    }

    .topbar .ghost-button {
      min-height: 30px;
      padding: 0 12px;
      font-size: 12px;
    }

    .topbar .language-button {
      width: 32px;
      min-width: 32px;
      height: 32px;
      padding: 0;
      font-size: 0;
      letter-spacing: 0;
      display: inline-grid;
      place-items: center;
    }

    .topbar .language-button .language-label-text,
    .topbar .language-button [data-language-label],
    .topbar .language-button.is-globe-only .language-label-text,
    .topbar .language-button.is-globe-only [data-language-label] {
      display: none !important;
      visibility: hidden !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
      position: absolute !important;
      clip: rect(0, 0, 0, 0) !important;
    }

    .topbar .language-button .language-globe-icon,
    .topbar .language-button.is-globe-only .language-globe-icon {
      display: block !important;
      width: 17px;
      height: 17px;
    }

    .page.is-active {
      grid-area: main;
      width: 100%;
      max-width: 100%;
      padding: 12px;
      background:
        radial-gradient(circle at top right, rgba(0, 212, 239, 0.13), transparent 34%),
        radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.78), transparent 30%),
        linear-gradient(180deg, #f4f9fc 0%, #e4eef5 58%, #d8e4ec 100%);
    }

    .withdrawal-records-panel,
    .account-info-records-panel,
    .deposit-history-panel,
    .report-sheet-panel {
      max-height: none;
      margin-bottom: 0;
    }

    .page[data-page="withdrawals"].is-active,
    .page[data-page="account-info"].is-active,
    .page[data-page="deposits"].is-active,
    .page[data-page="reports"].is-active {
      height: calc(100vh - 82px);
      height: calc(100dvh - 82px);
      margin: 0;
      padding-bottom: 12px;
    }

    .menu-item,
    .submenu-item {
      flex: 0 0 auto;
      width: auto;
      min-height: 40px;
      padding: 0 12px;
      white-space: nowrap;
    }

    .panel-header {
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .panel-actions {
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    .metrics-grid:not(.dashboard-metrics),
    .report-grid,
    .settings-grid,
    .admin-file-grid,
    .id-sequence-form,
    .id-sequence-card,
    .account-form,
    .api-key-form,
    .user-form,
    .announcement-form,
    .web-update-form,
    .deposit-tools,
    .deposit-transaction-form,
    .deposit-bank-form,
    .manual-form,
    .transaction-filter,
    .withdrawal-form,
    .two-column {
      grid-template-columns: 1fr;
    }

    .report-card {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 10px;
    }

    .report-card-body {
      justify-items: end;
    }

    .report-card .small-button {
      grid-column: 1 / -1;
      justify-self: stretch;
    }

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

    .report-volume-chart {
      grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    }

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

    .dashboard-metric-card {
      --metric-number-size: clamp(10px, 11cqi, 16px);
      min-height: 72px;
      padding: 9px 10px 7px 18px;
    }

    .dashboard-metric-card .metric-label,
    .dashboard-metric-card.fund-out .metric-label,
    .dashboard-metric-card.manual-withdrawal .metric-label,
    .dashboard-metric-card.total-payout .metric-label {
      white-space: normal;
      font-size: clamp(7px, 6.5cqi, 9px);
      line-height: 1.2;
    }

    .dashboard-metric-card strong,
    .dashboard-metric-card.fund-out strong,
    .dashboard-metric-card.manual-withdrawal strong,
    .dashboard-metric-card.total-payout strong {
      font-size: var(--metric-number-size);
      line-height: 1.2;
      overflow-wrap: anywhere;
      letter-spacing: 0;
    }

    .dashboard-page {
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .dashboard-page .table-wrap,
    .table-wrap {
      width: 100%;
      max-width: 100%;
    }

    .deposit-bank-header {
      align-items: center;
      flex-wrap: wrap;
    }

    .deposit-bank-form {
      width: auto;
      margin-left: auto;
    }

    .manual-form-wide {
      grid-column: auto;
    }

    .account-image-field {
      grid-column: auto;
      grid-row: auto;
    }

    .manual-form-actions {
      justify-content: flex-start;
    }

    .page.is-active,
    .panel {
      width: 100%;
      max-width: 100%;
    }

    .search-panel,
    .notification-panel,
    .language-panel {
      right: 12px;
      left: auto;
      width: min(260px, calc(100vw - 24px));
    }

    .search-panel,
    .notification-panel {
      position: fixed;
      top: calc(env(safe-area-inset-top, 0px) + 92px);
      right: 12px;
      left: auto;
      width: min(260px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      max-height: min(58vh, 360px);
      overflow: auto;
      border: 1px solid rgba(72, 168, 186, 0.55);
      border-radius: 4px;
      background: #f4fbff;
      box-shadow:
        0 18px 40px rgba(0, 12, 22, 0.28),
        0 0 0 1px rgba(0, 229, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      padding: 12px;
      z-index: 80;
    }

    .search-form {
      padding: 0;
      gap: 8px;
    }

    .search-form input {
      min-height: 38px;
      border-radius: 4px;
      font-size: 14px;
    }

    .search-actions {
      gap: 6px;
    }

    .search-actions .primary-button,
    .search-actions .ghost-button {
      min-height: 34px;
      border-radius: 4px;
      padding: 0 12px;
      font-size: 12px;
    }

    .notification-head {
      margin: 0 0 8px;
      padding: 2px 0 8px;
      border-bottom: 1px solid rgba(72, 168, 186, 0.28);
    }

    .notification-head strong {
      font-size: 13px;
      font-weight: 900;
    }

    .notification-list {
      max-height: min(42vh, 260px);
    }

    .notification-item,
    .notification-more,
    .notification-empty {
      border-radius: 4px;
      background: #ffffff;
      padding: 8px 10px;
    }

    .proof-modal,
    .announcement-modal,
    .account-update-modal,
    .bank-sheet-edit-modal,
    .payroll-payslip-modal,
    .app-alert {
      padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
      align-items: start;
      overflow: auto;
    }
  }

  @media (max-width: 720px) {
    .bank-sheet-edit-card {
      width: min(94vw, 420px);
    }

    .login-panel {
      grid-template-columns: 1fr;
      gap: 18px;
      width: min(680px, 100%);
      padding: 22px 20px;
    }

    .login-stage {
      gap: 16px;
      transform: translateY(0);
    }

    .login-logo {
      width: min(170px, 42vw);
    }

    .brand-lockup {
      justify-content: center;
      text-align: center;
    }

    .account-update-toolbar {
      flex-wrap: wrap;
      align-items: stretch;
    }

    .account-update-target-group {
      width: 100%;
      flex-wrap: wrap;
    }

    .app-alert-card {
      grid-template-columns: 1fr;
      justify-items: start;
      padding: 18px;
    }

    .app-password-confirm-card {
      grid-template-columns: 32px minmax(0, 1fr);
      padding: 12px 14px;
    }
  }

  @media (max-width: 640px) {
    .report-insight-grid {
      grid-template-columns: 1fr;
    }

    .report-volume-head {
      align-items: flex-start;
      flex-direction: column;
    }

    .report-volume-toolbar,
    .report-volume-legend {
      justify-content: flex-start;
      margin-left: 0;
      width: 100%;
    }

    .report-volume-chart {
      grid-auto-columns: minmax(86px, 1fr);
      gap: 8px;
    }

    #app,
    .app-shell,
    .workspace,
    .page.is-active {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .workspace,
    .workspace.is-sidebar-collapsed {
      grid-template-columns: 80px minmax(0, 1fr);
    }

    .sidebar-brand,
    .workspace .sidebar-brand,
    .workspace.is-sidebar-collapsed .sidebar-brand {
      width: 80px;
      min-width: 80px;
      max-width: 80px;
      height: 80px;
      min-height: 80px;
      max-height: 80px;
      padding: 3px;
      padding-top: max(3px, env(safe-area-inset-top, 0px));
    }

    .sidebar-brand .sidebar-logo {
      width: 64px;
      max-width: 64px;
      max-height: 64px;
    }

    .sidebar-brand::after,
    .workspace.is-sidebar-collapsed .sidebar-brand::after {
      content: none;
      display: none;
    }

    .topbar {
      align-items: center;
      height: 80px;
      min-height: 80px;
      max-height: 80px;
      margin: 0;
      padding: 5px 10px;
      padding-top: max(5px, env(safe-area-inset-top, 0px));
      row-gap: 3px;
      column-gap: 6px;
      overflow: hidden;
    }

    .search-panel,
    .notification-panel {
      top: calc(env(safe-area-inset-top, 0px) + 88px);
    }

    .topbar h1 {
      font-size: 15px;
      line-height: 1.15;
    }

    .topbar .eyebrow {
      font-size: 9px;
    }

    .topbar-icons {
      gap: 3px;
    }

    .topbar .icon-button {
      width: 32px;
      min-width: 32px;
      min-height: 32px;
    }

    .topbar .language-button {
      width: 32px;
      min-width: 32px;
      height: 32px;
      min-height: 32px;
    }

    .page.is-active {
      padding: 10px;
      padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    .withdrawal-records-panel,
    .account-info-records-panel,
    .deposit-history-panel,
    .report-sheet-panel {
      position: static;
      max-height: none;
      margin-bottom: 18px;
    }

    .page[data-page="withdrawals"].is-active,
    .page[data-page="account-info"].is-active,
    .page[data-page="deposits"].is-active,
    .page[data-page="reports"].is-active {
      height: auto;
      margin: 0;
      overflow: visible;
    }

    .page[data-page="account-info"].is-active > .account-info-grid {
      grid-row: auto;
      height: auto;
      grid-template-rows: auto auto;
      overflow: visible;
    }

    .withdrawal-records-panel .table-wrap,
    .account-info-records-panel .table-wrap,
    .deposit-history-panel .table-wrap,
    .report-sheet-panel .table-wrap {
      max-height: 64vh;
      max-height: 64dvh;
    }

    .topbar-meta {
      gap: 6px;
    }

    .user-label,
    .topbar-meta .user-label {
      width: auto;
      max-width: calc(100% - 88px);
    }

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

    .dashboard-metric-card {
      --metric-number-size: clamp(10px, 12cqi, 14px);
      min-height: 66px;
      padding: 8px 8px 6px 16px;
    }

    .dashboard-metric-card .metric-label,
    .dashboard-metric-card.fund-out .metric-label,
    .dashboard-metric-card.manual-withdrawal .metric-label,
    .dashboard-metric-card.total-payout .metric-label,
    .dashboard-metric-card strong,
    .dashboard-metric-card.fund-out strong,
    .dashboard-metric-card.manual-withdrawal strong,
    .dashboard-metric-card.total-payout strong {
      padding-left: 2px;
    }

    .dashboard-metric-card .metric-label,
    .dashboard-metric-card.fund-out .metric-label,
    .dashboard-metric-card.manual-withdrawal .metric-label,
    .dashboard-metric-card.total-payout .metric-label {
      font-size: clamp(7px, 6.5cqi, 9px);
      line-height: 1.15;
    }

    .dashboard-metric-card strong,
    .dashboard-metric-card.fund-out strong,
    .dashboard-metric-card.manual-withdrawal strong,
    .dashboard-metric-card.total-payout strong {
      font-size: var(--metric-number-size);
      line-height: 1.2;
      letter-spacing: 0;
    }

    .dashboard-page {
      padding: 10px;
      gap: 14px;
    }

    .dashboard-page .operation-panel {
      padding: 10px;
    }

    .panel {
      padding: 12px;
    }

    .manual-form,
    .withdrawal-form,
    .transaction-filter,
    .account-form,
    .api-key-form,
    .user-form,
    .announcement-form {
      grid-template-columns: 1fr;
    }

    .manual-form-actions,
    .deposit-transaction-form .manual-form-actions,
    .withdrawal-form .manual-form-actions {
      justify-content: stretch;
    }

    .manual-form-actions button {
      flex: 1 1 auto;
    }

    th,
    td {
      padding: 8px 9px;
      font-size: 12px;
    }

    .setting-row {
      align-items: stretch;
      flex-direction: column;
    }

    .setting-row input,
    .setting-row select {
      max-width: none;
      width: 100%;
    }

    .menu {
      margin: 0 8px 8px;
      padding: 8px;
      gap: 6px;
    }

    .menu-item,
    .submenu-item {
      min-height: 38px;
      font-size: 13px;
    }

    .icon-button,
    .ghost-button,
    .primary-button {
      min-height: 40px;
    }

    .table-wrap {
      margin: 0 -2px;
      border-radius: 8px;
    }
  }

  @media (max-height: 720px) {
    .login-stage {
      transform: translateY(0);
    }

    .login-screen {
      place-items: start center;
      align-content: start;
      overflow-y: auto;
    }

    .login-screen .login-stage {
      margin: 24px auto;
    }
  }

  .deposit-records-panel .deposit-record-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .deposit-records-panel .table-wrap {
    overflow-x: hidden;
  }

  .deposit-records-panel .deposit-record-table th,
  .deposit-records-panel .deposit-record-table td {
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 6px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .deposit-records-panel .deposit-record-table th:nth-child(1),
  .deposit-records-panel .deposit-record-table td:nth-child(1) { width: 7%; }
  .deposit-records-panel .deposit-record-table th:nth-child(2),
  .deposit-records-panel .deposit-record-table td:nth-child(2) { width: 7%; }
  .deposit-records-panel .deposit-record-table th:nth-child(3),
  .deposit-records-panel .deposit-record-table td:nth-child(3) { width: 8%; }
  .deposit-records-panel .deposit-record-table th:nth-child(4),
  .deposit-records-panel .deposit-record-table td:nth-child(4) { width: 6%; }
  .deposit-records-panel .deposit-record-table th:nth-child(5),
  .deposit-records-panel .deposit-record-table td:nth-child(5) { width: 7%; }
  .deposit-records-panel .deposit-record-table th:nth-child(6),
  .deposit-records-panel .deposit-record-table td:nth-child(6) { width: 11%; }
  .deposit-records-panel .deposit-record-table th:nth-child(7),
  .deposit-records-panel .deposit-record-table td:nth-child(7) { width: 8%; }
  .deposit-records-panel .deposit-record-table th:nth-child(8),
  .deposit-records-panel .deposit-record-table td:nth-child(8) { width: 8%; }
  .deposit-records-panel .deposit-record-table th:nth-child(9),
  .deposit-records-panel .deposit-record-table td:nth-child(9) { width: 10%; }
  .deposit-records-panel .deposit-record-table th:nth-child(10),
  .deposit-records-panel .deposit-record-table td:nth-child(10) { width: 8%; }
  .deposit-records-panel .deposit-record-table th:nth-child(11),
  .deposit-records-panel .deposit-record-table td:nth-child(11) { width: 8%; }
  .deposit-records-panel .deposit-record-table th:nth-child(12),
  .deposit-records-panel .deposit-record-table td:nth-child(12) { width: 7%; }
  .deposit-records-panel .deposit-record-table th:nth-child(13),
  .deposit-records-panel .deposit-record-table td:nth-child(13) { width: 5%; }

  .page[data-page="agent"] .account-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
  }

  .page[data-page="agent"] .account-form > .field-error,
  .page[data-page="agent"] .account-form > .manual-form-actions {
    grid-column: 1 / -1;
  }

  .page[data-page="agent"] .manual-form-actions {
    justify-content: flex-start;
  }

  .page[data-page="transaction-setting"] .account-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
  }

  .page[data-page="transaction-setting"] .account-form > .field-error,
  .page[data-page="transaction-setting"] .account-form > .manual-form-actions,
  .page[data-page="transaction-setting"] .tx-setting-section {
    grid-column: 1 / -1;
  }

  .page[data-page="transaction-setting"] .manual-form-actions {
    justify-content: flex-start;
  }

  .tx-setting-section[hidden] {
    display: none !important;
  }

  .tx-setting-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 12px 14px 14px;
    border: 1px solid #d5e3ea;
    border-radius: 12px;
  }

  .tx-setting-section legend {
    padding: 0 6px;
    color: #324a5c;
    font-size: 13px;
    font-weight: 900;
  }

  .tx-setting-section.tx-setting-agent-fee {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @media (max-width: 760px) {
    .page[data-page="transaction-setting"] .account-form,
    .tx-setting-section {
      grid-template-columns: 1fr;
    }
  }

  .page[data-page="system-withdrawal"] .table-wrap {
    overflow-x: hidden;
  }

  .page[data-page="system-withdrawal"] .system-withdrawal-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .page[data-page="system-withdrawal"] .system-withdrawal-table th,
  .page[data-page="system-withdrawal"] .system-withdrawal-table td {
    min-width: 0;
    max-width: none;
    width: auto;
    padding: 6px 3px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .page[data-page="system-withdrawal"] .system-withdrawal-table th {
    white-space: normal;
    line-height: 1.15;
  }

  .page[data-page="system-withdrawal"] .system-withdrawal-table td {
    white-space: nowrap;
  }

  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(1),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(1) { width: 7%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(2),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(2) { width: 7%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(3),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(3) { width: 8%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(4),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(4) { width: 6%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(5),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(5) { width: 7%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(6),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(6) { width: 7%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(7),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(7) { width: 5%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(8),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(8) { width: 8%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(9),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(9) { width: 8%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(10),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(10) { width: 6%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(11),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(11) { width: 8%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(12),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(12) { width: 5%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(13),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(13) { width: 6%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(14),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(14) { width: 6%; }
  .page[data-page="system-withdrawal"] .system-withdrawal-table th:nth-child(15),
  .page[data-page="system-withdrawal"] .system-withdrawal-table td:nth-child(15) { width: 6%; }