:root {
      --bg: #f3f8f6;
      --surface: #ffffff;
      --surface-2: #f8fbff;
      --text: #1e2a25;
      --muted: #5a6b63;
      --line: #d8e6df;
      --primary: #0e7c66;
      --primary-2: #1f9f86;
      --danger: #c44848;
      --shadow-sm: 0 8px 18px rgba(17, 53, 40, 0.06);
      --shadow: 0 16px 34px rgba(17, 53, 40, 0.12);
      --shadow-lg: 0 26px 64px rgba(17, 53, 40, 0.18);
      --radius-sm: 8px;
      --radius-md: 10px;
      --radius-lg: 14px;
      --radius-xl: 18px;
      --radius-2xl: 24px;
      --radius-full: 999px;
      --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
      --role-dispatcher-accent: #21906e;
      --role-dispatcher-bg: #e6f5ee;
      --role-accountant-accent: #6f8fcb;
      --role-accountant-bg: #edf3ff;
      --role-boss-accent: #c79b36;
      --role-boss-bg: #fbf4df;
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    body {
      margin: 0;
      font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 100% 0%, rgba(39, 163, 132, 0.18), transparent 40%),
        radial-gradient(circle at 0% 90%, rgba(22, 122, 104, 0.14), transparent 35%),
        var(--bg);
      min-height: 100dvh;
      overflow: hidden;
    }

    body.app-booting #loginPage,
    body.app-booting #appPage {
      visibility: hidden;
    }

    .login-shell {
      min-height: 100dvh;
      display: grid;
      place-items: center;
      padding: clamp(18px, 4vw, 46px);
      overflow: auto;
      background:
        linear-gradient(135deg, rgba(236, 247, 242, 0.92), rgba(243, 248, 246, 0.6) 42%, rgba(239, 244, 250, 0.88)),
        var(--bg);
    }

    .login-workbench {
      width: min(1120px, 100%);
      min-height: min(690px, calc(100dvh - 48px));
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.82fr);
      border: 1px solid rgba(192, 216, 205, 0.92);
      border-radius: 22px;
      background: rgba(252, 255, 253, 0.96);
      box-shadow: 0 28px 70px rgba(20, 63, 48, 0.14);
      overflow: hidden;
    }

    .login-brief {
      position: relative;
      min-width: 0;
      display: grid;
      align-content: space-between;
      gap: 34px;
      padding: clamp(28px, 4vw, 46px);
      background:
        linear-gradient(160deg, rgba(11, 94, 77, 0.96), rgba(18, 120, 98, 0.92) 46%, rgba(229, 243, 237, 0.94) 46.2%, rgba(246, 250, 248, 0.96));
      color: #f7fbf9;
    }

    .login-brief::after {
      content: "";
      position: absolute;
      inset: auto 32px 32px auto;
      width: 164px;
      height: 164px;
      border: 1px solid rgba(14, 124, 102, 0.14);
      border-radius: 26px;
      background:
        linear-gradient(90deg, rgba(14, 124, 102, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(14, 124, 102, 0.12) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: 0.55;
      pointer-events: none;
    }

    .login-brand {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }

    .login-brand-mark {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(248, 252, 250, 0.96);
      color: #0e6d59;
      font-size: 25px;
      font-weight: 900;
      box-shadow: 0 16px 34px rgba(6, 47, 37, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.66);
      flex: 0 0 auto;
    }

    .login-brand-text {
      min-width: 0;
      display: grid;
      gap: 5px;
    }

    .login-brand-kicker,
    .login-card-kicker {
      color: rgba(238, 249, 245, 0.78);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      line-height: 1.2;
    }

    .login-brand h1 {
      margin: 0;
      color: #fbfffd;
      font-size: 30px;
      line-height: 1.12;
      letter-spacing: 0;
    }

    .login-brief-body {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 22px;
      max-width: 560px;
    }

    .login-brief-title {
      max-width: 17em;
      margin: 0;
      color: #173f34;
      font-size: clamp(25px, 3vw, 38px);
      font-weight: 900;
      line-height: 1.16;
      letter-spacing: 0;
    }

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

    .login-role-card {
      min-width: 0;
      display: grid;
      gap: 8px;
      padding: 14px;
      border: 1px solid rgba(194, 218, 207, 0.9);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.78);
      color: #24483d;
      box-shadow: 0 12px 26px rgba(24, 70, 54, 0.08);
    }

    .login-role-label {
      justify-self: start;
      padding: 4px 8px;
      border-radius: 999px;
      background: #e6f4ee;
      color: #1a765f;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }

    .login-role-card strong {
      color: #153a30;
      font-size: 15px;
      line-height: 1.2;
    }

    .login-role-card span:last-child {
      color: #60766d;
      font-size: 12px;
      line-height: 1.5;
    }

    .login-card {
      width: 100%;
      min-width: 0;
      display: grid;
      align-content: center;
      gap: 22px;
      padding: clamp(24px, 4vw, 40px);
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: linear-gradient(180deg, #ffffff, #f8fbf9);
    }

    .login-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .login-card-kicker {
      color: #668078;
      display: block;
      margin-bottom: 7px;
    }

    .login-card-title {
      margin: 0;
      color: #193c32;
      font-size: 25px;
      line-height: 1.16;
      letter-spacing: 0;
    }

    .login-card-status {
      flex: 0 0 auto;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #d5e5de;
      background: #f2f8f5;
      color: #537067;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
    }

    .login-form-grid {
      display: grid;
      gap: 14px;
    }

    .login-field {
      gap: 7px;
    }

    .login-field label {
      color: #4d675d;
      font-weight: 800;
    }

    .login-field input {
      min-height: 48px;
      border-color: #d6dce0;
      background: #ffffff !important;
      border-radius: 12px;
      color: #18372f;
      box-shadow: inset 0 0 0 1000px #ffffff;
      appearance: none;
    }

    .login-field input::placeholder {
      color: #a2aab0;
    }

    .login-field input:focus {
      border-color: #15977e;
      background: #ffffff !important;
      box-shadow: inset 0 0 0 1000px #ffffff, 0 0 0 3px rgba(31, 159, 134, 0.14);
    }

    .login-field input:-webkit-autofill,
    .login-field input:-webkit-autofill:hover {
      -webkit-text-fill-color: #18372f;
      box-shadow: inset 0 0 0 1000px #ffffff;
      caret-color: #18372f;
    }

    .login-field input:-webkit-autofill:focus {
      -webkit-text-fill-color: #18372f;
      box-shadow: inset 0 0 0 1000px #ffffff, 0 0 0 3px rgba(31, 159, 134, 0.14);
      caret-color: #18372f;
    }

    .row.login-action-row {
      display: grid;
      grid-template-columns: minmax(128px, 0.9fr) minmax(0, 1.2fr);
      gap: 10px;
      align-items: stretch;
    }

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

    .row.login-action-row.login-register-row {
      grid-template-columns: 2fr 1fr;
      gap: 12px;
    }

    .row.login-action-row > button {
      min-height: 44px;
    }

    .login-card .login-action-row {
      margin-top: 16px;
    }

    .login-card .login-action-row > button {
      min-height: 48px;
      border-radius: 12px;
      font-weight: 800;
      box-shadow: 0 14px 28px rgba(14, 124, 102, 0.18);
    }

    .login-request-hint {
      margin-top: 12px;
      padding: 10px 12px;
      border-radius: var(--radius-md);
      border: 1px solid var(--line);
      background: #f8fcfa;
      color: #4c645b;
      font-size: 13px;
      line-height: 1.4;
    }

    .login-request-hint.idle {
      border-color: #d7e6de;
      background: #f8fcfa;
      color: #4c645b;
    }

    .login-request-hint.pending {
      border-color: #cfe1da;
      background: #f2faf7;
      color: #286454;
    }

    .login-request-hint.ok {
      border-color: #b8d9cb;
      background: #edf8f2;
      color: #0f6b55;
    }

    .login-request-hint.error {
      border-color: #edc0c0;
      background: #fff5f5;
      color: #b23a3a;
    }

    button.is-loading {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      pointer-events: none;
    }

    .table-invoice-upload-btn.is-loading {
      display: inline-flex;
      pointer-events: none;
    }

    .loading-spinner {
      width: 14px;
      height: 14px;
      flex: 0 0 auto;
      border-radius: 999px;
      border: 2px solid rgba(39, 112, 92, 0.22);
      border-top-color: #1f7a61;
      animation: loading-spin 0.82s linear infinite;
    }

    .loading-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    form.is-loading {
      cursor: progress;
    }

    [aria-busy="true"] {
      cursor: progress;
    }

    .table-wrap.is-loading,
    .accountant-list-wrap.is-loading,
    .settlement-detail-list.is-loading,
    .settlement-summary-modal-card.is-loading,
    .build-info-panel.is-loading,
    .recycle-log-section.is-loading {
      position: relative;
    }

    .table-wrap.is-loading::after,
    .accountant-list-wrap.is-loading::after,
    .settlement-detail-list.is-loading::after,
    .settlement-summary-modal-card.is-loading::after,
    .build-info-panel.is-loading::after,
    .recycle-log-section.is-loading::after {
      content: attr(data-loading-text);
      position: absolute;
      right: 12px;
      top: 10px;
      z-index: 5;
      padding: 6px 10px;
      border: 1px solid #cfe1da;
      border-radius: 999px;
      background: rgba(248, 252, 250, 0.96);
      color: #286454;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 8px 18px rgba(17, 53, 40, 0.08);
    }

    .table-wrap.main-table-loading.is-loading {
      cursor: progress;
    }

    .table-wrap.main-table-loading.is-loading::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 8;
      width: 54px;
      height: 54px;
      margin: -46px 0 0 -27px;
      border-radius: 999px;
      border: 5px solid rgba(31, 122, 97, 0.16);
      border-top-color: #1f7a61;
      border-right-color: #2d9d7f;
      background: rgba(248, 252, 250, 0.86);
      box-shadow: 0 16px 34px rgba(17, 53, 40, 0.14);
      animation: loading-spin 0.82s linear infinite;
      pointer-events: none;
    }

    .table-wrap.main-table-loading.is-loading::after {
      left: 50%;
      right: auto;
      top: calc(50% + 24px);
      z-index: 9;
      transform: translateX(-50%);
      max-width: min(320px, calc(100% - 48px));
      padding: 10px 16px;
      border-color: #bfd9cf;
      border-radius: 14px;
      background: rgba(248, 252, 250, 0.98);
      color: #174f40;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.2;
      text-align: center;
      white-space: normal;
      box-shadow: 0 16px 34px rgba(17, 53, 40, 0.13);
      pointer-events: none;
    }

    .build-info-panel.is-loading::after {
      inset: auto 0 -28px auto;
      white-space: nowrap;
    }

    .skeleton-bar {
      --skeleton-width: 70%;
      display: block;
      width: var(--skeleton-width);
      max-width: 100%;
      height: 12px;
      border-radius: 999px;
      background:
        linear-gradient(90deg, rgba(214, 228, 221, 0.72), rgba(239, 248, 244, 0.96), rgba(214, 228, 221, 0.72));
      background-size: 220% 100%;
      animation: loading-skeleton 1.1s ease-in-out infinite;
    }

    .table-skeleton-row td {
      height: 44px;
      padding: 10px 12px;
      border-bottom: 1px solid #edf4f1;
    }

    .list-skeleton-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      gap: 14px;
      min-height: 44px;
      padding: 11px 12px;
      border-bottom: 1px solid #edf4f1;
      background: rgba(255, 255, 255, 0.72);
    }

    .list-skeleton-row:last-child {
      border-bottom: 0;
    }

    @keyframes loading-spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes loading-skeleton {
      0% {
        background-position: 120% 0;
      }
      100% {
        background-position: -120% 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .loading-spinner,
      .skeleton-bar,
      .table-wrap.main-table-loading.is-loading::before {
        animation: none;
      }
    }

    .app-status-hint,
    .form-request-hint {
      margin-top: 0;
      margin-bottom: 14px;
    }

    .field-validation-group-error > .field-inline-error {
      margin: 8px 0 0;
      color: var(--danger);
      font-size: 12px;
      line-height: 1.45;
      font-weight: 700;
    }

    input.field-control-error,
    textarea.field-control-error,
    select.field-control-error,
    .accountant-picker-trigger.field-control-error {
      border-color: #df7474 !important;
      background: #fff8f8 !important;
      box-shadow: 0 0 0 2px rgba(203, 87, 87, 0.14) !important;
    }

    @media (max-width: 720px) {
      .row.login-action-row:not(.login-register-row) {
        grid-template-columns: 1fr;
      }

      .row.login-action-row.login-register-row {
        grid-template-columns: 2fr 1fr;
      }

      .accountant-register-grid {
        grid-template-columns: 1fr;
      }

      .analysis-chart-board {
        grid-template-columns: 1fr;
      }

      .analysis-chart-panel,
      .analysis-chart-panel-wide {
        grid-column: auto;
      }

      .analysis-small-chart {
        height: 230px;
      }

      .analysis-chart-panel-head {
        align-items: flex-start;
      }

      .accountant-register-modal-top {
        flex-direction: column;
        align-items: stretch;
      }

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

    .saved-login-section {
      margin-top: 18px;
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #dceae3;
      border-radius: 16px;
      background: #f7fbf9;
      box-shadow: var(--inset-highlight);
    }

    .saved-login-top {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .saved-login-heading {
      min-width: 0;
      display: grid;
      gap: 3px;
    }

    .saved-login-title {
      font-size: 14px;
      font-weight: 800;
      color: #28473d;
      letter-spacing: 0;
      line-height: 1.2;
    }

    .saved-login-subtitle {
      color: #71887f;
      font-size: 12px;
      line-height: 1.35;
    }

    .saved-login-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      max-height: 250px;
      overflow: auto;
      padding-right: 2px;
    }

    body.quick-login-debug .login-shell {
      place-items: start center;
    }

    body.quick-login-debug .login-workbench {
      width: min(1480px, 100%);
      grid-template-columns: minmax(280px, 0.72fr) minmax(720px, 1.55fr);
      min-height: auto;
      overflow: visible;
    }

    body.quick-login-debug .login-card {
      min-width: 0;
    }

    body.quick-login-debug .saved-login-list {
      grid-template-columns: minmax(160px, 0.62fr) minmax(220px, 0.82fr) minmax(420px, 1.7fr);
      align-items: stretch;
      height: min(62dvh, 680px);
      max-height: min(62dvh, 680px);
      overflow: hidden;
      padding-right: 0;
    }

    body.quick-login-debug .saved-login-group {
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
      align-content: start;
      height: 100%;
      min-height: 0;
    }

    body.quick-login-debug .saved-login-group-header {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      padding-left: 8px;
    }

    body.quick-login-debug .saved-login-group-list {
      grid-template-columns: 1fr;
      min-height: 0;
      overflow-y: scroll;
      overflow-x: hidden;
      padding-right: 6px;
      scrollbar-gutter: stable;
    }

    .saved-login-group {
      --saved-group-bg: #f2f6f3;
      --saved-group-accent: #6fae9b;
      min-width: 0;
      display: grid;
      grid-template-columns: 108px minmax(0, 1fr);
      gap: 10px;
      padding: 10px;
      border: 1px solid rgba(205, 222, 215, 0.9);
      border-radius: 12px;
      background: var(--saved-group-bg);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
      position: relative;
      overflow: hidden;
    }

    .saved-login-group::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      top: 0;
      width: 4px;
      background: var(--saved-group-accent);
      opacity: 0.85;
    }

    .saved-login-group.dispatcher {
      --saved-group-bg: #eef8f3;
      --saved-group-accent: var(--role-dispatcher-accent);
    }

    .saved-login-group.accountant {
      --saved-group-bg: #f2f6fd;
      --saved-group-accent: var(--role-accountant-accent);
    }

    .saved-login-group.boss {
      --saved-group-bg: #fbf6e7;
      --saved-group-accent: var(--role-boss-accent);
    }

    .saved-login-group-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 8px;
      min-width: 0;
      padding-left: 8px;
      position: relative;
      z-index: 1;
    }

    .saved-login-group-title {
      font-size: 12px;
      font-weight: 800;
      color: #425a51;
      letter-spacing: 0;
      line-height: 1.2;
    }

    .saved-login-group-count {
      flex-shrink: 0;
      border-radius: 999px;
      padding: 4px 8px;
      background: rgba(255, 255, 255, 0.72);
      color: #61766d;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      box-shadow: inset 0 0 0 1px rgba(214, 226, 220, 0.78);
    }

    .saved-login-group-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      align-content: start;
      min-width: 0;
    }

    .saved-login-item {
      width: 100%;
      min-width: 0;
      border: 1px solid rgba(205, 222, 215, 0.92);
      background: rgba(255, 255, 255, 0.94);
      border-radius: 10px;
      padding: 10px 11px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px;
      text-align: left;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
      transition: background-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    .saved-login-item:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .saved-login-item:hover {
      border-color: rgba(137, 190, 171, 0.98);
      background: #ffffff;
      transform: translateY(-1px);
      box-shadow: 0 10px 18px rgba(18, 56, 43, 0.08);
    }

    .saved-login-item-main {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .saved-login-item-name {
      font-size: 13px;
      font-weight: 800;
      color: #203d34;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.2;
    }

    .saved-login-item-meta {
      color: #748a81;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .saved-login-item-role {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 34px;
      min-height: 24px;
      padding: 4px 8px;
      border-radius: 999px;
      background: #edf6f2;
      color: #2b6d5d;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
    }

    .saved-login-item-role.boss {
      background: var(--role-boss-bg);
      color: var(--role-boss-accent);
    }

    .saved-login-item-role.dispatcher {
      background: var(--role-dispatcher-bg);
      color: var(--role-dispatcher-accent);
    }

    .saved-login-item-role.accountant {
      background: var(--role-accountant-bg);
      color: var(--role-accountant-accent);
    }

    @media (max-width: 900px) {
      .login-workbench {
        grid-template-columns: 1fr;
        min-height: auto;
      }

      .login-brief {
        order: 2;
        padding: 24px 22px;
        gap: 20px;
        background: linear-gradient(160deg, rgba(11, 94, 77, 0.96), rgba(18, 120, 98, 0.92));
      }

      .login-card {
        order: 1;
      }

      .login-brief::after {
        display: none;
      }

      .login-brief-title {
        max-width: 21em;
        color: #f8fffc;
        font-size: 22px;
      }

      .login-role-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .login-role-card {
        gap: 6px;
        padding: 12px;
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(238, 249, 245, 0.22);
        color: #f4fbf8;
        box-shadow: none;
      }

      .login-role-card strong,
      .login-role-card span:last-child {
        color: #f7fffb;
      }

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

      .saved-login-group-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-left: 8px;
      }

      .saved-login-group-list {
        grid-template-columns: 1fr;
      }

      body.quick-login-debug .login-workbench {
        grid-template-columns: 1fr;
      }

      body.quick-login-debug .saved-login-list {
        grid-template-columns: 1fr;
        height: min(58dvh, 620px);
        max-height: min(58dvh, 620px);
      }

      .dev-todo-launcher {
        top: 10px;
        left: 10px;
      }

    }

    @media (max-width: 520px) {
      .login-shell {
        padding: 14px;
        place-items: start center;
      }

      .login-workbench {
        border-radius: 18px;
      }

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

      .login-brand-mark {
        width: 46px;
        height: 46px;
        border-radius: 14px;
        font-size: 22px;
      }

      .login-brand-kicker {
        font-size: 10px;
        line-height: 1.25;
      }

      .login-brand h1 {
        font-size: 25px;
      }

      .login-brief-title {
        font-size: 20px;
        line-height: 1.22;
      }

      .login-role-card span:last-child {
        font-size: 11px;
      }

      .login-card {
        padding: 22px 18px;
      }

      .login-card-head {
        align-items: flex-start;
      }

      .login-card-title {
        font-size: 23px;
      }

      .saved-login-list {
        max-height: 230px;
      }

      body.quick-login-debug .saved-login-list {
        height: min(56dvh, 560px);
        max-height: min(56dvh, 560px);
      }
    }

    .dev-todo-launcher {
      position: fixed;
      top: 14px;
      left: 14px;
      z-index: 18;
      min-width: 72px;
      min-height: 42px;
      border-radius: 999px;
      border: 1px solid rgba(207, 223, 216, 0.92);
      background: rgba(248, 252, 250, 0.92);
      color: #24483d;
      box-shadow: 0 12px 28px rgba(16, 54, 43, 0.12);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    body.login-mode .dev-todo-launcher {
      display: none;
    }

    .dev-todo-launcher:hover {
      background: rgba(255, 255, 255, 0.96);
      color: #155845;
      box-shadow: 0 16px 30px rgba(14, 53, 42, 0.16);
      transform: translateY(-1px);
    }

    .container {
      --app-side-width: clamp(220px, 20vw, 260px);
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 8px 10px;
      display: grid;
      gap: 0;
      grid-template-columns: minmax(0, var(--app-side-width)) 18px minmax(0, 1fr);
      align-items: stretch;
      height: 100dvh;
      overflow: hidden;
      transition: grid-template-columns 0.24s ease, padding 0.24s ease;
    }

    #appPage.sidebar-collapsed {
      --app-side-width: 0px;
    }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      padding: 18px;
    }

    h1 {
      margin: 0;
      font-size: 26px;
      letter-spacing: 0.5px;
    }

    .row {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 12px;
    }

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

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

    #recordForm {
      --record-label-width: 74px;
      width: 100%;
      min-height: 0;
      overflow-y: auto;
      overflow-x: visible;
      padding: 0 2px 18px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: start;
      grid-template-areas:
        "date dispatcher"
        "details details"
        "meta meta"
        "prices prices"
        "summary summary"
        "note note"
        "actions actions";
    }

    #recordForm .field-date {
      grid-area: date;
      grid-column: 1;
      grid-row: 1;
    }

    #recordForm .field-dispatcher {
      grid-area: dispatcher;
      grid-column: 2;
      grid-row: 1;
      align-self: start;
    }

    #recordForm .field-detail-row {
      grid-area: details;
      grid-column: 1 / -1;
      grid-row: 2;
    }

    #recordForm .field-meta-row {
      grid-area: meta;
      grid-column: 1 / -1;
      grid-row: 3;
    }

    body.dispatcher-self-view #recordForm .field-dispatcher {
      display: none;
    }

    body.dispatcher-self-view #recordForm {
      grid-template-areas:
        "date date"
        "details details"
        "meta meta"
        "prices prices"
        "summary summary"
        "note note"
        "actions actions";
    }

    body.boss-view #recordForm {
      grid-template-areas:
        "date date"
        "dispatcher dispatcher"
        "details details"
        "meta meta"
        "prices prices"
        "summary summary"
        "note note"
        "actions actions";
    }

    body.boss-view #recordForm .field-date,
    body.boss-view #recordForm .field-dispatcher,
    body.boss-view #recordForm .field-detail-row,
    body.boss-view #recordForm .field-meta-row,
    body.boss-view #recordForm .field-price-row,
    body.boss-view #recordForm .field-summary,
    body.boss-view #recordForm .form-actions {
      grid-column: 1 / -1;
    }

    body.boss-view #recordForm .field-date {
      grid-row: 1;
    }

    body.boss-view #recordForm .field-dispatcher {
      grid-row: 2;
      grid-area: dispatcher;
      align-items: start;
      margin-bottom: 10px;
    }

    body.boss-view #recordForm .field-detail-row {
      grid-row: 3;
    }

    body.boss-view #recordForm .field-meta-row {
      grid-row: 4;
    }

    body.boss-view #recordForm .field-price-row {
      grid-row: 5;
    }

    body.boss-view #recordForm .field-summary {
      grid-row: 6;
    }

    body.boss-view #recordForm .field-note {
      grid-row: 7;
    }

    body.boss-view #recordForm .form-actions {
      grid-row: 8;
    }

    body.dispatcher-self-view #recordForm .field-date,
    body.dispatcher-self-view #recordForm .field-detail-row,
    body.dispatcher-self-view #recordForm .field-meta-row,
    body.dispatcher-self-view #recordForm .field-price-row,
    body.dispatcher-self-view #recordForm .field-summary,
    body.dispatcher-self-view #recordForm .form-actions {
      grid-column: 1 / -1;
    }

    #recordForm .field-summary {
      grid-area: summary;
      grid-column: 1 / -1;
      grid-row: 5;
    }

    #recordForm .field-note {
      grid-area: note;
      grid-column: 1 / -1;
      grid-row: 6;
    }

    #recordForm .field-date,
    #recordForm .field-dispatcher,
    #recordForm .field-detail-row,
    #recordForm .field-meta-row,
    #recordForm .field-summary,
    #recordForm .field-price-row {
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    #recordForm .field-date,
    #recordForm .field-dispatcher,
    #recordForm .field-note,
    #recordForm .field-summary {
      display: grid;
      grid-template-columns: var(--record-label-width) minmax(0, 1fr);
      column-gap: 14px;
      row-gap: 8px;
      align-items: center;
    }

    #recordForm .field-price-row {
      grid-area: prices;
      grid-column: 1 / -1;
      grid-row: 4;
      display: grid;
      grid-template-columns: repeat(3, var(--record-label-width) minmax(0, 1fr));
      column-gap: 14px;
      row-gap: 12px;
      align-items: start;
    }

    #recordForm .field-detail-row,
    #recordForm .field-meta-row {
      display: grid;
      grid-template-columns: repeat(3, var(--record-label-width) minmax(0, 1fr));
      column-gap: 14px;
      row-gap: 12px;
      align-items: start;
    }

    #recordForm .detail-item:nth-child(1),
    #recordForm .meta-item:nth-child(1),
    #recordForm .price-item:nth-child(1) {
      grid-column: 1 / 3;
    }

    #recordForm .detail-item:nth-child(2),
    #recordForm .meta-item:nth-child(2),
    #recordForm .price-item:nth-child(2) {
      grid-column: 3 / 5;
    }

    #recordForm .detail-item:nth-child(3),
    #recordForm .price-item:nth-child(3) {
      grid-column: 5 / 7;
    }

    #recordForm .detail-item,
    #recordForm .meta-item,
    #recordForm .price-item {
      display: grid;
      grid-template-columns: subgrid;
      column-gap: 14px;
      row-gap: 8px;
      align-items: center;
      min-width: 0;
    }

    #recordForm .meta-item-wide {
      grid-column: 1 / 5;
    }

    #recordForm .field-meta-row .meta-item-wide {
      grid-column: 1 / 5;
    }

    #recordForm .field-meta-row .meta-item:not(.meta-item-wide) {
      grid-column: 5 / 7;
    }

    #recordForm .field-date > label,
    #recordForm .field-dispatcher > label,
    #recordForm .field-note > label,
    #recordForm .field-summary > label,
    #recordForm .detail-item > label,
    #recordForm .meta-item > label,
    #recordForm .price-item > label {
      margin: 0;
      color: #577067;
      font-size: 13px;
      font-weight: 700;
      text-align: right;
    }

    #recordForm .field-date > :is(input:not([type="hidden"]), textarea, select, .tag-group, .accountant-picker),
    #recordForm .field-dispatcher > :is(input:not([type="hidden"]), textarea, select, .tag-group, .accountant-picker),
    #recordForm .field-note > :is(input:not([type="hidden"]), textarea, select, .tag-group, .accountant-picker),
    #recordForm .field-summary > :is(input:not([type="hidden"]), textarea, select, .tag-group, .accountant-picker),
    #recordForm .detail-item > :is(input, .accountant-picker),
    #recordForm .meta-item > :is(input, .accountant-picker),
    #recordForm .price-item > input {
      grid-column: 2;
      min-width: 0;
    }

    #recordForm .meta-item-wide > .accountant-picker {
      grid-column: 2 / -1;
      min-width: 0;
    }

    #recordForm .field-date > .date-field-controls {
      grid-column: 2;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    #recordForm .field-date > input:not([type="hidden"]),
    #recordForm .field-note > input:not([type="hidden"]),
    #recordForm .field-summary > textarea,
    #recordForm .detail-item > input,
    #recordForm .meta-item > input,
    #recordForm .price-item > input {
      min-height: 50px;
      border-color: #d9e7e0;
      background: #fff;
      border-radius: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(22, 74, 58, 0.04);
    }

    #recordForm .field-date > .date-field-controls > input:not([type="hidden"]) {
      min-width: 0;
      flex: 1 1 220px;
      min-height: 50px;
      border-color: #d9e7e0;
      background: #fff;
      border-radius: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(22, 74, 58, 0.04);
    }

    #recordForm .field-date > input:not([type="hidden"]):focus,
    #recordForm .field-note > input:not([type="hidden"]):focus,
    #recordForm .field-summary > textarea:focus,
    #recordForm .detail-item > input:focus,
    #recordForm .meta-item > input:focus,
    #recordForm .price-item > input:focus {
      border-color: #7cbca9;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.12);
    }

    #recordForm .field-date > .date-field-controls > input:not([type="hidden"]):focus {
      border-color: #7cbca9;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.12);
    }

    #recordForm .price-item > input[readonly] {
      color: #496a5f;
      background: #eef5f1;
      cursor: default;
    }

    #recordForm .checkbox-toggle-inline {
      min-height: 50px;
      padding: 0 14px;
      border: 1px solid #d9e7e0;
      border-radius: 14px;
      background: #ffffff;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #33594d;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(22, 74, 58, 0.04);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    #recordForm .checkbox-toggle-inline input {
      margin: 0;
      width: 16px;
      height: 16px;
      accent-color: #1f9f86;
      flex: 0 0 auto;
    }

    #recordForm .checkbox-toggle-inline:has(input:checked) {
      border-color: #7cbca9;
      background: #edf8f4;
      color: #184536;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.1);
    }

    #recordForm .reminder-date-wrapper {
      display: grid;
      grid-template-columns: minmax(188px, 1fr) 84px auto auto minmax(150px, 1fr);
      align-items: center;
      gap: 8px;
      flex: 1 1 560px;
      min-height: 50px;
      padding: 0 14px;
      border: 1px solid #d9e7e0;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(22, 74, 58, 0.04);
    }

    #recordForm .monthly-settlement-control {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      min-width: 0;
    }

    #recordForm .monthly-settlement-control[hidden] {
      display: none;
    }

    #recordForm .reminder-date-wrapper .monthly-settlement-renewal-toggle {
      min-height: 36px;
      padding: 0 10px;
      border-radius: 10px;
    }

    #recordForm .reminder-date-label {
      font-size: 13px;
      font-weight: 700;
      color: #33594d;
      white-space: nowrap;
      margin: 0;
    }

    #recordForm .reminder-date-wrapper input[type="date"],
    #recordForm .reminder-date-wrapper input[type="number"] {
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      min-height: 36px;
      padding: 0 8px;
      border: 1px solid #d9e7e0;
      border-radius: 10px;
      background: #fff;
      font-size: 13px;
      color: #184536;
    }

    #recordForm .reminder-date-wrapper input[type="number"] {
      width: 100%;
    }

    #recordForm .monthly-settlement-control:has(#monthlySettlementMonthCount) {
      grid-template-columns: auto 46px;
    }

    #recordForm .monthly-settlement-control:has(#monthlySettlementMonthCount) input {
      flex: 0 0 46px;
      width: 46px;
      text-align: center;
    }

    #recordForm .reminder-date-wrapper input[readonly] {
      color: #496a5f;
      background: #eef5f1;
      cursor: default;
    }

    #recordForm .reminder-date-wrapper input[type="date"]:focus,
    #recordForm .reminder-date-wrapper input[type="number"]:focus {
      outline: none;
      border-color: #7cbca9;
      background: #fff;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.12);
    }

    #recordForm .field-summary {
      align-items: start;
    }

    #recordForm .field-summary > label {
      padding-top: 14px;
    }

    #recordForm .field-summary > textarea {
      grid-column: 2;
    }

    #recordForm .field-note > input:not([type="hidden"]) {
      grid-column: 2;
      width: 100%;
    }

    #recordForm .accountant-picker {
      position: relative;
      width: 100%;
    }

    #recordForm .accountant-picker-trigger {
      width: 100%;
      min-height: 50px;
      border: 1px solid #d9e7e0;
      border-radius: 14px;
      background: #ffffff;
      padding: 12px 88px 12px 16px;
      color: #1f4639;
      font-weight: 700;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      text-align: left;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(22, 74, 58, 0.04);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
      position: relative;
      cursor: pointer;
    }

    #recordForm .accountant-picker-trigger::after {
      content: "";
      position: absolute;
      right: 14px;
      top: 50%;
      width: 8px;
      height: 8px;
      border-right: 2px solid #247964;
      border-bottom: 2px solid #247964;
      transform: translateY(-62%) rotate(45deg);
      transition: transform 0.18s ease, border-color 0.18s ease;
    }

    #recordForm .accountant-picker.open .accountant-picker-trigger::after {
      transform: translateY(-38%) rotate(225deg);
      border-color: #0f826b;
    }

    #recordForm .accountant-picker-trigger:hover {
      border-color: #86c2ae;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.1);
    }

    #recordForm .accountant-picker.open .accountant-picker-trigger,
    #recordForm .accountant-picker-trigger:focus-visible {
      border-color: #0f826b;
      box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.18);
      transform: translateY(-1px);
      outline: none;
    }

    #recordForm .accountant-picker.non-settlement-selected .accountant-picker-trigger {
      border-color: oklch(70% 0.14 75);
      background: oklch(97% 0.026 82);
      color: oklch(31% 0.07 72);
      box-shadow: 0 0 0 3px oklch(85% 0.08 78 / 0.28), var(--inset-highlight);
    }

    #recordForm .accountant-picker-trigger:disabled {
      border-color: #d1dfd9;
      background: #f4f8f6;
      color: #799086;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    #recordForm .accountant-picker-value {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }

    #recordForm .accountant-picker-value.placeholder {
      color: #789186;
      font-weight: 600;
    }

    #recordForm .accountant-picker-meta {
      position: absolute;
      right: 34px;
      top: 50%;
      transform: translateY(-50%);
      border-radius: 999px;
      border: 1px solid #c4dfd4;
      background: #eaf6f1;
      color: #2a6a58;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      padding: 2px 7px;
      letter-spacing: 0.2px;
      pointer-events: none;
    }

    #recordForm .accountant-picker.locked .accountant-picker-meta {
      border-color: #dfd6b5;
      background: #f9f3df;
      color: #8a651e;
    }

    #recordForm .accountant-picker.disabled .accountant-picker-meta {
      border-color: #d4deda;
      background: #f0f5f2;
      color: #7f9389;
    }

    #recordForm .accountant-picker-dropdown {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      max-height: min(64vh, 560px);
      border-radius: 12px;
      border: 1px solid #cfe2d8;
      background: #ffffff;
      box-shadow: 0 16px 30px rgba(16, 56, 44, 0.2);
      padding: 10px;
      z-index: 12;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 8px;
    }

    #recordForm #accountantPicker .accountant-picker-dropdown {
      right: auto;
      width: min(max(100%, 396px), calc(100vw - 72px));
      max-height: min(68vh, 620px);
    }

    #recordForm #platformShopPicker .accountant-picker-dropdown {
      width: min(max(100%, 860px), calc(100vw - 72px));
      max-height: min(78vh, 720px);
      padding: 9px;
      grid-template-rows: minmax(0, 1fr);
    }

    #recordForm .accountant-picker-search {
      width: 100%;
      border: 1px solid #d3e3dc;
      border-radius: 9px;
      background: #f7fbf9;
      padding: 8px 10px;
      font-size: 13px;
      color: #27493f;
    }

    #recordForm .accountant-picker-search:focus {
      border-color: #8ec9b5;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.12);
      background: #ffffff;
    }

    #recordForm .accountant-picker-list {
      max-height: min(54vh, 500px);
      overflow: auto;
      display: grid;
      gap: 6px;
      padding-right: 2px;
    }

    #recordForm #accountantPicker .accountant-picker-list {
      height: min(46vh, 420px);
    }

    #recordForm #platformShopPicker .accountant-picker-list {
      max-height: none;
      overflow: visible;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
      gap: 8px;
    }

    #recordForm .platform-shop-picker-group {
      display: grid;
      gap: 6px;
      min-width: 0;
      padding: 7px;
      border: 1px solid var(--platform-shop-group-border, #d6e8df);
      border-radius: 9px;
      background: var(--platform-shop-group-bg, #f7fbf9);
      box-shadow: inset 0 2px 0 var(--platform-shop-group-accent, #2b947c);
    }

    #recordForm .platform-shop-picker-group-title {
      color: var(--platform-shop-group-title, #21594b);
      font-size: 12px;
      font-weight: 900;
      line-height: 1.2;
    }

    #recordForm .platform-shop-picker-group[data-group="闲鱼"] {
      --platform-shop-group-accent: #149073;
      --platform-shop-group-border: #b9ded2;
      --platform-shop-group-bg: #f0faf6;
      --platform-shop-group-title: #0d6b58;
    }

    #recordForm .platform-shop-picker-group[data-group="淘宝"] {
      --platform-shop-group-accent: #d06a28;
      --platform-shop-group-border: #f0c5a5;
      --platform-shop-group-bg: #fff7ef;
      --platform-shop-group-title: #9a4a17;
    }

    #recordForm .platform-shop-picker-group[data-group="拼多多"] {
      --platform-shop-group-accent: #c83f45;
      --platform-shop-group-border: #efbfc3;
      --platform-shop-group-bg: #fff3f4;
      --platform-shop-group-title: #9b242b;
    }

    #recordForm .platform-shop-picker-group[data-group="中信银行"] {
      --platform-shop-group-accent: #b38b2e;
      --platform-shop-group-border: #e6d2a6;
      --platform-shop-group-bg: #fffaf0;
      --platform-shop-group-title: #7a5c17;
    }

    #recordForm .platform-shop-picker-group[data-group="企业微信"] {
      --platform-shop-group-accent: #2f75bd;
      --platform-shop-group-border: #bfd6ef;
      --platform-shop-group-bg: #f2f7fd;
      --platform-shop-group-title: #245b93;
    }

    #recordForm .platform-shop-picker-group[data-group="其他"] {
      --platform-shop-group-accent: #7b6bb8;
      --platform-shop-group-border: #d5cdef;
      --platform-shop-group-bg: #f7f4fd;
      --platform-shop-group-title: #5b4b94;
    }

    #recordForm .platform-shop-picker-group-options {
      display: grid;
      gap: 4px;
    }

    @media (max-width: 560px) {
      #recordForm #platformShopPicker .accountant-picker-dropdown {
        width: min(max(100%, 560px), calc(100vw - 28px));
      }

      #recordForm #platformShopPicker .accountant-picker-list {
        grid-template-columns: 1fr;
      }
    }

    #recordForm .accountant-picker-option {
      width: 100%;
      border: 1px solid #d3e3dc;
      border-radius: 9px;
      background: #f8fcfa;
      color: #2a4b41;
      text-align: left;
      min-height: 32px;
      padding: 5px 9px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

    #recordForm .accountant-picker-option > :first-child {
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1.4;
      overflow-wrap: anywhere;
    }

    #recordForm .accountant-picker-option:hover,
    #recordForm .accountant-picker-option:focus-visible {
      border-color: #8fc8b6;
      background: #edf8f3;
      color: #1d5f4f;
      outline: none;
    }

    #recordForm .accountant-picker-option.selected {
      border-color: #1a8f75;
      background: #dcf5eb;
      color: #0d6855;
      font-weight: 700;
    }

    #recordForm .accountant-picker-option.non-settlement {
      border-color: oklch(78% 0.095 78);
      background: oklch(97.5% 0.024 84);
      color: oklch(33% 0.07 72);
    }

    #recordForm .accountant-picker-option.non-settlement:hover,
    #recordForm .accountant-picker-option.non-settlement:focus-visible {
      border-color: oklch(68% 0.14 76);
      background: oklch(94.5% 0.044 84);
      color: oklch(28% 0.078 72);
    }

    #recordForm .accountant-picker-option.non-settlement.selected {
      border-color: oklch(61% 0.15 76);
      background: oklch(92% 0.058 84);
      color: oklch(26% 0.08 72);
    }

    #recordForm .accountant-picker-option-meta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }

    #recordForm .accountant-picker-option-count {
      border-radius: 999px;
      border: 1px solid #c4ddd3;
      background: #f1f9f5;
      color: #2f6e5d;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      padding: 2px 7px;
      flex: 0 0 auto;
    }

    #recordForm .accountant-picker-option.selected .accountant-picker-option-count {
      border-color: #9dd4c3;
      background: #e5f8ef;
      color: #0f6e58;
    }

    #recordForm .accountant-picker-option-badge {
      border-radius: 999px;
      border: 1px solid #b9ddd0;
      background: #ecf8f3;
      color: #2a6a58;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      padding: 2px 7px;
      flex: 0 0 auto;
    }

    #recordForm .accountant-picker-option-badge.non-settlement-badge {
      border-color: oklch(76% 0.11 78);
      background: oklch(91% 0.055 84);
      color: oklch(31% 0.075 72);
    }

    #recordForm .accountant-picker-empty {
      border-radius: 9px;
      border: 1px dashed #caded5;
      background: #f6fbf8;
      color: #6f857b;
      font-size: 13px;
      padding: 12px 10px;
      text-align: center;
    }

    #recordForm .field-dispatcher .tag-group {
      min-height: 50px;
      gap: 10px;
      align-content: center;
      padding: 2px 0 4px;
    }

    body.boss-view #recordForm .field-dispatcher > label {
      padding-top: 14px;
    }

    body.boss-view #recordForm .field-dispatcher .tag-group {
      min-height: 42px;
      align-content: start;
      row-gap: 10px;
      padding: 0 0 2px;
    }

    #recordForm .field-dispatcher .tag-btn {
      min-width: 42px;
      min-height: 42px;
      padding: 0 14px;
    }

    #recordForm .tag-btn {
      border-color: #d7e6df;
      background: #eef6f2;
      color: #365147;
    }

    #recordForm .tag-btn.active {
      border-color: #0b7a63;
      background: linear-gradient(135deg, #0e7c66, #1a9a7f);
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(14, 124, 102, 0.22), 0 6px 14px rgba(12, 86, 69, 0.25);
      transform: translateY(-1px);
    }

    #recordForm .field.field-summary textarea {
      min-height: 164px;
      line-height: 1.55;
    }

    #recordForm .price-hint {
      grid-column: 2;
      min-height: 20px;
      color: #0e7c66;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    #recordForm .price-hint.negative {
      color: #c2512d;
    }

    #recordForm .field-validation-group-error > .field-inline-error,
    #recordForm .detail-item.field-validation-group-error > .field-inline-error,
    #recordForm .meta-item.field-validation-group-error > .field-inline-error,
    #recordForm .price-item.field-validation-group-error > .field-inline-error {
      grid-column: 2;
    }

    .invoice-upload-form .field-validation-group-error > .field-inline-error {
      margin-top: 2px;
    }

    #recordForm .accountant-picker.field-validation-group-error > .field-inline-error {
      margin-top: 10px;
    }

    #recordForm .form-actions {
      grid-area: actions;
      grid-column: 1 / -1;
      grid-row: 7;
      position: sticky;
      bottom: 0;
      z-index: 8;
      display: flex;
      gap: 12px;
      margin: 0 -2px;
      padding: 14px 2px 0;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--surface) 36%);
    }

    #recordForm .form-actions .btn-danger,
    #recordForm .form-actions .btn-primary {
      min-width: 160px;
      border-radius: 14px;
      padding: 12px 20px;
    }

    .return-order-modal-card {
      width: min(480px, 92vw);
      display: grid;
      gap: 14px;
    }

    .return-order-modal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .return-order-title {
      margin: 0;
      font-size: 22px;
      color: #28463d;
    }

    .return-order-form {
      display: grid;
      gap: 14px;
    }

    .return-order-form textarea {
      min-height: 116px;
      resize: vertical;
    }

    .return-order-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .return-order-actions .btn-secondary,
    .return-order-actions .btn-danger {
      min-width: 120px;
      border-radius: 14px;
      padding: 11px 18px;
    }

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

    label {
      font-size: 13px;
      color: var(--muted);
    }

    input,
    textarea,
    select,
    button {
      font: inherit;
    }

    input,
    textarea,
    select {
      width: 100%;
      border: 1px solid var(--line);
      background: var(--surface-2);
      border-radius: var(--radius-md);
      padding: 10px 12px;
      color: var(--text);
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    }

    input:focus,
    textarea:focus,
    select:focus {
      border-color: var(--primary-2);
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.16);
    }

    input[readonly] {
      background: #eef6f2;
      color: #375048;
    }

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

    button {
      border: 0;
      border-radius: var(--radius-md);
      padding: 10px 14px;
      cursor: pointer;
      font-weight: 600;
      transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    button:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.22);
    }

    .btn-primary {
      background: linear-gradient(120deg, var(--primary), var(--primary-2));
      color: #fff;
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(14, 124, 102, 0.25);
    }

    .btn-secondary {
      background: #ecf2ef;
      color: #334840;
    }

    .btn-secondary:hover {
      transform: translateY(-1px);
    }

    .btn-danger {
      background: #fceaea;
      color: var(--danger);
    }

    .btn-danger:hover {
      transform: translateY(-1px);
    }

    .app-side {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      padding: 4px 10px 4px 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      transition: opacity 0.22s ease, padding 0.22s ease, transform 0.22s ease;
    }

    #appPage.sidebar-collapsed .app-side {
      opacity: 1;
      pointer-events: auto;
      padding: 0;
      transform: translateX(-8px);
    }

    .app-side-title {
      margin: 0;
      font-size: 16px;
      letter-spacing: 0.2px;
    }

    .app-side-actions {
      display: grid;
      gap: 8px;
    }

    .app-side-actions button {
      width: 100%;
      justify-content: center;
      min-height: 44px;
      border-radius: 12px;
    }

    .table-invoice-recipient-btn {
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 12px;
      min-height: 44px;
      border: 1px solid #9dc9bc;
      border-radius: 12px;
      background: linear-gradient(180deg, #f8fffb 0%, #e8f5ef 100%);
      color: #135c4b;
      font-size: 14px;
      font-weight: 800;
      box-shadow: var(--inset-highlight), 0 8px 18px rgba(18, 90, 72, 0.12);
    }

    .table-invoice-recipient-btn.needs-info {
      border-color: #f0b84e;
      background: linear-gradient(180deg, #fff9e8 0%, #ffe7a6 100%);
      color: #7a3f00;
      box-shadow: var(--inset-highlight), 0 12px 26px rgba(166, 91, 0, 0.2);
    }

    .table-invoice-recipient-btn:hover {
      border-color: #2f9d83;
      background: linear-gradient(180deg, #f4fcf8 0%, #dff1e9 100%);
      color: #0d5c49;
      box-shadow: var(--inset-highlight), 0 12px 24px rgba(18, 90, 72, 0.16);
      transform: translateY(-1px);
    }

    .table-invoice-recipient-btn.needs-info:hover {
      border-color: #d98b00;
      background: linear-gradient(180deg, #fff4cf 0%, #ffd979 100%);
      color: #663200;
      box-shadow: var(--inset-highlight), 0 14px 30px rgba(166, 91, 0, 0.25);
    }

    .table-invoice-recipient-btn:active {
      transform: translateY(0);
      box-shadow: var(--inset-highlight), 0 5px 12px rgba(18, 90, 72, 0.12);
    }

    .order-flow-guide {
      display: none;
      gap: 12px;
      padding: 13px 12px;
      border: 1px solid #d8e5df;
      border-radius: 12px;
      background: #f8fbf9;
      box-shadow: var(--inset-highlight), 0 8px 18px rgba(18, 60, 47, 0.05);
    }

    #appPage.accountant-view .order-flow-guide {
      display: grid;
    }

    .order-flow-guide-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }

    .order-flow-guide-head strong {
      color: #253f37;
      font-size: 13px;
      font-weight: 900;
      line-height: 1.2;
    }

    .order-flow-guide-head span {
      color: #71867d;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
    }

    .order-flow-steps {
      list-style: none;
      display: grid;
      gap: 8px;
      margin: 0;
      padding: 0;
      counter-reset: order-flow-step;
    }

    .order-flow-step {
      --flow-accent: #7d9289;
      --flow-bg: #f1f6f3;
      position: relative;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 0 10px;
      align-items: start;
      min-width: 0;
      padding: 10px 10px;
      border: 1px solid #dce9e3;
      border-radius: 8px;
      background: var(--flow-bg);
      counter-increment: order-flow-step;
    }

    .order-flow-step::before {
      content: counter(order-flow-step);
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--flow-accent);
      color: #fbfdfc;
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    .order-flow-step.accountant {
      --flow-accent: #587fc0;
      --flow-bg: #f3f7ff;
      border-color: #d8e2f2;
    }

    .order-flow-step.boss {
      --flow-accent: #a8791b;
      --flow-bg: #fbf6e8;
      border-color: #eadfbd;
    }

    .order-flow-step.done {
      --flow-accent: #238363;
      --flow-bg: #f0f8f4;
      border-color: #cfe5d9;
    }

    .order-flow-status {
      min-width: 0;
      color: #253f37;
      font-size: 12px;
      font-weight: 850;
      line-height: 1.28;
    }

    .order-flow-note-item {
      justify-self: stretch;
      grid-column: 2;
      margin-top: 8px;
      padding: 8px 9px;
      border: 1px solid color-mix(in srgb, var(--arrow-line) 42%, #ffffff 58%);
      border-radius: 7px;
      background: color-mix(in srgb, var(--arrow-bg) 34%, #fbfdfc 66%);
      color: #52656b;
      font-size: 11px;
      line-height: 1.5;
      font-weight: 650;
      letter-spacing: 0;
      box-shadow: 0 1px 0 rgba(36, 65, 72, 0.03);
    }

    .order-flow-arrow {
      --arrow-accent: #238363;
      --arrow-bg: #f0f8f4;
      --arrow-line: #89c5ad;
      position: relative;
      display: grid;
      grid-template-columns: 18px minmax(0, 1fr);
      gap: 0 10px;
      align-items: center;
      min-width: 0;
      min-height: 26px;
      padding: 1px 10px;
    }

    .order-flow-arrow.with-note {
      align-items: start;
      min-height: 108px;
      padding-block: 1px 8px;
    }

    .order-flow-arrow::before {
      content: "";
      justify-self: center;
      width: 1px;
      height: 26px;
      background: var(--arrow-line);
    }

    .order-flow-arrow.with-note::before {
      grid-row: 1 / span 2;
      height: 100px;
    }

    .order-flow-arrow::after {
      content: "";
      position: absolute;
      left: 16px;
      bottom: 3px;
      width: 5px;
      height: 5px;
      border-right: 1.5px solid var(--arrow-line);
      border-bottom: 1.5px solid var(--arrow-line);
      transform: rotate(45deg);
    }

    .order-flow-arrow.accountant {
      --arrow-accent: #587fc0;
      --arrow-bg: #edf4ff;
      --arrow-line: #8aa7d9;
    }

    .order-flow-arrow.boss {
      --arrow-accent: #a8791b;
      --arrow-bg: #fbf1d8;
      --arrow-line: #d5ad57;
    }

    .order-flow-arrow span {
      justify-self: start;
      min-width: 0;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--arrow-bg);
      color: var(--arrow-accent);
      font-size: 11px;
      font-weight: 850;
      line-height: 1.15;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arrow-line) 64%, #ffffff 36%);
    }

    .app-side-notice {
      position: relative;
      z-index: 0;
      --notice-pulse-1: rgba(246, 193, 75, 0.98);
      --notice-pulse-2: rgba(240, 137, 92, 0.76);
      --notice-pulse-3: rgba(32, 166, 130, 0.62);
      margin: 2px 0 0;
      padding: 11px 12px;
      border: 2px solid rgba(246, 193, 75, 0.88);
      border-radius: 10px;
      background: #fff8e8;
      color: #775114;
      font-size: 12px;
      line-height: 1.55;
      box-shadow: 0 8px 18px rgba(126, 83, 18, 0.1);
    }

    .app-side-notice::before {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border: 3px solid var(--notice-pulse-1);
      border-radius: 15px;
      opacity: 0.95;
      transform-origin: center;
      filter: drop-shadow(0 0 8px rgba(246, 193, 75, 0.34));
      animation: app-side-notice-border-breathe 1s ease-out infinite;
      pointer-events: none;
    }

    .app-side-notice::after {
      content: "";
      position: absolute;
      inset: -3px;
      z-index: -1;
      border: 3px solid var(--notice-pulse-2);
      border-radius: 15px;
      opacity: 0;
      transform-origin: center;
      filter: drop-shadow(0 0 8px rgba(240, 137, 92, 0.28));
      animation: app-side-notice-border-breathe 1s ease-out infinite 0.32s;
      pointer-events: none;
    }

    @keyframes app-side-notice-border-breathe {
      0% {
        transform: scale(1);
        opacity: 0.98;
      }

      45% {
        transform: scale(1.14);
        opacity: 0.5;
      }

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

    .sidebar-divider {
      position: relative;
      align-self: stretch;
      width: 18px;
      min-width: 18px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #4c665c;
    }

    .sidebar-divider::before {
      content: "";
      position: absolute;
      top: 2px;
      bottom: 2px;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, rgba(200, 218, 211, 0), #cadad3 10%, #cadad3 90%, rgba(200, 218, 211, 0));
    }

    .sidebar-toggle-icon {
      position: relative;
      z-index: 1;
      width: 16px;
      height: 46px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 0 0 1px #d6e4de, 0 10px 20px rgba(18, 60, 47, 0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }

    .sidebar-divider:hover .sidebar-toggle-icon {
      background: #f5faf7;
      color: #0d725e;
      box-shadow: 0 0 0 1px #c9dbd3, 0 12px 24px rgba(18, 60, 47, 0.12);
    }

    .app-side-footer {
      display: grid;
      gap: 8px;
      margin-top: auto;
      padding-top: 12px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }

    .account-action-row {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .account-panel {
      min-width: 0;
      border-radius: var(--radius-lg);
      padding: 12px 14px 13px;
      background:
        linear-gradient(145deg, oklch(98.5% 0.008 160), oklch(95.5% 0.014 160)),
        oklch(96% 0.012 160);
      border: 1px solid oklch(88.5% 0.025 160);
      display: grid;
      gap: 8px;
      box-shadow: var(--inset-highlight), 0 10px 24px rgba(18, 60, 47, 0.07);
    }

    .account-panel-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .account-panel-label {
      font-size: 11px;
      color: oklch(44% 0.04 160);
      letter-spacing: 0.1px;
      font-weight: 800;
      line-height: 1.2;
    }

    .account-role-badge {
      flex: 0 0 auto;
      border-radius: 999px;
      min-height: 24px;
      padding: 5px 10px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1px;
      line-height: 1;
      color: oklch(34% 0.07 160);
      background: oklch(94.5% 0.025 160);
      box-shadow: inset 0 0 0 1px oklch(99% 0.006 160 / 0.7);
    }

    .account-role-badge.dispatcher {
      color: var(--role-dispatcher-accent);
      background: var(--role-dispatcher-bg);
    }

    .account-role-badge.accountant {
      color: var(--role-accountant-accent);
      background: var(--role-accountant-bg);
    }

    .account-role-badge.boss {
      color: var(--role-boss-accent);
      background: var(--role-boss-bg);
    }

    .account-panel-name {
      font-size: 18px;
      font-weight: 800;
      line-height: 1.15;
      color: oklch(25% 0.045 160);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .account-panel-sub {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 5px 10px;
      font-size: 12px;
      color: oklch(43% 0.035 160);
      line-height: 1.35;
      min-height: 0;
      min-width: 0;
    }

    .account-panel-sub:empty {
      display: none;
    }

    .account-panel-meta {
      display: inline-flex;
      align-items: baseline;
      gap: 2px;
      max-width: 100%;
      min-width: 0;
      white-space: nowrap;
    }

    .account-panel-meta-label {
      flex: 0 0 auto;
      color: oklch(49% 0.035 160);
      font-weight: 700;
    }

    .account-panel-meta-value {
      min-width: 0;
      overflow: hidden;
      color: oklch(34% 0.04 160);
      text-overflow: ellipsis;
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    .switch-account-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #ebf2ee;
      color: #2d4a40;
      flex: 1 1 0;
      width: 100%;
      min-width: 0;
      min-height: 46px;
      padding: 0 12px;
      white-space: nowrap;
      flex-wrap: nowrap;
      line-height: 1;
      border-radius: var(--radius-lg);
      font-size: 14px;
      font-weight: 700;
      box-shadow: var(--inset-highlight);
      transition: background-color 0.18s ease, transform 0.18s ease;
    }

    .switch-account-btn span:last-child {
      white-space: nowrap;
      line-height: 1;
    }

    .switch-account-btn:hover {
      background: #e1ece6;
      transform: translateY(-1px);
    }

    .switch-account-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.22), var(--inset-highlight);
    }

    .change-password-btn {
      background: #eef1f9;
      color: #334466;
    }

    .change-password-btn:hover {
      background: #e4e9f5;
    }

    .edit-profile-btn {
      background: #ecf5f0;
      color: #2b5b4a;
    }

    .edit-profile-btn:hover {
      background: #e1efe8;
    }

    .switch-account-icon {
      width: 16px;
      height: 16px;
      flex: 0 0 16px;
      display: block;
    }

    .build-info-panel {
      display: grid;
      gap: 2px;
      padding: 2px 4px 0;
      color: #6e8278;
      font-size: 10px;
      line-height: 1.35;
      letter-spacing: 0.1px;
    }

    .build-info-version-row {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .build-info-line {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .change-log-btn {
      flex: 0 0 auto;
      border: 1px solid #cfe0d8;
      border-radius: 7px;
      background: #f4faf7;
      color: #3c6154;
      padding: 2px 6px;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.2;
      cursor: pointer;
    }

    .change-log-btn:hover {
      border-color: #aacabe;
      background: #eaf4ef;
      color: #174f40;
    }

    .table-wrap {
      position: relative;
      overflow: auto;
      border-radius: var(--radius-md);
      border: 0;
      padding-left: 0;
      flex: 1;
      min-height: 0;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: inset 0 0 0 1px rgba(216, 230, 223, 0.92);
      scrollbar-gutter: auto;
      scrollbar-width: thin;
      scrollbar-color: oklch(72% 0.035 165) transparent;
    }

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

    .table-wrap::-webkit-scrollbar-track {
      background: transparent;
    }

    .table-wrap::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: oklch(72% 0.035 165);
    }



    .table-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      height: 100%;
      padding: 4px 0 0 10px;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }



    .table-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      margin-bottom: 8px;
    }

    .table-card-actions {
      margin-left: auto;
      display: flex;
      align-items: flex-end;
      gap: 10px;
      flex: 0 0 auto;
    }

    .table-card-title {
      margin: 0;
      font-size: 20px;
      line-height: 1.2;
      min-width: 0;
    }

    .accountant-settlement-schedule {
      display: none;
      margin: 0 10px 10px 0;
      padding: 10px 12px 12px;
      border: 1px solid oklch(86% 0.04 92);
      border-radius: 8px;
      background: linear-gradient(180deg, oklch(98.5% 0.014 96) 0%, oklch(97.5% 0.018 96) 100%);
      color: oklch(31% 0.035 78);
      box-shadow: var(--inset-highlight), 0 10px 22px rgba(98, 80, 34, 0.08);
    }

    #appPage.accountant-view .accountant-settlement-schedule {
      display: grid;
      gap: 12px;
      align-items: start;
    }

    #appPage.accountant-view .accountant-settlement-schedule.is-collapsed {
      display: none;
    }

    .accountant-settlement-schedule-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .accountant-settlement-schedule-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .accountant-settlement-schedule-icon {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid oklch(78% 0.06 86);
      background: oklch(93% 0.045 92);
      color: oklch(38% 0.075 78);
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    .accountant-settlement-schedule-head strong {
      font-size: 16px;
      line-height: 1.25;
      color: oklch(27% 0.042 78);
    }

    .accountant-settlement-schedule-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(150px, 1fr));
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .accountant-settlement-schedule-list li {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 8px 9px;
      border: 1px solid oklch(88% 0.026 96);
      border-radius: 7px;
      background: oklch(99% 0.008 96);
      font-size: 13px;
      line-height: 1.45;
    }

    .accountant-settlement-schedule-date {
      font-size: 13px;
      font-weight: 800;
      line-height: 1.25;
      color: oklch(39% 0.065 82);
    }

    .accountant-settlement-schedule-body {
      display: block;
    }

    .settlement-schedule-close-btn {
      flex: 0 0 auto;
      width: 26px;
      height: 26px;
      min-width: 26px;
      margin-left: auto;
      padding: 0;
      border: 1px solid oklch(84% 0.026 92);
      border-radius: 999px;
      background: oklch(98.5% 0.008 96);
      color: oklch(48% 0.035 78);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      line-height: 1;
      font-weight: 800;
      box-shadow: var(--inset-highlight), 0 5px 12px rgba(98, 80, 34, 0.07);
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }

    .settlement-schedule-close-btn:hover {
      border-color: oklch(74% 0.052 82);
      background: oklch(96.5% 0.018 92);
      color: oklch(32% 0.065 72);
      box-shadow: var(--inset-highlight), 0 8px 16px rgba(98, 80, 34, 0.12);
      transform: translateY(-1px);
    }

    .settlement-schedule-close-btn:active {
      transform: translateY(0);
      box-shadow: var(--inset-highlight), 0 4px 10px rgba(98, 80, 34, 0.1);
    }

    .settlement-schedule-close-btn:focus-visible {
      outline: 3px solid oklch(72% 0.09 170 / 0.35);
      outline-offset: 2px;
    }

    .table-invoice-upload-btn {
      min-width: 92px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      border: 1px solid #f1c76d;
      background: linear-gradient(180deg, #fffdf5 0%, #fff7df 100%);
      color: #4c3a14;
      text-align: center;
      line-height: 1.2;
      box-shadow: var(--inset-highlight), 0 8px 18px rgba(99, 64, 8, 0.11);
    }

    .table-invoice-upload-btn:hover {
      background: linear-gradient(180deg, #fffaf0 0%, #fff1c8 100%);
      box-shadow: var(--inset-highlight), 0 12px 24px rgba(99, 64, 8, 0.17);
    }

    .invoice-upload-btn-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
      font-size: 15px;
      font-weight: 800;
      color: #3f2d08;
      white-space: nowrap;
    }

    .invoice-upload-btn-title .loading-spinner {
      width: 13px;
      height: 13px;
    }

    .table-invoice-upload-summary {
      min-width: 224px;
      display: grid;
      gap: 8px;
      padding: 10px 12px;
      border: 1px solid #f1c76d;
      border-radius: var(--radius-md);
      background: linear-gradient(180deg, #fffdf5 0%, #fff7df 100%);
      color: #4c3a14;
      text-align: left;
      line-height: 1.2;
      box-shadow: var(--inset-highlight), 0 8px 18px rgba(99, 64, 8, 0.11);
    }

    .invoice-upload-summary-title {
      display: block;
      text-align: center;
      font-size: 15px;
      font-weight: 800;
      color: #3f2d08;
      white-space: nowrap;
    }

    .invoice-upload-btn-stats {
      display: grid;
      gap: 5px;
      min-width: 0;
      padding-top: 7px;
      border-top: 1px solid rgba(214, 157, 49, 0.35);
    }

    .invoice-upload-btn-stat {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(70px, max-content) minmax(0, 1fr);
      align-items: baseline;
      gap: 12px;
    }

    .invoice-upload-btn-stat-popover-host {
      cursor: help;
      border-radius: 8px;
    }

    .invoice-upload-btn-stat-popover-host:focus-visible {
      outline: 2px solid #86d2b2;
      outline-offset: 2px;
    }

    .invoice-upload-btn-label {
      color: #7c4a00;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .invoice-upload-btn-value {
      min-width: 0;
      color: #4c3a14;
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .invoice-upload-amount-popover {
      position: absolute;
      right: calc(100% + 10px);
      top: -10px;
      z-index: 120;
      display: grid;
      gap: 3px;
      min-width: 308px;
      width: max-content;
      max-width: calc(100vw - 28px);
      padding: 9px 11px;
      border: 1px solid #94d6b7;
      border-radius: 10px;
      background: #effaf5;
      color: #173f34;
      box-shadow: 0 14px 30px rgba(28, 85, 65, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.72);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      text-align: left;
      pointer-events: none;
      opacity: 0;
      transform: translateX(6px);
      transition: opacity 0.12s ease, transform 0.12s ease;
      white-space: nowrap;
    }

    .invoice-upload-btn-stat-popover-host:hover .invoice-upload-amount-popover,
    .invoice-upload-btn-stat-popover-host:focus-visible .invoice-upload-amount-popover {
      opacity: 1;
      transform: translateX(0);
    }

    .invoice-upload-amount-popover-row {
      display: grid;
      grid-template-columns: max-content max-content;
      align-items: baseline;
      column-gap: 4px;
    }

    .invoice-upload-amount-popover-label {
      color: #425c52;
      font-weight: 700;
    }

    .invoice-upload-amount-popover-value {
      color: #173f34;
      font-variant-numeric: tabular-nums;
      text-align: left;
      white-space: nowrap;
    }

    .table-invoice-upload-btn[disabled],
    .table-uploaded-detail-btn[disabled],
    .table-export-btn[disabled],
    .table-settlement-btn[disabled],
    .table-settlement-summary-btn[disabled],
    .table-settlement-detail-btn[disabled] {
      opacity: 0.56;
      cursor: not-allowed;
    }

    .table-uploaded-detail-btn {
      border-color: #b8b1ff;
      background: #f3f1ff;
      color: #4338ca;
      font-weight: 800;
    }

    .table-column-settings {
      position: relative;
      display: inline-flex;
      align-items: center;
      margin-left: 10px;
      vertical-align: middle;
    }

    .table-column-settings-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 28px;
      padding: 4px 10px;
      border: 1px solid #bfd4cb;
      border-radius: 999px;
      background: #eff7f3;
      color: #2c6755;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
    }

    .table-column-settings-btn svg {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
    }

    .table-column-settings-btn:hover,
    .table-column-settings-btn:focus-visible,
    .table-column-settings-btn.active {
      border-color: #99c1b2;
      background: #e2f1ea;
      color: #1d5d4b;
    }

    .table-column-settings-btn:focus-visible {
      outline: 2px solid #8bd5b6;
      outline-offset: 2px;
    }

    .table-column-settings-dropdown {
      position: absolute;
      left: 0;
      top: calc(100% + 8px);
      z-index: 80;
      width: 168px;
      max-height: min(420px, calc(100vh - 180px));
      overflow: auto;
      padding: 7px;
      border: 1px solid #bfd4cb;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 18px 34px rgba(31, 80, 62, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .table-column-settings-list {
      display: grid;
      gap: 2px;
    }

    .table-column-option {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 5px 7px;
      border-radius: 6px;
      color: #26483d;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
      user-select: none;
    }

    .table-column-option:hover {
      background: #eff7f3;
    }

    .table-column-option-checkbox {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: #0e7c66;
      cursor: pointer;
    }

    .table-uploaded-detail-btn:hover,
    .table-uploaded-detail-btn:focus-visible {
      border-color: #8f85ff;
      background: #ece9ff;
      color: #3730a3;
    }

    #appPage {
      transition: filter 0.24s ease, transform 0.24s ease;
    }

    .table-hover-tooltip {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 80;
      max-width: min(560px, calc(100vw - 28px));
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid oklch(78% 0.08 160);
      background:
        linear-gradient(180deg, oklch(98% 0.015 160), oklch(94% 0.026 160)),
        #f0faf5;
      color: oklch(30% 0.055 165);
      box-shadow: 0 18px 42px rgba(18, 69, 51, 0.22), var(--inset-highlight);
      font-size: 15px;
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 0.1px;
      pointer-events: none;
      white-space: normal;
      overflow-wrap: anywhere;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
    }

    .table-hover-tooltip.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .table-hover-tooltip.image {
      width: min(280px, calc(100vw - 28px));
      max-width: min(280px, calc(100vw - 28px));
      padding: 9px;
      border-color: #cbded5;
      background: #f8fbf9;
      color: #45645a;
      box-shadow: 0 20px 48px rgba(18, 69, 51, 0.24), var(--inset-highlight);
    }

    .table-hover-tooltip-image {
      display: block;
      width: 100%;
      max-height: min(360px, calc(100vh - 100px));
      object-fit: contain;
      border-radius: 10px;
      background: #edf4f0;
    }

    .table-hover-tooltip-caption {
      display: block;
      padding: 8px 3px 1px;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      color: #587268;
      text-align: center;
    }

    .record-status-chip.has-invoice-preview {
      cursor: zoom-in;
      outline: none;
    }

    .record-status-chip.has-invoice-preview:hover,
    .record-status-chip.has-invoice-preview:focus-visible {
      border-color: #8f85ff;
      background: #f0edff;
      box-shadow: 0 0 0 3px rgba(143, 133, 255, 0.18);
    }

    body.modal-open {
      overflow: hidden;
    }

    body.modal-open #appPage {
      filter: blur(5px);
      transform: scale(0.995);
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(16, 42, 34, 0.42);
      backdrop-filter: blur(6px) saturate(110%);
      -webkit-backdrop-filter: blur(6px) saturate(110%);
      display: grid;
      place-items: center;
      padding: 20px;
      z-index: 80;
    }

    .modal-overlay.invoice-preview-stacked {
      z-index: 108;
    }

    .modal-overlay.modal-stacked {
      z-index: 96;
    }

    .modal-card {
      width: min(1040px, 96vw);
      max-height: calc(100vh - 40px);
      overflow-y: auto;
      overflow-x: hidden;
      transform-origin: center top;
    }

    #createModal > .modal-card {
      position: relative;
    }

    .invoice-upload-modal-card {
      width: min(680px, 94vw);
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 20px;
      border-color: #cfe2d8;
      background: linear-gradient(180deg, #fbfdfc 0%, #f7fbf9 100%);
      box-shadow: 0 24px 56px rgba(17, 53, 40, 0.18);
    }

    .invoice-upload-reminder-modal-card {
      width: min(760px, 94vw);
      display: grid;
      gap: 22px;
      padding: 30px;
      border: 2px solid #f0b84e;
      border-radius: 18px;
      background: linear-gradient(180deg, #fffdf5 0%, #fff7df 100%);
      box-shadow: 0 30px 80px rgba(99, 64, 8, 0.28);
    }

    .invoice-upload-reminder-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .invoice-upload-reminder-kicker {
      margin: 0 0 8px;
      color: #9b5c00;
      font-size: 18px;
      font-weight: 800;
    }

    .invoice-upload-reminder-title {
      margin: 0;
      color: #3f2d08;
      font-size: 34px;
      line-height: 1.16;
      letter-spacing: 0;
    }

    .invoice-upload-reminder-hero {
      display: grid;
      gap: 10px;
      padding: 24px;
      border-radius: 14px;
      border: 1px solid #f1c76d;
      background: #fffaf0;
    }

    .invoice-upload-reminder-label {
      color: #7c4a00;
      font-size: 18px;
      font-weight: 800;
    }

    .invoice-upload-reminder-amount {
      color: #b3330a;
      font-size: 48px;
      line-height: 1;
      letter-spacing: 0;
    }

    .invoice-upload-reminder-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      color: #4c3a14;
      font-size: 20px;
      font-weight: 700;
    }

    .invoice-upload-reminder-meta span {
      padding: 9px 12px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(214, 157, 49, 0.35);
    }

    .invoice-upload-reminder-actions {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    .invoice-upload-reminder-actions .btn-secondary,
    .invoice-upload-reminder-actions .btn-primary {
      min-height: 48px;
      padding: 0 22px;
      font-size: 17px;
      font-weight: 800;
    }

    .invoice-upload-form {
      display: grid;
      gap: 14px;
    }

    .invoice-upload-settlement-note {
      padding: 12px 14px;
      border: 1px solid #f0b84e;
      border-radius: 10px;
      background: linear-gradient(180deg, #fffaf0 0%, #fff4dc 100%);
      color: #7f4a00;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.5;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .invoice-upload-settlement-note strong {
      color: #b05900;
    }

    .invoice-upload-bank-reminder {
      margin: 0;
      padding: 10px 12px;
      border: 1px solid #f6c96f;
      border-radius: 8px;
      background: #fff8e8;
      color: #a85d00;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.45;
    }

    .invoice-upload-image-field {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px 14px;
      align-items: center;
      padding: 16px;
      border: 1px dashed #9dc9bc;
      border-radius: 12px;
      background: #f6fbf8;
      color: #24483d;
      cursor: pointer;
      transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
    }

    .invoice-upload-image-field:hover,
    .invoice-upload-image-field:focus-within {
      border-color: #2f9d83;
      background: #f1faf6;
      box-shadow: 0 0 0 3px rgba(47, 157, 131, 0.12);
    }

    .invoice-upload-image-field input {
      position: absolute;
      inset: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 12px;
      background: transparent;
      cursor: pointer;
      opacity: 0;
    }

    .invoice-upload-image-label,
    .accountant-register-grid label {
      color: #4c675e;
      font-size: 13px;
      font-weight: 800;
    }

    .accountant-register-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 14px;
    }

    .invoice-upload-image-label {
      grid-column: 1 / -1;
    }

    .invoice-upload-image-label::after,
    .accountant-register-grid label::after {
      content: "*";
      margin-left: 4px;
      color: #d9001b;
      font-weight: 900;
    }

    .invoice-upload-image-name {
      color: #123f34;
      font-size: 16px;
      font-weight: 900;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .invoice-upload-image-action {
      justify-self: end;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 14px;
      border: 1px solid #9dc9bc;
      border-radius: 8px;
      background: #ffffff;
      color: #16624f;
      font-size: 13px;
      font-weight: 900;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 6px 14px rgba(22, 98, 79, 0.08);
    }

    .invoice-upload-image-preview-wrap {
      grid-column: 1 / -1;
      display: block;
      width: 100%;
      min-height: 220px;
      max-height: 360px;
      overflow: hidden;
      border: 1px solid #cfe2d8;
      border-radius: 10px;
      background: #ffffff;
    }

    .invoice-upload-image-preview-wrap[hidden] {
      display: none;
    }

    .invoice-upload-image-preview {
      display: block;
      width: 100%;
      max-height: 360px;
      object-fit: contain;
      background: #ffffff;
    }

    .invoice-upload-warning {
      grid-column: 1 / -1;
      margin: -2px 0 0;
      padding: 12px 14px;
      border: 1px solid #ffb3b3;
      border-radius: 8px;
      background: #fff1f1;
      color: #d9001b;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.45;
    }

    .invoice-upload-actions {
      justify-content: flex-end;
      margin-top: 2px;
    }

    .invoice-upload-actions .btn-secondary,
    .invoice-upload-actions .btn-primary {
      min-width: 118px;
    }

    @media (min-width: 861px) {
      #createModal.modal-overlay {
        padding-block: 10px;
      }

      #createModal > .modal-card {
        width: min(1180px, 98vw);
        height: auto;
        max-height: calc(100vh - 20px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      body:not(.boss-view) #createModal > .modal-card {
        min-height: min(820px, calc(100vh - 20px));
        overflow: visible;
      }

      body:not(.boss-view) #createModal #recordForm {
        overflow-y: visible;
      }

      body:not(.boss-view) #createModal #recordForm .form-actions {
        position: absolute;
        right: 20px;
        bottom: 28px;
        width: auto;
        margin: 0;
        padding: 0;
        background: transparent;
      }

      body:not(.boss-view) #createModal #recordForm .field-note {
        padding-right: 184px;
      }

      body:not(.boss-view) #createModal #recordForm:has(#recordReturnBtn:not([hidden])) .field-note {
        padding-right: 356px;
      }
    }

    @media (min-width: 641px) and (max-width: 860px) {
      body:not(.boss-view) #createModal #recordForm .field-note {
        padding-right: 184px;
      }

      body:not(.boss-view) #createModal #recordForm:has(#recordReturnBtn:not([hidden])) .field-note {
        padding-right: 356px;
      }

      body:not(.boss-view) #createModal #recordForm .form-actions {
        position: absolute;
        right: 20px;
        bottom: 28px;
        width: auto;
        margin: 0;
        padding: 0;
        background: transparent;
        justify-content: flex-end;
      }

      body:not(.boss-view) #createModal #recordForm .form-actions .btn-danger,
      body:not(.boss-view) #createModal #recordForm .form-actions .btn-primary {
        flex: 0 0 auto;
        width: auto;
        min-width: 160px;
      }
    }

    .analysis-page {
      position: fixed;
      inset: 0;
      z-index: 76;
      display: grid;
      min-width: 0;
      min-height: 0;
      padding: 14px;
      background: #f4f8f5;
      overflow: hidden;
    }

    .analysis-page[hidden] {
      display: none;
    }

    .analysis-page-card {
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--surface);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .customer-feedback-modal-card {
      width: min(1120px, 94vw);
      height: 80vh;
      max-height: 80vh;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 10px;
    }

    .operation-records-modal-card {
      width: min(860px, 96vw);
      max-height: calc(100vh - 44px);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .analysis-accountant-detail-modal-card {
      width: calc(100vw - 24px);
      max-width: 1760px;
      height: min(880px, calc(100vh - 24px));
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      gap: 12px;
      overflow: hidden;
    }

    .analysis-accountant-detail-modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .analysis-accountant-detail-modal-title {
      margin: 0;
      color: #1f3f35;
      font-size: 20px;
      line-height: 1.2;
    }

    .analysis-accountant-detail-modal-meta {
      margin: 5px 0 0;
      color: #648075;
      font-size: 13px;
      line-height: 1.35;
    }

    .analysis-accountant-detail-modal-content {
      min-width: 0;
      min-height: 0;
      overflow: auto;
    }

    .analysis-accountant-detail-modal-content .analysis-table th,
    .analysis-accountant-detail-modal-content .analysis-table td {
      padding: 5px 6px;
    }

    .analysis-accountant-detail-modal-content .analysis-accountant-table {
      min-width: min(var(--analysis-accountant-table-min-width, 880px), 100%);
    }

    .analysis-accountant-detail-modal-content .analysis-accountant-sort-btn {
      min-height: 34px;
      padding: 4px 5px;
      gap: 3px;
    }

    .analysis-accountant-detail-modal-content .analysis-accountant-sort-summary {
      font-size: 9px;
    }

    .analysis-accountant-detail-modal-content .analysis-accountant-name-cell {
      min-width: 126px;
    }

    .analysis-accountant-detail-modal-content .analysis-accountant-metric {
      min-width: 102px;
      gap: 5px;
    }

    .analysis-accountant-detail-modal-content .analysis-accountant-dispatcher-count {
      min-width: 48px;
    }

    .reminder-modal-card {
      width: min(720px, 96vw);
      max-height: calc(100vh - 44px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 20px;
      border-color: #cfe2d8;
      border-radius: 12px;
      background: linear-gradient(180deg, #fbfdfc 0%, #f7fbf9 100%);
      box-shadow: 0 24px 56px rgba(17, 53, 40, 0.18);
    }

    .price-composition-modal-card {
      width: 90vw;
      max-width: 90vw;
      max-height: calc(100vh - 40px);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .check-modal-card {
      width: min(760px, 95vw);
      max-height: calc(100vh - 30px);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    #checkModal > .check-modal-card {
      width: min(620px, 94vw);
      gap: 14px;
      padding: 20px;
    }

    .check-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      padding-bottom: 12px;
      border-bottom: 1px solid #e1ede7;
    }

    .check-modal-title {
      margin: 0;
      color: #20362e;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.2;
    }

    .complete-modal-card {
      width: min(640px, 94vw);
      gap: 14px;
      padding: 20px;
    }

    .refund-modal-card {
      width: min(520px, 94vw);
      max-height: calc(100vh - 30px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 20px;
    }

    .record-history-modal-card {
      width: min(1220px, 98vw);
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 16px;
    }

    .invoice-preview-modal-card {
      width: min(760px, 94vw);
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 16px;
    }

    .record-history-modal-card:focus,
    .invoice-preview-modal-card:focus {
      outline: none;
    }

    .settlement-summary-modal-card {
      width: min(500px, 92vw);
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 18px;
      padding: 22px;
      border-radius: var(--radius-2xl);
      border-color: #dfeae4;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.98));
      box-shadow: var(--shadow-lg);
    }

    .settlement-detail-modal-card {
      width: calc(100vw - 24px);
      max-width: 1560px;
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 18px;
      padding: 22px;
      border-radius: var(--radius-2xl);
      border-color: #dfeae4;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.98));
      box-shadow: var(--shadow-lg);
    }

    .settlement-detail-modal-card:focus {
      outline: none;
    }

    .accountant-modal-card {
      width: min(1160px, calc(100vw - 32px));
      max-height: calc(100vh - 30px);
      display: flex;
      flex-direction: column;
      gap: 16px;
      padding: 0;
      border: 1px solid oklch(87% 0.024 165);
      border-radius: 16px;
      background: oklch(98.8% 0.007 165);
      box-shadow: 0 28px 72px rgba(18, 60, 47, 0.2);
    }

    .accountant-modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-top: 0;
      margin-bottom: 0;
      padding: 20px 22px 16px;
      border-bottom: 1px solid oklch(88% 0.022 165);
      background:
        linear-gradient(180deg, oklch(99.4% 0.006 165), oklch(97.2% 0.012 165));
    }

    .accountant-modal-actions {
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      min-width: 0;
    }

    .accountant-modal-card > .form-request-hint {
      margin: 0 22px;
    }

    .accountant-search-panel {
      display: grid;
      gap: 8px;
      margin: 0 22px;
    }

    .accountant-search-label {
      color: #48645b;
      font-size: 12px;
      font-weight: 850;
      line-height: 1;
    }

    .accountant-search-control {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: stretch;
      gap: 10px;
    }

    .accountant-search-input {
      width: 100%;
      min-height: 72px;
      resize: vertical;
      padding: 10px 12px;
      border: 1px solid oklch(84% 0.024 165);
      border-radius: 10px;
      background: oklch(99.4% 0.004 165);
      color: #203e35;
      font: inherit;
      font-size: 13px;
      line-height: 1.45;
      outline: none;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
      transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
    }

    .accountant-search-input::placeholder {
      color: #7b9189;
    }

    .accountant-search-input:focus {
      border-color: oklch(70% 0.07 165);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .accountant-search-clear {
      align-self: start;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid oklch(84% 0.024 165);
      border-radius: 9px;
      background: oklch(97.5% 0.012 165);
      color: oklch(34% 0.07 165);
      font-size: 13px;
      font-weight: 850;
      cursor: pointer;
      transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    }

    .accountant-search-clear:hover {
      border-color: oklch(73% 0.06 165);
      background: oklch(94.8% 0.023 165);
      color: oklch(28% 0.08 165);
    }

    .accountant-modal-heading {
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      align-content: center;
    }

    .accountant-modal-title {
      margin: 0;
      color: #1c342d;
      font-size: 22px;
      font-weight: 850;
      letter-spacing: 0;
      line-height: 1.2;
    }

    .accountant-modal-stats {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }

    .accountant-modal-stat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 28px;
      padding: 4px 10px;
      border: 1px solid oklch(84% 0.024 165);
      border-radius: 999px;
      background: oklch(96.7% 0.015 165);
      color: #48645b;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }

    .accountant-modal-stat strong {
      color: #1f6f5a;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .accountant-modal-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex: 0 0 auto;
    }

    .accountant-modal-create-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 42px;
      padding: 9px 18px;
      border-radius: 11px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
      box-shadow: 0 10px 24px rgba(14, 124, 102, 0.22);
    }

    .accountant-modal-create-btn span[aria-hidden="true"] {
      font-size: 18px;
      line-height: 0.8;
    }

    .modal-icon-btn {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      border: 1px solid oklch(84% 0.022 165);
      border-radius: 11px;
      background: oklch(98.4% 0.006 165);
      color: #3b564d;
      cursor: pointer;
      box-shadow: var(--inset-highlight);
      transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }

    .modal-icon-btn:hover {
      border-color: oklch(76% 0.045 165);
      background: oklch(95.8% 0.018 165);
      color: #1f3b33;
      box-shadow: 0 8px 18px rgba(17, 53, 40, 0.08), var(--inset-highlight);
    }

    .modal-icon-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.18), var(--inset-highlight);
    }

    .modal-icon-btn svg {
      width: 18px;
      height: 18px;
      display: block;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }

    .accountant-register-modal-card {
      width: min(720px, 96vw);
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 12px;
    }

    .accountant-register-modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
    }

    .accountant-register-heading {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .accountant-register-title {
      margin: 0;
      font-size: 22px;
      line-height: 1.2;
    }

    .invoice-recipient-info-title {
      margin: 0;
      color: #123f34;
      font-size: 22px;
      font-weight: 900;
      line-height: 1.25;
    }

    .accountant-register-hint {
      margin-top: 0;
      margin-bottom: 2px;
    }

    .accountant-register-form {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px 14px;
      align-items: start;
    }

    .accountant-register-form .field {
      padding: 14px 16px;
      border: 1px solid #e2ede8;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(248, 252, 250, 0.96), #ffffff 78%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .accountant-register-section {
      grid-column: 1 / -1;
      display: grid;
      gap: 12px;
    }

    .accountant-register-section-title {
      margin: 8px 0 0;
      padding: 0 4px;
      color: #0e7c66;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.4;
      border-left: 3px solid #0e7c66;
    }

    .accountant-register-form .field > label {
      color: #4c675e;
      font-size: 13px;
      font-weight: 700;
    }

    .accountant-register-form .field > input {
      border-color: #dbe7e1;
      background: #ffffff;
      box-shadow: none;
    }

    .accountant-register-form .field > input:focus {
      border-color: #7cbca9;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.12);
    }

    .accountant-register-form.readonly .field > input:disabled {
      border-color: #dbe7e1;
      background: #f8fbf9;
      color: #29473d;
      opacity: 1;
      cursor: default;
      -webkit-text-fill-color: #29473d;
    }

    .accountant-register-form .field.field-validation-group-error {
      border-color: #efcbcb;
      background: linear-gradient(180deg, rgba(255, 247, 247, 0.96), #ffffff 78%);
    }

    .accountant-edit-recipient-fieldset {
      grid-column: 1 / -1;
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #d6e8e0;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(241, 249, 246, 0.96), rgba(250, 253, 252, 0.98)),
        #f5fbf8;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
    }

    .accountant-edit-recipient-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
      padding: 0 2px;
    }

    .accountant-edit-recipient-head h3 {
      margin: 0;
      color: #245246;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.25;
    }

    .accountant-edit-recipient-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px 12px;
      align-items: start;
    }

    .accountant-edit-recipient-grid .field {
      min-height: 86px;
      padding: 12px 14px;
      border-color: #dceae4;
      background: rgba(255, 255, 255, 0.82);
    }

    .accountant-edit-recipient-grid .field:last-child:nth-child(odd) {
      max-width: calc(50% - 6px);
    }

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

    .accountant-register-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding-top: 4px;
    }

    @media (max-width: 720px) {
      .accountant-modal-top {
        gap: 14px;
        padding: 18px;
      }

      .accountant-modal-heading {
        align-items: flex-start;
      }

      .accountant-modal-actions {
        align-items: flex-start;
      }

      .accountant-modal-create-btn {
        min-width: 0;
        flex: 1 1 auto;
      }

      .accountant-edit-recipient-grid {
        grid-template-columns: 1fr;
      }

      .accountant-edit-recipient-grid .field:last-child:nth-child(odd) {
        max-width: none;
      }
    }

    .dev-todo-modal-card {
      width: min(620px, 94vw);
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 14px;
    }

    .change-log-modal-card {
      width: min(680px, 94vw);
      max-height: calc(100vh - 48px);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .change-log-modal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .change-log-modal-title {
      margin: 0;
      color: #1f3f35;
      font-size: 20px;
      line-height: 1.2;
    }

    .change-log-list {
      display: grid;
      gap: 10px;
      min-height: 0;
      overflow: auto;
      padding-right: 2px;
    }

    .change-log-entry {
      display: grid;
      gap: 6px;
      border: 1px solid #dceae3;
      border-radius: 10px;
      background: #fbfdfc;
      padding: 11px 12px;
    }

    .change-log-time {
      color: #5e746b;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .change-log-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }

    .change-log-badge,
    .change-log-version {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
    }

    .change-log-badge {
      background: #e8f4ef;
      color: #23614f;
    }

    .change-log-version {
      background: #eef2f7;
      color: #43556a;
    }

    .change-log-content {
      color: #23443a;
      font-size: 14px;
      line-height: 1.55;
      white-space: pre-wrap;
    }

    .change-log-empty {
      margin: 0;
      border: 1px dashed #cfded7;
      border-radius: 10px;
      background: #f8fbf9;
      color: #60766d;
      padding: 18px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
    }

    .dev-todo-modal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .dev-todo-heading {
      min-width: 0;
      display: grid;
      gap: 4px;
    }

    .dev-todo-title {
      margin: 0;
      font-size: 18px;
      color: #163f34;
      letter-spacing: 0.1px;
    }

    .dev-todo-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: end;
    }

    .dev-todo-form .field {
      gap: 4px;
    }

    .dev-todo-form input {
      min-height: 46px;
      border-radius: 12px;
      background: #ffffff;
    }

    .return-price-modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .return-price-heading {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .return-price-title {
      margin: 0;
      font-size: 18px;
      color: #183f34;
      letter-spacing: 0.1px;
    }

    .return-price-meta {
      margin: 0;
      color: #678176;
      font-size: 12px;
      line-height: 1.5;
      word-break: break-all;
    }

    #invoiceUploadModalMeta {
      display: grid;
      grid-template-columns: minmax(150px, 0.92fr) minmax(220px, 1.08fr);
      align-items: start;
      gap: 10px;
      margin-top: 6px;
      word-break: normal;
    }

    .invoice-upload-meta-item {
      display: grid;
      grid-template-columns: minmax(92px, 0.64fr) minmax(0, 1fr) auto;
      align-items: baseline;
      gap: 8px;
      min-height: 48px;
      padding: 10px 12px;
      border: 1px solid #cfe2d8;
      border-radius: 10px;
      background: #f6fbf8;
      color: #24483d;
    }

    .invoice-upload-meta-item.is-amount {
      border-color: #f0b84e;
      background: #fffaf0;
    }

    .invoice-upload-meta-item.is-tax {
      border-color: #d8e5de;
      background: #fbfdfc;
    }

    .invoice-upload-meta-money-group {
      display: grid;
      gap: 0;
      overflow: hidden;
      border: 1px solid #f0b84e;
      border-radius: 10px;
      background: #fffaf0;
    }

    .invoice-upload-meta-money-group .invoice-upload-meta-item {
      min-height: 48px;
      border-width: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: inset 0 -1px 0 rgba(214, 157, 49, 0.32);
    }

    .invoice-upload-meta-money-group .invoice-upload-meta-item:last-child {
      box-shadow: none;
    }

    .invoice-upload-meta-money-group .invoice-upload-meta-item.is-tax {
      background: rgba(246, 251, 248, 0.74);
    }

    .invoice-upload-meta-label {
      color: #526e63;
      font-size: 14px;
      font-weight: 850;
      line-height: 1.25;
    }

    .invoice-upload-meta-value {
      color: #113f34;
      font-size: 22px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
      line-height: 1.05;
      letter-spacing: 0;
      overflow-wrap: anywhere;
    }

    .invoice-upload-meta-item.is-amount .invoice-upload-meta-value {
      color: #b3330a;
      font-size: 24px;
    }

    .invoice-upload-meta-unit {
      color: #526e63;
      font-size: 14px;
      font-weight: 850;
      line-height: 1.2;
    }

    .refund-modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #e1ede7;
    }

    .refund-heading {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .refund-title {
      margin: 0;
      color: #20362e;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.2;
    }

    .refund-meta {
      margin: 0;
      color: #678176;
      font-size: 12px;
      line-height: 1.45;
      word-break: break-all;
    }

    .refund-form {
      display: grid;
      gap: 14px;
    }

    .refund-form .field {
      gap: 7px;
      padding: 0;
    }

    .refund-form .refund-price-row {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      align-items: start;
    }

    .refund-form .refund-price-item {
      display: grid;
      grid-template-columns: var(--record-label-width, 78px) minmax(0, 1fr);
      column-gap: 14px;
      row-gap: 8px;
      align-items: center;
      min-width: 0;
    }

    .refund-form .field > label,
    .refund-form .refund-price-item > label {
      margin: 0;
      color: #577067;
      font-size: 13px;
      font-weight: 700;
      text-align: right;
    }

    .refund-form input {
      min-height: 50px;
      min-width: 0;
      border-color: #d9e7e0;
      border-radius: 14px;
      background: #fff;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(22, 74, 58, 0.04);
      font-variant-numeric: tabular-nums;
    }

    .refund-form .refund-price-item > input {
      grid-column: 2;
    }

    .refund-form .refund-price-item-total > .price-hint {
      grid-column: 2;
      margin: -2px 0 0;
      min-height: 20px;
      color: #0e7c66;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
    }

    .refund-form .refund-price-item-total > .price-hint.negative {
      color: #c2512d;
    }

    .refund-form .refund-price-item.field-validation-group-error > .field-inline-error {
      grid-column: 2;
    }

    .refund-actions {
      margin-top: 0;
      justify-content: flex-end;
    }

    .refund-actions .btn-primary {
      min-width: 132px;
      min-height: 42px;
      padding: 11px 24px;
      border-radius: 10px;
    }

    .invoice-preview-image-wrap {
      min-height: 260px;
      max-height: calc(100vh - 180px);
      overflow: auto;
      border: 1px solid #d9e5df;
      border-radius: var(--radius-xl);
      background: #f8fbf9;
      padding: 12px;
    }

    .invoice-preview-image {
      width: 100%;
      height: auto;
      display: block;
      border-radius: var(--radius-md);
      background: #edf4f0;
    }

    .record-history-content {
      min-height: 180px;
      display: grid;
      align-items: start;
    }

    .record-history-empty {
      padding: 18px;
      border-radius: var(--radius-lg);
      border: 1px dashed #c7d9d1;
      background: #f8fbf9;
      color: #6d827a;
      font-size: 13px;
      line-height: 1.6;
    }

    .record-history-table-value {
      min-width: 0;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 7px 10px;
      border-radius: 10px;
      text-align: center;
      word-break: break-word;
      white-space: normal;
    }

    .record-history-table-value.initial {
      background: #edf3f0;
      color: #566d64;
      font-weight: 600;
    }

    .record-history-table-value.changed {
      background: #e6f4ec;
      color: #174435;
      font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(103, 152, 128, 0.14);
    }

    .record-history-grid-wrap {
      width: 100%;
      overflow: auto;
      max-height: min(68vh, 560px);
      border: 1px solid #d8e6df;
      border-radius: var(--radius-xl);
      background: linear-gradient(180deg, #fcfffd, #f4f8f6);
      box-shadow: var(--inset-highlight);
      overscroll-behavior: contain;
    }

    .record-history-grid-table {
      --record-history-step-width: 120px;
      --record-history-operator-width: 156px;
      --record-history-time-width: 168px;
      min-width: max-content;
      position: relative;
    }

    .record-history-grid-row {
      display: grid;
    }

    .record-history-grid-row.head {
      background: rgba(242, 248, 244, 0.96);
      border-bottom: 1px solid #d4e3dc;
    }

    .record-history-grid-row.initial {
      background: rgba(239, 246, 242, 0.94);
    }

    .record-history-grid-row:not(.head):not(.initial) {
      background: rgba(252, 255, 253, 0.96);
    }

    .record-history-grid-head,
    .record-history-grid-meta-cell,
    .record-history-grid-cell {
      min-width: 0;
      padding: 12px 14px;
      border-bottom: 1px solid #e0ebe6;
      text-align: center;
      box-sizing: border-box;
    }

    .record-history-grid-row:last-child .record-history-grid-head,
    .record-history-grid-row:last-child .record-history-grid-meta-cell,
    .record-history-grid-row:last-child .record-history-grid-cell {
      border-bottom: 0;
    }

    .record-history-grid-head {
      color: #5f776d;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.01em;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 4;
    }

    .record-history-grid-meta-cell {
      color: #4f665d;
      font-size: 12px;
      line-height: 1.6;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .record-history-grid-meta-cell.operator,
    .record-history-grid-meta-cell.time {
      display: flex;
      justify-content: center;
    }

    .record-history-grid-head.meta.step,
    .record-history-grid-meta-cell.step {
      position: sticky;
      left: 0;
      z-index: 5;
      box-shadow: 1px 0 0 rgba(216, 230, 223, 0.92);
    }

    .record-history-grid-head.meta.operator,
    .record-history-grid-meta-cell.operator {
      position: sticky;
      left: var(--record-history-step-width);
      z-index: 5;
      box-shadow: 1px 0 0 rgba(216, 230, 223, 0.92);
    }

    .record-history-grid-head.meta.time,
    .record-history-grid-meta-cell.time {
      position: sticky;
      left: calc(var(--record-history-step-width) + var(--record-history-operator-width));
      z-index: 5;
      box-shadow: 1px 0 0 rgba(216, 230, 223, 0.92);
    }

    .record-history-grid-row.head .record-history-grid-head,
    .record-history-grid-row.head .record-history-grid-meta-cell {
      background: rgba(242, 248, 244, 0.98);
    }

    .record-history-grid-row.initial .record-history-grid-meta-cell,
    .record-history-grid-row.initial .record-history-grid-cell {
      background: rgba(239, 246, 242, 0.96);
    }

    .record-history-grid-row:not(.head):not(.initial) .record-history-grid-meta-cell,
    .record-history-grid-row:not(.head):not(.initial) .record-history-grid-cell {
      background: rgba(252, 255, 253, 0.98);
    }

    .record-history-grid-row.head .record-history-grid-head.meta.step,
    .record-history-grid-row.head .record-history-grid-head.meta.operator,
    .record-history-grid-row.head .record-history-grid-head.meta.time {
      z-index: 7;
    }

    .record-history-grid-step-badge {
      min-width: 34px;
      height: 34px;
      padding: 0 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e8f4ee;
      color: #255e4d;
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .record-history-grid-step-badge.initial {
      padding: 0 12px;
      background: #dfeee7;
      color: #1f5545;
    }

    .record-history-grid-step-label {
      color: #173f34;
      font-size: 14px;
      line-height: 1.3;
      white-space: nowrap;
      text-align: center;
    }

    .record-history-grid-cell {
      color: #647a71;
      font-size: 12px;
      line-height: 1.5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .record-history-grid-cell.empty {
      color: #b0c1b9;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
    }

    .settlement-summary-top {
      display: block;
    }

    .settlement-summary-title {
      margin: 0;
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 26px;
      line-height: 1.12;
      font-weight: 800;
      color: #163f34;
      letter-spacing: 0.02em;
    }

    .settlement-summary-title-count {
      color: #6c8178;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .settlement-summary-hero {
      display: grid;
      gap: 10px;
      padding: 22px;
      border-radius: var(--radius-xl);
      border: 1px solid #d4e5dc;
      background: linear-gradient(180deg, #eff7f2, #ffffff 86%);
      box-shadow: var(--inset-highlight);
    }

    .settlement-summary-hero-label {
      color: #5a7268;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
    }

    .settlement-summary-hero-value {
      color: #173f34;
      font-size: 40px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.04em;
    }

    .settlement-summary-meta {
      display: flex;
      justify-content: flex-end;
    }

    .settlement-summary-meta-item {
      display: grid;
      gap: 6px;
      width: min(220px, 100%);
      padding: 14px 16px;
      border-radius: var(--radius-lg);
      border: 1px solid #dde8e2;
      background: #f8fbf9;
    }

    .settlement-summary-meta-label {
      color: #60766c;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
    }

    .settlement-summary-meta-value {
      color: #173f34;
      font-size: 22px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .settlement-summary-note {
      margin: -4px 2px 0;
      color: #5e7269;
      font-size: 12px;
      line-height: 1.5;
    }

    .settlement-summary-actions {
      display: flex;
      justify-content: flex-end;
    }

    .settlement-summary-actions .btn-primary {
      min-width: 160px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: var(--radius-lg);
      font-weight: 800;
    }

    .settlement-detail-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .settlement-detail-tabs {
      display: flex;
      gap: 6px;
      padding: 4px;
      background: rgba(17, 53, 40, 0.06);
      border-radius: 10px;
    }

    .settlement-detail-month-tabs {
      order: 3;
      flex: 1 1 100%;
      display: flex;
      gap: 7px;
      max-width: 100%;
      padding: 4px;
      overflow-x: auto;
      background: #f4f8f6;
      border: 1px solid #dce9e3;
      border-radius: 10px;
      scrollbar-width: thin;
    }

    .settlement-detail-month-tab-btn {
      flex: 0 0 auto;
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 0 12px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: transparent;
      color: #516a60;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }

    .settlement-detail-month-tab-btn:hover,
    .settlement-detail-month-tab-btn:focus-visible {
      background: rgba(255, 255, 255, 0.82);
      border-color: #c8ded5;
      color: #213c33;
      outline: none;
    }

    .settlement-detail-month-tab-btn[aria-pressed="true"] {
      background: #ffffff;
      border-color: #b8d8cc;
      color: #0e7c66;
      box-shadow: 0 4px 10px rgba(14, 124, 102, 0.1);
    }

    .settlement-detail-month-label,
    .settlement-detail-month-meta {
      white-space: nowrap;
    }

    .settlement-detail-month-meta {
      color: #71877e;
      font-size: 11px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .settlement-detail-tab-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      border: none;
      background: transparent;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #5a6b63;
      cursor: pointer;
      transition: all 0.18s ease;
    }

    .settlement-detail-tab-btn:hover {
      background: rgba(255, 255, 255, 0.8);
      color: #213c33;
    }

    .settlement-detail-tab-btn.active {
      background: #ffffff;
      color: #0e7c66;
      box-shadow: 0 4px 10px rgba(14, 124, 102, 0.12);
    }

    .settlement-detail-col-dispatcher {
      width: 120px;
    }

    .settlement-detail-dispatcher-cell {
      padding: 10px 12px;
    }

    .settlement-detail-dispatcher {
      display: block;
      font-weight: 800;
      color: #213c33;
      font-size: 14px;
    }

    .settlement-detail-dispatcher-meta {
      display: block;
      font-size: 12px;
      color: #5a6b63;
      margin-top: 4px;
    }

    .settlement-detail-row.tone-dispatcher td {
      background: #e6f5ee;
    }

    .settlement-detail-row.tone-dispatcher:hover td {
      background: #d8ede5;
    }

    .settlement-detail-heading {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    .settlement-detail-title {
      margin: 0;
      display: flex;
      align-items: baseline;
      gap: 12px;
      flex-wrap: wrap;
      font-size: 26px;
      line-height: 1.12;
      font-weight: 800;
      color: #163f34;
      letter-spacing: 0.02em;
    }

    .settlement-detail-title-count {
      color: #6c8178;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
    }

    .settlement-detail-meta {
      margin: 0;
      color: #5e7269;
      font-size: 13px;
      line-height: 1.5;
    }

    .settlement-detail-meta:empty {
      display: none;
    }

    .settlement-detail-list {
      display: grid;
      align-content: start;
      gap: 30px;
      min-height: 0;
      overflow: auto;
    }

    .settlement-management-monthly-section {
      display: grid;
      gap: 12px;
      padding: 14px;
      border: 1px solid #dce9e3;
      border-radius: 12px;
      background: #f8fbf9;
      min-width: 0;
    }

    .settlement-management-monthly-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .settlement-management-monthly-title-wrap {
      display: grid;
      gap: 4px;
      min-width: 0;
    }

    .settlement-management-monthly-title {
      margin: 0;
      color: #163f34;
      font-size: 17px;
      font-weight: 800;
      line-height: 1.2;
    }

    .settlement-management-monthly-meta {
      margin: 0;
      color: #5e7269;
      font-size: 12px;
      font-weight: 700;
    }

    .settlement-management-monthly-filter-btn {
      min-height: 34px;
      padding: 0 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .settlement-management-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }

    .settlement-management-stat {
      display: grid;
      gap: 4px;
      min-width: 0;
      padding: 10px 12px;
      border: 1px solid #e0ebe5;
      border-radius: 10px;
      background: #ffffff;
    }

    .settlement-management-stat.warning {
      border-color: #f1d59b;
      background: #fff9ea;
    }

    .settlement-management-stat.payable {
      border-color: #b8d8cc;
      background: #eef8f4;
    }

    .settlement-management-stat.paid {
      border-color: #cfe2d8;
      background: #f3faf6;
    }

    .settlement-management-stat.amount {
      border-color: #cfdde8;
      background: #f4f8fb;
    }

    .settlement-management-stat-label {
      color: #6b7f76;
      font-size: 11px;
      font-weight: 800;
    }

    .settlement-management-stat-value {
      color: #173f34;
      font-size: 15px;
      line-height: 1.2;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .settlement-management-monthly-table-wrap {
      overflow: auto;
      border: 1px solid #dfeae4;
      border-radius: 10px;
      background: #ffffff;
    }

    .settlement-management-monthly-table {
      width: 100%;
      min-width: 920px;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 12px;
    }

    .settlement-management-monthly-table th,
    .settlement-management-monthly-table td {
      padding: 9px 10px;
      border-bottom: 1px solid #edf3ef;
      text-align: left;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .settlement-management-monthly-table th:nth-child(1),
    .settlement-management-monthly-table td:nth-child(1) {
      width: 104px;
    }

    .settlement-management-monthly-table th:nth-child(2),
    .settlement-management-monthly-table td:nth-child(2) {
      width: 190px;
    }

    .settlement-management-monthly-table th:nth-child(3),
    .settlement-management-monthly-table td:nth-child(3) {
      width: 120px;
    }

    .settlement-management-monthly-table th:nth-child(4),
    .settlement-management-monthly-table td:nth-child(4) {
      width: 72px;
    }

    .settlement-management-monthly-table th:nth-child(5),
    .settlement-management-monthly-table td:nth-child(5) {
      width: 138px;
    }

    .settlement-management-monthly-table th:nth-child(6),
    .settlement-management-monthly-table td:nth-child(6),
    .settlement-management-monthly-table th:nth-child(7),
    .settlement-management-monthly-table td:nth-child(7),
    .settlement-management-monthly-table th:nth-child(8),
    .settlement-management-monthly-table td:nth-child(8) {
      width: 110px;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .settlement-management-monthly-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f4f8f6;
      color: #486257;
      font-size: 11px;
      font-weight: 900;
    }

    .settlement-management-monthly-table tbody tr:last-child td {
      border-bottom: none;
    }

    .settlement-management-monthly-table tr.is-due td {
      background: #fff9ea;
    }

    .settlement-management-monthly-table td.money {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .settlement-management-monthly-table td.status {
      font-weight: 800;
      color: #0e7c66;
    }

    .settlement-management-monthly-empty {
      padding: 16px;
      border: 1px dashed #d7e3dd;
      border-radius: 10px;
      color: #6d8379;
      text-align: center;
      background: #ffffff;
      font-size: 13px;
      font-weight: 700;
    }

    .settlement-detail-section {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    .settlement-detail-empty {
      padding: 34px 18px;
      border-radius: var(--radius-xl);
      border: 1px dashed #d7e3dd;
      background: #f8fbf9;
      color: #6d8379;
      font-size: 14px;
      text-align: center;
    }

    .settlement-detail-table-wrap {
      overflow-x: hidden;
      overflow-y: auto;
      border: 1px solid #dbe8e1;
      border-radius: var(--radius-xl);
      background: #fcfefd;
      box-shadow: var(--inset-highlight), var(--shadow-sm);
    }

    .settlement-detail-table-wrap-paid {
      border-color: #dbe8e1;
      background: #fcfefd;
    }

    .settlement-detail-table {
      width: 100%;
      min-width: 0;
      table-layout: fixed;
      border-collapse: separate;
      border-spacing: 0;
      color: #24473d;
      font-size: 13px;
      line-height: 1.35;
    }

    .settlement-detail-table col.settlement-detail-col-accountant {
      width: 16%;
    }

    .settlement-detail-table col.settlement-detail-col-name {
      width: 9%;
    }

    .settlement-detail-table col.settlement-detail-col-order {
      width: 8%;
    }

    .settlement-detail-table col.settlement-detail-col-money {
      width: 12%;
    }

    .settlement-detail-table col.settlement-detail-col-invoice {
      width: 14%;
    }

    .settlement-detail-table col.settlement-detail-col-payout {
      width: 10%;
    }

    .settlement-detail-table col.settlement-detail-col-action {
      width: 12%;
    }

    .settlement-detail-table th,
    .settlement-detail-table td {
      padding: 12px 10px;
      border-bottom: 1px solid #e1ece6;
      vertical-align: middle;
    }

    .settlement-detail-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f3f8f5;
      color: #597166;
      font-size: 12px;
      font-weight: 800;
      text-align: left;
      white-space: nowrap;
    }

    .settlement-detail-heading-cell.money {
      text-align: right;
    }

    .settlement-detail-heading-cell.invoice,
    .settlement-detail-heading-cell.payout,
    .settlement-detail-heading-cell.action {
      text-align: center;
    }

    .settlement-detail-sort-btn {
      width: 100%;
      min-height: 40px;
      display: grid;
      grid-template-columns: minmax(0, max-content) auto;
      grid-template-areas:
        "label mark"
        "summary summary";
      gap: 3px 8px;
      align-items: center;
      justify-items: start;
      justify-content: start;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      font: inherit;
      text-align: inherit;
      cursor: pointer;
    }

    .settlement-detail-sort-btn.is-summary-hidden {
      min-height: 24px;
      grid-template-areas: "label mark";
    }

    .settlement-detail-sort-btn:hover .settlement-detail-sort-label,
    .settlement-detail-sort-btn:focus-visible .settlement-detail-sort-label {
      color: #173f34;
    }

    .settlement-detail-sort-btn:focus-visible {
      border-radius: 8px;
      outline: 2px solid rgba(32, 135, 102, 0.28);
      outline-offset: 3px;
    }

    .settlement-detail-heading-cell.money .settlement-detail-sort-btn {
      justify-items: end;
      justify-content: end;
    }

    .settlement-detail-heading-cell.invoice .settlement-detail-sort-btn,
    .settlement-detail-heading-cell.payout .settlement-detail-sort-btn,
    .settlement-detail-heading-cell.action .settlement-detail-sort-btn {
      justify-items: center;
      justify-content: center;
    }

    .settlement-detail-sort-label,
    .settlement-detail-sort-summary {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .settlement-detail-sort-label {
      grid-area: label;
    }

    .settlement-detail-sort-summary {
      grid-area: summary;
      color: #6d8379;
      font-size: 11px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      line-height: 1.2;
    }

    .settlement-detail-sort-mark {
      grid-area: mark;
      color: #2a6a58;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
    }

    .settlement-detail-status-filter {
      display: flex;
      justify-content: center;
      gap: 5px;
      margin-top: 7px;
      flex-wrap: wrap;
    }

    .settlement-detail-status-filter-btn {
      min-height: 24px;
      padding: 0 8px;
      border: 1px solid #cfe1d9;
      border-radius: 999px;
      background: #fff;
      color: #476459;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
    }

    .settlement-detail-status-filter-btn:hover,
    .settlement-detail-status-filter-btn:focus-visible,
    .settlement-detail-status-filter-btn[aria-pressed="true"] {
      border-color: #208766;
      background: #e7f5ef;
      color: #174d40;
      outline: none;
    }

    .settlement-detail-empty-cell {
      padding: 22px 14px;
      color: #6b8077;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    .settlement-detail-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .settlement-detail-table tbody tr:hover td {
      background: #f8fbf9;
    }

    .settlement-detail-row td {
      transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
    }

    .settlement-detail-row.tone-payable td {
      border-bottom-color: oklch(0.86 0.055 158);
      background: oklch(0.955 0.038 158);
    }

    .settlement-detail-row.tone-payable:hover td {
      background: oklch(0.935 0.052 158);
    }

    .settlement-detail-row.tone-pending td {
      border-bottom-color: #e1ece6;
      background: #fcfefd;
    }

    .settlement-detail-row.tone-pending:hover td {
      background: #f8fbf9;
    }

    .settlement-detail-row.tone-paid td {
      border-bottom-color: #e1ece6;
      background: #fcfefd;
    }

    .settlement-detail-row.tone-paid:hover td {
      background: #f8fbf9;
    }

    .settlement-detail-row.special-accountant td {
      border-bottom-color: #d5dfcc;
      background: #f6f9ef;
    }

    .settlement-detail-row.special-accountant:hover td {
      background: #eef4e3;
    }

    .settlement-detail-payout-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-bottom: 0;
    }

    .settlement-detail-payout-toolbar-text {
      color: #5d756c;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
    }

    .settlement-detail-payout-select-all-btn,
    .settlement-detail-payout-batch-btn,
    .settlement-detail-payout-btn,
    .settlement-detail-payout-revoke-btn,
    .settlement-detail-invoice-replace-btn {
      min-height: 32px;
      border: 1px solid #bbd7cb;
      border-radius: 999px;
      background: #eaf6f1;
      color: #1f5d4e;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      box-shadow: var(--inset-highlight);
      transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
    }

    .settlement-detail-payout-select-all-btn,
    .settlement-detail-payout-batch-btn {
      padding: 0 14px;
    }

    .settlement-detail-payout-btn,
    .settlement-detail-invoice-replace-btn {
      padding: 0 12px;
    }

    .settlement-detail-payout-revoke-btn {
      padding: 0 12px;
      border-color: #e2c7bd;
      background: #fff3ef;
      color: #8a3d2a;
    }

    .settlement-detail-payout-select-all-btn:hover,
    .settlement-detail-payout-batch-btn:hover,
    .settlement-detail-payout-btn:hover,
    .settlement-detail-payout-revoke-btn:hover,
    .settlement-detail-invoice-replace-btn:hover,
    .settlement-detail-payout-select-all-btn:focus-visible,
    .settlement-detail-payout-batch-btn:focus-visible,
    .settlement-detail-payout-btn:focus-visible,
    .settlement-detail-payout-revoke-btn:focus-visible,
    .settlement-detail-invoice-replace-btn:focus-visible {
      border-color: #238565;
      background: #dcf0e8;
      color: #174d40;
      outline: none;
      transform: translateY(-1px);
    }

    .settlement-detail-payout-select-all-btn:disabled,
    .settlement-detail-payout-batch-btn:disabled,
    .settlement-detail-payout-btn:disabled,
    .settlement-detail-payout-revoke-btn:disabled,
    .settlement-detail-invoice-replace-btn:disabled {
      opacity: 0.52;
      cursor: not-allowed;
      transform: none;
    }

    .settlement-detail-invoice-replace-btn {
      flex: 0 0 auto;
      min-width: 48px;
      white-space: nowrap;
    }

    .settlement-detail-payout-revoke-btn:hover,
    .settlement-detail-payout-revoke-btn:focus-visible {
      border-color: #b65f45;
      background: #ffe7df;
      color: #71301f;
    }

    .settlement-detail-accountant-cell {
      min-width: 150px;
      text-align: left;
      position: relative;
      padding-right: 40px;
    }

    .settlement-detail-accountant-cell {
      display: table-cell;
    }

    .settlement-detail-dispatcher-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 2px 6px;
      background: #e8f5e9;
      color: #2e7d32;
      font-size: 11px;
      font-weight: 600;
      border-radius: 4px;
      white-space: nowrap;
    }

    .settlement-detail-accountant-meta {
      display: block;
      margin-top: 5px;
      color: #667b72;
      font-size: 12px;
      line-height: 1.35;
      white-space: nowrap;
    }

    .settlement-detail-accountant-real-name {
      display: block;
      margin-top: 5px;
      color: #667b72;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
    }

    .settlement-detail-special-accountant-badge {
      display: inline-flex;
      align-items: center;
      min-height: 20px;
      margin-top: 7px;
      padding: 0 7px;
      border: 1px solid #c9d8bd;
      border-radius: 999px;
      background: #edf5e5;
      color: #48663c;
      font-size: 11px;
      font-weight: 850;
      line-height: 1;
      white-space: nowrap;
    }

    .settlement-detail-order-cell {
      color: #24473d;
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      text-align: left;
      white-space: nowrap;
    }

    .settlement-detail-order-dispatcher-part,
    .settlement-detail-money-dispatcher-part {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      margin: 0 2px;
      padding: 0 5px;
      border-radius: 999px;
      background: #2e7d32;
      color: #fff;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .settlement-detail-money {
      position: relative;
      color: #173f34;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      text-align: right;
      white-space: nowrap;
    }

    .settlement-detail-money-formula {
      white-space: normal;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-size: 12px;
    }

    .settlement-detail-money:focus-visible {
      outline: 2px solid #86d2b2;
      outline-offset: -3px;
    }

    .settlement-detail-money-popover {
      position: absolute;
      left: 50%;
      top: calc(100% - 8px);
      z-index: 30;
      display: grid;
      gap: 2px;
      min-width: 220px;
      width: max-content;
      max-width: calc(100vw - 28px);
      padding: 7px 10px;
      border: 1px solid #94d6b7;
      border-radius: 10px;
      background: #effaf5;
      color: #173f34;
      box-shadow: 0 10px 24px rgba(28, 85, 65, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.72);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
      text-align: left;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, 4px);
      transition: opacity 0.12s ease, transform 0.12s ease;
      white-space: nowrap;
      overflow-wrap: normal;
    }

    .settlement-detail-money:hover .settlement-detail-money-popover,
    .settlement-detail-money:focus-visible .settlement-detail-money-popover {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    .settlement-detail-money-popover-row {
      display: grid;
      grid-template-columns: max-content max-content;
      column-gap: 4px;
      align-items: baseline;
    }

    .settlement-detail-money-popover-label {
      color: #425c52;
      font-weight: 700;
    }

    .settlement-detail-money-popover-value {
      color: #173f34;
      font-variant-numeric: tabular-nums;
      text-align: left;
      white-space: nowrap;
    }

    .settlement-detail-invoice-cell {
      width: 168px;
      min-width: 168px;
      max-width: 168px;
      text-align: center;
    }

    .settlement-detail-payout-cell {
      width: 136px;
      min-width: 136px;
      max-width: 136px;
      text-align: center;
    }

    .settlement-detail-name-cell {
      text-align: left;
      white-space: nowrap;
    }

    .settlement-detail-payout-actions {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .settlement-detail-payout-select {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #5b7268;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      white-space: nowrap;
    }

    .settlement-detail-payout-checkbox {
      width: 15px;
      height: 15px;
      margin: 0;
      accent-color: #208766;
      cursor: pointer;
    }

    .settlement-detail-payout-checkbox:disabled {
      cursor: not-allowed;
    }

    .settlement-detail-payout-state {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #d9e4de;
      background: #f7faf8;
      color: #546a61;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.35;
      white-space: nowrap;
    }

    .settlement-detail-payout-state.paid {
      border-color: #d9e4de;
      background: #fcfefd;
      color: #546a61;
    }

    .settlement-detail-payout-state.payable {
      border-color: #b8d8cc;
      background: #eaf6f1;
      color: #1f5d4e;
    }

    .settlement-detail-payout-state.pending_invoice {
      border-color: #d9e4de;
      background: #f7faf8;
      color: #546a61;
    }

    .settlement-detail-invoice-list {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      width: 100%;
      min-width: 0;
      overflow: visible;
    }

    .settlement-detail-invoice-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .settlement-detail-invoice-thumb {
      flex: 0 0 54px;
      position: relative;
      width: 54px;
      height: 42px;
      padding: 2px;
      border: 1px solid #d7c490;
      border-radius: var(--radius-md);
      background: #fffaf0;
      cursor: pointer;
      box-shadow: 0 6px 14px rgba(86, 63, 16, 0.1);
      transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .settlement-detail-invoice-thumb:hover,
    .settlement-detail-invoice-thumb:focus-visible {
      transform: translateY(-1px);
      border-color: #ba8c27;
      box-shadow: 0 10px 20px rgba(86, 63, 16, 0.16);
      outline: none;
    }

    .settlement-detail-invoice-thumb img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      border-radius: 8px;
      background: #f4ead0;
    }

    .settlement-detail-invoice-pending {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid #d9e4de;
      background: #f7faf8;
      color: #546a61;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
    }

    .settlement-detail-row.tone-pending .settlement-detail-invoice-pending {
      border-color: #d9e4de;
      background: #fcfefd;
      color: #546a61;
    }

    .settlement-detail-accountant {
      display: block;
      min-width: 0;
      color: #183f34;
      font-size: 16px;
      line-height: 1.25;
      word-break: break-all;
      white-space: normal;
      padding-right: 8px;
    }

    .settlement-detail-accountant.missing-recipient-info {
      color: #8a9691;
      font-weight: 780;
    }

    .dev-todo-form-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .dev-todo-form-actions .btn-primary {
      min-width: 108px;
      min-height: 46px;
      border-radius: 12px;
      padding: 10px 16px;
    }

    .dev-todo-list-panel {
      border: 1px solid #e0ebe5;
      border-radius: 14px;
      background: #fcfefd;
      padding: 12px;
      display: grid;
      gap: 10px;
    }

    .dev-todo-list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .dev-todo-list-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      color: #1f473b;
      letter-spacing: 0.2px;
    }

    .dev-todo-list {
      display: grid;
      gap: 8px;
      max-height: min(40vh, 360px);
      overflow: auto;
      padding-right: 2px;
    }

    .dev-todo-item {
      border: 1px solid #e2ece7;
      border-radius: 12px;
      background: #ffffff;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: start;
      gap: 10px;
    }

    .dev-todo-item-serial {
      grid-column: 1;
      width: 32px;
      min-height: 32px;
      border-radius: 999px;
      background: #eef6f2;
      color: #2b5f50;
      font-size: 11px;
      font-weight: 700;
      line-height: 32px;
      text-align: center;
      flex: 0 0 auto;
    }

    .dev-todo-item-delete {
      grid-column: 3;
      justify-self: end;
      align-self: center;
      min-width: 56px;
      min-height: 30px;
      border-radius: 999px;
      border: 1px solid #ead0d0;
      background: #fff8f8;
      color: #9c5252;
      font-size: 11px;
      font-weight: 700;
      padding: 0 10px;
    }

    .dev-todo-item-delete:hover {
      background: #fdeaea;
      color: #933939;
    }

    .dev-todo-item-text {
      grid-column: 2;
      margin: 0;
      word-break: break-word;
      color: #2e4d43;
      font-size: 14px;
      line-height: 1.55;
      padding-top: 4px;
    }

    .dev-todo-empty {
      padding: 14px 10px;
      border-radius: 12px;
      background: #f9fcfa;
      border: 1px dashed #dce7e1;
    }

    .accountant-list-wrap {
      margin: 0 22px 22px;
      border: 1px solid oklch(87% 0.024 165);
      border-radius: 12px;
      background: oklch(99.1% 0.005 165);
      padding: 0;
      max-height: min(62vh, 640px);
      overflow: auto;
      scrollbar-gutter: auto;
      scrollbar-width: thin;
      scrollbar-color: oklch(72% 0.035 165) transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .accountant-list-wrap::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    .accountant-list-wrap::-webkit-scrollbar-track {
      background: transparent;
    }

    .accountant-list-wrap::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: oklch(72% 0.035 165);
    }

    .accountant-list-wrap:focus {
      outline: none;
      border-color: oklch(78% 0.056 165);
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .accountant-table {
      width: 100%;
      min-width: 900px;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      font-size: 13.5px;
      color: #203e35;
    }

    .accountant-table thead th {
      position: sticky;
      top: 0;
      z-index: 1;
      height: 44px;
      padding: 10px 14px;
      background: oklch(96.9% 0.015 165);
      color: #48645b;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid oklch(88% 0.024 165);
    }

    .accountant-table tbody td {
      height: 56px;
      padding: 11px 14px;
      border-bottom: 1px solid oklch(91% 0.015 165);
      vertical-align: middle;
      background: oklch(99.4% 0.004 165);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      transition: background-color 0.16s ease;
    }

    .accountant-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .accountant-list-item {
      transition: background-color 0.16s ease;
    }

    .accountant-list-item:hover td {
      background: oklch(97.8% 0.013 165);
    }

    .accountant-list-item.recently-created td {
      background: oklch(95.5% 0.037 156);
    }

    .accountant-col-count,
    .accountant-col-action {
      text-align: center;
    }

    .accountant-col-action {
      width: 126px;
      white-space: nowrap;
      text-align: right;
    }

    .accountant-col-display {
      width: 18%;
    }

    .accountant-col-settlement-ratio {
      width: 116px;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .accountant-col-recipient {
      width: 24%;
      text-align: left;
    }

    .accountant-col-recipient[hidden] {
      display: none;
    }

    .accountant-col-phone {
      width: 20%;
      font-variant-numeric: tabular-nums;
    }

    .accountant-col-password {
      width: 14%;
      font-variant-numeric: tabular-nums;
    }

    .accountant-col-count {
      width: 88px;
    }

    .accountant-recipient-info {
      display: grid;
      gap: 2px;
      min-width: 0;
      font-size: 12px;
      line-height: 1.35;
      color: oklch(35% 0.03 160);
    }

    .accountant-recipient-line,
    .accountant-recipient-empty {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
    }

    .accountant-recipient-empty {
      color: oklch(54% 0.025 160);
      font-weight: 700;
    }

    .accountant-action-group {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      max-width: 100%;
      padding: 3px;
      border: 1px solid oklch(89.5% 0.012 165);
      border-radius: 9px;
      background: oklch(98.6% 0.006 165);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
      transition: border-color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
    }

    .accountant-list-item:hover .accountant-action-group,
    .accountant-list-item:focus-within .accountant-action-group {
      border-color: oklch(83% 0.038 165);
      background: oklch(99% 0.006 165);
      box-shadow: 0 8px 20px rgba(20, 68, 52, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    .accountant-action-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 48px;
      min-height: 28px;
      padding: 0 10px;
      border: 1px solid transparent;
      border-radius: 7px;
      background: transparent;
      box-shadow: none;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }

    .accountant-action-btn:focus-visible {
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.18);
    }

    .accountant-edit-btn {
      border-color: oklch(83% 0.052 165);
      background: oklch(95.5% 0.028 165);
      color: oklch(34% 0.08 165);
    }

    .accountant-edit-btn:hover {
      border-color: oklch(72% 0.086 165);
      background: oklch(92.8% 0.044 165);
      color: oklch(28% 0.092 165);
    }

    .accountant-delete-btn {
      color: oklch(48% 0.12 24);
    }

    .accountant-delete-btn:hover {
      border-color: oklch(80% 0.07 24);
      background: oklch(96.2% 0.025 24);
      color: oklch(41% 0.14 24);
    }

    .accountant-delete-btn:disabled {
      color: oklch(70% 0.012 165);
      background: transparent;
      cursor: not-allowed;
      opacity: 1;
    }

    .accountant-action-btn.is-loading {
      min-width: 70px;
    }

    .dispatcher-table .dispatcher-col-display {
      width: 16%;
    }

    .dispatcher-table .dispatcher-col-account {
      width: 10%;
      font-variant-numeric: tabular-nums;
    }

    .dispatcher-table .dispatcher-col-password {
      width: 10%;
      font-variant-numeric: tabular-nums;
    }

    .dispatcher-table .dispatcher-col-linked-accountant-alias {
      width: 18%;
    }

    .dispatcher-table .dispatcher-col-linked-accountant-phone {
      width: 16%;
      font-variant-numeric: tabular-nums;
    }

    .dispatcher-table .dispatcher-col-count,
    .dispatcher-table .dispatcher-col-accountant-count {
      width: 10%;
      text-align: center;
    }

    .dispatcher-self-view .accountant-table .accountant-col-phone,
    .dispatcher-self-view .accountant-table .accountant-col-password {
      display: none;
    }

    .accountant-table thead th.accountant-col-action {
      background: oklch(96.4% 0.018 165);
      color: #38564d;
      text-align: right;
    }

    .accountant-table tbody td.accountant-col-action {
      background: oklch(99.4% 0.004 165);
      padding-right: 6px;
      padding-left: 8px;
    }

    .accountant-list-item:hover td.accountant-col-action {
      background: oklch(97.8% 0.013 165);
    }

    .accountant-list-item.recently-created td.accountant-col-action {
      background: oklch(95.5% 0.037 156);
    }

    .accountant-item-sub {
      display: block;
      width: 100%;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      color: #5f776d;
      font-weight: 700;
      letter-spacing: 0;
    }

    .accountant-item-password {
      color: #335149;
      font-variant-numeric: tabular-nums;
      font-weight: 650;
    }

    .accountant-item-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      padding: 4px 8px;
      border: 1px solid oklch(86% 0.035 165);
      border-radius: 999px;
      background: oklch(96.8% 0.018 165);
      color: oklch(32% 0.064 165);
      font-size: 12px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
      line-height: 1.1;
    }

    @media (max-width: 760px) {
      .modal-overlay {
        align-items: stretch;
        justify-items: center;
        padding: 12px;
      }

      .invoice-upload-modal-card {
        width: min(100%, 560px);
        max-height: calc(100dvh - 24px);
        padding: 18px;
      }

      #invoiceUploadModalMeta {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .invoice-upload-meta-item {
        grid-template-columns: 1fr;
        gap: 5px;
        align-items: start;
      }

      .invoice-upload-meta-money-group .invoice-upload-meta-item {
        min-height: 0;
      }

      .invoice-upload-meta-value,
      .invoice-upload-meta-item.is-amount .invoice-upload-meta-value {
        font-size: 24px;
      }

      .accountant-modal-card {
        width: min(100%, 560px);
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
      }

      .accountant-modal-top {
        flex-direction: column;
      }

      .accountant-modal-actions {
        width: 100%;
      }

      .accountant-modal-create-btn {
        width: 100%;
      }

      .accountant-search-panel {
        margin: 0 12px;
      }

      .accountant-search-control {
        grid-template-columns: 1fr;
      }

      .accountant-search-clear {
        justify-self: stretch;
      }

      .accountant-list-wrap {
        margin: 0 12px 12px;
        max-height: none;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: auto;
      }

      .accountant-table {
        min-width: 0;
        border-spacing: 0 10px;
      }

      .accountant-table thead {
        display: none;
      }

      .accountant-table,
      .accountant-table tbody,
      .accountant-list-item,
      .accountant-table tbody td {
        display: block;
        width: 100%;
      }

      .accountant-list-item {
        border: 1px solid oklch(88% 0.022 165);
        border-radius: 12px;
        background: oklch(99.2% 0.005 165);
        box-shadow: 0 8px 20px rgba(17, 53, 40, 0.07), var(--inset-highlight);
        overflow: hidden;
      }

      .accountant-table tbody td {
        position: relative;
        height: auto;
        min-height: 42px;
        display: grid;
        grid-template-columns: minmax(72px, 0.32fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        border-bottom: 1px solid oklch(92% 0.012 165);
        background: transparent;
        white-space: normal;
        overflow: visible;
        text-align: left;
      }

      .accountant-table tbody td::before {
        content: attr(data-label);
        color: #60776e;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.25;
      }

      .accountant-table tbody td.accountant-col-action {
        grid-template-columns: 1fr;
        padding-top: 11px;
        background: oklch(97.3% 0.01 165);
        text-align: left;
      }

      .accountant-table tbody td.accountant-col-action::before {
        display: none;
      }

      .accountant-action-group {
        width: 100%;
        justify-content: stretch;
        gap: 8px;
        padding: 4px;
      }

      .accountant-action-btn {
        flex: 1 1 0;
        min-height: 34px;
      }

      .accountant-list-item:hover td,
      .accountant-list-item:hover td.accountant-col-action {
        background: transparent;
      }

      .accountant-list-item:hover td.accountant-col-action {
        background: oklch(97.3% 0.01 165);
      }
    }



    .complete-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0;
      padding-bottom: 12px;
      border-bottom: 1px solid #e1ede7;
    }

    .complete-modal-title {
      margin: 0;
      color: #20362e;
      font-size: 20px;
      font-weight: 800;
      line-height: 1.2;
    }

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

    .complete-form {
      grid-template-columns: 1fr;
      gap: 14px;
      align-items: start;
    }

    .check-form .field {
      grid-template-columns: 88px minmax(0, 1fr);
      align-items: center;
      column-gap: 10px;
      row-gap: 8px;
      padding: 6px 2px;
      border: 0;
      border-radius: 0;
      background: transparent;
    }

    .check-form .field > label {
      margin: 0;
      text-align: right;
      color: var(--muted);
      font-size: 13px;
    }

    .check-form .field > :is(input, textarea) {
      grid-column: 2;
      min-width: 0;
      border-color: #dfe9e4;
      background: #fff;
      box-shadow: none;
    }

    .check-form .field > :is(input, textarea):focus {
      border-color: #7cbca9;
      box-shadow: 0 0 0 2px rgba(31, 159, 134, 0.12);
    }

    .check-form .field.field-wide {
      grid-template-columns: 1fr;
      align-items: start;
      row-gap: 10px;
    }

    .check-form .field.field-wide > label {
      grid-column: 1;
      padding-top: 0;
      text-align: left;
      font-size: 14px;
      font-weight: 700;
      color: #476259;
    }

    .check-form .field.field-wide > textarea {
      grid-column: 1;
    }

    .check-form .field.field-wide textarea {
      min-height: 120px;
      line-height: 1.45;
    }

    .check-form .field.field-validation-group-error > .field-inline-error {
      grid-column: 2;
    }

    .check-form .field.field-wide.field-validation-group-error > .field-inline-error {
      grid-column: 1;
    }

    #checkForm {
      gap: 14px;
    }

    #checkForm .field {
      grid-template-columns: 1fr;
      align-items: start;
      gap: 7px;
      padding: 0;
    }

    #checkForm .field > label,
    #checkForm .field.field-wide > label {
      grid-column: 1;
      padding-top: 0;
      text-align: left;
      color: #3f5a50;
      font-size: 13px;
      font-weight: 800;
    }

    #checkForm .field > :is(input, textarea),
    #checkForm .field.field-wide > textarea {
      grid-column: 1;
      border-radius: 10px;
      background: #fbfefd;
    }

    #checkForm .field > input {
      min-height: 44px;
    }

    #checkForm .field.field-wide textarea {
      min-height: 112px;
      max-height: 260px;
      line-height: 1.5;
    }

    #checkForm .field.field-validation-group-error > .field-inline-error,
    #checkForm .field.field-wide.field-validation-group-error > .field-inline-error {
      grid-column: 1;
      margin-top: 0;
    }

    .complete-form .field-feedback-time {
      grid-template-columns: minmax(0, 240px);
      align-items: start;
      justify-content: start;
      gap: 7px;
      padding: 0;
    }

    .complete-form .field-feedback-text,
    .complete-form .form-actions {
      grid-column: 1;
    }

    .complete-form .field-feedback-text {
      padding: 0;
    }

    .complete-form .field-feedback-time > label {
      grid-column: 1;
      text-align: left;
      font-size: 13px;
      font-weight: 800;
      color: #3f5a50;
    }

    .complete-form .field-feedback-time > :is(input) {
      grid-column: 1;
      min-width: 0;
    }

    .complete-form .field-feedback-time > input {
      max-width: none;
      min-height: 44px;
      padding: 10px 12px;
      border-radius: 10px;
      border-color: #d8e5df;
      background: linear-gradient(180deg, #f4f8f6, #fbfdfc);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      color: #27453c;
      cursor: default;
      pointer-events: none;
      font-variant-numeric: tabular-nums;
    }

    .complete-form .field-feedback-text > textarea {
      min-width: 0;
      min-height: 118px;
      max-height: 260px;
      padding: 14px 16px;
      line-height: 1.5;
      border-radius: 10px;
      border-color: #dbe7e1;
      background: #fbfefd;
    }

    .complete-form .field-feedback-time.field-validation-group-error > .field-inline-error {
      grid-column: 1;
    }

    .complete-form .field-feedback-text.field-validation-group-error > .field-inline-error {
      grid-column: 1;
    }

    .confirm-modal-card {
      width: min(440px, 92vw);
      display: grid;
      gap: 18px;
    }

    .confirm-modal-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .confirm-modal-title {
      margin: 0;
      font-size: 22px;
      color: #28463d;
    }

    .confirm-modal-message {
      margin: 0;
      color: #49635a;
      font-size: 14px;
      line-height: 1.6;
      white-space: pre-line;
    }

    .confirm-modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .check-form .form-actions {
      margin-top: 4px;
      justify-content: flex-end;
    }

    .check-form .form-actions .btn-primary {
      min-width: 140px;
    }

    #checkForm .form-actions {
      display: flex;
      align-items: center;
      margin-top: 0;
      padding-top: 4px;
      justify-content: flex-end;
    }

    #checkForm .form-actions .btn-primary {
      flex: 0 0 auto;
      min-width: 132px;
      min-height: 42px;
      padding: 11px 24px;
      border-radius: 10px;
    }

    .complete-form .form-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 0;
      padding-top: 4px;
    }

    .complete-form.readonly .field-feedback-text > textarea {
      background: #f8fbf9;
      color: #27453c;
    }

    .complete-form.readonly .field-feedback-text > textarea {
      resize: none;
    }

    .complete-form.readonly .form-actions {
      justify-content: flex-end;
    }

    .complete-form .form-actions .btn-primary {
      flex: 0 0 auto;
      min-width: 132px;
      min-height: 42px;
      padding: 11px 24px;
      border-radius: 10px;
    }

    .complete-form .form-actions .btn-secondary {
      min-width: 120px;
      min-height: 46px;
      border-radius: 14px;
    }

    .recycle-modal-card {
      width: min(1400px, 98vw);
      max-height: calc(100vh - 30px);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .recycle-table-wrap {
      flex: 1;
      min-height: 0;
    }

    .recycle-table {
      min-width: 1880px;
      table-layout: auto;
    }

    .recycle-table td.summary {
      white-space: normal;
      line-height: 1.4;
      word-break: break-word;
      min-width: 260px;
    }

    .recycle-col-action {
      width: 88px;
      white-space: nowrap;
      text-align: center;
    }

    .recycle-table thead th.recycle-col-action {
      background: #dfeee6;
      color: #27453c;
      box-shadow: inset 1px 0 0 #cfe0d7, inset 0 -1px 0 #cfe0d7;
    }

    .recycle-table tbody td.recycle-col-action {
      background: #f2f8f4;
      box-shadow: inset 1px 0 0 #deebe4;
    }

    .recycle-table thead tr > th:last-child {
      background: #dfeee6 !important;
      color: #27453c;
    }

    .recycle-table tbody tr > td:last-child {
      background: #f2f8f4 !important;
      box-shadow: inset 1px 0 0 #deebe4;
    }

    .recycle-restore-btn {
      min-width: 56px;
      padding: 7px 12px;
      border-radius: 10px;
      line-height: 1.1;
    }

    .recycle-log-section {
      border: 1px solid #dceae3;
      border-radius: 10px;
      background: #fbfdfc;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    .recycle-log-title {
      margin: 0;
      font-size: 15px;
      color: #28483f;
    }

    .recycle-log-list {
      max-height: 220px;
      overflow: auto;
      display: grid;
      gap: 8px;
    }

    .recycle-log-item {
      border: 1px solid #d7e6de;
      background: #ffffff;
      border-radius: 8px;
      padding: 8px 10px;
      display: grid;
      gap: 5px;
    }

    .recycle-log-item-top {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: 12px;
      color: #4f675d;
    }

    .recycle-log-time {
      color: #547166;
      font-weight: 600;
    }

    .recycle-log-operator {
      border-radius: 999px;
      border: 1px solid #c1d9cd;
      background: #ecf8f2;
      color: #1f6b56;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      padding: 2px 8px;
    }

    .recycle-log-action {
      border-radius: 999px;
      border: 1px solid #c9d6d0;
      background: #f1f6f4;
      color: #5f746b;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      padding: 2px 8px;
    }

    .recycle-log-action.checked {
      border-color: #d1ad52;
      background: #fff2cb;
      color: #76580d;
    }

    .recycle-log-action.completed {
      border-color: #61ac89;
      background: #d3eee1;
      color: #0d6246;
    }

    .recycle-log-action.returned {
      border-color: #e2b2b2;
      background: #ffe8e8;
      color: #a43a3a;
    }

    .recycle-log-detail {
      color: #2f4d43;
      font-size: 13px;
      line-height: 1.35;
      word-break: break-word;
    }

    .analysis-content {
      overflow: auto;
      min-height: 0;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .analysis-modal-top,
    .customer-feedback-modal-top,
    .operation-records-top,
    .price-composition-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 0;
      margin-bottom: 2px;
    }

    .analysis-modal-heading {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .analysis-modal-title,
    .customer-feedback-modal-title,
    .operation-records-title,
    .price-composition-title {
      margin: 0;
      font-size: 20px;
      line-height: 1.2;
      color: #1f3f35;
    }

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

    .analysis-return-btn {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 7px 14px;
      border: 1px solid #b9d6ca;
      border-radius: 8px;
      background: #e5f1ec;
      color: #1f5f50;
      font-size: 13px;
      line-height: 1.1;
    }

    .analysis-action-btn {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 8px;
      font-size: 13px;
      line-height: 1.1;
    }

    .customer-feedback-modal-meta {
      margin: 5px 0 0;
      color: #648075;
      font-size: 13px;
      line-height: 1.35;
    }

    .customer-feedback-list {
      min-height: 0;
      overflow: auto;
      display: grid;
      gap: 8px;
      padding-right: 2px;
    }

    .customer-feedback-empty {
      border: 1px dashed #c9ddd4;
      border-radius: 10px;
      background: #fbfdfc;
      color: #627970;
      padding: 34px 18px;
      font-size: 14px;
      text-align: center;
    }

    .customer-feedback-group {
      border: 1px solid #c5ddd1;
      border-radius: 10px;
      background: linear-gradient(180deg, #f1faf5 0%, #ffffff 42%);
      padding: 10px;
      display: grid;
      gap: 7px;
      box-shadow: 0 10px 26px rgba(25, 82, 58, 0.08);
    }

    .customer-feedback-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-height: 40px;
      padding: 8px 10px;
      border-radius: 8px;
      background: #224b3d;
    }

    .customer-feedback-group-head h3 {
      margin: 0;
      color: #f7fffb;
      font-size: 17px;
      font-weight: 850;
      line-height: 1.25;
    }

    .customer-feedback-group-head span {
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.14);
      color: #f7fffb;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.1;
      white-space: nowrap;
    }

    .customer-feedback-group-list {
      display: grid;
      gap: 5px;
    }

    .customer-feedback-item {
      grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
      align-items: stretch;
      min-height: 64px;
      border: 1px solid #d7e7df;
      border-radius: 8px;
      background: #ffffff;
      padding: 0;
      display: grid;
      overflow: hidden;
      box-shadow: 0 6px 14px rgba(17, 53, 40, 0.05);
    }

    .customer-feedback-order {
      display: grid;
      align-content: center;
      min-width: 0;
      padding: 10px 14px;
      border-left: 1px solid #d7e7df;
      background: #f3f8f5;
      color: #173c32;
      font-size: 15px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .customer-feedback-item-text {
      display: grid;
      align-content: center;
      min-width: 0;
      padding: 10px 14px;
      color: #203f34;
      font-size: 15px;
      line-height: 1.5;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .operation-records-meta {
      margin: 4px 0 0;
      color: #648075;
      font-size: 13px;
      line-height: 1.35;
    }

    .operation-records-list {
      min-height: 0;
      max-height: min(680px, calc(100vh - 150px));
      overflow: auto;
      display: grid;
      gap: 8px;
      padding-right: 2px;
    }

    .operation-records-empty,
    .operation-record-item {
      border: 1px solid #d7e6de;
      background: #fbfdfc;
      border-radius: 8px;
      padding: 10px 12px;
    }

    .operation-records-empty {
      color: #6a8077;
      font-size: 14px;
      text-align: center;
    }

    .reminder-entry-btn {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 8px;
    }

    .monthly-settlement-quick-btn {
      min-height: 34px;
      padding: 7px 12px;
      border-radius: 8px;
      border: 1px solid #8cb8a6;
      background: #e7f3ee;
      color: #285744;
      font-weight: 700;
    }

    .monthly-settlement-quick-btn.is-due-today {
      border-color: #cf3030;
      background: #ffe1e1;
      color: #991f1f;
      box-shadow: 0 0 0 3px rgba(207, 48, 48, 0.16);
      animation: monthly-settlement-alert-pulse 0.9s ease-in-out infinite;
    }

    @keyframes monthly-settlement-alert-pulse {
      0%,
      100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 3px rgba(207, 48, 48, 0.14);
      }
      50% {
        transform: translateY(-1px) scale(1.04);
        box-shadow: 0 0 0 7px rgba(207, 48, 48, 0.28);
      }
    }

    .reminder-entry-btn.is-due {
      border-color: #d96565;
      background: #ffe3e3;
      color: #a33131;
      box-shadow: 0 0 0 3px rgba(217, 101, 101, 0.12);
    }

    .reminder-modal-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding-bottom: 2px;
    }

    .reminder-modal-title {
      margin: 0;
      color: #153a30;
      font-size: 21px;
      font-weight: 800;
      line-height: 1.15;
    }

    .reminder-modal-meta {
      margin: 6px 0 0;
      color: #5d746b;
      font-size: 13px;
      line-height: 1.35;
    }

    .reminder-form {
      display: grid;
      grid-template-columns: 164px minmax(0, 1fr) minmax(0, 1fr) auto;
      gap: 14px;
      align-items: end;
      border: 1px solid #cfe3da;
      background: #f7fbf9;
      border-radius: 10px;
      padding: 14px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

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

    .reminder-form label {
      color: #446358;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.1;
    }

    .reminder-form input {
      min-width: 0;
      height: 44px;
      border-color: #cbded5;
      border-radius: 9px;
      background: #ffffff;
      color: #1e2f29;
    }

    #reminderDateInput {
      padding-right: 34px;
      font-variant-numeric: tabular-nums;
    }

    #reminderSubmitBtn {
      min-width: 96px;
      height: 44px;
      border-radius: 9px;
      padding: 0 16px;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(14, 124, 102, 0.2);
    }

    .reminder-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 2px 2px 8px;
      scrollbar-width: thin;
    }

    .reminder-tab {
      flex: 0 0 auto;
      min-height: 34px;
      border: 1px solid #cfe3da;
      border-radius: 999px;
      background: #f7fbf9;
      color: #446358;
      padding: 7px 13px;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.15;
      white-space: nowrap;
      cursor: pointer;
    }

    .reminder-tab[aria-selected="true"] {
      border-color: #209f83;
      background: #209f83;
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(32, 159, 131, 0.18);
    }

    .reminder-tab:hover,
    .reminder-tab:focus-visible {
      border-color: #209f83;
    }

    .reminder-list {
      min-height: 0;
      max-height: min(520px, calc(100vh - 260px));
      overflow: auto;
      display: grid;
      gap: 8px;
      padding-right: 2px;
    }

    .reminder-item {
      border: 1px solid #d4e4dc;
      background: #ffffff;
      border-radius: 10px;
      padding: 12px;
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr) auto;
      align-items: center;
      gap: 14px;
      box-shadow: 0 8px 18px rgba(17, 53, 40, 0.05);
    }

    .reminder-item.is-due {
      border-color: #e2b2b2;
      background: linear-gradient(90deg, #fff4f4 0%, #ffffff 58%);
    }

    .reminder-item-date-block {
      align-self: stretch;
      min-height: 56px;
      display: grid;
      align-content: center;
      gap: 6px;
      padding: 10px 8px;
      border-radius: 9px;
      background: #f4faf7;
      text-align: center;
    }

    .reminder-item-main {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 6px 14px;
    }

    .reminder-item-date {
      color: #1f4b3f;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.1;
    }

    .reminder-item-status {
      justify-self: center;
      border-radius: 999px;
      background: #e6f4ee;
      color: #1b7560;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 800;
      line-height: 1.1;
      white-space: nowrap;
    }

    .reminder-item.is-due .reminder-item-date-block {
      background: #ffeaea;
    }

    .reminder-item.is-due .reminder-item-date,
    .reminder-item.is-due .reminder-item-status {
      color: #a33131;
    }

    .reminder-item.is-due .reminder-item-status {
      background: #ffdcdc;
    }

    .reminder-item-order {
      color: #24483d;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.25;
      word-break: break-word;
    }

    .reminder-item-wechat,
    .reminder-item-meta {
      color: #648075;
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }

    .reminder-item-meta {
      grid-column: 1 / -1;
    }

    .reminder-delete-btn {
      flex: 0 0 auto;
      border: 1px solid #e8b7b7;
      background: #fff2f2;
      color: #a63c3c;
      border-radius: 8px;
      min-width: 44px;
      min-height: 34px;
      padding: 7px 10px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .reminder-delete-btn:hover,
    .reminder-delete-btn:focus-visible {
      background: #ffe8e8;
      border-color: #d89f9f;
    }

    #reminderEmptyState {
      margin-top: 2px;
      border: 1px dashed #c9ddd4;
      border-radius: 10px;
      background: #fbfdfc;
      color: #627970;
      padding: 34px 18px;
      font-size: 14px;
    }

    @media (max-width: 760px) {
      .reminder-modal-card {
        padding: 18px;
      }

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

      #reminderSubmitBtn {
        width: 100%;
      }

      .reminder-item {
        align-items: stretch;
        grid-template-columns: 1fr;
      }

      .reminder-delete-btn {
        width: 100%;
      }
    }

    .operation-record-item {
      display: grid;
      gap: 6px;
    }

    .operation-record-item-top {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      color: #547166;
      font-size: 12px;
      line-height: 1.35;
    }

    .operation-record-time {
      color: #496a5d;
      font-weight: 700;
    }

    .operation-record-operator,
    .operation-record-action {
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      line-height: 1.1;
      padding: 2px 8px;
    }

    .operation-record-operator {
      border: 1px solid #c1d9cd;
      background: #ecf8f2;
      color: #1f6b56;
    }

    .operation-record-action {
      border: 1px solid #d5c487;
      background: #fff6d6;
      color: #785d10;
    }

    .operation-record-detail {
      color: #24483d;
      font-size: 13px;
      line-height: 1.4;
      word-break: break-word;
    }

    .operation-record-changes {
      color: #6a8077;
      font-size: 12px;
      line-height: 1.35;
      word-break: break-word;
    }

    .price-composition-chart {
      --platform-color: oklch(58% 0.15 142);
      --platform-deep: oklch(36% 0.12 142);
      --reception-color: oklch(65% 0.12 220);
      --reception-deep: oklch(45% 0.1 220);
      --accounting-color: oklch(42% 0.18 315);
      --accounting-deep: oklch(31% 0.15 315);
      --price-premium-left: 0%;
      --price-premium-width: 0%;
      --price-premium-center: 0%;
      --price-total-left: 0%;
      --price-total-width: 100%;
      --price-total-center: 50%;
      --price-result-left: 0%;
      --price-result-width: 100%;
      --price-premium-columns: 1fr 1fr;
      --price-total-columns: 4fr 1fr 5fr;
      --price-result-columns: 356fr 164fr 480fr;
      --price-split-gap: 8px;
      position: relative;
      display: grid;
      grid-template-columns: repeat(24, minmax(0, 1fr));
      grid-template-rows: 42px 74px 54px 72px 70px 76px;
      gap: 10px 12px;
      min-width: 860px;
      padding: 16px 20px 20px;
      overflow: hidden;
      border: 1px solid #d5e6de;
      border-radius: 10px;
      background:
        linear-gradient(180deg, rgba(237, 248, 255, 0.92), rgba(245, 252, 250, 0.98)),
        #f3fbff;
    }

    .price-bracket {
      grid-column: 1 / -1;
      grid-row: 1;
      display: grid;
      place-items: center;
      color: #f8fffb;
      font-size: 20px;
      font-weight: 800;
      line-height: 1;
      position: relative;
      min-height: 42px;
    }

    .price-bracket::before,
    .price-bracket::after {
      content: "";
      position: absolute;
      top: 50%;
      width: calc(50% - 136px);
      height: 1px;
      background: oklch(82% 0.026 164);
      opacity: 0.86;
    }

    .price-bracket::before {
      left: 0;
    }

    .price-bracket::after {
      right: 0;
    }

    .price-bracket-content,
    .price-node,
    .price-segment {
      display: grid;
      grid-template-rows: 16px 24px 15px;
      align-content: center;
      justify-items: center;
      gap: 3px;
      color: #f8fffb;
      text-align: center;
      font-size: 13px;
      font-weight: 760;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    }

    .price-node,
    .price-segment {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 8px 18px rgba(31, 75, 62, 0.12);
    }

    .price-label {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 820;
      letter-spacing: 0;
    }

    .price-bracket-content {
      min-width: 190px;
      padding: 6px 18px 7px;
      border-radius: 999px;
      grid-template-rows: 14px 25px;
      gap: 4px;
      background: linear-gradient(180deg, oklch(38% 0.11 164), oklch(31% 0.09 164));
      color: #f8fffb;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
      box-shadow: 0 8px 18px rgba(31, 75, 62, 0.14);
      position: relative;
      z-index: 1;
    }

    .price-bracket-content .price-label {
      font-size: 13px;
      font-weight: 820;
      color: oklch(93% 0.018 164);
    }

    .price-bracket-content strong,
    .price-node strong,
    .price-segment strong {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      font-size: 19px;
      font-weight: 820;
      line-height: 1.05;
      white-space: nowrap;
    }

    .price-bracket-content strong {
      font-size: 24px;
      font-weight: 900;
    }

    .price-percent {
      font-variant-numeric: tabular-nums;
      font-feature-settings: "tnum" 1;
      font-size: 13px;
      font-weight: 760;
      line-height: 1;
      opacity: 0.86;
      white-space: nowrap;
    }

    .price-node-premium,
    .price-split-premium .price-segment {
      grid-template-rows: 14px 20px 13px;
      gap: 2px;
      min-width: 0;
    }

    .price-node-premium .price-label,
    .price-split-premium .price-label {
      font-size: 11px;
    }

    .price-node-premium strong,
    .price-split-premium strong {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 15px;
    }

    .price-node-premium .price-percent,
    .price-split-premium .price-percent {
      font-size: 12px;
    }

    .price-node {
      border-radius: 7px;
      min-height: 70px;
    }

    .price-node-premium {
      grid-column: 1 / 25;
      grid-row: 2;
      justify-self: start;
      width: var(--price-premium-width);
      margin-left: var(--price-premium-left);
      background: linear-gradient(180deg, var(--platform-deep), oklch(33% 0.1 142));
    }

    .price-node-total {
      grid-column: 1 / 25;
      grid-row: 2;
      justify-self: start;
      width: var(--price-total-width);
      margin-left: var(--price-total-left);
      border-left: var(--price-split-gap) solid transparent;
      background: linear-gradient(180deg, var(--accounting-color), var(--accounting-deep));
      background-clip: padding-box;
    }

    .price-split-map {
      grid-column: 1 / 25;
      grid-row: 3;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .price-split-trunk,
    .price-split-line,
    .price-split-trunk-line {
      fill: none;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.74;
    }

    .price-split-trunk {
      stroke: rgba(72, 94, 104, 0.58);
      opacity: 0.82;
    }

    .price-split-arrow {
      opacity: 0.9;
    }

    .price-split-line.platform,
    .price-split-trunk-line.platform {
      stroke: var(--platform-color);
    }

    .price-split-arrow.platform {
      fill: var(--platform-color);
    }

    .price-split-line.reception,
    .price-split-trunk-line.reception {
      stroke: var(--reception-color);
    }

    .price-split-arrow.reception {
      fill: var(--reception-color);
    }

    .price-split-line.accounting,
    .price-split-trunk-line.accounting {
      stroke: var(--accounting-color);
    }

    .price-split-arrow.accounting {
      fill: var(--accounting-color);
    }

    .price-split {
      display: grid;
      overflow: hidden;
      border-radius: 7px;
      min-height: 72px;
      box-shadow: 0 8px 18px rgba(31, 75, 62, 0.12);
    }

    .price-split-premium {
      grid-column: 1 / 25;
      grid-row: 4;
      justify-self: start;
      width: var(--price-premium-width);
      margin-left: var(--price-premium-left);
      grid-template-columns: var(--price-premium-columns);
    }

    .price-split-total {
      grid-column: 1 / 25;
      grid-row: 4;
      justify-self: start;
      width: var(--price-total-width);
      margin-left: var(--price-total-left);
      border-left: var(--price-split-gap) solid transparent;
      background-clip: padding-box;
      grid-template-columns: var(--price-total-columns);
    }

    .price-segment.platform {
      background: linear-gradient(180deg, var(--platform-color), oklch(54% 0.14 142));
    }

    .price-segment.reception {
      background: linear-gradient(180deg, var(--reception-color), var(--reception-deep));
    }

    .price-segment-clickable {
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .price-segment-clickable:hover {
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 12px 24px rgba(31, 75, 62, 0.2);
    }

    .price-segment.accounting {
      background: linear-gradient(180deg, var(--accounting-color), var(--accounting-deep));
    }

    .price-flow-map {
      grid-column: 1 / 25;
      grid-row: 5;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .price-flow-line,
    .price-flow-trunk {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.74;
    }

    .price-flow-arrow {
      opacity: 0.9;
    }

    .price-flow-line.platform,
    .price-flow-trunk.platform {
      stroke: var(--platform-color);
    }

    .price-flow-arrow.platform {
      fill: var(--platform-color);
    }

    .price-flow-line.reception,
    .price-flow-trunk.reception {
      stroke: var(--reception-color);
    }

    .price-flow-arrow.reception {
      fill: var(--reception-color);
    }

    .price-flow-line.accounting {
      stroke: var(--accounting-color);
    }

    .price-flow-arrow.accounting {
      fill: var(--accounting-color);
    }

    .price-result {
      grid-column: 1 / 25;
      grid-row: 6;
      display: grid;
      justify-self: start;
      width: var(--price-result-width);
      margin-left: var(--price-result-left);
      grid-template-columns: var(--price-result-columns);
      overflow: hidden;
      border-radius: 7px;
      min-height: 72px;
      box-shadow: 0 10px 22px rgba(31, 75, 62, 0.14);
    }

    .analysis-scope {
      font-size: 13px;
      color: #476057;
      background: #eef7f2;
      border: 1px solid #d5e6de;
      border-radius: 10px;
      padding: 8px 10px;
    }

    .analysis-trend-card {
      border: 1px solid #dceae3;
      border: 1px solid oklch(88% 0.024 164);
      border-radius: 10px;
      background: #fbfdfc;
      background: oklch(98.5% 0.006 164);
      padding: 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
      gap: 14px;
      align-items: stretch;
      min-height: 324px;
    }

    .analysis-trend-main {
      min-width: 0;
      display: grid;
      grid-template-rows: auto minmax(260px, 1fr);
      gap: 8px;
    }

    .analysis-trend-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
    }

    .analysis-trend-head h3,
    .analysis-trend-summary h3 {
      margin: 0;
      color: #28483f;
      font-size: 15px;
      line-height: 1.25;
    }

    .analysis-trend-head p {
      margin: 4px 0 0;
      color: #61746c;
      font-size: 12px;
      line-height: 1.35;
    }

    .analysis-trend-badge {
      border: 1px solid #c8ddd4;
      border: 1px solid oklch(85% 0.03 164);
      background: #f1f8f4;
      background: oklch(96% 0.014 164);
      color: #35554b;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      line-height: 1.2;
    }

    .analysis-trend-chart {
      min-width: 0;
      width: 100%;
      height: 270px;
      position: relative;
    }

    .analysis-chart-state {
      height: 100%;
      display: grid;
      place-items: center;
      color: #61746c;
      font-size: 13px;
      background: #f4faf7;
      border-radius: 8px;
    }

    .analysis-chart-tooltip {
      display: grid;
      gap: 3px;
      font-size: 12px;
      line-height: 1.35;
      max-width: 280px;
    }

    .analysis-chart-tooltip strong {
      color: #1d4137;
      font-size: 13px;
    }

    .analysis-chart-tooltip .analysis-chart-weekend-date {
      color: #d7352d;
    }

    .analysis-trend-summary {
      border: 1px solid #dceae3;
      border: 1px solid oklch(88% 0.024 164);
      border-radius: 8px;
      background: #f4faf7;
      background: oklch(97.5% 0.012 164);
      padding: 10px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 8px;
      min-width: 0;
    }

    .analysis-trend-summary-list {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    .analysis-trend-summary-item {
      border-bottom: 1px solid #dceae3;
      padding-bottom: 8px;
      min-width: 0;
    }

    .analysis-trend-summary-item:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .analysis-trend-summary-label {
      color: #61746c;
      font-size: 12px;
      margin-bottom: 4px;
    }

    .analysis-trend-summary-value {
      color: #1d4137;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    .analysis-trend-summary-meta {
      color: #61746c;
      font-size: 12px;
      line-height: 1.35;
      margin-top: 3px;
      overflow-wrap: anywhere;
    }

    .analysis-kpis {
      display: grid;
      grid-template-columns: repeat(6, minmax(120px, 1fr));
      gap: 10px;
    }

    .analysis-kpi {
      border: 1px solid #dceae3;
      border-radius: 10px;
      background: #fbfdfc;
      padding: 10px 12px;
    }

    .analysis-kpi-label {
      font-size: 12px;
      color: #61746c;
      margin-bottom: 5px;
    }

    .analysis-kpi-value {
      font-size: 20px;
      color: #1d4137;
      font-weight: 700;
      line-height: 1.2;
    }

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

    .analysis-panel {
      border: 1px solid #dceae3;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      overflow: auto;
    }

    .analysis-panel-wide {
      grid-column: 1 / -1;
    }

    .analysis-panel h3 {
      margin: 0 0 8px;
      font-size: 15px;
      color: #28483f;
    }

    .analysis-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin: 0 0 8px;
    }

    .analysis-panel-header h3 {
      margin: 0;
    }

    .analysis-panel-title-meta {
      display: inline-flex;
      margin-left: 8px;
      color: #61746c;
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
      vertical-align: 1px;
    }

    .analysis-panel-meta {
      font-size: 12px;
      color: #61746c;
      white-space: nowrap;
    }

    .analysis-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }

    .analysis-table th,
    .analysis-table td {
      border-bottom: 1px solid #e8f0ec;
      padding: 6px 8px;
      white-space: nowrap;
    }

    .analysis-table th {
      color: #43645a;
      background: #f4faf7;
      position: sticky;
      top: 0;
      z-index: 1;
      text-align: center;
    }

    .analysis-th-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .analysis-th-label {
      white-space: nowrap;
    }

    .analysis-th-total {
      font-size: 11px;
      font-weight: 600;
      color: #486057;
      white-space: nowrap;
      line-height: 1.1;
    }

    .analysis-table td {
      text-align: center;
    }

    .analysis-accountant-table-wrap {
      overflow: auto;
    }

    .analysis-accountant-table {
      min-width: var(--analysis-accountant-table-min-width, 880px);
    }

    .analysis-accountant-table th {
      background: #eef8f3;
    }

    .analysis-accountant-sort-btn {
      width: 100%;
      min-height: 38px;
      border: 0;
      border-radius: 8px;
      padding: 5px 7px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: transparent;
      color: #35554b;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    .analysis-accountant-sort-main {
      min-width: 0;
      display: grid;
      gap: 2px;
      justify-items: center;
      line-height: 1.15;
    }

    .analysis-accountant-sort-summary {
      max-width: 100%;
      color: #5f786e;
      font-size: 10px;
      font-weight: 750;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-variant-numeric: tabular-nums;
    }

    .analysis-accountant-sort-btn:hover,
    .analysis-accountant-sort-btn:focus-visible {
      background: #dcefe7;
      outline: none;
    }

    .analysis-accountant-sort-btn.active {
      background: #d8eadf;
      color: #184f3e;
    }

    .analysis-accountant-sort-mark {
      min-width: 12px;
      color: #59756b;
      font-size: 12px;
      line-height: 1;
    }

    .analysis-accountant-table td {
      vertical-align: middle;
    }

    .analysis-accountant-table tbody tr {
      transition: background 0.14s ease, box-shadow 0.14s ease;
    }

    .analysis-accountant-table tbody tr:hover,
    .analysis-accountant-table tbody tr:focus-within {
      background: #f1faf6;
      box-shadow: inset 3px 0 0 #23765b;
    }

    .analysis-accountant-table tbody tr:hover td,
    .analysis-accountant-table tbody tr:focus-within td {
      border-bottom-color: #cfe4da;
    }

    .analysis-accountant-table tbody tr:hover .analysis-accountant-rank,
    .analysis-accountant-table tbody tr:focus-within .analysis-accountant-rank {
      background: #d9eee5;
      color: #17614a;
    }

    .analysis-accountant-table tbody tr:hover .analysis-accountant-bar,
    .analysis-accountant-table tbody tr:focus-within .analysis-accountant-bar {
      background: #dcebe4;
    }

    .analysis-accountant-name-cell {
      text-align: left !important;
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 150px;
    }

    .analysis-accountant-rank {
      width: 24px;
      height: 24px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e7f1ec;
      color: #2d5b4c;
      font-size: 11px;
      font-weight: 800;
      flex: 0 0 auto;
    }

    .analysis-accountant-name {
      min-width: 0;
      color: #213f35;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .analysis-accountant-name-wrap {
      position: relative;
      min-width: 0;
      max-width: 100%;
      display: inline-flex;
      padding-right: 18px;
      padding-bottom: 7px;
      line-height: 1.2;
    }

    .analysis-accountant-dispatcher-badge {
      position: absolute;
      right: 0;
      bottom: 0;
      display: inline-grid;
      min-width: 15px;
      height: 15px;
      padding: 0 3px;
      place-items: center;
      border: 1px solid rgba(0, 117, 96, 0.24);
      border-radius: 999px;
      background: #e8f7f1;
      color: #007560;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
    }

    .analysis-accountant-metric {
      min-width: 128px;
      display: grid;
      gap: 6px;
      justify-items: stretch;
    }

    .analysis-accountant-metric strong {
      color: #1f3f35;
      font-size: 12px;
      line-height: 1.2;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .analysis-accountant-bar {
      height: 7px;
      border-radius: 999px;
      background: #e8f0ec;
      overflow: hidden;
    }

    .analysis-accountant-bar::before {
      content: "";
      display: block;
      width: var(--bar-value, 0%);
      height: 100%;
      border-radius: inherit;
      background: #4f947c;
    }

    .analysis-accountant-bar-total::before {
      background: #2f63aa;
    }

    .analysis-accountant-bar-settlement::before {
      background: #23765b;
    }

    .analysis-accountant-bar-ratio::before {
      background: #d48634;
    }

    .analysis-accountant-bar-average::before {
      background: #3c7c87;
    }

    .analysis-accountant-dispatcher-count {
      position: relative;
      min-width: 58px;
      height: 28px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid #e4eee9;
      border-radius: 8px;
      background: #f8fbf9;
      color: #789087;
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
    }

    .analysis-accountant-dispatcher-count::before {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: var(--bar-value, 0%);
      height: 4px;
      border-radius: 999px;
      background: #b7d4c8;
    }

    .analysis-accountant-dispatcher-count span {
      position: relative;
      z-index: 1;
    }

    .analysis-accountant-dispatcher-count.is-active {
      border-color: rgba(35, 118, 91, 0.24);
      background: #ecf7f2;
      color: #184f3e;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.68);
    }

    .analysis-accountant-dispatcher-count.is-active::before {
      background: #23765b;
    }

    .analysis-empty {
      color: #6b7f77;
      font-size: 13px;
      padding: 10px 2px;
    }

    .analysis-tags {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .analysis-tag {
      border: 1px solid #c8ddd4;
      background: #f1f8f4;
      color: #35554b;
      border-radius: 999px;
      font-size: 12px;
      padding: 4px 9px;
      line-height: 1.2;
      font-weight: 700;
    }

    .modal-overlay.modal-enter {
      animation: overlay-fade-in 0.24s ease both;
    }

    .modal-card.modal-enter {
      animation: modal-pop-in 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }

    @keyframes overlay-fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes modal-pop-in {
      from {
        opacity: 0;
        transform: translateY(24px) scale(0.92);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    table {
      width: max-content;
      min-width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: auto;
      background: #fff;
    }

    col.col-select {
      width: 58px;
    }

    col.col-date {
      width: 76px;
    }

    col.col-completed-at {
      width: 142px;
    }

    col.col-dispatcher {
      width: 68px;
    }

    col.col-accountant {
      width: 92px;
    }

    col.col-platform {
      width: 80px;
    }

    col.col-shop {
      width: 112px;
    }

    col.col-order {
      width: 118px;
    }

    col.col-source {
      width: 74px;
    }

    col.col-customer {
      width: 96px;
    }

    col.col-summary {
      width: 180px;
    }

    col.col-remark {
      width: 168px;
    }

    col.col-payment {
      width: 156px;
    }

    col.col-total {
      width: 116px;
    }

    col.col-premium {
      width: 156px;
    }

    col.col-settlement {
      width: 148px;
    }

    col.col-monthly-settlement {
      width: 124px;
    }

    col.col-status {
      width: var(--table-sticky-status-width);
    }

    col.col-action {
      width: var(--table-sticky-action-width);
    }

    #appPage {
      --table-sticky-status-width: 168px;
      --table-sticky-action-width: 188px;
      --table-scrollbar-mask-width: calc(var(--table-sticky-status-width) + var(--table-sticky-action-width));
      --table-action-history-width: 0px;
      --table-action-edit-width: 0px;
      --table-action-delete-width: 0px;
      --table-action-check-width: 0px;
    }

    #appPage.accountant-view {
      --table-sticky-action-width: 168px;
      --table-scrollbar-mask-width: calc(var(--table-sticky-status-width) + var(--table-sticky-action-width));
    }

    #appPage.accountant-view col.col-accountant,
    #appPage.accountant-view col.col-platform,
    #appPage.accountant-view col.col-shop,
    #appPage.accountant-view col.col-order,
    #appPage.accountant-view col.col-source,
    #appPage.accountant-view col.col-remark,
    #appPage.accountant-view col.col-payment,
    #appPage.accountant-view col.col-premium,
    #appPage.accountant-view .data-col-accountant,
    #appPage.accountant-view .data-col-platform,
    #appPage.accountant-view .data-col-shop,
    #appPage.accountant-view .data-col-order,
    #appPage.accountant-view .data-col-source,
    #appPage.accountant-view .data-col-remark,
    #appPage.accountant-view td.remark,
    #appPage.accountant-view .data-col-payment,
    #appPage.accountant-view .data-col-premium,
    #appPage.accountant-view #filterSettlementRatioIndicator,
    #appPage.accountant-view .recycle-col-accountant,
    #appPage.accountant-view .recycle-col-payment,
    #appPage.accountant-view .recycle-col-premium,
    #appPage.accountant-view .recycle-col-action {
      display: none;
    }

    .data-col-completed-at {
      font-variant-numeric: tabular-nums;
    }

    body.dispatcher-self-view col.col-dispatcher,
    body.dispatcher-self-view .data-col-dispatcher,
    body.dispatcher-self-view .recycle-col-dispatcher {
      display: none;
    }

    td {
      text-align: center;
    }

    #tableBody td {
      height: 41px;
      line-height: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #tableBody tr.boss-selected-row td {
      background: #e7f5ee;
    }

    #tableBody tr.updated-record-row td {
      background: #fff2c9;
      border-bottom-color: #efd89c;
    }

    #tableBody tr.updated-record-row:hover td {
      background: #ffedbc;
    }

    #tableBody tr:hover td {
      background: #edf8f3;
    }

    #tableBody tr.boss-selected-row:hover td {
      background: #dcf0e7;
    }

    #tableBody tr.updated-record-row:hover td {
      background: #ffedbc;
    }

    .data-col-select,
    .table-select-cell {
      width: 58px;
      min-width: 58px;
      text-align: center;
      padding-left: 8px;
      padding-right: 8px;
    }

    .table-select-cell.disabled {
      cursor: not-allowed;
    }

    .data-col-status {
      --table-status-divider-color: #c9ddd4;
      text-align: center;
      position: sticky;
      right: var(--table-sticky-action-width);
      z-index: 2;
      width: var(--table-sticky-status-width);
      min-width: var(--table-sticky-status-width);
      max-width: var(--table-sticky-status-width);
      box-sizing: border-box;
      background-clip: border-box;
      isolation: isolate;
    }

    .data-col-payment,
    .data-col-total,
    .data-col-premium,
    .data-col-settlement,
    .data-col-monthly-settlement,
    .recycle-col-payment,
    .recycle-col-total,
    .recycle-col-premium,
    .recycle-col-settlement {
      font-variant-numeric: tabular-nums;
    }

    td.data-col-accountant {
      position: relative;
      padding-inline: 10px 18px;
    }

    .accountant-cell {
      display: inline-flex;
      max-width: 100%;
      min-width: 0;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
    }

    .accountant-cell-name {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .accountant-dispatcher-badge {
      position: absolute;
      right: 4px;
      bottom: 3px;
      display: inline-grid;
      min-width: 15px;
      height: 15px;
      padding: 0 3px;
      place-items: center;
      border: 1px solid rgba(0, 117, 96, 0.24);
      border-radius: 999px;
      background: #e8f7f1;
      color: #007560;
      font-size: 9px;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
      pointer-events: auto;
    }

    td.data-col-payment,
    td.data-col-total,
    td.data-col-premium,
    td.data-col-settlement,
    td.data-col-monthly-settlement,
    td.recycle-col-payment,
    td.recycle-col-total,
    td.recycle-col-premium,
    td.recycle-col-settlement {
      padding-inline: 12px;
      text-align: center;
    }

    th.data-col-payment,
    th.data-col-total,
    th.data-col-premium,
    th.data-col-settlement,
    th.data-col-monthly-settlement,
    .recycle-table thead th.recycle-col-payment,
    .recycle-table thead th.recycle-col-total,
    .recycle-table thead th.recycle-col-premium,
    .recycle-table thead th.recycle-col-settlement {
      padding-inline: 12px;
    }

    th.data-col-payment .sort-btn,
    th.data-col-total .sort-btn,
    th.data-col-premium .sort-btn,
    th.data-col-settlement .sort-btn,
    th.data-col-monthly-settlement .sort-btn {
      width: 100%;
      align-items: stretch;
    }

    th.data-col-payment .sort-btn-label,
    th.data-col-payment .sort-btn-meta,
    th.data-col-total .sort-btn-label,
    th.data-col-total .sort-btn-meta,
    th.data-col-premium .sort-btn-label,
    th.data-col-premium .sort-btn-meta,
    th.data-col-settlement .sort-btn-label,
    th.data-col-settlement .sort-btn-meta,
    th.data-col-monthly-settlement .sort-btn-label,
    th.data-col-monthly-settlement .sort-btn-meta {
      display: block;
      width: 100%;
      text-align: center;
    }

    th.data-col-payment .sort-btn-meta,
    th.data-col-total .sort-btn-meta,
    th.data-col-premium .sort-btn-meta,
    th.data-col-settlement .sort-btn-meta,
    th.data-col-monthly-settlement .sort-btn-meta {
      line-height: 1.2;
      font-variant-numeric: tabular-nums;
    }

    th.data-col-status .th-inner {
      width: 100%;
      justify-content: center;
    }

    th.data-col-status .sort-btn {
      align-items: center;
      text-align: center;
    }

    .table-select-all {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #35564a;
      cursor: pointer;
      user-select: none;
    }

    .table-select-checkbox {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: #0e7c66;
      cursor: pointer;
    }

    .table-select-checkbox:disabled {
      cursor: not-allowed;
      opacity: 0.28;
      filter: grayscale(1);
    }

    .row-date-cell {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-width: 0;
    }

    .row-date-text {
      min-width: 0;
    }

    .row-date-update {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid rgba(222, 182, 110, 0.92);
      background: #fff5de;
      color: #8b5a08;
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    .row-status-cell {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      min-height: 32px;
      flex-wrap: nowrap;
      margin-inline: 0;
      box-sizing: border-box;
    }

    .record-status-refund-badge {
      position: absolute;
      right: 8px;
      bottom: -3px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      min-height: 16px;
      border: 1px solid oklch(73% 0.13 75);
      border-radius: 999px;
      background: oklch(95% 0.055 82);
      color: oklch(39% 0.105 63);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      padding: 2px 6px;
      white-space: nowrap;
      pointer-events: none;
    }

    .record-status-refund-badge.returned {
      border-color: oklch(72% 0.13 28);
      background: oklch(95% 0.04 28);
      color: oklch(43% 0.14 28);
    }

    #tableBody tr.dispatcher-current-row .dispatcher-chip {
      border-color: #0b7a63;
      background: linear-gradient(135deg, #0e7c66, #1a9a7f);
      color: #ffffff;
      box-shadow: 0 0 0 2px rgba(14, 124, 102, 0.2), 0 6px 12px rgba(12, 86, 69, 0.22);
    }

    #tableBody tr.dispatcher-current-row:hover .dispatcher-chip {
      border-color: #096d59;
      background: linear-gradient(135deg, #0b6f5b, #15896f);
    }

    .row-action-wrap {
      display: grid;
      grid-template-columns:
        minmax(0, var(--table-action-history-width))
        minmax(0, var(--table-action-edit-width))
        minmax(0, var(--table-action-revoke-settlement-width))
        minmax(0, var(--table-action-delete-width))
        minmax(0, var(--table-action-check-width));
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 36px;
      padding-inline: 2px;
      width: max-content;
      max-width: 100%;
      margin-inline: auto;
    }

    #appPage.accountant-view .row-action-wrap {
      grid-template-columns:
        minmax(0, var(--table-action-history-width))
        minmax(0, var(--table-action-edit-width))
        minmax(0, var(--table-action-check-width));
      gap: 4px;
    }

    th.data-col-action {
      position: sticky;
      right: 0;
      z-index: 4;
      width: var(--table-sticky-action-width);
      min-width: var(--table-sticky-action-width);
      max-width: var(--table-sticky-action-width);
      box-sizing: border-box;
      background: linear-gradient(180deg, #cfdfd5 0%, #bccfc1 100%);
      color: #183b31;
      text-align: center;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), inset 0 -1px 0 rgba(127, 151, 140, 0.38);
    }

    th.data-col-action::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 0;
      bottom: 0;
      width: 6px;
      background: inherit;
      pointer-events: none;
    }

    #tableBody td.row-action-cell {
      position: sticky;
      right: 0;
      z-index: 5;
      width: var(--table-sticky-action-width);
      min-width: var(--table-sticky-action-width);
      max-width: var(--table-sticky-action-width);
      box-sizing: border-box;
      background-clip: border-box;
      background: #f7fbf8;
      overflow: visible;
    }

    #tableBody td.row-action-cell::before {
      content: "";
      position: absolute;
      left: -4px;
      top: 0;
      bottom: 0;
      width: 6px;
      background: inherit;
      pointer-events: none;
      z-index: 1;
    }

    #tableBody td.row-action-cell > * {
      position: relative;
      z-index: 2;
    }

    #tableBody tr:hover td.row-action-cell {
      background: #e7f3ed;
    }

    #tableBody tr.boss-selected-row td.row-action-cell {
      background: #dcefe6;
    }

    #tableBody tr.boss-selected-row:hover td.row-action-cell {
      background: #d2e9df;
    }

    #tableBody tr.updated-record-row td.row-action-cell {
      background: #fff2c9;
    }

    #tableBody tr.updated-record-row:hover td.row-action-cell {
      background: #ffedbc;
    }

    th.data-col-status {
      --table-status-divider-color: rgba(118, 146, 133, 0.62);
      position: sticky;
      right: var(--table-sticky-action-width);
      z-index: 3;
      width: var(--table-sticky-status-width);
      min-width: var(--table-sticky-status-width);
      max-width: var(--table-sticky-status-width);
      box-sizing: border-box;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), inset 0 -1px 0 rgba(127, 151, 140, 0.38);
    }

    .table-wrap > table > thead th {
      z-index: 10;
      overflow: visible;
    }

    .table-wrap > table > thead th.data-col-status {
      z-index: 12;
    }

    .table-wrap > table > thead th.data-col-action {
      z-index: 15;
    }

    .table-wrap > table > thead th:has(.filter-popover:not([hidden])) {
      z-index: 30;
    }

    #tableBody td.data-col-status {
      --table-status-divider-color: #c9ddd4;
      width: var(--table-sticky-status-width);
      min-width: var(--table-sticky-status-width);
      max-width: var(--table-sticky-status-width);
      box-sizing: border-box;
      background-clip: border-box;
      background: #f7fbf8;
      box-shadow: none;
    }

    #tableBody tr:hover td.data-col-status {
      background: #e7f3ed;
    }

    #tableBody tr.boss-selected-row td.data-col-status {
      --table-status-divider-color: #b6d4c6;
      background: #dcefe6;
    }

    #tableBody tr.boss-selected-row:hover td.data-col-status {
      background: #d2e9df;
    }

    #tableBody tr.updated-record-row td.data-col-status {
      --table-status-divider-color: #e5c56f;
      background: #fff2c9;
    }

    #tableBody tr.updated-record-row:hover td.data-col-status {
      background: #ffedbc;
    }

    #tableBody tr.monthly-settlement-due-row td,
    #tableBody tr.monthly-settlement-due-row td.row-action-cell,
    #tableBody tr.monthly-settlement-due-row td.data-col-status {
      background: #ffe4e4;
      border-bottom-color: #e7a1a1;
      color: #8f1f1f;
    }

    #tableBody tr.monthly-settlement-due-row:hover td,
    #tableBody tr.monthly-settlement-due-row:hover td.row-action-cell,
    #tableBody tr.monthly-settlement-due-row:hover td.data-col-status {
      background: #ffd6d6;
    }

    .row-edit-btn,
    .row-refund-btn,
    .row-settlement-revoke-btn,
    .row-delete-btn,
    .row-check-btn,
    .row-history-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 56px;
      border: 1px solid #e8b7b7;
      background: #fff2f2;
      color: #a63c3c;
      border-radius: 999px;
      min-height: 28px;
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      opacity: 1;
      pointer-events: auto;
      transition: opacity 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
    }

    .row-edit-btn {
      grid-column: 2;
      border-color: #9dcdbd;
      background: #ebf8f2;
      color: #1d6f58;
    }

    .row-refund-btn {
      grid-column: 2;
      border-color: #d7a45d;
      background: #fff3d9;
      color: #865410;
    }

    .row-check-btn {
      grid-column: 5;
      border-color: #a9b6be;
      background: #e7edf0;
      color: #43525b;
    }

    .row-history-btn {
      grid-column: 1;
      gap: 6px;
      border-color: #bfd4cb;
      background: #eff7f3;
      color: #2c6755;
      min-width: 74px;
      justify-content: center;
      text-align: center;
      padding-inline: 12px;
    }

    .row-history-btn-label,
    .row-history-btn-count {
      display: inline-flex;
      align-items: center;
      line-height: 1;
    }

    .row-history-btn-count {
      min-width: 14px;
      justify-content: center;
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
    }

    .row-delete-btn {
      grid-column: 4;
    }

    .row-settlement-revoke-btn {
      grid-column: 3;
      border-color: #c7b56e;
      background: #fff8db;
      color: #765f0f;
    }

    #appPage.accountant-view #tableBody .row-check-btn {
      grid-column: 3;
    }

    .row-check-btn.complete {
      border-color: #d1ab48;
      background: #fff0c5;
      color: #7a590a;
    }

    .row-check-btn.view {
      border-color: #9ec4dc;
      background: #ecf5fb;
      color: #265f85;
    }

    .row-edit-btn:hover {
      background: #dcf1e8;
      border-color: #7fb8a5;
    }

    .row-refund-btn:hover {
      background: #ffe9bd;
      border-color: #c98e3b;
    }

    .row-delete-btn:hover {
      background: #ffe8e8;
      border-color: #d89f9f;
    }

    .row-settlement-revoke-btn:hover {
      background: #fff0b8;
      border-color: #b99c3e;
    }

    .row-check-btn:hover {
      background: #dfe7eb;
      border-color: #98a7b1;
    }

    .row-history-btn:hover {
      background: #e2f1ea;
      border-color: #99c1b2;
    }

    .row-check-btn.complete:hover {
      background: #ffe3a0;
      border-color: #c49526;
    }

    .row-check-btn.view:hover {
      background: #deeff9;
      border-color: #82afcb;
    }

    .record-status-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      min-width: 64px;
      max-width: none;
      border-radius: 999px;
      border: 1px solid #c7ddd3;
      background: #eef8f3;
      color: #2a6a58;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      padding: 3px 8px;
      text-align: center;
      white-space: nowrap;
      word-break: keep-all;
    }

    .record-status-chip.pending {
      border-color: #cfd6d2;
      background: #f2f4f3;
      color: #69736f;
    }

    .record-status-chip.checked {
      border-color: oklch(70% 0.16 28);
      background: oklch(95% 0.045 28);
      color: oklch(42% 0.15 28);
    }

    .record-status-chip.completed {
      border-color: oklch(68% 0.11 175);
      background: oklch(94% 0.045 175);
      color: oklch(35% 0.09 175);
    }

    .record-status-chip.partial_refunded {
      border-color: oklch(73% 0.13 75);
      background: oklch(95% 0.055 82);
      color: oklch(39% 0.105 63);
    }

    .record-status-chip.refunded {
      border-color: oklch(72% 0.13 28);
      background: oklch(95% 0.04 28);
      color: oklch(43% 0.14 28);
    }

    .record-status-chip.settled {
      border-color: #f1c76d;
      background: #fff7df;
      color: #7c4a00;
    }

    .record-status-chip.uploaded {
      border-color: oklch(66% 0.12 292);
      background: oklch(94% 0.04 292);
      color: oklch(36% 0.105 292);
    }

    .record-status-chip.paid {
      border-color: oklch(78% 0.018 150);
      background: oklch(95% 0.01 150);
      color: oklch(42% 0.03 150);
    }

    .record-status-chip.partial {
      border-color: oklch(73% 0.13 75);
      background: oklch(95% 0.055 82);
      color: oklch(39% 0.105 63);
    }

    .record-status-chip.returned {
      border-color: oklch(72% 0.13 28);
      background: oklch(95% 0.04 28);
      color: oklch(43% 0.14 28);
    }

    th {
      background: linear-gradient(180deg, #cfdfd5 0%, #bccfc1 100%);
      color: #183b31;
      border-bottom-color: var(--line);
      position: sticky;
      top: 0;
      z-index: 1;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), inset 0 -1px 0 rgba(127, 151, 140, 0.38);
    }

    .table-wrap > table > thead th.data-col-status,
    .table-wrap > table > tbody td.data-col-status {
      position: sticky;
      right: var(--table-sticky-action-width);
      width: var(--table-sticky-status-width);
      min-width: var(--table-sticky-status-width);
      max-width: var(--table-sticky-status-width);
      box-sizing: border-box;
    }

    .table-wrap > table > thead th.data-col-action,
    .table-wrap > table > tbody td.row-action-cell {
      position: sticky;
      right: 0;
      width: var(--table-sticky-action-width);
      min-width: var(--table-sticky-action-width);
      max-width: var(--table-sticky-action-width);
      box-sizing: border-box;
    }

    .table-wrap > table > thead th.data-col-status,
    .table-wrap > table > thead th.data-col-action {
      top: 0;
      background: linear-gradient(180deg, #cfdfd5 0%, #bccfc1 100%);
      background-clip: border-box;
    }

    .table-wrap > table > thead th.data-col-status {
      z-index: 32;
    }

    .table-wrap > table > thead th.data-col-action {
      z-index: 34;
    }

    .table-wrap > table > tbody td.data-col-status {
      z-index: 8;
    }

    .table-wrap > table > tbody td.row-action-cell {
      z-index: 9;
    }

    th, td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      white-space: nowrap;
      vertical-align: middle;
    }

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

    .sort-btn {
      width: auto;
      padding: 0;
      border: 0;
      background: transparent;
      color: #183b31;
      text-align: center;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      line-height: 1.1;
      min-width: 0;
      transition: color 0.16s ease;
    }

    .sort-btn:hover {
      color: #095f4f;
    }

    .sort-btn:focus-visible {
      outline: none;
      box-shadow: 0 0 0 3px rgba(31, 159, 134, 0.22);
    }

    .sort-btn.active {
      color: #0a6b59;
    }

    .sort-btn-label {
      white-space: nowrap;
    }

    .sort-btn-meta {
      font-size: 11px;
      font-weight: 600;
      color: #486057;
      white-space: nowrap;
      line-height: 1.1;
    }

    .sort-btn.active .sort-btn-meta {
      color: #346557;
    }

    .th-inner {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 3px;
      position: relative;
    }

    .status-th-inner {
      justify-content: center;
      gap: 4px;
    }

    .filter-indicator-wrap {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex: 0 0 auto;
      padding: 1px;
      border-radius: 10px;
      border: 1px solid #bfd5ca;
      background: rgba(245, 250, 247, 0.98);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    }

    .filter-indicator-wrap.active {
      border-color: #0d6e5b;
      background: linear-gradient(180deg, #1ca186, #0f7c68);
      box-shadow: 0 4px 10px rgba(14, 124, 102, 0.22);
    }

    .filter-icon-btn {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      border: 0;
      background: transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      color: #4f6a5f;
    }

    .filter-icon-btn:hover {
      background: rgba(14, 124, 102, 0.1);
    }

    .filter-icon-btn.active {
      color: #0e7c66;
      background: transparent;
      box-shadow: none;
    }

    .filter-indicator-wrap.active .filter-icon-btn,
    .filter-indicator-wrap.active .filter-icon-btn.active {
      color: #ffffff;
    }

    .filter-indicator-wrap.active .filter-icon-btn:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .filter-icon-btn svg {
      width: 14px;
      height: 14px;
      pointer-events: none;
    }

    .filter-value-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      max-width: 120px;
      min-height: 22px;
      padding: 2px 10px;
      border-radius: 999px;
      border: 0;
      background: transparent;
      color: #0c6b57;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: none;
      cursor: pointer;
    }

    .filter-value-chip::before {
      content: "";
      width: 5px;
      height: 5px;
      flex: 0 0 auto;
      border-radius: 50%;
      background: #0f7c68;
    }

    .filter-indicator-wrap.active .filter-value-chip {
      color: #ffffff;
    }

    .filter-indicator-wrap.active .filter-value-chip::before {
      background: rgba(255, 255, 255, 0.96);
    }

    #filterMonthValue {
      max-width: 92px;
      padding: 2px 8px;
      font-size: 11px;
    }

    #filterStatusValue,
    #filterSettledValue {
      max-width: 72px;
      padding: 2px 8px;
      font-size: 11px;
    }

    .filter-popover {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      min-width: 180px;
      background: #fff;
      border: 1px solid #d5e5dd;
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 14px 28px rgba(20, 54, 43, 0.16);
      z-index: 40;
    }

    #filterMonthPopover {
      width: min(280px, calc(100vw - 32px));
      min-width: 260px;
    }

    #filterMonthPopover,
    #filterDispatcherPopover,
    #filterOrderPopover,
    #filterAccountantPopover,
    #filterPlatformPopover,
    #filterShopPopover,
    #filterSourcePopover {
      left: 0;
      right: auto;
    }

    #filterOrderValue {
      max-width: 108px;
      padding: 2px 8px;
      font-size: 11px;
    }

    #filterAccountantPopover {
      min-width: 220px;
    }

    #filterSettlementRatioPopover {
      left: auto;
      right: 0;
      min-width: 180px;
    }

    #filterCustomerPopover,
    #filterSummaryPopover,
    #filterRemarkPopover {
      min-width: 240px;
    }

    .filter-search-popover {
      min-width: 220px;
    }

    .filter-search-field {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .filter-search-input {
      width: 100%;
      min-width: 0;
      border: 1px solid #cfddd7;
      border-radius: 10px;
      padding: 8px 10px;
      background: #f8fbf9;
      color: #1f4035;
      font: inherit;
      line-height: 1.2;
    }

    .filter-search-input:focus {
      outline: none;
      border-color: #0e7c66;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.14);
    }

    .filter-order-textarea {
      resize: vertical;
      min-height: 80px;
      max-height: 200px;
      font-family: inherit;
      white-space: pre-wrap;
      word-break: keep-all;
    }

    #filterStatusPopover {
      left: auto;
      right: 0;
      width: min(260px, calc(100vw - 32px));
      min-width: 240px;
    }

    #filterSettledPopover {
      left: auto;
      right: 0;
    }

    .filter-popover-section {
      display: grid;
      gap: 8px;
    }

    .filter-popover-title {
      color: #5b7268;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: 0.02em;
    }

    .filter-popover-divider {
      height: 1px;
      margin: 12px 2px;
      background: #e3ece6;
    }

    .filter-options {
      display: grid;
      gap: 6px;
      max-height: 240px;
      overflow: auto;
      min-width: 0;
    }

    #filterStatusList {
      max-height: min(420px, calc(100vh - 180px));
    }

    #filterStatusList .filter-option-label {
      flex: 0 0 auto;
      overflow: visible;
      text-overflow: clip;
    }

    .filter-date-range-section {
      gap: 10px;
    }

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

    .filter-date-field {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    .filter-date-field-label {
      color: #5a7167;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
    }

    .analysis-chart-board {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .analysis-chart-panel {
      border: 1px solid #dceae3;
      border: 1px solid oklch(88% 0.024 164);
      border-radius: 10px;
      background: #fbfdfc;
      background: oklch(98.5% 0.006 164);
      padding: 10px;
      min-width: 0;
      display: grid;
      grid-template-rows: auto minmax(240px, 1fr);
      gap: 8px;
    }

    .analysis-chart-panel-wide {
      grid-column: span 2;
    }

    .analysis-chart-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    .analysis-chart-panel-head h3 {
      margin: 0;
      color: #28483f;
      font-size: 15px;
      line-height: 1.25;
    }

    .analysis-chart-panel-head span {
      color: #61746c;
      font-size: 12px;
      line-height: 1.25;
      white-space: nowrap;
      padding-top: 2px;
    }

    .analysis-small-chart {
      width: 100%;
      height: 248px;
      min-width: 0;
      position: relative;
    }

    .filter-date-input {
      width: 100%;
      min-width: 0;
      border: 1px solid #cfddd7;
      border-radius: 10px;
      padding: 8px 10px;
      background: #f8fbf9;
      color: #1f4035;
      font: inherit;
      line-height: 1.2;
    }

    .filter-date-input:focus {
      outline: none;
      border-color: #0e7c66;
      background: #ffffff;
      box-shadow: 0 0 0 3px rgba(14, 124, 102, 0.14);
    }

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

    .filter-range-btn {
      min-height: 34px;
      border-radius: 10px;
      border: 1px solid #cbddd5;
      background: #f5faf7;
      color: #305046;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.2;
      cursor: pointer;
    }

    .filter-range-btn:hover {
      background: #edf6f1;
      border-color: #b8d2c6;
    }

    .filter-range-btn.primary {
      border-color: #0e7c66;
      background: linear-gradient(180deg, #18967d, #0e7c66);
      color: #ffffff;
      box-shadow: 0 8px 16px rgba(14, 124, 102, 0.18);
    }

    .filter-range-btn.primary:hover {
      background: linear-gradient(180deg, #1ca186, #0f816b);
      border-color: #0f816b;
    }

    .filter-option-btn {
      border: 1px solid #d0ded8;
      background: #f7fbf9;
      color: #304b42;
      border-radius: 8px;
      padding: 6px 10px;
      text-align: left;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }

    .filter-option-btn.filter-option-multi::before {
      content: "";
      width: 6px;
      height: 10px;
      flex: 0 0 auto;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      opacity: 0;
      transform: translateY(-1px) rotate(40deg);
    }

    .filter-option-btn.active {
      border-color: #0e7c66;
      background: #dff5ed;
      color: #0b6a56;
    }

    .filter-option-btn.filter-option-multi.active::before {
      opacity: 1;
    }

    .filter-option-btn.refund-filter-option {
      border-color: #d7b16b;
      background: #fff6df;
      color: #76500f;
    }

    .filter-option-btn.refund-filter-option.refund-returned {
      border-color: #d99b96;
      background: #fff0ee;
      color: #9a3d35;
    }

    .filter-option-btn.refund-filter-option.active {
      border-color: #bb7a18;
      background: #ffe6b0;
      color: #6f4709;
    }

    .filter-option-btn.refund-filter-option.refund-returned.active {
      border-color: #c45b52;
      background: #ffdcd8;
      color: #862f28;
    }

    .filter-option-label {
      min-width: 0;
      flex: 1 1 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .filter-option-count {
      flex: 0 0 auto;
      color: #ff5a1f;
      font-weight: 800;
      background: #fff1e7;
      border-radius: 999px;
      padding: 1px 7px;
      line-height: 1.2;
    }

    .filter-option-btn.active .filter-option-count {
      color: #d9480f;
      background: #ffe7d6;
    }

    .filter-option-btn.filter-option-special-accountant {
      order: -2;
      border-color: #f4a261;
      background: #fff4e6;
      color: #8a3f00;
      box-shadow: inset 3px 0 0 #f97316;
    }

    .filter-option-btn.filter-option-special-accountant + .filter-option-special-accountant {
      order: -1;
    }

    .filter-option-btn.filter-option-special-accountant.active {
      border-color: #ea580c;
      background: #ffedd5;
      color: #7c2d12;
    }

    .filter-option-btn.filter-option-special-accountant .filter-option-count {
      color: #c2410c;
      background: #fed7aa;
    }

    .filter-option-btn.refund-filter-option .filter-option-count {
      color: #8a5710;
      background: #ffeac0;
    }

    .filter-option-btn.refund-filter-option.refund-returned .filter-option-count {
      color: #9a3d35;
      background: #ffdeda;
    }

    .tag-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      min-height: 40px;
    }

    .tag-btn {
      min-width: 38px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid #cfe1d9;
      background: #f3f8f6;
      color: #2d4a40;
      font-weight: 700;
      line-height: 1;
      transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    }

    .tag-btn.active {
      border-color: #0e7c66;
      background: #dff5ed;
      color: #0b6a56;
      box-shadow: 0 0 0 2px rgba(14, 124, 102, 0.15);
    }

    .dispatcher-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 24px;
      border-radius: 999px;
      padding: 0 10px;
      font-weight: 700;
      border: 1px solid #d3e7de;
      background: #eef8f3;
      color: #21443a;
    }

    td.summary,
    td.remark {
      max-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 24px;
      word-break: normal;
    }

    .empty {
      padding: 18px;
      text-align: center;
      color: var(--muted);
    }

    .table-total-count {
      margin-left: 6px;
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
    }

    .clear-filter-btn {
      margin-left: 10px;
      border: 1px solid #cbded4;
      border-radius: 999px;
      padding: 4px 10px;
      background: #eef7f3;
      color: #2d4b41;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
    }

    .clear-filter-btn:hover {
      background: #e2f1ea;
      border-color: #b6d1c5;
    }

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

      .filter-date-range-grid,
      .filter-date-range-actions {
        grid-template-columns: 1fr;
      }

      #recordForm {
        grid-template-columns: 1fr;
        gap: 14px;
        grid-template-areas:
          "date"
          "dispatcher"
          "details"
          "meta"
          "prices"
          "summary"
          "note"
          "actions";
      }

      #recordForm .field-date,
      #recordForm .field-dispatcher,
      #recordForm .field-detail-row,
      #recordForm .field-meta-row,
      #recordForm .field-price-row,
      #recordForm .field-summary,
      #recordForm .field-note,
      #recordForm .form-actions {
        grid-column: 1;
      }

      #recordForm .field-date {
        grid-row: 1;
      }

      #recordForm .field-dispatcher {
        grid-row: 2;
      }

      #recordForm .field-detail-row {
        grid-row: 3;
      }

      #recordForm .field-meta-row {
        grid-row: 4;
      }

      #recordForm .field-price-row {
        grid-row: 5;
      }

      #recordForm .field-summary {
        grid-row: 6;
      }

      #recordForm .field-note {
        grid-row: 7;
      }

      #recordForm .form-actions {
        grid-row: 8;
      }

      body.dispatcher-self-view #recordForm {
        grid-template-areas:
          "date"
          "details"
          "meta"
          "prices"
          "summary"
          "note"
          "actions";
      }

      #recordForm .field-detail-row,
      #recordForm .field-meta-row,
      #recordForm .field-price-row {
        grid-template-columns: 1fr;
      }

      #recordForm .field-meta-row {
        grid-template-columns: minmax(0, 1fr);
      }

      #recordForm .field-date > .date-field-controls {
        flex-direction: column;
        align-items: stretch;
      }

      #recordForm .field-date > .date-field-controls > input:not([type="hidden"]) {
        flex-basis: auto;
        width: 100%;
      }

      #recordForm .checkbox-toggle-inline {
        justify-content: flex-start;
      }

      #recordForm .field-date,
      #recordForm .field-dispatcher,
      #recordForm .field-detail-row,
      #recordForm .field-meta-row,
      #recordForm .field-note,
      #recordForm .field-summary,
      #recordForm .field-price-row {
        padding: 0;
      }

      #recordForm {
        --record-label-width: 68px;
      }

      #recordForm .meta-item-wide {
        grid-column: auto;
      }

      #recordForm .form-actions {
        flex-wrap: nowrap;
        justify-content: stretch;
      }

      #recordForm .form-actions .btn-danger,
      #recordForm .form-actions .btn-primary {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
      }

      h1 {
        font-size: 22px;
      }

      .container {
        padding: 8px 8px 10px;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 6px;
      }

      .app-side {
        height: auto;
        padding: 0;
        transform: none;
      }

      #appPage.sidebar-collapsed .app-side {
        max-height: 0;
        padding: 0;
        opacity: 0;
        transform: none;
      }

      .sidebar-divider {
        width: 100%;
        min-width: 0;
        min-height: 28px;
        justify-content: flex-end;
      }

      .sidebar-divider::before {
        top: 50%;
        right: 0;
        bottom: auto;
        left: 0;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
      }

      .sidebar-toggle-icon {
        width: 46px;
        height: 16px;
      }

      .app-side-actions {
        grid-template-columns: 1fr;
      }

      .order-flow-guide {
        padding: 9px;
      }

      .order-flow-steps {
        gap: 5px;
      }

      .order-flow-step {
        padding: 7px 8px;
      }

      .app-side-notice {
        margin-top: 0;
        padding: 9px 10px;
        font-size: 12px;
      }

      .table-card {
        padding: 0;
      }

      .table-card-head {
        flex-wrap: wrap;
        align-items: stretch;
      }

      #appPage.accountant-view .accountant-settlement-schedule {
        margin-right: 0;
        padding: 11px;
      }

      .accountant-settlement-schedule-list {
        grid-template-columns: 1fr;
      }

    .table-card-actions {
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
      }
      .modal-card {
        width: 100%;
      }

      .analysis-modal-card {
        width: 100%;
      }

      .accountant-modal-card {
        width: 100%;
        padding: 18px;
      }

      .accountant-list-wrap {
        max-height: 62vh;
      }

      .accountant-table {
        min-width: 820px;
      }

      .accountant-col-phone {
        width: 178px;
      }

      .accountant-col-password {
        width: 118px;
      }

      .accountant-col-recipient {
        width: 240px;
      }

      .accountant-col-count {
        width: 86px;
      }

      .accountant-col-action {
        width: 140px;
      }

      .accountant-action-btn {
        min-width: 48px;
        padding-inline: 9px;
      }

      .recycle-modal-card {
        width: 100%;
      }

      .settlement-summary-meta {
        justify-content: stretch;
      }

      .settlement-summary-actions {
        justify-content: stretch;
      }

      .settlement-summary-actions .btn-primary {
        width: 100%;
      }

      .dev-todo-modal-top {
        flex-direction: column;
        align-items: stretch;
      }

      .dev-todo-form-actions {
        justify-content: stretch;
      }

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

      .dev-todo-form-actions .btn-primary {
        width: 100%;
      }

      .dev-todo-item {
        grid-template-columns: auto 1fr;
      }

      .dev-todo-item-delete {
        grid-column: 2;
        justify-self: end;
      }

      .dev-todo-item-text {
        grid-column: 2;
        padding-top: 0;
      }

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

      .analysis-trend-card {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .analysis-trend-main {
        grid-template-rows: auto 260px;
      }

      .analysis-trend-chart {
        height: 260px;
      }

      .analysis-trend-summary-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

      .analysis-chart-panel-wide {
        grid-column: span 2;
      }

      .analysis-grid {
        grid-template-columns: 1fr;
      }
      .check-form .field {
        grid-template-columns: 76px minmax(0, 1fr);
      }

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

      .complete-form .field-feedback-time,
      .complete-form .field-feedback-text,
      .complete-form .form-actions {
        grid-column: 1;
      }

      .complete-form .field-feedback-time {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0;
      }

      .complete-form .field-feedback-time > input {
        max-width: none;
      }

      .complete-form .field-feedback-text {
        padding: 0;
      }

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

      .check-form .form-actions {
        justify-content: stretch;
      }

      .check-form .form-actions .btn-primary,
      .check-form .form-actions .btn-secondary {
        width: 100%;
        min-width: 0;
      }

      .refund-form .refund-price-item {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .refund-form .refund-price-item > label,
      .refund-form .field > label {
        text-align: left;
      }

      .refund-form .refund-price-item > input,
      .refund-form .refund-price-item-total > .price-hint,
      .refund-form .refund-price-item.field-validation-group-error > .field-inline-error,
      .refund-form input {
        grid-column: 1;
      }

      .refund-actions {
        justify-content: stretch;
      }

      .refund-actions .btn-primary {
        width: 100%;
        min-width: 0;
      }

    }

    @media (prefers-reduced-motion: reduce) {
      #appPage {
        transition: none;
      }

      .app-side-notice {
        animation: none;
      }

      .app-side-notice::after {
        animation: none;
      }

      .modal-overlay,
      .modal-card {
        animation: none;
      }
    }

    @media (max-width: 720px) {
      .analysis-chart-board {
        grid-template-columns: 1fr;
      }

      .analysis-chart-panel,
      .analysis-chart-panel-wide {
        grid-column: auto;
      }

      .analysis-small-chart {
        height: 230px;
      }

      .modal-overlay {
        align-items: stretch;
        justify-items: center;
        padding: 12px;
      }

      .accountant-modal-card {
        width: min(100%, 560px);
        max-height: calc(100dvh - 24px);
        padding: 0;
        border-radius: 14px;
      }

      .accountant-modal-top {
        flex-direction: column;
        gap: 14px;
        padding: 18px;
      }

      .accountant-modal-actions {
        width: 100%;
        align-items: flex-start;
      }

      .accountant-modal-create-btn {
        width: 100%;
        min-width: 0;
        flex: 1 1 auto;
      }

      .accountant-list-wrap {
        margin: 0 12px 12px;
        max-height: none;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: auto;
      }

      .accountant-table {
        min-width: 0;
        border-spacing: 0 10px;
      }

      .accountant-table thead {
        display: none;
      }

      .accountant-table,
      .accountant-table tbody,
      .accountant-list-item,
      .accountant-table tbody td {
        display: block;
        width: 100%;
      }

      .accountant-list-item {
        border: 1px solid oklch(88% 0.022 165);
        border-radius: 12px;
        background: oklch(99.2% 0.005 165);
        box-shadow: 0 8px 20px rgba(17, 53, 40, 0.07), var(--inset-highlight);
        overflow: hidden;
      }

      .accountant-table tbody td {
        position: relative;
        height: auto;
        min-height: 42px;
        display: grid;
        grid-template-columns: minmax(72px, 0.32fr) minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        padding: 9px 12px;
        border-bottom: 1px solid oklch(92% 0.012 165);
        background: transparent;
        white-space: normal;
        overflow: visible;
        text-align: left;
      }

      .accountant-table tbody td::before {
        content: attr(data-label);
        color: #60776e;
        font-size: 12px;
        font-weight: 750;
        line-height: 1.25;
      }

      .accountant-table tbody td.accountant-col-action {
        grid-template-columns: 1fr;
        padding-top: 11px;
        background: oklch(97.3% 0.01 165);
        text-align: left;
      }

      .accountant-table tbody td.accountant-col-action::before {
        display: none;
      }

      .accountant-action-group {
        width: 100%;
        justify-content: stretch;
        gap: 8px;
        padding: 4px;
      }

      .accountant-action-btn {
        flex: 1 1 0;
        min-height: 34px;
      }

      .accountant-list-item:hover td,
      .accountant-list-item:hover td.accountant-col-action {
        background: transparent;
      }

      .accountant-list-item:hover td.accountant-col-action {
        background: oklch(97.3% 0.01 165);
      }
    }

    .settlement-detail-paid-btn,
    .settlement-detail-uploaded-btn {
      min-height: 32px;
      padding: 0 14px;
      border: 1px solid #8bc4a8;
      border-radius: 999px;
      background: linear-gradient(135deg, #2e9b75, #1a8a66);
      color: #ffffff;
      font-size: 12px;
      font-weight: 800;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(26, 138, 102, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
    }

    .settlement-detail-paid-btn:hover,
    .settlement-detail-paid-btn:focus-visible,
    .settlement-detail-uploaded-btn:hover,
    .settlement-detail-uploaded-btn:focus-visible {
      border-color: #238565;
      background: linear-gradient(135deg, #288d6a, #167d5c);
      outline: none;
      transform: translateY(-1px);
      box-shadow: 0 4px 10px rgba(26, 138, 102, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .settlement-detail-uploaded-btn {
      margin-left: auto;
      background: linear-gradient(135deg, #4f46e5, #6d5dfc);
      border-color: #b8b1ff;
      box-shadow: 0 2px 6px rgba(79, 70, 229, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .settlement-detail-uploaded-btn:hover,
    .settlement-detail-uploaded-btn:focus-visible {
      border-color: #7c73f7;
      background: linear-gradient(135deg, #4338ca, #5b4ae6);
      box-shadow: 0 4px 10px rgba(79, 70, 229, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    .paid-settlement-detail-modal-card {
      width: min(1280px, 96vw);
      max-height: calc(100vh - 30px);
      display: grid;
      gap: 16px;
      padding: 20px;
      border-radius: var(--radius-2xl);
      border-color: #dfeae4;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 248, 0.98));
      box-shadow: var(--shadow-lg);
    }

    .paid-settlement-detail-modal-card:focus {
      outline: none;
    }

    .paid-settlement-detail-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 0;
      margin-bottom: 2px;
    }

    .paid-settlement-detail-title {
      margin: 0;
      font-size: 20px;
      line-height: 1.2;
      color: #1f3f35;
    }

    .paid-settlement-detail-meta {
      margin: 4px 0 0;
      color: #648075;
      font-size: 13px;
      line-height: 1.35;
    }

    .paid-settlement-detail-list {
      min-height: 0;
      max-height: min(680px, calc(100vh - 130px));
      overflow: auto;
    }

    .paid-settlement-detail-empty {
      border: 1px solid #d7e6de;
      background: #fbfdfc;
      border-radius: 8px;
      padding: 16px 12px;
      color: #6a8077;
      font-size: 14px;
      text-align: center;
    }

    .global-toast {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%) translateY(-20px);
      z-index: 10000;
      max-width: 90vw;
      min-width: 240px;
      padding: 12px 20px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
      box-shadow: 0 12px 32px rgba(17, 53, 40, 0.18);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .global-toast:not([hidden]) {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
      pointer-events: auto;
    }

    .global-toast.idle {
      border: 1px solid #d7e6de;
      background: #f8fcfa;
      color: #4c645b;
    }

    .global-toast.pending {
      border: 1px solid #cfe1da;
      background: #f2faf7;
      color: #286454;
    }

    .global-toast.ok {
      border: 1px solid #b8d9cb;
      background: #edf8f2;
      color: #0f6b55;
    }

    .global-toast.error {
      border: 1px solid #edc0c0;
      background: #fff5f5;
      color: #b23a3a;
    }