:root {
      color-scheme: light;
      --bg: #f6f7f9;
      --panel: #ffffff;
      --panel-soft: #f9fafb;
      --text: #1f2937;
      --muted: #6b7280;
      --line: #e5e7eb;
      --primary: #1677ff;
      --primary-dark: #0f5ed7;
      --green: #16a34a;
      --red: #dc2626;
      --amber: #d97706;
      --teal: #0f766e;
      --shadow: 0 10px 30px rgba(15, 23, 42, .08);
      --radius: 8px;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 14px;
      letter-spacing: 0;
    }
    button, input, textarea, select { font: inherit; }
    button {
      border: 0;
      border-radius: 6px;
      cursor: pointer;
      transition: .15s ease;
      white-space: nowrap;
    }
    button:disabled { cursor: not-allowed; opacity: .55; }
    a { color: var(--primary); text-decoration: none; }

    .app {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 232px 1fr;
    }
    .sidebar {
      background: #111827;
      color: #e5e7eb;
      padding: 20px 14px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 8px 12px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, #1677ff, #00a884);
      color: white;
      font-weight: 800;
    }
    .brand strong { display: block; color: white; font-size: 16px; }
    .brand span { display: block; color: #9ca3af; font-size: 12px; margin-top: 2px; }
    .nav { display: grid; gap: 6px; }
    .nav button {
      display: grid;
      grid-template-columns: 26px 1fr auto;
      align-items: center;
      width: 100%;
      padding: 10px 10px;
      background: transparent;
      color: #d1d5db;
      text-align: left;
    }
    .nav button:hover, .nav button.active { background: rgba(255,255,255,.09); color: #fff; }
    .badge {
      min-width: 22px;
      height: 22px;
      padding: 0 7px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: #ef4444;
      color: #fff;
      font-size: 12px;
    }
    .profile {
      margin-top: auto;
      padding: 12px;
      background: rgba(255,255,255,.07);
      border-radius: var(--radius);
    }
    .profile label { color: #9ca3af; font-size: 12px; display: block; margin-bottom: 8px; }
    .profile select {
      width: 100%;
      padding: 8px 9px;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 6px;
      background: #1f2937;
      color: white;
    }

    .main { min-width: 0; }
    .topbar {
      height: 64px;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.9);
      position: sticky;
      top: 0;
      z-index: 5;
      backdrop-filter: blur(10px);
    }
    .topbar h1 { margin: 0; font-size: 20px; }
    .topbar .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
    .content { padding: 22px 24px 34px; }
    .view { display: none; }
    .view.active { display: block; }

    .grid { display: grid; gap: 16px; }
    .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      max-width: 640px;
    }
    .stat-mini {
      padding: 10px 12px;
      min-height: 0;
      border-top-width: 2px;
    }
    .stat-mini .label { font-size: 12px; }
    .stat-mini .value { font-size: 22px; margin-top: 4px; }
    .stat-mini .hint { display: none; }
    .dash-template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 8px;
      max-width: 520px;
    }
    .dash-template-grid .type-grid-card {
      min-height: 38px;
      padding: 6px 8px;
    }
    .dash-template-grid .type-grid-card strong { font-size: 12px; }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .panel-head {
      padding: 15px 16px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .panel-title { margin: 0; font-size: 15px; }
    .panel-body { padding: 16px; }
    .stat {
      padding: 18px;
      min-height: 116px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .stat .label { color: var(--muted); }
    .stat .value { font-size: 30px; font-weight: 800; margin-top: 8px; }
    .stat .hint { color: var(--muted); font-size: 12px; }
    .stat.blue { border-top: 3px solid var(--primary); }
    .stat.green { border-top: 3px solid var(--green); }
    .stat.amber { border-top: 3px solid var(--amber); }
    .stat.teal { border-top: 3px solid var(--teal); }

    .toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .btn {
      height: 34px;
      padding: 0 12px;
      background: #eef2f7;
      color: var(--text);
    }
    .btn:hover { background: #e2e8f0; }
    .btn.primary { background: var(--primary); color: white; }
    .btn.primary:hover { background: var(--primary-dark); }
    .btn.green { background: var(--green); color: white; }
    .btn.red { background: var(--red); color: white; }
    .btn.ghost { background: transparent; border: 1px solid var(--line); }
    .btn.icon { width: 34px; padding: 0; display: inline-grid; place-items: center; }
    .btn.small { height: 28px; padding: 0 9px; font-size: 12px; }

    .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
    .tab {
      height: 34px;
      padding: 0 12px;
      background: #f3f4f6;
      color: var(--muted);
      border: 1px solid transparent;
    }
    .tab.active {
      background: #fff;
      color: var(--primary);
      border-color: #b8d6ff;
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    .field label { font-weight: 650; font-size: 13px; }
    .req { color: var(--red); margin-left: 3px; }
    input, textarea, select {
      width: 100%;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      padding: 9px 10px;
      background: #fff;
      color: var(--text);
      outline: none;
    }
    textarea { min-height: 92px; resize: vertical; }
    input:focus, textarea:focus, select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
    }
    .help { color: var(--muted); font-size: 12px; }
    .choice-row { display: flex; flex-wrap: wrap; gap: 10px 16px; }
    .choice-row label {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      font-weight: 400;
    }
    .choice-row input { width: auto; }

    .template-layout {
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr) 320px;
      gap: 16px;
      align-items: start;
    }
    .template-flow-layout {
      grid-template-columns: 270px minmax(0, 1fr);
    }
    .list { display: grid; gap: 8px; }
    .list-item {
      padding: 11px 12px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      cursor: pointer;
    }
    .list-item:hover, .list-item.active { border-color: #9dc7ff; background: #f0f7ff; }
    .list-item strong { display: block; margin-bottom: 4px; }
    .list-item span { color: var(--muted); font-size: 12px; }
    .list-category-header { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; padding: 10px 12px 4px; letter-spacing: .05em; }
    .admin-serial-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .admin-serial-main { min-width: 0; flex: 1; }
    .admin-serial-thumb {
      width: 52px;
      height: 52px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid var(--line);
      flex-shrink: 0;
    }
    .admin-search-row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-left: auto;
      align-items: center;
    }
    .admin-search-row input {
      width: 132px;
      max-width: 100%;
      min-height: 36px;
    }
    .panel-head.workbench-head {
      flex-wrap: wrap;
      align-items: stretch;
    }
    .panel-head.workbench-head .tabs {
      flex: 1 1 auto;
    }
    .workbench-search-row {
      flex: 0 0 auto;
      width: 220px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .workbench-search-row input {
      flex: 1 1 auto;
      min-width: 60px;
      min-height: 38px;
    }
    .approval-link-wrap {
      display: grid;
      gap: 8px;
    }
    .approval-link-trigger {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .approval-link-selected {
      padding: 10px 12px;
      border: 1px dashed var(--line);
      border-radius: 8px;
      background: var(--panel-soft);
      color: var(--muted);
      line-height: 1.5;
    }
    .app-modal.fullscreen .app-modal-panel {
      width: 100vw;
      height: 100vh;
      margin: 0;
      border-radius: 0;
      display: flex;
      flex-direction: column;
    }
    .app-modal.fullscreen .app-modal-body {
      flex: 1;
      overflow: auto;
    }
    .admin-request-modal-body {
      padding: 16px 20px 24px;
      background: #f5f7fb;
    }
    .admin-request-modal-body .workbench-detail-wrap {
      max-width: 960px;
      margin: 0 auto;
    }
    .approval-link-modal-tools {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 220px;
      gap: 10px;
      margin-bottom: 12px;
      position: sticky;
      top: 0;
      z-index: 1;
      background: #fff;
      padding-bottom: 10px;
    }
    .approval-link-status-tabs {
      grid-column: 1 / -1;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .approval-link-list {
      display: grid;
      gap: 6px;
      padding: 2px;
      min-width: 0;
    }
    .approval-link-item {
      text-align: left;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      padding: 10px 12px;
      cursor: pointer;
      font: inherit;
      color: inherit;
      width: 100%;
      min-width: 0;
      overflow: hidden;
    }
    .approval-link-item:hover { border-color: #9dc7ff; background: #f8fbff; }
    .approval-link-item.active {
      border-color: var(--primary);
      background: #eef5ff;
      box-shadow: inset 0 0 0 1px var(--primary);
    }
    .approval-link-item strong {
      display: block;
      font-size: 13px;
      margin-bottom: 5px;
      line-height: 1.45;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .approval-link-item span {
      display: block;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .control-palette {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .control-palette button {
      min-height: 38px;
      border: 1px solid var(--line);
      background: #fff;
      text-align: left;
      padding: 8px 10px;
    }
    .control-palette button:hover { border-color: var(--primary); color: var(--primary); }
    .field-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .field-card.dragging { opacity: .55; }
    .field-card-head {
      min-height: 42px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: #f9fafb;
      border-bottom: 1px solid var(--line);
      cursor: grab;
    }
    .field-card-head strong { font-size: 13px; }
    .field-card-body { padding: 12px; }
    .mini-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .switch {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
    }
    .switch input { width: auto; }
    .empty {
      padding: 24px;
      text-align: center;
      color: var(--muted);
      border: 1px dashed #cbd5e1;
      border-radius: var(--radius);
      background: #fff;
    }
    .submit-layout {
      display: grid;
      gap: 16px;
      align-items: start;
    }
    .type-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .type-grid-card {
      min-height: 44px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      cursor: pointer;
      transition: .15s ease;
    }
    .type-grid-card:hover,
    .type-grid-card.active {
      border-color: var(--primary);
      background: #f0f7ff;
      box-shadow: 0 0 0 3px rgba(22, 119, 255, .1);
    }
    .type-grid-card strong {
      font-size: 13px;
      font-weight: 650;
      line-height: 1.35;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (min-width: 781px) {
      .type-grid {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 8px;
        max-width: 520px;
      }
      .type-grid-card {
        min-height: 38px;
        padding: 6px 8px;
      }
      .type-grid-card strong { font-size: 12px; }
    }
    .template-card {
      min-height: 98px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      cursor: pointer;
    }
    .template-card:hover, .template-card.active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(22,119,255,.1); }
    .template-card strong { font-size: 15px; }
    .template-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
    .workbench-card {
      position: relative;
      min-height: 260px;
      height: auto;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow: visible;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .workbench-card-body {
      flex: 0 0 auto;
      display: grid;
      gap: 8px;
      align-content: start;
      cursor: pointer;
      min-width: 0;
      flex-shrink: 0;
      padding-top: 36px;
    }
    .workbench-card-status-wrap {
      position: absolute;
      top: 12px;
      right: 12px;
      left: 12px;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 6px;
      pointer-events: none;
    }
    .workbench-card-status {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      height: 22px;
      padding: 0 8px;
      white-space: nowrap;
      border-radius: 999px;
      font-weight: 600;
    }
    .workbench-card-status.sub {
      color: #1d4ed8;
      background: #dbeafe;
    }
    .workbench-card-status.done-time {
      color: #64748b;
      background: #f1f5f9;
      font-weight: 500;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .workbench-card-body:hover + .workbench-card-actions,
    .workbench-card:hover {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(22,119,255,.1);
    }
    .workbench-card-actions {
      position: static;
      flex-shrink: 0;
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid #eef2f7;
    }
    .workbench-card-actions .btn {
      min-height: 32px;
      padding: 0 12px;
      font-size: 13px;
      line-height: 1;
    }
    .linked-request-backbar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }
    .link-open-hint {
      font-size: 11px;
      opacity: 0.85;
    }
    .linked-req-actions {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .btn.linked-req-inplace {
      background: #e2e8f0;
      border: 1px solid #94a3b8;
      color: #334155;
      font-weight: 600;
    }
    .btn.linked-req-inplace:hover {
      background: #cbd5e1;
      border-color: #64748b;
      color: #1e293b;
    }
    .workbench-card .line-1 {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.45;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .doc-no {
      color: var(--primary);
      font-weight: 700;
      letter-spacing: .02em;
    }
    .workbench-card .line-2,
    .workbench-card .line-3,
    .workbench-card .line-4,
    .workbench-card .line-5 {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .workbench-card .line-5 {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .workbench-card .line-multiline {
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .customer-paste-bar {
      grid-column: 1 / -1;
      padding: 12px 14px;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      background: var(--panel-soft);
    }
    .customer-paste-bar .toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .select-option-list {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .select-option-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .select-option-row input {
      flex: 1;
      min-width: 0;
    }
    .select-option-spacer {
      width: 34px;
      flex-shrink: 0;
    }
    .workbench-card .has-thumbs {
      overflow: visible;
      white-space: normal;
    }
    .workbench-card-thumbs {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .workbench-card-thumb {
      width: 52px;
      height: 52px;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 6px;
      overflow: hidden;
      background: #f3f4f6;
      cursor: zoom-in;
      flex-shrink: 0;
    }
    .workbench-card-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      pointer-events: none;
    }
    .proof-photo-thumb-wrap {
      position: relative;
      flex-shrink: 0;
    }
    .proof-photo-del {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 999px;
      background: rgba(220, 38, 38, .92);
      color: #fff;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
      z-index: 1;
    }
    .proof-photo-del:hover {
      background: #b91c1c;
    }
    .workbench-back {
      margin-bottom: 14px;
    }
    .workbench-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      gap: 16px;
      align-items: start;
      min-height: 520px;
    }
    .workbench-split-list {
      min-width: 0;
      max-height: calc(100vh - 220px);
      overflow-y: auto;
      display: grid;
      gap: 14px;
      align-content: start;
      align-items: start;
      grid-auto-rows: max-content;
    }
    .workbench-split-detail {
      min-width: 0;
      max-height: calc(100vh - 220px);
      overflow-y: auto;
    }
    .workbench-card.active {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(22, 119, 255, .15);
    }
    .workbench-detail-empty {
      min-height: 280px;
      display: grid;
      place-content: center;
      color: var(--muted);
      text-align: center;
      padding: 24px;
    }
    @media (min-width: 781px) {
      .workbench-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
      }
      .workbench-detail-wrap .panel-body {
        padding: 20px 28px 24px;
      }
      .workbench-detail-wrap .kv {
        grid-template-columns: 132px minmax(0, 1fr);
      }
      .workbench-detail-wrap .kv div:last-child {
        word-break: break-word;
      }
      .workbench-card {
        min-height: 280px;
      }
      .workbench-card .line-2,
      .workbench-card .line-3,
      .workbench-card .line-4,
      .workbench-card .line-5 {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .workbench-card .line-5,
      .workbench-card .line-multiline {
        -webkit-line-clamp: 4;
      }
    }
    .kv-with-copy {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }
    .kv-value { flex: 1; min-width: 0; }

    .proof-serial-multi {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      flex: 1;
      min-width: 0;
    }
    .proof-serial-token-wrap {
      display: flex;
      align-items: center;
      gap: 2px;
      min-width: 0;
    }
    .proof-serial-token {
      width: 100%;
      min-width: 0;
      padding: 5px 7px;
      font-size: 13px;
    }
    .proof-serial-token-del {
      width: 20px;
      height: 20px;
      line-height: 1;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: #fff;
      color: #999;
      cursor: pointer;
      flex: none;
    }
    .proof-serial-add {
      grid-column: 1 / -1;
      justify-self: start;
    }
    @media (min-width: 781px) {
      .proof-serial-multi {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }
    }

    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    th, td {
      padding: 11px 10px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
      overflow-wrap: anywhere;
    }
    th {
      background: #f9fafb;
      color: #374151;
      font-size: 12px;
      font-weight: 700;
    }
    tr:hover td { background: #fcfcfd; }
    .status {
      display: inline-flex;
      align-items: center;
      height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 650;
    }
    .status.pending { color: #92400e; background: #fef3c7; }
    .status.approved { color: #166534; background: #dcfce7; }
    .status.rejected { color: #991b1b; background: #fee2e2; }
    .status.withdrawn { color: #374151; background: #e5e7eb; }
    .detail {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 16px;
    }
    .kv {
      display: grid;
      grid-template-columns: 120px 1fr;
      border-bottom: 1px solid var(--line);
      min-height: 42px;
    }
    .kv div { padding: 10px; }
    .kv div:first-child { color: var(--muted); background: #f9fafb; }
    .timeline { display: grid; gap: 10px; }
    .event {
      padding: 10px 12px;
      border-left: 3px solid var(--primary);
      background: #f9fafb;
      border-radius: 0 6px 6px 0;
    }
    .event strong { display: block; margin-bottom: 4px; }
    .event span { color: var(--muted); font-size: 12px; }
    .proof-box {
      margin-top: 14px;
      padding: 12px;
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      border-radius: var(--radius);
      display: grid;
      gap: 10px;
    }
    .proof-action-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .proof-action-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .proof-upload-btn svg {
      display: block;
    }
    .proof-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .proof-list {
      margin: 8px 0 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.8;
    }
    .file-preview-list {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .file-preview {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      max-width: 240px;
      background: #fff;
    }
    .file-preview-btn {
      display: block;
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
    }
    .file-preview img {
      display: block;
      width: 100%;
      max-height: 240px;
      object-fit: contain;
      background: #f3f4f6;
      pointer-events: none;
    }
    .file-preview .help {
      padding: 6px 8px;
      margin: 0;
    }

    .image-viewer {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: none;
    }
    .image-viewer.show { display: block; }
    .image-viewer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .88);
    }
    .image-viewer-panel {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      color: #fff;
    }
    .image-viewer-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 10px 16px;
      background: rgba(0, 0, 0, .35);
      flex-shrink: 0;
    }
    .image-viewer-header #imageViewerName {
      font-size: 14px;
      opacity: .85;
      max-width: min(720px, 90vw);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .image-viewer-bottom-bar {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      z-index: 10001;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      max-width: calc(100vw - 32px);
      padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
      border-radius: 14px;
      background: rgba(0, 0, 0, .62);
      box-shadow: 0 8px 32px rgba(0, 0, 0, .45);
      pointer-events: none;
    }
    .image-viewer-bottom-bar #imageViewerCounter {
      font-size: 14px;
      opacity: .88;
      line-height: 1;
      pointer-events: auto;
    }
    .image-viewer-bottom-bar .image-viewer-actions {
      pointer-events: auto;
    }
    .image-viewer-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .image-viewer-actions button {
      min-height: 36px;
      padding: 0 14px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 13px;
      cursor: pointer;
    }
    .image-viewer-actions button:hover:not(:disabled) {
      background: rgba(255, 255, 255, .22);
    }
    .image-viewer-actions button:disabled {
      opacity: .35;
      cursor: not-allowed;
    }
    .image-viewer-stage {
      flex: 1;
      display: grid;
      place-items: center;
      overflow: auto;
      padding: 16px 16px 88px;
      touch-action: pan-y pinch-zoom;
    }
    .image-viewer-swipe-hint {
      display: none;
      font-size: 12px;
      opacity: .72;
      text-align: center;
      padding: 0 16px 8px;
    }
    @media (max-width: 780px) {
      .image-viewer-swipe-hint { display: block; }
    }
    .image-viewer-stage img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transform-origin: center center;
      transition: transform .15s ease;
      user-select: none;
    }

    .submit-file-field .toolbar {
      margin-bottom: 10px;
    }
    .submit-serial-field input[type="text"] {
      width: 100%;
    }
    .submit-serial-field .toolbar {
      margin-top: 8px;
    }
    .submit-file-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 8px;
    }
    .submit-file-thumb {
      position: relative;
      width: 88px;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #f9fafb;
    }
    .submit-file-thumb img {
      display: block;
      width: 100%;
      height: 72px;
      object-fit: cover;
    }
    .submit-file-view-btn {
      position: relative;
    }
    .submit-file-view-label {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 6px;
      display: block;
      padding: 2px 4px;
      border-radius: 999px;
      background: rgba(17, 24, 39, .72);
      color: #fff;
      font-size: 10px;
      line-height: 1.35;
      text-align: center;
      pointer-events: none;
    }
    .submit-file-thumb .name {
      padding: 4px 6px;
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .submit-file-thumb .del {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 22px;
      height: 22px;
      border: 0;
      border-radius: 999px;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
    }

    .submit-camera-page {
      position: fixed;
      inset: 0;
      z-index: 10001;
      display: none;
      flex-direction: column;
      background: #0f172a;
      color: #fff;
      touch-action: manipulation;
    }
    .submit-camera-page * {
      touch-action: manipulation;
    }
    .submit-camera-page .camera-preview,
    .submit-camera-page .camera-preview video,
    .submit-camera-page .camera-preview canvas {
      touch-action: none;
    }
    .submit-camera-page.show {
      display: flex;
    }
    .submit-camera-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 16px;
      background: rgba(0, 0, 0, .45);
      flex-shrink: 0;
    }
    .submit-camera-toolbar button {
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
    }
    .submit-camera-toolbar button.primary {
      background: var(--primary);
      border-color: var(--primary);
    }
    .submit-camera-toolbar span {
      font-size: 15px;
      font-weight: 600;
      flex: 1;
      text-align: center;
    }
    .submit-camera-count {
      font-size: 13px;
      font-weight: 500;
      opacity: .85;
      flex: 0 0 auto;
      min-width: 72px;
      text-align: right;
    }
    .submit-camera-page .camera-preview {
      flex: 1;
      min-height: 0;
      border-radius: 0;
      overflow: hidden;
    }
    .submit-camera-page .camera-preview video,
    .submit-camera-page .camera-preview img,
    .submit-camera-page .camera-preview canvas {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .camera-serial-panel {
      display: none;
    }
    .submit-camera-session {
      display: flex;
      gap: 10px;
      padding: 10px 12px;
      overflow-x: auto;
      background: rgba(0, 0, 0, .22);
      backdrop-filter: blur(6px);
      flex-shrink: 0;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .submit-camera-session:empty {
      display: none;
    }
    .submit-camera-session > img {
      width: 56px;
      height: 56px;
      object-fit: cover;
      border-radius: 8px;
      border: 2px solid rgba(255, 255, 255, .35);
      display: block;
      flex: 0 0 auto;
      max-width: 56px;
      max-height: 56px;
    }
    .submit-camera-thumb {
      position: relative;
      flex: 0 0 auto;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      text-align: center;
      color: #fff;
    }
    .submit-camera-thumb-view {
      display: block;
      border: 0;
      padding: 0;
      background: transparent;
      cursor: pointer;
      color: inherit;
    }
    .submit-camera-thumb img {
      width: 56px;
      height: 56px;
      object-fit: cover;
      border-radius: 8px;
      border: 2px solid rgba(255, 255, 255, .35);
      display: block;
    }
    .submit-camera-thumb:active img {
      opacity: .75;
    }
    .submit-camera-thumb-serial {
      display: block;
      font-size: 10px;
      opacity: .88;
      max-width: 80px;
      margin-top: 4px;
      word-break: break-all;
      line-height: 1.35;
    }
    .submit-camera-thumb-hint {
      display: block;
      border: 0;
      padding: 0;
      background: transparent;
      color: inherit;
      cursor: pointer;
      font-size: 9px;
      opacity: .58;
      margin-top: 2px;
    }
    .submit-camera-bottom {
      position: relative;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 112px;
      padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
      background: rgba(0, 0, 0, .28);
      backdrop-filter: blur(4px);
    }
    .submit-camera-shutter {
      width: 76px;
      height: 76px;
      border-radius: 50%;
      border: 4px solid #fff;
      background: rgba(255, 255, 255, .95);
      box-shadow: 0 0 0 4px rgba(255, 255, 255, .22);
      cursor: pointer;
      transition: transform .12s ease, background .12s ease;
      position: relative;
    }
    .submit-camera-shutter::after {
      content: "拍照";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      color: #0f172a;
      font-size: 13px;
      font-weight: 700;
    }
    .submit-camera-shutter:active {
      transform: scale(.94);
      background: #e5e7eb;
    }
    .submit-camera-finish {
      position: absolute;
      right: 16px;
      bottom: calc(22px + env(safe-area-inset-bottom, 0px));
      min-height: 44px;
      padding: 0 20px;
      border: 0;
      border-radius: 22px;
      background: var(--primary);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(22, 119, 255, .35);
    }
    .submit-camera-finish:disabled {
      opacity: .45;
      cursor: not-allowed;
      box-shadow: none;
    }
    .proof-gun-list {
      flex: 1;
      overflow: auto;
      padding: 12px 16px;
      background: rgba(0, 0, 0, .35);
      color: #fff;
      font-size: 14px;
      line-height: 1.6;
    }
    .proof-gun-item {
      padding: 8px 10px;
      margin-bottom: 8px;
      border-radius: 8px;
      background: rgba(255, 255, 255, .12);
      word-break: break-all;
    }
    .proof-gun-item.dup {
      opacity: .65;
    }
    .scan-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 16px;
      align-items: start;
    }
    .camera-preview {
      width: 100%;
      min-height: 360px;
      background: #0f172a;
      border-radius: var(--radius);
      display: grid;
      place-items: center;
      overflow: hidden;
      color: #cbd5e1;
    }
    .camera-preview video,
    .camera-preview canvas,
    .camera-preview img {
      width: 100%;
      height: 100%;
      max-height: 520px;
      object-fit: contain;
      display: block;
    }
    .serial-pill {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 4px 9px;
      border-radius: 999px;
      background: #ecfeff;
      color: #0f766e;
      border: 1px solid #99f6e4;
      font-weight: 650;
      margin: 4px 5px 4px 0;
    }
    .bar {
      height: 10px;
      background: #e5e7eb;
      border-radius: 999px;
      overflow: hidden;
    }
    .bar span { display: block; height: 100%; background: var(--primary); }
    .toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      max-width: min(360px, calc(100vw - 40px));
      background: #111827;
      color: white;
      padding: 12px 14px;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: .2s ease;
      z-index: 20;
    }
    .toast.show { opacity: 1; transform: translateY(0); }

    .app-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 260;
    }
    .app-modal.active { display: block; }
    .app-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, .45);
    }
    .app-modal-panel {
      position: relative;
      width: min(480px, calc(100vw - 32px));
      margin: min(10vh, 72px) auto 0;
      background: #fff;
      border-radius: 12px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .app-modal-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
    }
    .app-modal-head h3 {
      margin: 0;
      font-size: 16px;
    }
    .app-modal-close {
      width: 32px;
      height: 32px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: var(--muted);
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .app-modal-body {
      padding: 16px;
    }
    .app-modal-body textarea {
      width: 100%;
      min-height: 148px;
      margin-top: 10px;
      resize: vertical;
    }
    .app-modal-foot {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 0 16px 16px;
    }

    .login-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
      background: linear-gradient(160deg, #eef4ff 0%, #f6f7f9 45%, #f0fdf4 100%);
    }
    .login-panel {
      width: min(400px, 100%);
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 12px;
      box-shadow: var(--shadow);
      padding: 28px 24px 22px;
    }
    .login-panel h1 { margin: 0 0 6px; font-size: 24px; }
    .login-panel .sub { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
    .login-panel .field { margin-bottom: 14px; }
    .login-panel button[type="submit"] {
      width: 100%;
      height: 40px;
      margin-top: 6px;
      background: var(--primary);
      color: #fff;
    }
    .login-panel button[type="submit"]:hover { background: var(--primary-dark); }
    .profile-box {
      padding: 12px;
      background: rgba(255,255,255,.07);
      border-radius: var(--radius);
    }
    .profile-box .who { color: #fff; font-weight: 650; font-size: 14px; }
    .profile-box .meta { color: #9ca3af; font-size: 12px; margin-top: 4px; line-height: 1.5; }
    .profile-box .btn { width: 100%; margin-top: 10px; background: rgba(255,255,255,.12); color: #e5e7eb; }
    .profile-box .btn:hover { background: rgba(255,255,255,.18); }
    .topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;
      flex-shrink: 0;
    }
    .topbar-profile {
      display: none;
      align-items: center;
      gap: 8px;
    }
    .topbar-profile .who {
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      max-width: 96px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .topbar-profile .btn {
      padding: 6px 12px;
      font-size: 12px;
      min-height: 32px;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--text);
    }
    .perm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .perm-table th, .perm-table td {
      padding: 8px 6px;
      border-bottom: 1px solid var(--line);
      text-align: center;
      vertical-align: middle;
    }
    .perm-table th:first-child, .perm-table td:first-child { text-align: left; font-weight: 650; }
    .perm-table input { width: auto; }

    .approver-pick-wrap { display: grid; gap: 12px; margin-top: 6px; }
    .approver-pick-title {
      font-size: 12px;
      font-weight: 650;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .approver-pick-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .approver-pick-item {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 38px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #fff;
      cursor: pointer;
      transition: .15s ease;
      user-select: none;
    }
    .approver-pick-item:hover { border-color: #9dc7ff; background: #f8fbff; }
    .approver-pick-item.active {
      border-color: #52c41a;
      background: #f6ffed;
      box-shadow: 0 0 0 2px rgba(82, 196, 26, .12);
    }
    .approver-pick-box {
      width: 18px;
      height: 18px;
      border: 1.5px solid #cbd5e1;
      border-radius: 4px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      font-size: 12px;
      line-height: 1;
      color: transparent;
      background: #fff;
    }
    .approver-pick-item.active .approver-pick-box {
      border-color: #52c41a;
      background: #ecfdf3;
      color: #16a34a;
    }
    .pick-label {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      line-height: 1.4;
    }

    @media (max-width: 1120px) {
      .template-layout, .detail { grid-template-columns: 1fr; }
      .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .workbench-split { grid-template-columns: 1fr; }
      .workbench-split-list, .workbench-split-detail { max-height: none; }
    }
    @media (max-width: 780px) {
      .app { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .sidebar .profile { display: none; }
      .topbar-profile { display: flex; }
      .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .content { padding: 16px; }
      .topbar { padding: 0 16px; }
      .grid.cols-4, .grid.cols-3, .grid.cols-2, .submit-layout, .form-grid, .mini-grid, .scan-layout { grid-template-columns: 1fr; }
      .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
      .dash-template-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
      .approval-link-modal-tools { grid-template-columns: 1fr; }
      .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
      .proof-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .kv { grid-template-columns: 1fr; }
      .approver-pick-grid { grid-template-columns: 1fr; }
      #view-workbench .workbench-split-detail { display: none !important; }
      .workbench-mobile-page {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 240;
        background: #eef2f8;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
      }
      .workbench-mobile-page.active { display: block; }
      .workbench-mobile-page-inner {
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        min-height: 100%;
      }
      .workbench-mobile-detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
        position: sticky;
        top: 0;
        z-index: 2;
        background: #eef2f8;
        padding: 4px 0 8px;
      }
      .workbench-mobile-detail-head .workbench-back {
        margin: 0;
        flex-shrink: 0;
      }
      .workbench-mobile-detail-head .workbench-refresh {
        margin: 0 0 0 auto;
        flex-shrink: 0;
        min-width: 56px;
      }
    }

/* Viewer.js toolbar button size */
.viewer-toolbar > ul > li {
  zoom: 1.8;
}

#view-personal .personal-card {
  min-height: 0 !important;
  padding: 4px 6px !important;
  gap: 1px !important;
  border-radius: 8px !important;
}
#view-personal #personalList {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}
#view-personal .personal-card strong {
  display: block !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.12 !important;
}
#view-personal .personal-card span {
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.12 !important;
}
#view-personal .personal-card .btn.small {
  height: 18px !important;
  min-height: 18px !important;
  padding: 0 5px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}
#view-personal .personal-card input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
}