.version-tag {
      position: fixed;
      top: 10px;
      right: 10px;
      font-size: 12px;
      color: #999;
      z-index: 1000;
    }

    /* 隐藏number输入框的spinner按钮 */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type=number] {
      -moz-appearance: textfield;
    }

    /* 简单的checkbox样式 */
    input[type="checkbox"] {
      cursor: pointer;
      accent-color: #3b82f6; /* 蓝色 */
    }

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

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
      background: #f3f4f6;
      color: #374151;
      line-height: 1.5;
    }

    /* Layout */
    .min-h-screen {
      min-height: 100vh;
    }

    .pb-10 {
      padding-bottom: 2.5rem;
    }

    .max-w-7xl {
      max-width: 80rem;
    }

    .mx-auto {
      margin-left: auto;
      margin-right: auto;
    }

    .px-4 {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .py-3 {
      padding-top: 0.75rem;
      padding-bottom: 0.75rem;
    }

    .py-6 {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }

    .p-4 {
      padding: 1rem;
    }

    .p-3 {
      padding: 0.75rem;
    }

    .px-3 {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .py-2 {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
    }

    .px-2 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    .py-1 {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }

    .py-0\.5 {
      padding-top: 0.125rem;
      padding-bottom: 0.125rem;
    }

    .mt-2 {
      margin-top: 0.5rem;
    }

    .mt-3 {
      margin-top: 0.75rem;
    }

    .mb-1 {
      margin-bottom: 0.25rem;
    }

    .mb-4 {
      margin-bottom: 1rem;
    }

    .mr-1 {
      margin-right: 0.25rem;
    }

    .ml-1 {
      margin-left: 0.25rem;
    }

    .mr-2 {
      margin-right: 0.5rem;
    }

    .ml-2 {
      margin-left: 0.5rem;
    }

    /* Flexbox */
    .flex {
      display: flex;
    }

    .inline-flex {
      display: inline-flex;
    }

    .flex-col {
      flex-direction: column;
    }

    .flex-1 {
      flex: 1 1 0%;
    }

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

    .items-center {
      align-items: center;
    }

    .items-start {
      align-items: flex-start;
    }

    .justify-center {
      justify-content: center;
    }

    .justify-between {
      justify-content: space-between;
    }

    .justify-end {
      justify-content: flex-end;
    }

    .gap-2 {
      gap: 0.5rem;
    }

    .gap-3 {
      gap: 0.75rem;
    }

    .gap-4 {
      gap: 1rem;
    }

    .gap-6 {
      gap: 1.5rem;
    }

    .gap-x-4 {
      column-gap: 1rem;
    }

    .gap-y-1 {
      row-gap: 0.25rem;
    }

    .space-x-1>*+* {
      margin-left: 0.25rem;
    }

    .space-x-2>*+* {
      margin-left: 0.5rem;
    }

    .space-x-4>*+* {
      margin-left: 1rem;
    }

    .space-x-6>*+* {
      margin-left: 1.5rem;
    }

    .space-y-4>*+* {
      margin-top: 1rem;
    }

    .shrink-0,
    .flex-shrink-0 {
      flex-shrink: 0;
    }

    /* Grid */
    .grid {
      display: grid;
    }

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

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

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

    @media (min-width: 768px) {
      .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .lg\:flex {
        display: flex !important;
      }

      .lg\:hidden {
        display: none !important;
      }

      .hidden.lg\:flex {
        display: flex !important;
      }
    }

    /* Background & Colors */
    .bg-gray-100 {
      background-color: #f3f4f6;
    }

    .bg-gray-50 {
      background-color: #f9fafb;
    }

    .bg-gray-200 {
      background-color: #e5e7eb;
    }

    .bg-gray-800 {
      background-color: #1f2937;
    }

    .bg-white {
      background-color: #fff;
    }

    .bg-blue-50 {
      background-color: #eff6ff;
    }

    .bg-blue-100 {
      background-color: #dbeafe;
    }

    .bg-blue-500 {
      background-color: #3b82f6;
    }

    .bg-blue-600 {
      background-color: #2563eb;
    }

    .bg-green-50 {
      background-color: #f0fdf4;
    }

    .bg-green-100 {
      background-color: #dcfce7;
    }

    .bg-green-500 {
      background-color: #22c55e;
    }

    .bg-green-600 {
      background-color: #16a34a;
    }

    .bg-red-50 {
      background-color: #fef2f2;
    }

    .bg-red-100 {
      background-color: #fee2e2;
    }

    .bg-red-500 {
      background-color: #ef4444;
    }

    .bg-yellow-50 {
      background-color: #fefce8;
    }

    .bg-yellow-100 {
      background-color: #fef9c3;
    }

    .bg-orange-500 {
      background-color: #f97316;
    }

    .bg-purple-500 {
      background-color: #a855f7;
    }

    .bg-black {
      background-color: #000;
    }

    .bg-opacity-50 {
      --tw-bg-opacity: 0.5;
      background-color: rgba(0, 0, 0, 0.5);
    }

    /* Text Colors */
    .text-white {
      color: #fff;
    }

    .text-gray-400 {
      color: #9ca3af;
    }

    .text-gray-500 {
      color: #6b7280;
    }

    .text-gray-600 {
      color: #4b5563;
    }

    .text-gray-700 {
      color: #374151;
    }

    .text-blue-500 {
      color: #3b82f6;
    }

    .text-blue-600 {
      color: #2563eb;
    }

    .text-blue-700 {
      color: #1d4ed8;
    }

    .text-green-500 {
      color: #22c55e;
    }

    .text-green-600 {
      color: #16a34a;
    }

    .text-red-500 {
      color: #ef4444;
    }

    .text-red-600 {
      color: #dc2626;
    }

    .text-yellow-600 {
      color: #ca8a04;
    }

    .text-purple-600 {
      color: #9333ea;
    }

    .text-orange-600 {
      color: #ea580c;
    }

    /* Typography */
    .text-xs {
      font-size: 0.75rem;
      line-height: 1rem;
    }

    .text-sm {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }

    .text-base {
      font-size: 1rem;
      line-height: 1.5rem;
    }

    .text-lg {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }

    .text-xl {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }

    .text-2xl {
      font-size: 1.5rem;
      line-height: 2rem;
    }

    .text-3xl {
      font-size: 1.875rem;
      line-height: 2.25rem;
    }

    .font-medium {
      font-weight: 500;
    }

    .font-semibold {
      font-weight: 600;
    }

    .font-bold {
      font-weight: 700;
    }

    .text-left {
      text-align: left;
    }

    .text-center {
      text-align: center;
    }

    .text-right {
      text-align: right;
    }

    .whitespace-nowrap {
      white-space: nowrap;
    }

    .truncate {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Border */
    .border {
      border-width: 1px;
      border-color: #e5e7eb;
      border-style: solid;
    }

    .border-t {
      border-top-width: 1px;
      border-color: #e5e7eb;
    }

    .border-b {
      border-bottom-width: 1px;
      border-color: #e5e7eb;
    }

    .border-yellow-200 {
      border-color: #fef08a;
    }

    .rounded {
      border-radius: 0.25rem;
    }

    .rounded-lg {
      border-radius: 0.5rem;
    }

    .rounded-full {
      border-radius: 9999px;
    }

    .divide-y>*+* {
      border-top-width: 1px;
      border-color: #e5e7eb;
    }

    /* Shadow */
    .shadow {
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    }

    /* Position */
    .fixed {
      position: fixed;
    }

    .sticky {
      position: sticky;
    }

    .absolute {
      position: absolute;
    }

    .relative {
      position: relative;
    }

    .inset-0 {
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    .top-0 {
      top: 0;
    }

    .bottom-0 {
      bottom: 0;
    }

    .left-0 {
      left: 0;
    }

    .right-0 {
      right: 0;
    }

    .z-40 {
      z-index: 40;
    }

    .z-50 {
      z-index: 50;
    }

    .z-\[100\] {
      z-index: 100;
    }

    /* Sizing */
    .w-full {
      width: 100%;
    }

    .w-4 {
      width: 1rem;
    }

    .w-5 {
      width: 1.25rem;
    }

    .h-2 {
      height: 0.5rem;
    }

    .h-4 {
      height: 1rem;
    }

    .h-5 {
      height: 1.25rem;
    }

    .h-screen {
      height: 100vh;
    }

    .max-w-lg {
      max-width: 32rem;
    }

    .max-w-xl {
      max-width: 36rem;
    }

    .max-w-2xl {
      max-width: 42rem;
    }

    /* Overflow */
    .overflow-x-auto {
      overflow-x: auto;
    }

    .overflow-y-auto {
      overflow-y: auto;
    }

    .overflow-hidden {
      overflow: hidden;
    }

    /* Display */
    .hidden {
      display: none;
    }

    .block {
      display: block;
    }

    .inline-block {
      display: inline-block;
    }

    /* Table */
    table {
      border-collapse: collapse;
      width: 100%;
    }

    th,
    td {
      padding: 0.5rem 0.75rem;
    }

    /* Form Elements */
    input,
    select,
    textarea {
      border: 1px solid #e5e7eb;
      border-radius: 0.25rem;
      padding: 0.5rem 0.75rem;
      width: 100%;
      font-size: 0.875rem;
      outline: none;
    }

    input[type="radio"],
    input[type="checkbox"] {
      width: auto;
      padding: 0;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    }

    /* Button */
    button {
      cursor: pointer;
      border: none;
      font-size: 0.875rem;
      border-radius: 0.25rem;
      padding: 0.5rem 1rem;
    }

    .hover\:bg-gray-50:hover {
      background-color: #f9fafb;
    }

    .hover\:bg-gray-100:hover {
      background-color: #f3f4f6;
    }

    .hover\:bg-gray-200:hover {
      background-color: #e5e7eb;
    }

    .hover\:bg-blue-600:hover {
      background-color: #2563eb;
    }

    .hover\:bg-green-600:hover {
      background-color: #16a34a;
    }

    /* Cursor */
    .cursor-pointer {
      cursor: pointer;
    }

    /* Icons (text-based replacement for remixicon) */
    .ri-add-line::before {
      content: "+";
    }

    .ri-close-line::before {
      content: "×";
    }

    .ri-edit-line::before {
      content: "✎";
    }

    .ri-delete-bin-line::before {
      content: "🗑";
    }

    .ri-download-line::before {
      content: "↓";
    }

    .ri-upload-line::before {
      content: "↑";
    }

    .ri-search-line::before {
      content: "🔍";
    }

    .ri-refresh-line::before {
      content: "↻";
    }

    .ri-check-line::before {
      content: "✓";
    }

    .ri-arrow-left-line::before {
      content: "←";
    }

    .ri-arrow-right-line::before {
      content: "→";
    }

    .ri-file-line::before {
      content: "📄";
    }

    .ri-folder-line::before {
      content: "📁";
    }

    .ri-home-line::before {
      content: "🏠";
    }

    .ri-settings-line::before {
      content: "⚙";
    }

    .ri-user-line::before {
      content: "👤";
    }

    .ri-money-cny-box-line::before {
      content: "💰";
    }

    .ri-bar-chart-line::before {
      content: "📊";
    }

    [class^="ri-"],
    [class*=" ri-"] {
      font-style: normal;
    }

    /* 工资表格固定表头和姓名列 */
    .salary-table-container {
      max-height: calc(100vh - 300px);
      min-height: 400px;
      overflow: auto;
      position: relative;
    }

    .salary-table thead {
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .salary-table thead th {
      background: #f9fafb;
    }

    .salary-table .sticky-col {
      position: sticky;
      left: 0;
      z-index: 10;
      background: inherit;
    }

    .salary-table thead .sticky-col {
      z-index: 25;
      background: #f9fafb;
    }

    .salary-table tbody tr:hover .sticky-col {
      background: #f9fafb;
    }

    .salary-table tbody tr.editing .sticky-col {
      background: #fefce8;
    }

    /* 汇总行固定列背景 */
    .salary-table tfoot tr .sticky-col,
    .salary-table tbody tr.summary-row .sticky-col {
      background: #f3f4f6;
    }

    /* 模态框样式 */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .modal-content {
      background: white;
      border-radius: 8px;
      width: 100%;
      max-width: 40rem;
      max-height: calc(100vh - 120px);
      display: flex;
      flex-direction: column;
    }

    .modal-header {
      padding: 12px 16px;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
    }

    .modal-body {
      padding: 16px;
      overflow-y: auto;
      flex: 1;
    }

    .modal-footer {
      padding: 12px 16px;
      border-top: 1px solid #e5e7eb;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      flex-shrink: 0;
    }

    /* ===================== 移动端适配 ===================== */
    /* 桌面端：隐藏卡片，显示表格 */
    .emp-mobile-cards { display: none; }
    .recv-mobile-cards { display: none; }
    .tx-mobile-cards { display: none; }

    /* 应收/应付表格容器：限制最大宽度，防止撑破页面 */
    .recv-desktop-table {
      max-width: 100%;
    }
    .recv-desktop-table table {
      min-width: max-content;
    }

    @media (max-width: 767px) {
      /* 员工页面：隐藏桌面表格，显示卡片 */
      .emp-desktop-table { display: none !important; }
      .emp-mobile-cards { display: block !important; }

      /* 筛选栏可换行，紧凑间距 */
      #page-employee .flex[style*="flex-wrap:nowrap"] {
        flex-wrap: wrap !important;
      }
      #page-employee select,
      #page-employee input[type="text"] {
        width: auto !important;
        min-width: 5rem;
        flex: 1 1 auto;
      }

      /* 公司标签横向滚动 */
      #employee-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
        gap: 0.4rem !important;
      }
      #employee-tabs button {
        flex-shrink: 0;
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
      }

      /* 隐藏管理按钮 */
      #manage-companies-btn,
      #manage-field-options-btn {
        display: none !important;
      }

      /* 卡片列表样式 */
      .emp-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .emp-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
      }
      .emp-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .emp-card-name {
        font-weight: 600;
        font-size: 0.9375rem;
        color: #2563eb;
        cursor: pointer;
      }
      .emp-card-company {
        font-size: 0.75rem;
        color: #6b7280;
      }
      .emp-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.6rem;
        font-size: 0.75rem;
        color: #4b5563;
      }
      .emp-card-meta span {
        white-space: nowrap;
      }
      .emp-card-tag {
        display: inline-block;
        background: #eff6ff;
        color: #2563eb;
        border-radius: 0.25rem;
        padding: 0.1rem 0.4rem;
        font-size: 0.6875rem;
      }
      .emp-card-actions {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.25rem;
      }
      .emp-card-actions button {
        font-size: 0.75rem;
        padding: 0.25rem 0.6rem;
      }

      /* 页面容器减少内边距 */
      #page-employee > .bg-white {
        padding: 0.5rem !important;
      }

      /* ===== 应收款页移动端 ===== */
      .recv-desktop-table { display: none !important; }
      .recv-mobile-cards { display: block !important; }

      #page-receivable .bg-white {
        padding: 0.5rem !important;
      }
      /* 汇总栏紧凑 */
      #page-receivable .recv-summary {
        gap: 0.5rem !important;
        padding: 0.5rem !important;
      }
      #page-receivable .recv-summary span {
        font-size: 0.75rem;
      }
      #page-receivable .recv-summary strong {
        font-size: 0.9375rem !important;
      }
      /* 筛选栏 */
      #page-receivable .recv-filter {
        gap: 0.35rem !important;
      }
      #page-receivable .recv-filter input[type="date"] {
        width: 6.5rem !important;
        font-size: 0.75rem;
        padding: 0.3rem 0.4rem;
      }

      /* 应收款卡片 */
      .recv-mobile-cards {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }
      .recv-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.6rem 0.75rem;
      }
      .recv-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.25rem;
      }
      .recv-card-name {
        font-weight: 600;
        font-size: 0.875rem;
        color: #2563eb;
      }
      .recv-card-date {
        font-size: 0.6875rem;
        color: #9ca3af;
      }
      .recv-card-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        color: #4b5563;
        line-height: 1.6;
      }
      .recv-card-row .label { color: #6b7280; }
      .recv-card-row .value { font-weight: 500; }
      .recv-card-remaining { color: #ea580c; font-weight: 600; }
      .recv-card-received { color: #16a34a; }
      .recv-card-tags {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
        margin-top: 0.2rem;
      }

      /* ===== 流水页移动端 ===== */
      .tx-desktop-table { display: none !important; }
      .tx-mobile-cards { display: flex !important; flex-direction: column; gap: 0.5rem; }

      #page-transaction .bg-white { padding: 0.5rem !important; }
      /* 顶部筛选/按钮：紧凑 */
      #page-transaction .flex.flex-wrap.gap-4 { gap: 0.4rem !important; }
      #page-transaction select { padding: 0.3rem 0.5rem !important; font-size: 0.8125rem; }
      #page-transaction button { padding: 0.4rem 0.6rem !important; font-size: 0.75rem; }
      #page-transaction label { font-size: 0.75rem; }
      /* 汇总栏 */
      #tx-summary .text-sm { font-size: 0.75rem; }

      /* 流水卡片 */
      .tx-card {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        padding: 0.6rem 0.75rem;
      }
      .tx-card.reversed { background: #f3f4f6; opacity: 0.65; }
      .tx-card-top {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-bottom: 0.25rem;
      }
      .tx-card-amount {
        font-size: 1.05rem;
        font-weight: 700;
      }
      .tx-card-date {
        font-size: 0.75rem;
        color: #6b7280;
      }
      .tx-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 0.75rem;
        font-size: 0.75rem;
        color: #4b5563;
        margin-bottom: 0.25rem;
      }
      .tx-card-meta .label { color: #9ca3af; margin-right: 0.15rem; }
      .tx-card-summary {
        font-size: 0.75rem;
        color: #4b5563;
        word-break: break-all;
        line-height: 1.5;
      }
      .tx-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-top: 0.4rem;
      }
      .tx-card-actions button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
      }
      .tx-card-id {
        font-family: ui-monospace, monospace;
        font-size: 0.6875rem;
        color: #9ca3af;
      }
      /* 分页按钮紧凑 */
      #tx-pagination button { padding: 0.3rem 0.5rem !important; font-size: 0.75rem; }

      /* 流水页：按钮图标和文字紧凑 */
      #page-transaction button i { margin-right: 0.15rem !important; font-size: 0.875rem; }
      /* 工具栏按钮统一更小 */
      #tx-add-btn, #tx-import-btn, #tx-closing-btn {
        padding: 0.4rem 0.55rem !important;
        font-size: 0.75rem !important;
      }

      /* ===== 账户页移动端 ===== */
      /* 标题栏：允许换行 */
      #page-account .flex.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      #page-account h2 { font-size: 1rem !important; }
      #page-account button {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
      }
      #page-account button i { margin-right: 0.15rem !important; }
      /* 汇总栏紧凑 */
      #account-summary-bar .flex { gap: 0.25rem !important; padding: 0.5rem !important; }
      #account-summary-bar .text-sm,
      #account-summary-bar .text-base { font-size: 0.7rem !important; }
      #account-summary-bar .font-bold { font-size: 0.8125rem !important; }
      /* 账户卡片：每行 2 个 */
      #page-account .grid { gap: 0.5rem !important; }
      #page-account .grid > div .text-xl { font-size: 1.05rem !important; }
      /* 分组管理：输入框+按钮在窄屏更紧凑 */
      #page-account input[type="text"] { font-size: 0.8125rem; min-width: 0; flex: 1; }
      /* 月末余额面板 */
      #account-monthly-balance-panel select,
      #account-monthly-balance-panel button {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
      }
      #page-account .bg-white { padding: 0.5rem !important; }
    }