:root {
      --ink: #18212f;
      --muted: #687384;
      --line: #d9e0ea;
      --panel: #ffffff;
      --bg: #f5f7fb;
      --blue: #2563eb;
      --green: #16803c;
      --red: #d92d20;
      --gray: #9aa4b2;
      --amber: #b86e00;
      --soft-blue: #e8f0ff;
      --soft-green: #e8f6ee;
      --soft-red: #fff0ed;
      --soft-gray: #eef1f5;
      --product-accessory-bg: #edf4ff;
      --product-accessory-hover-bg: #e1edff;
      --product-accessory-line: #bfd7fb;
      --header: #0f172a;
      --nav: #ffffff;
      --field-bg: #ffffff;
      --section-bg: #ffffff;
      --table-head: #f8fafc;
      --input-bg: #ffffff;
      font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
    }

    body.dark {
      --ink: #e5edf8;
      --muted: #9aa9bd;
      --line: #334155;
      --panel: #111827;
      --bg: #0b1120;
      --header: #020617;
      --nav: #0f172a;
      --field-bg: #111827;
      --section-bg: #0f172a;
      --table-head: #172033;
      --input-bg: #0b1120;
      --soft-blue: #14264a;
      --soft-green: #123322;
      --soft-red: #3a1714;
      --soft-gray: #1f2937;
      --product-accessory-bg: #14264a;
      --product-accessory-hover-bg: #1a315d;
      --product-accessory-line: #315586;
      --amber: #fbbf24;
    }

    body.pink {
      --ink: #452c3a; --muted: #856473; --line: #ebcbd9;
      --panel: #fff8fb; --bg: #fff0f6; --header: #63364d; --nav: #fff8fb;
      --field-bg: #fffafd; --section-bg: #fff8fb; --table-head: #fce5ef; --input-bg: #ffffff;
      --soft-blue: #f4e8ff; --soft-gray: #f7eaf0;
    }
    @media (max-width: 900px) {
      #layoutEditBtn, .layout-tools, .layout-section-tools, .col-resizer,
      .config-col-resizer, .param-col-resizer, .sales-product-col-resizer { display: none !important; }
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      min-width: 1120px;
    }

    header {
      height: 64px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 6px 24px 26px;
      background: var(--header);
      color: white;
      border-bottom: 1px solid #111827;
      position: relative;
    }

    header:has(#onlineUsersBar) { height: auto; min-height: 88px; flex-wrap: wrap; row-gap: 6px; }
    #onlineUsersBar { flex: 0 0 100%; order: 2; text-align: center; font-size: 12px; line-height: 20px; white-space: nowrap; overflow-x: auto; color: #cbd5e1; }
    #onlineUsersBar[hidden] { display: none; }
    #onlineUsersBar .online-user { display: inline-block; margin: 0 5px; }
    #onlineUsersBar .online-user.active { color: #4ade80; }

    header h1 {
      font-size: 20px;
      margin: 0;
      font-weight: 700;
      letter-spacing: 0;
    }

    header h1 .version {
      margin-left: 8px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      padding: 2px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #cbd5e1;
      vertical-align: middle;
      cursor: pointer;
    }

    header h1 .version:hover {
      color: #fff;
      border-color: rgba(255,255,255,.5);
    }

    header h1 .version.release-highlight {
      color: #f87171;
      border-color: rgba(248, 113, 113, .72);
    }

    header h1 .refresh-countdown {
      cursor: pointer;
      color: #9fb3c8;
      border-color: rgba(255,255,255,.18);
    }

    header #todoPageLink {
      flex: 0 0 auto;
      margin: 0;
      padding: 2px 8px;
      border: 1px solid;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 18px;
      white-space: nowrap;
      cursor: pointer;
      color: #fff;
      background: #f72585;
      border-color: #ff76b5;
      box-shadow: 0 0 12px rgba(247, 37, 133, .48);
    }

    header #todoPageLink:hover {
      color: #fff;
      background: #ff4ba0;
      border-color: #ffd0e4;
    }

    .sync-light {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 999px;
      margin: 0 4px 1px 8px;
      vertical-align: middle;
      background: #fbbf24;
      box-shadow: 0 0 0 2px rgba(251,191,36,.18);
    }

    .sync-light.synced {
      background: #22c55e;
      box-shadow: 0 0 0 2px rgba(34,197,94,.18);
    }

    .sync-light.error {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239,68,68,.2);
    }

    header .meta {
      display: flex;
      gap: 16px;
      align-items: center;
      color: #d4d9e3;
      font-size: 13px;
      position: relative;
      flex-wrap: wrap;
    }

    .resource-expiry-bar {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 5px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      color: #cbd5e1;
      font-size: 11px;
      line-height: 15px;
    }

    .resource-expiry-bar a {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .header-status-row { display: contents; }
    .header-login-user { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; white-space: nowrap; color: #d4d9e3; font-size: 13px; }
    @media (min-width: 901px) {
      header:has(#onlineUsersBar) { min-height: 64px; padding: 6px 24px 5px; }
      .header-status-row {
        display: flex;
        align-items: center;
        flex: 0 0 100%;
        min-width: 0;
        gap: 16px;
        order: 2;
      }
      .header-status-row #onlineUsersBar {
        flex: 0 1 auto;
        max-width: 40%;
        min-width: 0;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 20px;
        order: 0;
      }
      .header-status-row .resource-expiry-bar {
        position: static;
        flex: 0 1 auto;
        max-width: 75%;
        margin-left: auto;
        line-height: 20px;
      }
    }

    .user-entry {
      min-height: 30px;
      padding: 0 11px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,.28);
      background: rgba(255,255,255,.08);
      color: #f8fafc;
      cursor: pointer;
    }

    .rate-user {
      border: 0;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-weight: 800;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .rate-user:hover { color: #bfdbfe; }

    .rate-source {
      color: #93c5fd;
      text-decoration: underline;
      text-underline-offset: 3px;
      font: inherit;
      font-weight: 700;
    }

    .rate-source:hover { color: #dbeafe; }

    .admin-panel {
      position: absolute;
      right: 0;
      top: calc(100% + 8px);
      z-index: 50;
      display: none;
      grid-template-columns: 1fr;
      gap: 8px;
      min-width: 150px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 12px 30px rgba(15, 23, 42, .18);
    }

    .admin-panel.open { display: grid; }

    .todo-panel {
      right: 74px;
      min-width: 320px;
      max-width: 420px;
      max-height: 420px;
      overflow: auto;
    }

    .todo-item {
      display: grid;
      gap: 6px;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
    }

    .todo-item strong { font-size: 13px; }
    .todo-item span { color: var(--muted); font-size: 12px; line-height: 1.45; }
    .todo-actions { display: flex; gap: 8px; flex-wrap: wrap; }

    .app-toast {
      position: fixed;
      right: 24px;
      bottom: 24px;
      z-index: 300;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 150px;
      max-width: 320px;
      padding: 12px 16px;
      border: 1px solid rgba(22, 128, 60, .35);
      border-radius: 8px;
      background: var(--panel);
      color: var(--ink);
      box-shadow: 0 14px 36px rgba(15, 23, 42, .22);
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      font-size: 14px;
      font-weight: 700;
    }

    .app-toast::before {
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: var(--green);
      color: #fff;
      font-size: 14px;
      font-weight: 900;
    }

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

    .upload-status {
      display: grid;
      gap: 6px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
    }

    .upload-status .bar {
      height: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--soft-gray);
      border: 1px solid var(--line);
    }

    .upload-status .bar span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--blue);
      transition: width .16s ease;
    }

    .upload-status.done {
      color: var(--green);
    }

    .upload-status.error {
      color: var(--red);
    }

    .log-list {
      display: grid;
      gap: 12px;
      max-height: 62vh;
      overflow: auto;
    }

    #backupRecordsBody { grid-auto-rows: min-content; }

    .log-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--section-bg);
    }

    .log-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
      font-weight: 800;
    }

    .log-head span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .log-item.release-highlight-log .log-head strong,
    .log-item.release-highlight-log li {
      color: #ef4444;
    }

    .log-item ul {
      margin: 0;
      padding-left: 18px;
      color: var(--ink);
      line-height: 1.65;
      font-size: 13px;
    }

    .login-sync-status {
      display: none;
      border: 1px solid rgba(37, 99, 235, .45);
      border-radius: 10px;
      padding: 14px;
      background: linear-gradient(135deg, rgba(37, 99, 235, .16), rgba(14, 165, 233, .08));
      color: var(--ink);
      text-align: center;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .04) inset;
    }

    .login-sync-status.show {
      display: grid;
      gap: 6px;
    }

    .login-sync-count {
      font-size: 34px;
      font-weight: 900;
      line-height: 1;
      color: var(--blue);
      animation: loginPulse 1s ease-in-out infinite;
    }

    .login-sync-text {
      font-size: 14px;
      font-weight: 800;
    }

    .login-sync-hint {
      color: var(--muted);
      font-size: 12px;
    }

    .login-sync-hint::after {
      content: "";
      display: block;
      height: 4px;
      margin-top: 9px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--blue), transparent);
      background-size: 180px 100%;
      animation: loginSweep 1.4s linear infinite;
    }

    @keyframes loginPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.08); opacity: .88; }
    }

    @keyframes loginSweep {
      0% { background-position: -180px 0; }
      100% { background-position: 180px 0; }
    }

    .app {
      display: grid;
      grid-template-columns: 220px 1fr;
      min-height: calc(100vh - 64px);
    }

    nav {
      background: var(--nav);
      border-right: 1px solid var(--line);
      padding: 16px 12px;
    }

    .nav-btn {
      width: 100%;
      min-height: 42px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ink);
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      margin-bottom: 6px;
      font-size: 14px;
      text-align: left;
      cursor: pointer;
    }

    .nav-btn.dragging {
      opacity: 0.45;
      outline: 2px dashed #8fb3ff;
    }

    .drag-handle {
      width: 18px;
      height: 24px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #9aa4b2;
      cursor: grab;
      font-weight: 800;
      flex: 0 0 18px;
    }

    .drag-handle:active { cursor: grabbing; }

    .nav-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
    .nav-btn.active { background: var(--soft-blue); color: #1746b8; font-weight: 700; }
    .nav-btn:hover { background: var(--soft-gray); }

    .nav-group-head {
      margin-top: 4px;
      color: var(--ink);
      font-weight: 700;
    }

    .nav-caret {
      margin-left: auto;
      color: #6b7280;
      font-size: 12px;
      line-height: 1;
    }

    .nav-sub-wrap {
      margin: -2px 0 8px 28px;
      border-left: 1px solid var(--line);
      padding-left: 8px;
    }

    .nav-sub-wrap.collapsed { display: none; }

    .nav-sub {
      min-height: 36px;
      padding-left: 10px;
      font-size: 13px;
    }

    main {
      padding: 22px;
      height: calc(100vh - 64px);
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 10px;
    }

    .title-wrap {
      display: flex;
      align-items: baseline;
      gap: 12px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .title-wrap h2 {
      margin: 0;
      font-size: 22px;
      letter-spacing: 0;
      flex: 0 0 auto;
    }

    .title-wrap p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

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

    button, input, select, textarea {
      font-family: inherit;
      font-size: 14px;
    }

    .primary, .secondary, .danger, .mini {
      border: 1px solid transparent;
      border-radius: 8px;
      min-height: 38px;
      padding: 0 13px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      white-space: nowrap;
    }

    .primary { background: var(--blue); color: white; }
    .secondary { background: var(--panel); color: var(--ink); border-color: var(--line); }
    .danger { background: var(--panel); color: var(--red); border-color: #f0b8b1; }
    .mini { min-height: 30px; padding: 0 9px; font-size: 12px; background: var(--panel); color: var(--ink); border-color: var(--line); }
    .mini.primary { background: var(--blue); border-color: var(--blue); color: white; }

    .document-list-cell { min-width: 116px; }
    .document-list-summary { display: flex; align-items: flex-start; gap: 6px; }
    .document-list-summary > :first-child { min-width: 0; }
    .document-list-toggle { min-width: 24px; min-height: 24px; padding: 0 6px; flex: 0 0 auto; }
    .document-list-more { margin-top: 5px; display: grid; gap: 5px; }
    .list-cell-fold { min-width: 92px; }
    .list-cell-fold-summary { display: flex; align-items: flex-start; gap: 6px; }
    .list-cell-fold-lines { min-width: 0; display: grid; gap: 3px; }
    .list-cell-fold-more { margin-top: 5px; display: grid; gap: 5px; }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 12px;
      flex: 0 0 auto;
    }

    .stat {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px 16px;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 12px;
    }

    .stat strong {
      display: inline;
      font-size: 24px;
      margin-bottom: 0;
      line-height: 1;
    }

    .stat span {
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    .financial-filter-grid { display: grid; grid-template-columns: minmax(210px, 1.25fr) minmax(92px, .62fr) minmax(92px, .62fr) minmax(190px, 1.25fr) auto auto; gap: 12px; padding: 14px; margin-bottom: 12px; align-items: stretch; }
    .financial-filter-grid .field { margin: 0; }
    .financial-filter-actions { display: flex; align-items: stretch; gap: 8px; }
    .financial-filter-actions button { white-space: nowrap; }
    .financial-filter-grid .financial-date-filter { grid-column: auto; display: grid; align-content: center; gap: 6px; padding: 0; border: 0; background: transparent; }
    .financial-filter-grid .financial-date-filter label { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
    .financial-filter-grid .financial-date-filter input { width: 100%; min-width: 0; }
    .financial-filter-grid #clearFinancialReconciliationFilter { white-space: nowrap; }
    .financial-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .financial-stats .stat strong { font-size: 16px; }
    .financial-summary-grid { display: grid; grid-template-columns: 2fr 2fr 1.35fr 1.35fr 0.9fr 0.9fr; gap: 0; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
    .financial-summary-stack { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); border-right: 1px solid var(--line); }
    .financial-summary-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 7px 10px; color: var(--ink); }
    .financial-summary-stack .financial-summary-cell + .financial-summary-cell { border-top: 1px solid var(--line); }
    .financial-summary-full { border-right: 1px solid var(--line); min-height: 76px; }
    .financial-summary-grid > :last-child { border-right: 0; }
    .financial-summary-label { color: var(--ink); font-size: 13px; white-space: nowrap; }
    .financial-summary-value { font-size: 16px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .financial-ledger-note { padding: 0 14px 12px; color: var(--muted); font-size: 12px; }
    /* 所有列表筛选统一为图片参考的紧凑标签在上、控件在下布局；筛选项多时仅横向滚动。 */
    #content > .panel.list-filter-panel { display: flex; flex: 0 0 auto; min-height: 0; flex-direction: row; flex-wrap: nowrap; align-items: end; justify-content: flex-start; gap: 9px; padding: 7px 12px; margin-bottom: 10px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
    .list-filter-panel .list-filter-group { display: flex; flex: 0 0 auto; align-items: end; gap: 8px; min-width: 0; }
    .list-filter-panel .list-filter-group + .list-filter-group { padding-left: 9px; border-left: 1px solid var(--line); }
    .list-filter-panel .field { display: grid; flex: 0 0 var(--list-filter-width, 128px); gap: 2px; min-width: var(--list-filter-width, 128px); margin: 0; }
    .list-filter-panel .field.keyword-filter { --list-filter-width: 230px; }
    /* 日期范围直接沿用订单进度表的日期筛选尺寸与间距。 */
    .list-filter-panel .list-filter-dates { gap: 10px; }
    .list-filter-panel .field.date-filter { --list-filter-width: 148px; gap: 4px; }
    .list-filter-panel .field span { color: var(--muted); font-size: 12px; line-height: 15px; white-space: nowrap; }
    .list-filter-panel input, .list-filter-panel select { width: 100%; min-width: 0; min-height: 30px; height: 30px; padding: 4px 8px; }
    .list-filter-panel .list-filter-clear { flex: 0 0 auto; align-self: end; min-height: 30px; height: 30px; padding: 4px 10px; white-space: nowrap; }

    .order-total-summary {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      gap: 18px;
      min-width: 0;
      padding: 10px 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      overflow-x: auto;
      white-space: nowrap;
    }

    .order-total-summary span {
      display: inline-flex;
      align-items: baseline;
      gap: 6px;
      color: var(--muted);
      font-size: 13px;
    }

    .order-total-summary strong {
      color: var(--ink);
      font-size: 16px;
    }

    .dashboard-date-filter {
      grid-column: 1 / -1;
      display: flex;
      align-items: end;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .dashboard-date-filter label {
      display: grid;
      gap: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .dashboard-date-filter input { min-width: 148px; }

    .dashboard-date-filter .order-total-summary {
      grid-column: auto;
      flex: 1 1 auto;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      overflow: visible;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
    }

    #content {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #content > .panel {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    #content.financial-reconciliation-content { display: block; overflow: auto; padding-right: 2px; }
    #content.financial-reconciliation-content > .panel { display: block; min-height: auto; margin-bottom: 12px; }
    #content.financial-reconciliation-content .financial-detail-panel { max-height: none; overflow: visible; }

    .table-scroll {
      width: 100%;
      flex: 1 1 auto;
      max-height: none;
      min-height: 0;
      overflow: auto;
      border-bottom: 1px solid var(--line);
    }

    .erp-list-scroll { max-height: min(70vh, 720px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    #autoRefreshCountdown { display: inline-block; width: 250px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-variant-numeric: tabular-nums; }
    .list-sync-notice { height: 36px; overflow: auto; font-size: 12px; color: var(--muted); }
    .list-sync-notice .panel { margin: 0; padding: 4px 8px; }
    .erp-list-scroll table { border-collapse: separate; border-spacing: 0; }
    .erp-list-scroll thead th { position: sticky; top: 0; z-index: 3; }
    .erp-list-scroll tr > :first-child { position: sticky; left: 0; background: var(--panel); z-index: 2; box-shadow: 1px 0 0 var(--line); }
    .erp-list-scroll thead tr > :first-child { background: var(--table-head); z-index: 4; }
    .erp-list-scroll .product-accessory-row > td:first-child { background: var(--product-accessory-bg); }
    .list-row-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: flex-start; }
    .list-more-actions { display: inline-block; }
    .list-more-actions summary { cursor: pointer; list-style: none; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--blue); }
    .list-more-actions summary::-webkit-details-marker { display: none; }
    .list-more-actions[open] { min-width: 112px; }
    .list-more-actions-body { display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin-top: 6px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; }
    .list-state-message { text-align: center; padding: 28px 16px; color: var(--muted); }
    @media (max-width: 900px) {
      .erp-list-scroll { max-height: 62vh; }
      .erp-list-scroll tr > :first-child { max-width: 155px; }
      .list-row-actions .mini, .list-more-actions summary { min-height: 34px; }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: auto;
    }

    th, td {
      padding: 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
      font-size: 13px;
      overflow-wrap: anywhere;
      line-height: 1.45;
    }

    tr.product-accessory-row td {
      background: var(--product-accessory-bg);
      border-bottom-color: var(--product-accessory-line);
    }

    tr.product-accessory-row:hover td {
      background: var(--product-accessory-hover-bg);
    }

    .product-picker-list { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
    .product-picker-row { display: grid; grid-template-columns: 34px 150px minmax(180px, 1fr) 160px; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--panel); }
    .product-picker-row:last-child { border-bottom: 0; }
    .product-picker-row:hover { background: var(--soft-blue); }
    .product-picker-row input { width: 17px; height: 17px; }
    .product-picker-row .muted { font-size: 12px; }
    .deferred-product-image { min-width: 42px; min-height: 42px; background: var(--soft-gray); }
    .image-loading-text { display:inline-flex; align-items:center; min-width:72px; min-height:42px; color:var(--muted); font-size:12px; }
    .currency-hidden { display: none !important; }

    th {
      background: var(--table-head);
      color: var(--muted);
      font-weight: 700;
      position: relative;
      user-select: none;
    }

    thead th {
      position: sticky;
      top: 0;
      z-index: 2;
    }

    .pager {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      color: var(--muted);
      font-size: 13px;
      background: var(--panel);
    }

    .pager-left,
    .pager-right {
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }

    .pager select {
      min-height: 32px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--ink);
      padding: 4px 8px;
    }

    .pager button {
      min-width: 34px;
      min-height: 32px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--ink);
      cursor: pointer;
    }

    .pager button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    th.sortable {
      cursor: pointer;
      padding-right: 26px;
    }

    .sort-mark {
      color: var(--blue);
      font-size: 11px;
      margin-left: 6px;
      white-space: nowrap;
    }

    .col-resizer {
      position: absolute;
      top: 0;
      right: -5px;
      z-index: 3;
      width: 11px;
      height: 100%;
      cursor: col-resize;
      touch-action: none;
    }

    .col-resizer::after {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 5px;
      width: 2px;
      border-radius: 999px;
      background: transparent;
    }

    .col-resizer:hover,
    .col-resizer.active {
      background: rgba(239, 68, 68, 0.16);
    }

    .col-resizer:hover::after,
    .col-resizer.active::after {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28);
    }

    body.resizing-columns {
      cursor: col-resize;
      user-select: none;
    }

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

    .badge {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .badge.draft { background: var(--soft-gray); color: var(--muted); }
    .badge.pending { background: #fff6df; color: var(--amber); }
    .badge.done { background: var(--soft-green); color: var(--green); }
    .badge.pay { background: var(--soft-blue); color: #1746b8; }
    .badge.ship { background: var(--soft-red); color: var(--red); }

    .permission-list {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      max-width: 180px;
      line-height: 1.2;
      overflow: hidden;
      align-items: center;
    }

    .permission-chip {
      display: inline-flex;
      align-items: center;
      min-height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      background: var(--soft-gray);
      color: var(--ink);
      border: 1px solid var(--line);
      font-size: 12px;
      white-space: nowrap;
    }

    .permission-chip.compact {
      min-width: 44px;
      justify-content: center;
      padding: 0 6px;
    }

    .permission-editor {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .permission-group { display: grid; grid-template-columns: 110px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
    .permission-group-title { display: flex; align-items: center; padding: 10px; font-weight: 800; background: var(--soft-blue); color: var(--blue); }
    .permission-group-items { min-width: 0; }
    .user-management-form { grid-column: 1 / -1; min-width: 0; }
    .user-management-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
    .user-management-tabs button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 10px 2px; background: transparent; color: var(--muted); }
    .user-management-tabs button[aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); }
    .user-management-pane[hidden] { display: none !important; }
    .salary-basic-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; }
    .salary-month-sort { border:0; background:transparent; color:inherit; padding:0; font:inherit; cursor:pointer; white-space:nowrap; }
    .salary-basic-heading [data-salary-start] { font-size:14px; font-weight:400; }
    .salary-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:12px 0; }
    .salary-payroll-table { min-width:1600px; width:100%; }
    .salary-payroll-table th,.salary-payroll-table td { white-space:nowrap; vertical-align:middle; }
    .salary-payroll-table input { box-sizing:border-box; min-width:0; width:100%; max-width:100%; }
    .salary-payroll-table td > .field { box-sizing:border-box; min-width:0; width:100%; max-width:100%; }
    .salary-payroll-table .salary-performance-inputs { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:19px 19px; gap:0; min-width:0; width:100%; max-width:100%; height:38px; }
    .salary-payroll-table .salary-performance-inputs input { box-sizing:border-box; width:100%; min-width:0; min-height:0; height:19px; padding:0 6px; line-height:17px; font-size:12px; border-radius:3px; }
    .salary-performance-note { display:inline-block; max-width:150px; white-space:normal; overflow-wrap:anywhere; }
    .salary-payroll-table input[type="month"][readonly] { min-width:0; width:min(104px,100%); padding-inline:6px; }
    .salary-payroll-table input[type="month"][readonly]::-webkit-calendar-picker-indicator { display:none; }
    input:is([type="date"],[type="month"]):not([readonly]):not(:disabled) { cursor:pointer; color-scheme:light; }
    input:is([type="date"],[type="month"]):not([readonly]):not(:disabled)::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.9; }
    .salary-payroll-table th:first-child,.salary-payroll-table td:first-child { width:1%; }
    #userSalaryPanel { grid-column:1 / -1; min-width:0; }
    #userSalaryPanel > .form-section { display:block; }
    [data-user-management-pane="salary"] > .muted { grid-column:1 / -1; }
    .user-management-pane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .user-management-pane .form-section { grid-column: 1 / -1; }
    .user-management-pane .user-account-section { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .user-management-form .permission-editor { --permission-line: color-mix(in srgb, var(--line) 55%, var(--muted)); border: 1px solid var(--permission-line); border-radius: 6px; overflow: hidden; }
    .user-management-form .permission-group { grid-template-columns: 90px minmax(0, 1fr); border-bottom: 1px solid var(--permission-line); }
    .user-management-form .permission-group:last-child { border-bottom: 0; }
    .user-management-form .permission-group-title { border-right: 1px solid var(--permission-line); padding: 4px 10px; }
    .user-management-form .permission-group-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--permission-line); }
    .user-management-form .permission-group .permission-row { display: flex; flex-direction: column; align-items: stretch; gap: 2px; justify-content: center; min-width: 0; padding: 4px 10px; border: 0; border-radius: 0; line-height: 1.25; }
    .user-management-form .permission-row > span { font-weight: 600; }
    .user-permission-options { display: flex; gap: 3px 8px; flex-wrap: wrap; }
    .user-permission-options label { white-space: nowrap; }
    #userAccountRecords { min-width: 0; overflow-x: auto; }
    .user-account-record-head, .user-account-record-row { display: grid; grid-template-columns: minmax(110px,.7fr) minmax(140px,1fr) minmax(140px,1fr) 64px; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
    .user-account-record-head { color: var(--muted); font-weight: 600; }
    .user-account-record-row label { min-width: 0; }
    .user-account-record-row input { width: 100%; min-width: 0; }
    @media (max-width: 1100px) {
      .user-management-form .permission-group-items { grid-template-columns: repeat(2,minmax(0,1fr)); }
    }
    @media (max-width: 900px) {
      .user-management-pane .user-account-section { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .user-account-record-head, .user-account-record-row { min-width: 560px; }
    }
    @media (max-width: 600px) {
      .user-management-form .permission-group { grid-template-columns: minmax(0,1fr); }
      .user-management-form .permission-group-items { grid-template-columns: minmax(0,1fr); }
      .user-management-form .permission-group-title { border-right: 0; border-bottom: 1px solid var(--permission-line); }
      .user-management-pane .user-account-section { grid-template-columns: minmax(0,1fr); }
    }
    .permission-group .permission-row { border: 0; border-top: 1px solid var(--line); border-radius: 0; }
    .permission-group .permission-row:first-child { border-top: 0; }

    .permission-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 80px 80px 110px;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .permission-row label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }

    @media (max-width: 600px) {
      .permission-group { grid-template-columns: minmax(0, 1fr); }
      .permission-group-title { padding: 8px 10px; }
      .permission-row { grid-template-columns: minmax(80px, 1fr) 46px 46px 76px; gap: 4px; padding: 8px 6px; }
      .permission-row label { font-size: 12px; white-space: nowrap; }
    }

    .file-link {
      border: 0;
      background: transparent;
      color: var(--blue);
      padding: 0;
      font: inherit;
      cursor: pointer;
      text-align: left;
      text-decoration: underline;
    }

    #receiptAccountQrPreview .file-thumb { max-width:100%; }
    #receiptAccountQrPreview .file-thumb img { display:block; max-width:100%; height:auto; }
    .receipt-qr-hover-popup { position:fixed; z-index:2000; width:min(280px,calc(100vw - 24px)); padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); box-shadow:0 5px 24px #0003; pointer-events:none; }
    .receipt-qr-hover-popup[hidden] { display:none; }
    .receipt-qr-hover-popup img { display:block; width:100%; max-height:min(280px,calc(100vh - 72px)); object-fit:contain; background:#fff; }
    .receipt-qr-hover-popup small { display:block; margin-top:4px; }
    .file-thumb {
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 16px;
      background: var(--bg);
    }

    .purchase-delivery-layout { display:grid;grid-template-columns:minmax(190px,1fr) minmax(220px,1fr) minmax(280px,2fr);gap:12px;grid-column:1/-1;align-items:start; }
    .purchase-delivery-dates { display:grid;gap:8px; }
    .purchase-delivery-layout > * { min-width:0; }
    .purchase-delivery-invoices #purchaseSupplierInvoicePanel > .form-grid { padding:0;background:transparent;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
    @media(max-width:900px) { .purchase-delivery-layout { grid-template-columns:1fr 1fr; } .purchase-delivery-invoices { grid-column:1/-1; } }
    @media(max-width:600px) { .purchase-delivery-layout { grid-template-columns:1fr; } }

    .form-section.user-account-section {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .form-section.sales-section {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .form-section.purchase-calculation-section {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .purchase-refund-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 14px;
    }

    .form-section.payment-amount-info-section {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .form-section.sales-amount-section {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .sales-currency-note {
      grid-column: 4 / span 3;
      grid-row: 2;
      display: flex;
      align-items: center;
      min-height: 42px;
      padding: 8px 10px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      color: var(--muted);
    }

    .sales-amount-section #purchaseCostUsdField {
      grid-column: 3;
      grid-row: 2;
    }

    .form-section.shipment-logistics-section {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .document-source-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .form-section.user-account-section .form-section-title {
      grid-column: 1 / -1;
    }

    .form-switchbar {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
    }

    .form-switch-title {
      flex: 0 0 auto;
      min-width: 130px;
      font-weight: 800;
      color: var(--ink);
      font-size: 13px;
    }

    .form-switch-title span {
      display: inline;
      margin-left: 6px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
    }

    .form-switch-buttons {
      display: flex;
      flex: 4 1 680px;
      flex-wrap: wrap;
      gap: 6px;
    }

    .form-switch-btn {
      min-width: 92px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--ink);
      padding: 6px 9px;
      text-align: left;
      cursor: pointer;
      font-size: 12px;
    }

    .form-switch-btn span {
      display: block;
      margin-top: 3px;
      font-size: 11px;
      color: var(--muted);
    }

    .form-switch-btn.active {
      border-color: var(--blue);
      color: var(--blue);
      font-weight: 800;
    }

    .form-switch-btn.disabled {
      opacity: 0.52;
      cursor: not-allowed;
    }

    .form-switch-menu {
      position: relative;
    }

    .form-switch-menu summary {
      list-style: none;
      min-width: 98px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--ink);
      padding: 6px 9px;
      cursor: pointer;
      font-size: 12px;
      user-select: none;
    }

    .form-switch-menu summary::-webkit-details-marker {
      display: none;
    }

    .form-switch-menu summary span {
      display: block;
      margin-top: 2px;
      font-size: 11px;
      color: var(--muted);
    }

    .form-switch-menu.active summary {
      border-color: var(--blue);
      color: var(--blue);
      font-weight: 800;
    }

    .form-switch-dropdown {
      position: absolute;
      left: 0;
      top: calc(100% + 5px);
      z-index: 20;
      display: grid;
      gap: 5px;
      min-width: 150px;
      padding: 7px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
    }

    .form-switch-option {
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--input-bg);
      color: var(--ink);
      padding: 6px 8px;
      text-align: left;
      cursor: pointer;
      font-size: 12px;
    }

    .form-switch-option span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
    }

    .form-switch-option.active {
      border-color: var(--blue);
      color: var(--blue);
      font-weight: 800;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: var(--field-bg);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 10px;
    }

    .field.full { grid-column: 1 / -1; }
    .field.half { grid-column: span 3; }
    .field label { font-size: 12px; color: var(--muted); font-weight: 700; }
    .field input, .field select, .field textarea {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--input-bg);
      padding: 8px 10px;
      color: var(--ink);
    }
    .field input.required-invalid,
    .field select.required-invalid,
    .field textarea.required-invalid {
      border-color: var(--red);
      box-shadow: 0 0 0 1px rgba(239, 68, 68, .45);
    }
    .field label.required-label::after {
      content: " *";
      color: var(--red);
      font-weight: 900;
    }
    .field textarea { min-height: 82px; resize: vertical; }
    .field.compact-textarea textarea { min-height: 0; height: 54px; }
    .reimbursement-reason-field { grid-column: span 2; }

    @media (max-width: 900px) {
      #printFormBtn { display: none !important; }
    }

    #printFormBtn,#nameplatePrintBtn,#shareProductPrintBtn,#printModal,#nameplateModal { display:none !important; }
    #productShareRecordsModal,[data-open-product-share-records] { display:none !important; }
    .print-settings-section {
      grid-column: 1 / -1;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      padding: 12px;
    }

    .print-settings-section-head {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .print-settings-section-head strong {
      color: var(--blue);
      font-size: 15px;
    }

    .print-settings-section-head span {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .print-settings-subgrid {
      padding: 0;
      background: transparent;
    }

    #printModal .dialog {
      width: min(1180px, 100%) !important;
    }

    #printModal .form-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .print-settings-empty {
      border: 1px dashed var(--line);
      border-radius: 8px;
      padding: 16px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

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

    .inline-actions input[type="file"] {
      flex: 1 1 260px;
    }

    .muted {
      color: var(--muted);
      font-size: 12px;
      margin-top: 6px;
      line-height: 1.5;
    }
    .field input[readonly] { background: var(--soft-gray); color: var(--muted); }

    .subhead {
      grid-column: 1 / -1;
      font-size: 14px;
      font-weight: 800;
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft-blue);
      color: #1746b8;
    }

    .form-section {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--section-bg);
    }

    .form-section-title {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-size: 14px;
      font-weight: 800;
      color: #1746b8;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line);
    }

    .section-title-text,
    .layout-title-text {
      flex: 1 1 auto;
    }

    .section-collapse-btn {
      flex: 0 0 auto;
      min-height: 26px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--input-bg);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }

    .form-section.collapsed > :not(.form-section-title) {
      display: none !important;
    }

    .form-section.collapsed {
      gap: 0;
    }

    .customer-opportunity-card {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-left: 4px solid #2563eb;
      border-radius: 8px;
      background: var(--input-bg);
    }

    .customer-opportunity-card:not(.is-open) {
      display: none;
    }

    .customer-opportunity-toolbar {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .customer-opportunity-icons {
      grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      padding: 2px 0 4px;
    }

    .customer-opportunity-icon {
      width: 98px;
      min-height: 72px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--input-bg);
      color: var(--muted);
      cursor: pointer;
      font-weight: 700;
    }

    .customer-opportunity-icon::before {
      content: "◈";
      color: #2563eb;
      font-size: 21px;
      line-height: 1;
    }

    .customer-opportunity-icon small {
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 11px;
      font-weight: 600;
    }

    .customer-opportunity-icon.is-active {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
      background: var(--soft-blue);
      color: #1746b8;
    }

    .customer-opportunity-empty {
      grid-column: 1 / -1;
      padding: 16px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      color: var(--muted);
      text-align: center;
    }

    .customer-opportunity-card-head {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      font-weight: 800;
      color: var(--text);
    }

    .customer-opportunity-card .subtable-wrap {
      grid-column: 1 / -1;
      overflow-x: auto;
    }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, 0.38);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 32px;
      z-index: 10;
      overflow: auto;
    }

    .modal.open { display: flex; }

    @media (max-width: 900px) {
      #modal { height: 100vh; height: 100dvh; overflow: hidden; }
      #modal > .dialog { display: flex; flex-direction: column; height: 100%; max-height: 100%; min-height: 0; }
      #modal > .dialog > .dialog-head { position: static; flex: 0 0 auto; }
      #modal #entryForm { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
      #modal #entryForm > #formBody { overflow: visible; max-height: none; }
      #modal #entryForm > .dialog-foot { position: static; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    }

    #imagePreviewModal .dialog {
      width: min(900px, 96vw);
      max-height: 92vh;
    }

    .image-preview-body {
      min-height: 260px;
      max-height: calc(92vh - 72px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: #0f172a;
      overflow: auto;
    }

    .image-preview-body img {
      display: block;
      max-width: 100%;
      max-height: calc(92vh - 104px);
      object-fit: contain;
    }

    .dialog {
      width: min(1320px, 100%);
      background: var(--panel);
      border-radius: 8px;
      box-shadow: 0 20px 70px rgba(15, 23, 42, 0.28);
      overflow: hidden;
    }

    .dialog-head, .dialog-foot {
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
    }

    .dialog-foot {
      border-bottom: 0;
      border-top: 1px solid var(--line);
      justify-content: flex-end;
      gap: 10px;
    }

    .form-creator-info { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:13px; min-width:0; }
    .form-creator-info select { max-width:310px; padding:5px 8px; color:var(--ink); background:var(--input-bg); border:1px solid var(--line); border-radius:6px; }
    #modal > .dialog > .dialog-head { flex-wrap:wrap; gap:12px; }
    .dialog-head h3 {
      margin: 0;
      font-size: 18px;
    }

    .print-designer-wrap {
      display: grid;
      grid-template-columns: minmax(620px, 1fr) 300px;
      gap: 14px;
      padding: 14px;
      background: var(--bg);
    }

    .print-canvas-shell {
      min-height: 660px;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #dbe3ef;
      padding: 18px;
    }

    .print-canvas {
      position: relative;
      width: 794px;
      height: 1123px;
      margin: 0 auto;
      background: #fff;
      color: #111827;
      box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
      overflow: hidden;
      transform-origin: top center;
    }

    .print-canvas.landscape {
      width: 1123px;
      height: 794px;
    }

    .designer-panel {
      display: grid;
      gap: 12px;
      align-content: start;
      max-height: 72vh;
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 12px;
      background: var(--panel);
    }

    .designer-tools {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .designer-tools .full {
      grid-column: 1 / -1;
    }

    .print-option-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(120px, 1fr));
      gap: 10px;
      width: 100%;
    }

    .product-print-options-grid {
      grid-template-columns: repeat(6, minmax(120px, 1fr));
      gap: 8px;
    }

    .print-option-grid label {
      min-height: 42px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: var(--panel-soft);
      color: var(--text);
    }

    .product-print-options-grid label {
      min-height: 38px;
      padding: 7px 9px;
    }

    .print-check {
      min-height: 58px;
    }

    .print-check strong,
    .print-check small {
      display: block;
      line-height: 1.35;
    }

    .print-check small {
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
    }

    .nameplate-live-grid {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(360px, 1.1fr) minmax(340px, .9fr);
      gap: 12px;
      align-items: start;
    }

    .nameplate-controls-section,
    .nameplate-preview-section {
      grid-column: auto;
      min-width: 0;
    }

    .nameplate-preview-wrap {
      min-height: 540px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #d1d5db;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: auto;
      padding: 14px;
    }

    #nameplatePreviewFrame {
      width: 100%;
      min-height: 500px;
      border: 0;
      background: transparent;
    }

    .print-option-grid input {
      width: auto;
      height: auto;
    }

    .designer-field-picker {
      display: grid;
      gap: 8px;
    }

    .print-element {
      position: absolute;
      border: 1px dashed transparent;
      padding: 6px;
      cursor: move;
      overflow: hidden;
      background: rgba(255, 255, 255, .86);
      color: #111827;
    }

    .print-element.selected {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .16);
    }

    .print-element .print-element-content {
      width: 100%;
      height: 100%;
      overflow: hidden;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .print-element[data-type="image"] {
      padding: 0;
      background: transparent;
    }

    .print-element img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .print-element .resize-grip {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 12px;
      height: 12px;
      border-left: 2px solid #2563eb;
      border-top: 2px solid #2563eb;
      background: #fff;
      cursor: nwse-resize;
      display: none;
    }

    .print-element.selected .resize-grip {
      display: block;
    }

    .visual-print-body {
      margin: 0;
      background: #fff;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }

    .visual-print-page {
      position: relative;
      width: 210mm;
      height: 297mm;
      overflow: hidden;
      background: #fff;
    }

    .visual-print-page.landscape {
      width: 297mm;
      height: 210mm;
    }

    .param-row, .photo-row {
      display: grid;
      grid-template-columns: var(--product-param-columns, 52px 1fr 1fr 1fr 1fr auto);
      gap: 8px;
      margin-bottom: 8px;
      grid-column: 1 / -1;
    }

    .param-head,
    .config-head {
      display: grid;
      gap: 8px;
      grid-column: 1 / -1;
      margin-bottom: 6px;
      padding: 7px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--table-head);
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      align-items: center;
    }

    .param-head {
      grid-template-columns: var(--product-param-columns, 52px 1fr 1fr 1fr 1fr auto);
    }

    .param-head span {
      justify-self: start;
      text-align: left;
      min-width: 0;
      padding-left: 2px;
    }

    .basic-info-row,
    .basic-info-head {
      grid-template-columns: 52px 1fr 1fr .7fr auto;
    }

    .row-index {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--panel);
      color: var(--muted);
      font-weight: 800;
      user-select: none;
    }

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

    .row-actions .mini {
      min-width: 42px;
      padding-left: 8px;
      padding-right: 8px;
    }

    .category-picker {
      display: grid;
      gap: 10px;
    }

    .category-picker-row {
      display: grid;
      grid-template-columns: 88px 1fr;
      gap: 10px;
      align-items: start;
    }

    .category-picker-row strong {
      color: var(--text);
      padding-top: 8px;
      white-space: nowrap;
    }

    .contact-row {
      display: grid;
      grid-template-columns: 52px 1fr 1fr 1fr 1fr auto;
      gap: 8px;
      margin-bottom: 8px;
      grid-column: 1 / -1;
    }

    .service-provider-account-row {
      grid-template-columns: 52px 80px 1fr 1fr 1fr 1fr 1fr auto;
    }

    .customer-contact-row {
      display: grid;
      grid-template-columns: 52px repeat(6, minmax(0, 1fr)) auto;
      gap: 8px;
      margin-bottom: 8px;
      grid-column: 1 / -1;
    }

    .box-specs-wrap {
      overflow-x: auto;
      width: 100%;
    }

    .box-head,
    .box-row {
      display: grid;
      grid-template-columns: 52px repeat(7, minmax(120px, 1fr)) auto;
      gap: 8px;
      min-width: 1080px;
      grid-column: 1 / -1;
    }

    .box-head {
      align-items: center;
      padding: 9px 10px;
      margin-bottom: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--soft-gray);
      font-weight: 800;
    }

    .box-row {
      margin-bottom: 8px;
    }

    .box-specs-summary {
      display: grid;
      grid-template-columns: repeat(4, minmax(160px, 1fr));
      gap: 10px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--soft-gray);
      font-weight: 800;
    }

    .box-specs-summary span { text-align: center; }

    .document-row {
      display: grid;
      grid-template-columns: 52px 1.2fr 1fr 1fr auto;
      gap: 8px;
      margin-bottom: 8px;
      grid-column: 1 / -1;
    }

    .sales-products-wrap {
      overflow-x: auto;
      width: 100%;
    }

    .sales-product-head,
    .sales-product-row {
      display: grid;
      grid-template-columns: var(--sales-product-columns);
      gap: 10px;
      align-items: center;
      width: 100%;
      min-width: max(1280px, var(--sales-product-total-width));
    }

    .sales-product-head {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 12px;
      background: rgba(148,163,184,.08);
      border: 1px solid var(--line);
      border-radius: 8px;
      margin-bottom: 8px;
    }

    .sales-product-row {
      margin-bottom: 8px;
    }

    .sales-product-row input,
    .sales-product-row select {
      width: 100%;
      min-width: 0;
    }

    .purchase-items-wrap {
      overflow-x: auto;
      width: 100%;
    }

    .subtable-resizable-cell { position: relative; min-width: 0; }
    .subtable-resizable-cell > input, .subtable-resizable-cell > select { width: 100%; min-width: 0; }
    .subtable-col-resizer { right: 0; z-index: 5; }

    .purchase-item-head,
    .purchase-item-row {
      display: grid;
      grid-template-columns: 52px minmax(280px, 2fr) minmax(210px, 1.4fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(105px, .8fr) minmax(150px, 1fr) 126px;
      gap: 10px;
      align-items: center;
      min-width: 1220px;
      width: 100%;
    }

    .purchase-item-head {
      padding: 9px 10px;
      background: var(--soft-gray);
      border: 1px solid var(--line);
      border-radius: 8px;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .purchase-item-row {
      margin-bottom: 8px;
    }

    .purchase-item-row input,
    .purchase-item-row select {
      width: 100%;
      min-width: 0;
    }

    .sales-product-head .sales-product-resizable-head {
      position: relative;
      width: 100%;
      padding-right: 14px;
    }

    .sales-product-col-resizer {
      position: absolute;
      top: -7px;
      right: -5px;
      z-index: 3;
      width: 11px;
      height: calc(100% + 14px);
      cursor: col-resize;
      touch-action: none;
    }

    .sales-product-col-resizer::after {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 5px;
      width: 2px;
      border-radius: 999px;
      background: transparent;
    }

    .sales-product-col-resizer:hover,
    .sales-product-col-resizer.active {
      background: rgba(239, 68, 68, 0.16);
    }

    .sales-product-col-resizer:hover::after,
    .sales-product-col-resizer.active::after {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28);
    }

    .layout-editing .layout-item {
      outline: 2px dashed #8fb3ff;
      outline-offset: 2px;
      position: relative;
      cursor: move;
      padding-top: 34px;
    }

    .layout-item.dragging {
      opacity: .45;
    }

    .layout-editing .form-section {
      min-height: 96px;
    }

    .layout-editing .form-section.drop-target {
      outline: 2px dashed var(--red);
      outline-offset: 3px;
      background: rgba(239, 68, 68, 0.06);
    }

    .layout-section-tools {
      display: none;
      gap: 6px;
      margin-bottom: 8px;
    }

    .layout-section-tools button {
      min-height: 26px;
      border: 1px solid #8fb3ff;
      border-radius: 6px;
      background: #e8f0ff;
      color: #1746b8;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .layout-editing .layout-section-tools {
      display: inline-flex;
    }

    .layout-title-edit {
      display: none;
      width: 100%;
      min-height: 34px;
      border: 1px solid var(--blue);
      border-radius: 6px;
      padding: 6px 8px;
      background: var(--input-bg);
      color: var(--ink);
      font-weight: 800;
    }

    .layout-editing .layout-title-text {
      display: none;
    }

    .layout-editing .layout-title-edit {
      display: block;
    }

    .layout-tools {
      position: absolute;
      left: 8px;
      right: 44px;
      top: 6px;
      z-index: 2;
      display: none;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
    }

    .layout-tools select {
      min-height: 24px;
      padding: 2px 6px;
      border-radius: 6px;
      font-size: 12px;
    }

    .layout-editing .layout-tools {
      display: flex;
    }

    .layout-handle {
      position: absolute;
      right: 8px;
      top: 6px;
      z-index: 2;
      min-width: 28px;
      height: 24px;
      border-radius: 6px;
      border: 1px solid #8fb3ff;
      background: #e8f0ff;
      color: #1746b8;
      font-weight: 800;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: grab;
    }

    .layout-editing .layout-handle { display: inline-flex; }

    .config-row {
      display: grid;
      grid-template-columns: var(--product-config-columns);
      gap: 8px;
      margin-bottom: 8px;
      grid-column: 1 / -1;
    }

    .config-head {
      grid-template-columns: var(--product-config-columns);
      padding-left: 0;
      padding-right: 0;
    }

    .config-head span {
      justify-self: start;
      text-align: left;
      min-width: 0;
      padding-left: 2px;
    }

    .config-head .config-resizable-head {
      position: relative;
      width: 100%;
      padding-right: 14px;
    }

    .config-col-resizer {
      position: absolute;
      top: -7px;
      right: -5px;
      z-index: 3;
      width: 11px;
      height: calc(100% + 14px);
      cursor: col-resize;
      touch-action: none;
    }

    .config-col-resizer::after {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 5px;
      width: 2px;
      border-radius: 999px;
      background: transparent;
    }

    .config-col-resizer:hover,
    .config-col-resizer.active {
      background: rgba(239, 68, 68, 0.16);
    }

    .config-col-resizer:hover::after,
    .config-col-resizer.active::after {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28);
    }

    .param-head .param-resizable-head {
      position: relative;
      width: 100%;
      padding-right: 14px;
    }

    .param-col-resizer {
      position: absolute;
      top: -7px;
      right: -5px;
      z-index: 3;
      width: 11px;
      height: calc(100% + 14px);
      cursor: col-resize;
      touch-action: none;
    }

    .param-col-resizer::after {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 5px;
      width: 2px;
      border-radius: 999px;
      background: transparent;
    }

    .param-col-resizer:hover,
    .param-col-resizer.active {
      background: rgba(239, 68, 68, 0.16);
    }

    .param-col-resizer:hover::after,
    .param-col-resizer.active::after {
      background: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.28);
    }

    .param-row > input,
    .param-row > select,
    .param-row .inline-linked-input,
    .param-row .inline-linked-input input {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .param-row .inline-linked-input datalist {
      display: none;
    }

    .config-row > input,
    .config-row > select,
    .config-row .inline-linked-input,
    .config-row .inline-linked-input input {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }

    .config-row .inline-linked-input datalist {
      display: none;
    }

    .region-search {
      display: grid;
      gap: 8px;
    }

    .region-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-height: 150px;
      overflow: auto;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--input-bg);
    }

    .region-chip {
      min-height: 28px;
      padding: 0 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--panel);
      color: var(--ink);
      cursor: pointer;
      font-size: 12px;
    }

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

    .model-guide td {
      border: 1px solid var(--line);
      padding: 8px;
      font-size: 13px;
      line-height: 1.45;
      background: var(--input-bg);
    }

    .model-guide .blank {
      color: var(--muted);
      text-align: center;
    }

    .model-guide-field {
      grid-column: 1 / -1;
      padding: 0;
      align-self: stretch;
    }

    .model-guide-field .model-guide td {
      padding: 2px 4px;
      font-size: 9px;
      line-height: 1.12;
      vertical-align: middle;
    }

    .model-guide-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
      background: var(--input-bg);
    }

    .model-guide-cell {
      min-height: 32px;
      padding: 4px 6px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 11px;
      line-height: 1.22;
      display: flex;
      align-items: center;
      word-break: break-all;
    }

    .file-link {
      display: inline-flex;
      min-height: 28px;
      align-items: center;
      color: #1746b8;
      text-decoration: none;
      font-weight: 700;
    }

    .photo-row { grid-template-columns: 1fr 1fr; }

    .progress-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      overflow: auto;
    }

    .progress-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 14px;
      background: var(--panel);
    }

    .progress-item.is-collapsed .steps { display: none; }

    .progress-item.progress-additional-order {
      margin-left: 28px;
      border-left: 3px solid var(--accent);
      background: rgba(37, 99, 235, .06);
    }

    .progress-head .progress-order-code {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      border: 1px solid;
      border-radius: 8px;
      padding: 6px 9px;
    }
    .progress-head .progress-order-code.is-complete {
      color: #166534;
      border-color: #86cfa2;
      background: #e7f6ed;
    }
    .progress-head .progress-order-code.is-incomplete {
      color: #9a3412;
      border-color: #edb17b;
      background: #fff1df;
    }
    body.dark .progress-head .progress-order-code.is-complete { color: #a7f3c0; background: #173b2b; }
    body.dark .progress-head .progress-order-code.is-incomplete { color: #fed7aa; background: #462b18; }

    .progress-order-relation {
      display: inline-flex;
      align-items: center;
      margin-left: 7px;
      padding: 2px 6px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }

    .progress-details-toggle {
      margin-left: auto;
      flex: 0 0 auto;
      width: 30px;
      min-width: 30px;
      height: 30px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      line-height: 1;
    }

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

    .progress-head > b {
      flex: 0 0 auto;
      font-size: 16px;
    }


    .progress-summary {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
      flex: 1 1 520px;
    }

    .progress-summary input {
      width: 110px;
      min-height: 32px;
      padding: 5px 8px;
    }
    @media (min-width: 901px) {
      .progress-head { flex-wrap: nowrap; gap: 6px; }
      .progress-head > b { font-size: 13px; }
      .progress-summary { flex: 1 1 0; flex-wrap: nowrap; gap: 2px; font-size: 16px; line-height: 1.35; white-space: nowrap; overflow-x: auto; }
      .progress-summary > span { flex: 0 0 auto; }
      .progress-summary input { flex: 0 0 64px; width: 64px; min-height: 26px; padding: 3px 4px; font-size: inherit; }
    }

    .progress-customer-name {
      font-size: 14px;
      font-weight: 700;
      flex: 0 1 130px;
      max-width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #pageTitle.export-dashboard-title {
      cursor: pointer;
    }

    .user-entry.disk-normal { background: #15803d; border-color: #4ade80; color: #fff; }
    .user-entry.disk-warning { background: #a16207; border-color: #facc15; color: #fff; }
    .user-entry.disk-critical { background: #b91c1c; border-color: #f87171; color: #fff; }

    .admin-disk-status {
      padding: 9px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    #healthAlertSwitchRow[hidden] { display: none; }
    #healthAlertSwitchRow { display: flex; align-items: center; gap: 6px; }
    #healthAlertSwitch { width: auto; min-height: 0; }
    .admin-disk-status.normal { border-color: #4ade80; color: #15803d; }
    .admin-disk-status.warning { border-color: #facc15; color: #a16207; }
    .admin-disk-status.critical { border-color: #f87171; color: #dc2626; }

    .disk-storage-bar {
      display: flex;
      height: 14px;
      margin: 8px 0 7px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--line);
    }

    .disk-storage-bar span { min-width: 1px; }
    .disk-storage-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; }
    .disk-storage-legend span { display: inline-flex; align-items: center; gap: 4px; }
    .disk-storage-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

    #pageTitle.export-dashboard-title:hover {
      color: var(--blue);
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .steps {
      display: grid;
      grid-template-columns: minmax(210px, 1.68fr) minmax(130px, 1.25fr) minmax(130px, 1.25fr) minmax(140px, 1.05fr);
      gap: 10px;
      margin-top: 12px;
    }

    .progress-step-stack {
      display: grid;
      grid-template-rows: repeat(2, minmax(70px, 1fr));
      gap: 10px;
    }

    .progress-step-stack .step { min-height: 70px; }

    .step {
      min-height: 70px;
      border-radius: 8px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: var(--ink);
      border: 1px solid transparent;
    }

    .step.done { background: var(--soft-green); border-color: #b8e0c7; }
    .step.current { background: var(--soft-red); border-color: #ffc4bc; }
    .step.todo { background: var(--soft-gray); border-color: #d9dee6; color: #6b7280; }

    .step b { font-size: 14px; }
    .step span { font-size: 12px; }

    .progress-payment-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .progress-purchase-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px;
    }

    .progress-record-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, max-content));
      gap: 6px;
      margin-top: 8px;
    }

    .progress-stage-record-list {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .progress-shipment-summary {
      display: flex;
      gap: 8px;
      min-width: 0;
      white-space: nowrap;
      font-size: 11px;
    }

    .progress-shipment-summary span {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .progress-payment-card {
      min-width: 0;
      padding: 6px;
      border: 1px solid rgba(148, 163, 184, .45);
      border-radius: 6px;
      display: grid;
      gap: 4px;
    }

    .progress-payment-card.payment-card-done { background: var(--soft-green); border-color: #b8e0c7; color: var(--ink); }
    .progress-payment-card.payment-card-running { background: #571914; border-color: #d45148; color: #fff; }

    .progress-sales-card {
      min-width: 0;
      padding: 6px;
      border: 1px solid rgba(148, 163, 184, .45);
      border-radius: 6px;
      display: grid;
      gap: 4px;
      margin-top: 8px;
    }

    .progress-payment-detail {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .progress-payment-list .progress-payment-card {
      overflow: hidden;
      padding: 4px;
      gap: 3px;
    }

    .progress-payment-list .progress-payment-detail {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
      font-size: 11px;
    }

    .progress-payment-list .mini {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      padding: 4px 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px;
    }

    .record-list {
      margin: 6px 0 0;
      padding-left: 18px;
      color: var(--muted);
    }

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

    .thumbs img {
      width: 76px;
      height: 76px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--table-head);
    }

    .product-photo-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .product-photo-upload { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
    .product-photo-upload-row { display: flex; align-items: center; gap: 8px; }
    .product-photo-upload-row input[type="file"] { min-width: 0; flex: 1; }
    .product-photo-upload .file-thumb img { width: 58px; height: 58px; }
    .product-list-thumbs { gap: 4px; }
    .product-list-thumbs img { width: 38px; height: 38px; border-radius: 5px; }
    .product-photo-section { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .product-photo-section #photoPreview { display: grid; grid-template-columns: repeat(2, 51px); gap: 5px; align-content: start; }
    .product-photo-section #photoPreview img { width: 51px; height: 51px; border-radius: 6px; }
    @media (max-width: 760px) { .product-photo-upload-grid { grid-template-columns: 1fr; } }

    .empty {
      padding: 38px 16px;
      text-align: center;
      color: var(--muted);
    }

    .search {
      min-width: 260px;
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 0 12px;
      background: var(--input-bg);
      color: var(--ink);
    }

    @media (max-width: 900px) {
      body {
        min-width: 0;
        overflow-x: hidden;
      }

      header {
        min-height: 64px;
        height: auto;
        padding: 10px 12px;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
      }

      header h1 {
        flex: 1 1 100%;
        font-size: 18px;
        line-height: 1.25;
      }

      header h1 .version {
        padding: 2px 7px;
        font-size: 11px;
      }

      header .meta {
        width: 100%;
        gap: 8px;
        justify-content: flex-start;
        font-size: 12px;
      }

      #rateView {
        flex: 1 1 100%;
        line-height: 1.5;
      }

      .resource-expiry-bar {
        position: static;
        flex: 1 1 100%;
        margin-top: 2px;
      }

      .user-entry {
        min-height: 32px;
        padding: 0 9px;
      }

      .todo-panel,
      .admin-panel {
        left: 0;
        right: auto;
        top: calc(100% + 6px);
        width: min(94vw, 420px);
        max-width: none;
      }

      .app {
        display: flex;
        flex-direction: column;
        min-height: calc(100dvh - 96px);
      }

      nav {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        gap: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        white-space: nowrap;
      }

      nav::-webkit-scrollbar {
        height: 5px;
      }

      .nav-btn {
        width: auto;
        min-width: max-content;
        min-height: 36px;
        padding: 0 10px;
        margin-bottom: 0;
        border: 1px solid var(--line);
        background: var(--panel);
        font-size: 13px;
        gap: 7px;
      }

      .nav-btn svg {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
      }

      .drag-handle {
        display: none;
      }

      .nav-caret {
        margin-left: 4px;
        font-size: 10px;
      }

      .nav-sub-wrap {
        display: flex;
        gap: 6px;
        margin: 0;
        padding-left: 0;
        border-left: 0;
      }

      .nav-sub-wrap.collapsed {
        display: none;
      }

      .nav-sub {
        min-height: 34px;
        padding-left: 9px;
        font-size: 12px;
      }

      main {
        width: 100%;
        height: auto;
        min-height: calc(100dvh - 146px);
        padding: 12px;
        overflow: visible;
      }

      #content,
      #content.financial-reconciliation-content {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
        padding-right: 0;
      }

      #content > .panel {
        display: block;
        flex: 0 0 auto;
        min-height: auto;
        overflow: visible;
      }

      .toolbar {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 10px;
        gap: 10px;
      }

      .title-wrap h2 {
        font-size: 20px;
      }

      .title-wrap p {
        font-size: 12px;
      }

      .actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .actions button,
      .actions .search {
        width: 100%;
        min-width: 0;
      }

      .search {
        grid-column: 1 / -1;
      }

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

      .stat {
        min-height: 48px;
        padding: 8px 10px;
      }

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

      .stat span {
        font-size: 12px;
      }
      .financial-filter-grid, .financial-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .financial-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .financial-summary-stack, .financial-summary-full { border-bottom: 1px solid var(--line); }

      .order-total-summary {
        gap: 12px;
        padding: 8px 10px;
      }

      .dashboard-date-filter { flex-wrap: wrap; }

      .panel {
        border-radius: 8px;
      }

      .table-scroll {
        margin: 0;
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-left: 1px solid var(--line);
        border-right: 1px solid var(--line);
      }

      table {
        min-width: 860px;
      }

      th,
      td {
        padding: 9px;
        font-size: 12px;
      }

      .pagination {
        gap: 6px;
        padding: 8px;
        flex-wrap: wrap;
      }

      .modal {
        padding: 0;
        align-items: stretch;
      }

      .dialog {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
      }

      .dialog-head,
      .dialog-foot {
        padding: 10px 12px;
      }

      .dialog-head {
        position: sticky;
        top: 0;
        z-index: 3;
        background: var(--panel);
      }

      .dialog-foot {
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--panel);
        flex-wrap: wrap;
        gap: 8px;
      }

      .dialog-foot button {
        flex: 1 1 42%;
      }

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

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

      .form-section.user-account-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

      .form-section.purchase-calculation-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

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

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

      .sales-currency-note {
        grid-column: 1 / -1;
        grid-row: auto;
      }

      .sales-amount-section #purchaseCostUsdField {
        grid-column: auto;
        grid-row: auto;
      }

      .field.full,
      .model-guide-field,
      .form-switchbar {
        grid-column: 1 / -1;
      }

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

      .form-switch-title {
        flex-basis: 100%;
      }

      .form-switch-buttons {
        flex-basis: 100%;
      }

      .field input,
      .field select,
      .field textarea {
        min-height: 36px;
      }

      .inline-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .contact-row,
      .customer-contact-row,
      .param-row,
      .config-row,
      .document-row {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
        overflow-x: auto;
      }

      .contact-row button,
      .customer-contact-row button,
      .param-row button,
      .config-row button,
      .document-row button {
        grid-column: 1 / -1;
      }

      .box-specs-summary { grid-template-columns: repeat(2, minmax(130px, 1fr)); }

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

      .model-guide-cell {
        min-height: 34px;
        font-size: 11px;
      }

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

      .progress-list {
        padding: 10px;
        overflow: visible;
      }

      .progress-item {
        padding: 10px;
      }

      .progress-summary {
        flex-basis: 100%;
      }
    }

    @media (max-width: 520px) {
      header {
        padding: 8px;
      }

      header h1 {
        font-size: 17px;
      }

      header .meta {
        gap: 6px;
      }

      .app {
        min-height: calc(100dvh - 104px);
      }

      nav {
        padding: 7px;
      }

      .nav-btn {
        min-height: 34px;
        padding: 0 8px;
        font-size: 12px;
      }

      .nav-btn svg {
        display: block;
      }

      main {
        height: auto;
        min-height: calc(100dvh - 152px);
        padding: 8px;
      }

      .resource-expiry-bar {
        width: 100%;
        overflow-x: auto;
        text-align: left;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .title-wrap {
        gap: 5px 8px;
      }

      .title-wrap h2 {
        font-size: 19px;
      }

      .title-wrap p {
        width: 100%;
        white-space: normal;
        line-height: 1.45;
      }

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

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

      .stat {
        gap: 8px;
        min-height: 56px;
      }

      .stat strong {
        font-size: 20px;
      }

      .form-grid,
      .form-section {
        grid-template-columns: 1fr;
      }

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

      .form-section.purchase-calculation-section {
        grid-template-columns: 1fr;
      }

      .purchase-refund-row {
        grid-template-columns: 1fr;
      }

      .form-section.sales-amount-section {
        grid-template-columns: 1fr;
      }

      .field,
      .field.full,
      .model-guide-field {
        grid-column: 1 / -1 !important;
      }

      input,
      select,
      textarea,
      button {
        font-size: 16px;
      }

      .mini,
      .nav-btn,
      .pager,
      .pager button,
      .pager select {
        font-size: 13px;
      }

      .field input,
      .field select,
      .field textarea {
        min-height: 42px;
      }

      .dialog-foot button {
        flex-basis: 100%;
      }

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

      .steps {
        grid-template-columns: 1fr;
      }

      .progress-head {
        gap: 8px;
      }

      .progress-head > b,
      .progress-details-toggle {
        flex: 0 0 auto;
      }

      .progress-summary {
        font-size: 12px;
        line-height: 1.55;
      }

      .progress-payment-list,
      .progress-purchase-list {
        grid-template-columns: 1fr;
      }

      .progress-shipment-summary {
        flex-wrap: wrap;
        white-space: normal;
      }

      table {
        min-width: 680px;
      }

      .thumbs img {
        width: 68px;
        height: 68px;
      }
    }
    #mobileNavToggle { display: none; }
    @media (max-width: 900px) {
      #mobileNavToggle { display: block; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 31; margin: 0; min-height: 52px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--text); }
      #nav { display: none; position: fixed; bottom: calc(52px + env(safe-area-inset-bottom)); top: auto; left: 0; z-index: 30; width: 100%; max-height: 40dvh; flex-wrap: wrap; overflow: auto; white-space: normal; box-shadow: 0 -6px 18px #0002; }
      #mobileNavToggle[aria-expanded="true"] + #nav { display: flex; }
      #nav .nav-sub-wrap { flex-wrap: wrap; }
      #mobileNavToggle[aria-expanded="true"] + #nav { display: block; height: 40dvh; padding: 8px; }
      #nav > .nav-btn { width: 42%; min-width: 0; white-space: normal; margin-bottom: 6px; justify-content: flex-start; }
      #nav > .nav-sub-wrap, #nav > .nav-sub-wrap.collapsed { display: none; }
      #nav > .nav-sub-wrap.mobile-submenu-active { display: flex; flex-direction: column; flex-wrap: nowrap; position: absolute; top: 0; right: 0; width: 56%; height: 100%; overflow-y: auto; padding: 8px; border-left: 1px solid var(--line); background: var(--panel); }
      #nav .mobile-submenu-active .nav-btn { width: 100%; min-width: 0; flex-shrink: 0; white-space: normal; }
      #nav .mobile-primary-active { background: var(--soft-blue); color: var(--blue); }
      .app main { padding-bottom: calc(76px + env(safe-area-inset-bottom) + var(--mobile-menu-height, 0px)); }
      #mobileNavToggle { background: var(--blue); color: #fff; font-weight: 700; box-shadow: 0 -3px 12px #0003; touch-action: manipulation; }
      .modal { z-index: 100; }
      .dashboard-date-filter .order-total-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; width: 100%; min-width: 0; gap: 8px; white-space: normal; overflow: hidden; }
      .dashboard-date-filter .order-total-summary span { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
      .dashboard-date-filter .order-total-summary strong { font-size: 15px; overflow-wrap: anywhere; }
    }
    @media (max-width: 360px) { .dashboard-date-filter .order-total-summary { grid-template-columns: 1fr; } }
    #loginModal .form-grid { padding:12px 16px; gap:8px; }
    #loginModal { align-items:center; padding:12px; }
    #loginModal .field { padding:0; border:0; background:transparent; margin:0; }
    #loginModal .dialog-head, #loginModal .dialog-foot { padding:10px 16px; }
    #loginModal input:not([type="checkbox"]) { min-height:34px; padding:7px 10px; }
    #loginModal #dingtalkQrArea { padding:4px 0; }
    #loginModal #refreshDingtalkQr { width:auto; padding:4px 10px; margin-top:4px; }
    #loginModal #dingtalkQrStatus:empty { display:none; }
    #mobileDingtalkLogin { display:none; }
    @media(max-width:900px) {
      #loginModal #dingtalkQrArea { display:none; }
      #mobileDingtalkLogin { display:block; }
    }
    [data-commission-page] > .panel { padding: 14px; }
    #content.commission-content { display:block; overflow:auto; min-height:0; scrollbar-gutter:stable; }
    [data-commission-page] { min-width:0; }
    .commission-tabs { display:flex; gap:10px; margin-bottom:14px; }
    .commission-filters { margin-bottom:10px; }
    .commission-summary { display:flex; flex-wrap:wrap; gap:12px; }
    .commission-summary span { background:var(--soft-blue); padding:7px 12px; border-radius:8px; }
    .commission-orders-panel { margin-top:14px; }
    .commission-order-table { width:100%; min-width:880px; table-layout:fixed; }
    .commission-order-table td { vertical-align:top; white-space:normal; overflow-wrap:anywhere; padding:14px; }
    .commission-order-table th:first-child { width:18%; }
    .commission-order-table th:nth-child(2) { width:26%; }
    .commission-order-table[data-list-layout-key="commissions-orders"] { min-width:1160px; }
    .commission-order-table[data-list-layout-key="commissions-orders"] th:first-child { width:18%; }
    .commission-order-table[data-list-layout-key="commissions-orders"] th:nth-child(2) { width:25%; }
    /* Payroll rows stay compact even when an order has a long name. */
    .commission-order-table[data-list-layout-key="commissions-personal"] { min-width:1280px; }
    .commission-order-table[data-list-layout-key="commissions-personal"] th,
    .commission-order-table[data-list-layout-key="commissions-personal"] td { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; overflow-wrap:normal; }
    .commission-order-table[data-list-layout-key="commissions-personal"] th:first-child { width:150px; }
    .commission-order-table[data-list-layout-key="commissions-personal"] th:nth-child(2) { width:240px; }
    table[data-auto-resizable-list] th > .col-resizer { right:0; }
    .commission-order-code { display:inline-block; color:var(--green); background:var(--soft-green); border:1px solid var(--line); border-radius:7px; padding:6px 9px; font-weight:600; }
    .commission-person + .commission-person { border-top:1px solid var(--line); margin-top:8px; padding-top:8px; }
    .commission-person strong { font-size:16px; }
    .commission-state { margin:5px 0; color:var(--muted); }
    .commission-state.done { color:var(--green); }
    .commission-state.pending { color:var(--amber); }
    .commission-audit { margin-top:14px; }
    #commissionDialog [data-commission-refund-row] input:not([type=checkbox]) { min-width:100px; }
    @media (max-width:900px) { #content.commission-content { overflow:visible; scrollbar-gutter:auto; } }
    [data-commission-page] .inline-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
    [data-commission-page] input, [data-commission-page] select, #commissionDialog input, #commissionDialog select, #commissionDialog textarea { font:inherit; color:var(--ink); background:var(--input-bg); border:1px solid var(--line); border-radius:7px; padding:7px 9px; max-width:100%; }
    [data-commission-page] label { display:flex; align-items:center; gap:7px; }
    [data-commission-page] summary { cursor:pointer; font-weight:600; padding:4px 0; }
    #commissionDialog { color:var(--ink); }
    #commissionDialog::backdrop { background:rgba(15,23,42,.48); }
    #commissionActionForm > label { display:flex; flex-direction:column; gap:5px; margin:12px 0; color:var(--muted); }
    #commissionActionForm > label input, #commissionActionForm > label select, #commissionActionForm > label textarea { width:100%; }
    #commissionActionForm textarea { min-height:80px; }
    #commissionDialog .inline-actions { display:flex; gap:10px; justify-content:flex-end; }
    #commissionDialog [name=quantity] { width:105px; }