/*
 * Team PMS V2 — light operations editorial system
 * Visual target: docs/design-targets/dashboard-light-approved.png
 *                docs/design-targets/project-flow-light-approved.png
 */
:root {
  --primary: #465cff;
  --primary-dark: #2f43df;
  --primary-light: #edf1ff;
  --primary-soft: #f5f7ff;
  --violet: #7b61ff;
  --danger: #ff4d63;
  --danger-soft: #fff1f3;
  --success: #465cff;
  --warn: #7b61ff;
  --bg: #f4f6fa;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --text: #171922;
  --text2: #697083;
  --text3: #9ba2b3;
  --border: #e6e9f0;
  --border-strong: #d5d9e4;
  --radius: 8px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: none;
  --sidebar-w: 252px;
  --topbar-h: 72px;
  --font-ui: "Noto Sans SC Variable", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-number: "Space Grotesk Variable", "Space Grotesk", "Arial Narrow", sans-serif;
}

/* ---------- Planned tasks: Swiss personal ledger ---------- */
.planned-task-page {
  width: min(100%, 1500px);
  margin: 0 auto;
  color: var(--text);
}
.ops-todo-type.planned { border-color: #cbd4ff; background: var(--primary-light); color: var(--primary-dark); }
.pt-page-head {
  min-height: 94px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding: 2px 0 22px;
}
.pt-page-head h1 { margin: 0; font-size: 34px; font-weight: 780; letter-spacing: -.045em; line-height: 1.08; }
.pt-page-head p { max-width: 640px; margin: 9px 0 0; color: var(--text2); font-size: 13px; }
.pt-page-head .pt-create { min-width: 126px; min-height: 44px; }

.pt-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
  border: 1px solid var(--border-strong);
  background: #fff;
}
.pt-summary > button {
  min-width: 0;
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: end;
  gap: 6px 12px;
  padding: 17px 20px 15px;
  border: 0;
  border-right: 1px solid var(--border-strong);
  border-radius: 0;
  background: #fff;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pt-summary > button:last-child { border-right: 0; }
.pt-summary > button:hover, .pt-summary > button.active { background: var(--primary-soft); }
.pt-summary > button.active { position: relative; }
.pt-summary > button.active::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--primary); }
.pt-summary > button.overdue.active::before { background: var(--danger); }
.pt-summary span { align-self: start; color: var(--text2); font-size: 12px; font-weight: 650; }
.pt-summary strong { align-self: end; font-family: var(--font-number); font-size: clamp(38px, 3vw, 54px); font-weight: 650; letter-spacing: -.06em; line-height: .86; font-variant-numeric: tabular-nums; }
.pt-summary .overdue strong { color: var(--danger); }
.pt-summary i { align-self: end; justify-self: end; color: var(--primary); font-size: 17px; }

.pt-workspace { overflow: hidden; border: 1px solid var(--border-strong); background: #fff; }
.pt-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border-strong);
  background: #f7f8fb;
}
.pt-toolbar > label { min-width: 0; }
.pt-toolbar > label:not(.pt-search) { flex: 1 1 132px; }
.pt-toolbar > label > span { display: block; margin-bottom: 5px; color: var(--text3); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.pt-toolbar :is(input, select) { width: 100%; height: 44px; }
.pt-scope { height: 44px; flex: 1 1 270px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border-strong); background: #fff; }
.pt-scope button { min-width: 0; border: 0; border-right: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--text2); font-size: 12px; font-weight: 680; cursor: pointer; }
.pt-scope button:last-child { border-right: 0; }
.pt-scope button:hover, .pt-scope button.active { background: var(--primary); color: #fff; }
.pt-search { position: relative; flex: 1 1 230px; }
.pt-search > i { position: absolute; z-index: 1; left: 13px; bottom: 13px; color: var(--text3); }
.pt-search input { padding-left: 38px; }
.pt-filter-end { min-height: 44px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.pt-filter-end .btn { min-height: 44px; white-space: nowrap; }
.pt-deleted-toggle { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: var(--text2); font-size: 11px; white-space: nowrap; }
.pt-deleted-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }

.pt-list-head { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--border); }
.pt-list-head > div { display: flex; align-items: baseline; gap: 9px; }
.pt-list-head b { font-size: 14px; }
.pt-list-head span { color: var(--text3); font-size: 11px; }
.pt-task-list { padding: 0 18px; }
.pt-task-row {
  min-height: 120px;
  display: grid;
  grid-template-columns: 82px minmax(280px, 1.45fr) minmax(220px, .82fr) auto;
  align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
}
.pt-task-row:last-child { border-bottom: 0; }
.pt-task-row:hover { background: #fafbff; }
.pt-task-row:focus-visible { outline: 3px solid rgba(70, 92, 255, .25); outline-offset: -3px; }
.pt-date-block { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px 16px 14px 0; border-right: 1px solid var(--border); }
.pt-date-block strong { font-family: var(--font-number); font-size: 39px; font-weight: 620; letter-spacing: -.06em; line-height: .88; font-variant-numeric: tabular-nums; }
.pt-date-block span { margin-top: 8px; color: var(--text2); font-size: 11px; font-weight: 700; }
.pt-date-block small { margin-top: 2px; color: var(--text3); font-family: var(--font-number); font-size: 11px; font-variant-numeric: tabular-nums; }
.pt-task-row.overdue .pt-date-block strong { color: var(--danger); }
.pt-task-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 15px 18px; }
.pt-task-main > div { display: flex; align-items: center; gap: 6px; }
.pt-task-main h3 { overflow: hidden; margin: 7px 0 0; font-size: 16px; font-weight: 730; letter-spacing: -.02em; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.pt-task-main p { display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: var(--text2); font-size: 11px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pt-task-row.completed .pt-task-main p { color: var(--primary-dark); }
.pt-priority, .pt-status { min-height: 22px; display: inline-flex; align-items: center; padding: 0 7px; border: 1px solid var(--border-strong); border-radius: 3px; background: #fff; color: var(--text2); font-size: 10px; font-weight: 720; white-space: nowrap; }
.pt-priority.紧急 { border-color: #ffc8d0; background: var(--danger-soft); color: var(--danger); }
.pt-priority.重要 { border-color: #cbd4ff; background: var(--primary-light); color: var(--primary); }
.pt-status.overdue { border-color: var(--danger); color: var(--danger); }
.pt-status.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.pt-status.completed { border-color: #bac5ee; background: #eef1fb; color: var(--primary-dark); }
.pt-status.cancelled { background: #f3f4f6; color: var(--text3); }
.pt-task-context { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 16px 18px; border-left: 1px solid var(--border); }
.pt-task-context span { min-width: 0; display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--text2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pt-task-context i { flex: 0 0 auto; color: var(--primary); font-size: 15px; }
.pt-task-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 14px 0 14px 16px; }
.pt-task-actions .btn { min-height: 38px; }
.pt-task-actions .btn span { display: none; }
.pt-task-actions .btn i { margin: 0; }
.pt-empty { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; color: var(--text2); text-align: center; }
.pt-empty > i { margin-bottom: 12px; color: var(--primary); font-size: 34px; }
.pt-empty b { color: var(--text); font-size: 15px; }
.pt-empty span { margin: 6px 0 16px; font-size: 12px; }
.pt-load-more { width: 100%; min-height: 48px; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: #fff; color: var(--primary); font-size: 12px; font-weight: 700; cursor: pointer; }
.pt-load-more:hover { background: var(--primary-soft); }
.pt-load-more:disabled { color: var(--text3); cursor: wait; }

.planned-employee-card .todo-ico.planned { border: 1px solid #cbd4ff; background: var(--primary-light); color: var(--primary); font-family: var(--font-number); }
.planned-employee-tasks { margin: 4px 0 14px; border-top: 1px solid var(--border); }
.planned-employee-tasks button { width: 100%; min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.planned-employee-tasks button > span { min-width: 0; }
.planned-employee-tasks button b, .planned-employee-tasks button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planned-employee-tasks button b { font-size: 12px; }
.planned-employee-tasks button small { margin-top: 3px; color: var(--text3); font-size: 10px; }
.planned-employee-tasks button i { color: var(--primary); }

.pt-form-modal { width: min(850px, calc(100vw - 32px)); max-width: 850px; max-height: min(880px, 92dvh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.pt-form-modal .modal-head > div > span, .pt-action-modal .modal-head > div > span { display: block; margin-top: 4px; color: var(--text3); font-size: 11px; }
.pt-form-modal .modal-body { overflow-y: auto; }
.pt-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pt-form-grid label, .pt-action-modal label { display: block; min-width: 0; }
.pt-form-grid label.full { grid-column: 1 / -1; }
.pt-form-grid label > span, .pt-action-modal label > span { display: block; margin-bottom: 6px; color: var(--text2); font-size: 11px; font-weight: 680; }
.pt-form-grid :is(input, select, textarea), .pt-action-modal textarea { width: 100%; }
.pt-form-grid :is(input, select) { height: 44px; }
.pt-form-grid textarea, .pt-action-modal textarea { min-height: 96px; resize: vertical; }
.pt-form-section { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--border); }
.pt-form-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 11px; }
.pt-form-section-head b { font-size: 13px; }
.pt-form-section-head span { color: var(--text3); font-size: 10px; }
.pt-assignee-grid, .pt-reminder-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pt-assignee-grid label, .pt-reminder-grid label:not(.custom) { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); background: #fff; color: var(--text2); font-size: 11px; cursor: pointer; }
.pt-assignee-grid label:has(input:checked), .pt-reminder-grid label:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); }
.pt-assignee-grid input, .pt-reminder-grid input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--primary); }
.pt-reminder-grid .custom { min-height: 44px; display: grid; grid-template-columns: auto minmax(70px, 1fr) auto; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--border); color: var(--text2); font-size: 11px; }
.pt-reminder-grid .custom input { width: 100%; height: 32px; }
.pt-reminder-grid .custom em { color: var(--text3); font-size: 10px; font-style: normal; }
.pt-assignee-self { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pt-assignee-self > div b, .pt-assignee-self > div span { display: block; }
.pt-assignee-self > div span { margin-top: 3px; color: var(--text3); font-size: 10px; }
.pt-assignee-self strong { min-height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid #cbd4ff; background: var(--primary-light); color: var(--primary-dark); font-size: 11px; }
.pt-attachment-upload .pt-form-section-head { align-items: center; }
.pt-attachment-upload .pt-form-section-head > div { min-width: 0; }
.pt-attachment-upload .pt-form-section-head > div b, .pt-attachment-upload .pt-form-section-head > div span { display: block; }
.pt-attachment-upload .pt-form-section-head > div span { margin-top: 3px; }
.pt-attachment-picker { min-height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--primary); background: #fff; color: var(--primary); font-size: 11px; font-weight: 700; cursor: pointer; }
.pt-attachment-picker:hover { background: var(--primary-soft); }
.pt-attachment-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.pt-attachment-list { display: grid; gap: 6px; }
.pt-attachment-empty { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border: 1px dashed var(--border-strong); color: var(--text3); font-size: 10px; }
.pt-attachment-item { min-width: 0; min-height: 48px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 8px; padding: 5px 8px; border: 1px solid var(--border); background: #fff; }
.pt-attachment-item > i:first-child { color: var(--primary); font-size: 19px; }
.pt-attachment-item > :is(a, span) { min-width: 0; color: var(--text); text-decoration: none; }
.pt-attachment-item b, .pt-attachment-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-attachment-item b { font-size: 11px; font-weight: 690; }
.pt-attachment-item small { margin-top: 2px; color: var(--text3); font-size: 9px; font-weight: 500; }
.pt-attachment-item > :is(button, i:last-child) { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text3); }
.pt-attachment-item > button { cursor: pointer; }
.pt-attachment-item > button:hover { background: var(--primary-soft); color: var(--primary); }
.pt-complete-upload { margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--border); }
.pt-action-modal { max-width: 500px; }
.pt-action-modal .modal-body { padding-top: 22px; }
.pt-update-modal { max-width: 560px; }
.pt-update-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr); gap: 12px; margin-top: 14px; }
.pt-update-fields input { width: 100%; min-height: 42px; }

.pt-detail-drawer { width: min(620px, 100vw); }
.pt-detail-drawer > header { min-height: 104px; }
.pt-detail-drawer > header > div { min-width: 0; }
.pt-detail-drawer > header h3 { overflow: hidden; max-width: 480px; text-overflow: ellipsis; white-space: nowrap; }
.pt-detail-number { display: block; color: var(--primary); font-family: var(--font-number); font-size: 10px; font-weight: 720; letter-spacing: .1em; }
.pt-detail-status { display: flex; align-items: center; gap: 7px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.pt-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--border); }
.pt-detail-facts > div { min-width: 0; padding: 13px 12px 13px 0; border-bottom: 1px solid var(--border); }
.pt-detail-facts > div:nth-child(odd) { border-right: 1px solid var(--border); }
.pt-detail-facts > div:nth-child(even) { padding-left: 14px; }
.pt-detail-facts dt { color: var(--text3); font-size: 10px; }
.pt-detail-facts dd { margin: 5px 0 0; color: var(--text); font-size: 12px; font-weight: 650; line-height: 1.5; }
.pt-detail-section { padding: 17px 0; border-bottom: 1px solid var(--border); }
.pt-detail-section h4 { margin: 0 0 10px; font-size: 13px; }
.pt-detail-section h4 > span { margin-left: 5px; color: var(--primary); font-family: var(--font-number); font-size: 10px; }
.pt-detail-section > p { margin: 0; color: var(--text2); font-size: 12px; line-height: 1.75; white-space: pre-wrap; }
.pt-reminder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-reminder-chips span { min-height: 28px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid #cbd4ff; background: var(--primary-soft); color: var(--primary-dark); font-size: 10px; }
.pt-reminder-chips em { color: var(--text3); font-size: 11px; font-style: normal; }
.pt-completion { margin: 17px 0 0; padding: 15px; border: 1px solid #cbd4ff; border-left: 4px solid var(--primary); background: var(--primary-soft); }
.pt-completion > div { display: flex; align-items: center; gap: 10px; }
.pt-completion i { color: var(--primary); font-size: 24px; }
.pt-completion b, .pt-completion small { display: block; }
.pt-completion b { color: var(--primary-dark); font-size: 13px; }
.pt-completion small { margin-top: 2px; color: var(--text2); font-size: 10px; }
.pt-completion p { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid #d9e0ff; color: var(--text); font-size: 12px; line-height: 1.65; white-space: pre-wrap; }
.pt-completion > .pt-completion-files { display: block; margin-top: 12px; padding-top: 11px; border-top: 1px solid #d9e0ff; }
.pt-completion-files > strong { display: block; margin-bottom: 7px; color: var(--primary-dark); font-size: 10px; }
.pt-history-attachments { margin-top: 7px; }
.pt-history-attachments .pt-attachment-item { min-height: 43px; background: #fafbff; }
.pt-cancel-note { margin-top: 17px; padding: 14px; border-left: 4px solid var(--border-strong); background: #f5f6f8; }
.pt-cancel-note b { font-size: 12px; }
.pt-cancel-note p { margin: 6px 0 0; color: var(--text2); font-size: 12px; white-space: pre-wrap; }
.pt-cancel-note small { display: block; margin-top: 7px; color: var(--text3); font-size: 10px; }
.pt-deleted-notice { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--border); background: #f5f6f8; color: var(--text2); font-size: 11px; }
.pt-history ol { margin: 0; padding: 0; list-style: none; }
.pt-history li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 9px; padding-bottom: 15px; }
.pt-history li:last-child { padding-bottom: 0; }
.pt-history li > span { z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: #fff; color: var(--text3); }
.pt-history li:not(:last-child) > span::after { content: ''; position: absolute; top: 22px; bottom: 0; left: 10px; width: 1px; background: var(--border); }
.pt-history li.completion > span { border-color: var(--primary); background: var(--primary); color: #fff; }
.pt-history li.progress-update > span { border-color: #bdc8ff; background: var(--primary-soft); color: var(--primary); }
.pt-history li.overdue-update > span { border-color: #ffc8d0; background: var(--danger-soft); color: var(--danger); }
.pt-history li > div > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pt-history li b { font-size: 11px; }
.pt-history li time, .pt-history li small { color: var(--text3); font-size: 10px; }
.pt-history li small { display: block; margin-top: 2px; }
.pt-history li p { margin: 6px 0 0; padding: 8px 10px; border-left: 2px solid var(--border-strong); background: #f7f8fb; color: var(--text2); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.pt-history li.completion p { border-left-color: var(--primary); background: var(--primary-soft); color: var(--text); }
.pt-history li.progress-update p { border-left-color: var(--primary); background: #fafbff; color: var(--text); }
.pt-history li.overdue-update p { border-left-color: var(--danger); background: var(--danger-soft); }
.pt-history-meta { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap; gap: 5px !important; margin-top: 7px; }
.pt-history-meta span { min-height: 26px; display: inline-flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--border); background: #fff; color: var(--text2); font-size: 9px; }
.pt-history-meta span.overdue { border-color: #ffc8d0; background: var(--danger-soft); color: var(--danger); }
.pt-history li.empty { display: block; color: var(--text3); font-size: 11px; }
.pt-detail-drawer > footer { justify-content: flex-end; }
.pt-detail-drawer > footer > span { flex: 1; }
.pt-detail-drawer > footer .pt-delete { color: var(--danger); }
.pt-detail-drawer > footer .pt-overdue-update { border-color: #ffc8d0; color: var(--danger); }

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
button, a, [onclick] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(70, 92, 255, .28);
  outline-offset: 2px;
}
input, select, textarea {
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(70, 92, 255, .1);
}

/* ---------- Persistent application chrome ---------- */
.shell-v2 .topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--topbar-h);
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(260px, 1fr) auto auto 42px auto auto;
  align-items: center;
  gap: 22px;
  padding: 0 28px 0 0;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .98);
  box-shadow: none;
}
.shell-v2 .topbar:not(:has(.topbar-create)) {
  grid-template-columns: var(--sidebar-w) minmax(260px, 1fr) auto 42px auto auto;
}
.shell-v2 .topbar-brand {
  width: var(--sidebar-w);
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 0;
  padding: 0 8px 0 20px;
  border-right: 1px solid var(--border);
}
.brand-home, .sidebar-toggle {
  border: 0;
  background: transparent;
  color: var(--text);
}
.brand-home {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
}
.brand-home > i {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 30px;
}
.tb-brand-name {
  overflow: hidden;
  color: var(--text);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-toggle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text2);
  font-size: 16px;
}
.sidebar-toggle:hover { border-color: var(--primary); color: var(--primary); }
.shell-v2 .topbar-search {
  position: relative;
  width: 100%;
  max-width: 680px;
  margin: 0;
}
.shell-v2 .topbar-search > i {
  position: absolute;
  left: 16px;
  top: 50%;
  z-index: 1;
  color: var(--text2);
  font-size: 18px;
  transform: translateY(-50%);
}
.shell-v2 .topbar-search input {
  height: 42px;
  padding: 0 16px 0 46px;
  border-color: var(--border-strong);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
}
.topbar-create {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.topbar-date {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  font-size: 13px;
  white-space: nowrap;
}
.topbar-date i { font-size: 18px; }
.topbar-feedback {
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text2);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.topbar-feedback:hover { border-color: var(--primary); color: var(--primary); }
.topbar-feedback i { font-size: 18px; }
.approval-entry {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text2);
}
.approval-entry:hover { border-color: var(--primary); color: var(--primary); }
.approval-entry > i { font-size: 19px; }
.approval-entry > b {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-number);
  font-size: 9px;
  line-height: 1;
}
.shell-v2 .topbar-user { margin: 0; }
.shell-v2 .tb-user {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 17px;
  border-left: 1px solid var(--border);
}
.shell-v2 .avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 720;
}
.shell-v2 .tb-user-name { color: var(--text); font-size: 13px; }
.shell-v2 .user-menu {
  top: 50px;
  min-width: 190px;
  overflow: hidden;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  background: #fff;
  box-shadow: 0 18px 44px rgba(35, 40, 66, .12) !important;
}

.shell-v2 .layout { min-height: 100vh; padding-top: var(--topbar-h); }
.shell-v2 .sidebar {
  position: sticky;
  top: var(--topbar-h);
  width: var(--sidebar-w);
  height: calc(100vh - var(--topbar-h));
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--border);
  background: #fbfcff;
}
.shell-v2 .nav { padding: 22px 12px 14px; }
.shell-v2 .nav-group { margin: 0 0 22px; }
.shell-v2 .nav-group-title {
  min-height: 22px;
  display: block;
  margin: 0;
  padding: 0 13px 7px;
  border: 0;
  color: var(--text3);
  font-size: 11px;
  font-weight: 560;
  letter-spacing: .04em;
}
.shell-v2 .nav-item {
  position: relative;
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #434858;
  text-align: left;
}
.shell-v2 .nav-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  display: block;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.shell-v2 .nav-item > i { color: #52586a; font-size: 22px; }
.shell-v2 .nav-label { overflow: hidden; font-size: 14px; font-weight: 520; text-overflow: ellipsis; white-space: nowrap; }
.shell-v2 .nav-item:hover { background: #f0f3fa; color: var(--text); }
.shell-v2 .nav-item.active { background: #ebefff; color: var(--primary); font-weight: 700; }
.shell-v2 .nav-item.active::before { background: var(--primary); }
.shell-v2 .nav-item.active > i { color: var(--primary); }
.nav-badge, .approval-count, .mn-badge, .mobile-menu-item em {
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-family: var(--font-number);
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.shell-v2 .sidebar .foot {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
  background: #fbfcff;
}
.sidebar-foot-title { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--text2); font-size: 11px; }
.sidebar-foot-title i { color: var(--primary); font-size: 15px; }
.shell-v2 .main {
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
  padding: 42px clamp(28px, 3.1vw, 52px) 60px;
}

.shell-v2.sidebar-collapsed { --sidebar-w: 76px; }
.sidebar-collapsed .tb-brand-name,
.sidebar-collapsed .nav-group-title,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .sidebar .foot { display: none; }
.sidebar-collapsed .topbar-brand { grid-template-columns: 1fr; padding: 0; }
.sidebar-collapsed .brand-home { justify-content: center; }
.sidebar-collapsed .brand-home > i { font-size: 31px; }
.sidebar-collapsed .sidebar-toggle { position: fixed; left: 57px; top: 84px; z-index: 5; width: 30px; height: 30px; border-radius: 50%; background: #fff; transform: rotate(180deg); }
.sidebar-collapsed .nav { padding: 22px 10px; }
.sidebar-collapsed .nav-group { margin-bottom: 10px; }
.sidebar-collapsed .nav-item { grid-template-columns: 1fr; justify-items: center; padding: 0; }
.sidebar-collapsed .nav-item::before { left: -10px; }
.sidebar-collapsed .nav-badge { position: absolute; right: 2px; top: 2px; }

/* ---------- Common controls ---------- */
.btn, button.btn {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
  font-size: 13px;
  font-weight: 620;
}
.btn:hover, button.btn:hover { border-color: var(--primary); color: var(--primary); transform: none; box-shadow: none; }
.btn-primary, button.btn-primary { border-color: var(--primary); background: var(--primary); color: #fff; }
.btn-primary:hover, button.btn-primary:hover { border-color: var(--primary-dark); background: var(--primary-dark); color: #fff; }
.btn-danger, .btn-ghost-danger { border-color: rgba(255, 77, 99, .45) !important; background: #fff !important; color: var(--danger) !important; }
.btn-danger:hover, .btn-ghost-danger:hover { border-color: var(--danger) !important; background: var(--danger-soft) !important; }
.btn-sm { min-height: 32px; padding: 5px 11px; }
.tag { border-radius: 5px; }
.tag.red { border-color: rgba(255, 77, 99, .35); background: var(--danger-soft) !important; color: var(--danger); }
.tag.blue, .tag.green, .tag.orange { border-color: rgba(70, 92, 255, .28); background: var(--primary-light) !important; color: var(--primary); }
.count-pill.red, .count-pill.orange { background: var(--danger-soft); color: var(--danger); }
.stat.green, .stat.orange { border-top-color: var(--violet); }
.stage-chip.done { border-color: rgba(70, 92, 255, .25); background: var(--primary-light); color: var(--primary); }
.stage-chip.doing { border-color: rgba(123, 97, 255, .4); background: #f1efff; color: var(--violet); }
.pbar-fill, .pbar-fill.overdue, .stage-fill, .stage-fill.done { background: var(--primary); }
.q-dot.orange, .q-dot.green { background: var(--violet); }
.q-dot.red { background: var(--danger); }
.due-duesoon { color: var(--violet); }
.danger-text, .due-overdue { color: var(--danger) !important; }

/* ---------- Dashboard V2 ---------- */
.ops-dashboard { max-width: 1440px; margin: 0 auto; }
.ops-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.ops-page-head h1 { margin: 0; font-size: clamp(28px, 2.5vw, 38px); font-weight: 780; letter-spacing: -.045em; line-height: 1.1; }
.ops-page-head p { margin: 9px 0 0; color: var(--text2); font-size: 13px; }
.ops-text-link, .ops-section-title > button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--text2);
  background: transparent;
  color: var(--text);
  font-size: 13px;
}
.ops-text-link:hover, .ops-section-title > button:hover { border-color: var(--primary); color: var(--primary); }
.ops-notice {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: -14px 0 24px;
  padding: 10px 14px;
  border: 1px solid rgba(70, 92, 255, .24);
  border-left: 3px solid var(--primary);
  border-radius: 7px;
  background: #f7f8ff;
}
.ops-notice > i { color: var(--primary); font-size: 23px; }
.ops-notice b, .ops-notice span { display: block; }
.ops-notice span { margin-top: 2px; color: var(--text2); font-size: 12px; }
.ops-notice.risk { border-color: rgba(255, 77, 99, .3); border-left-color: var(--danger); background: var(--danger-soft); }
.ops-notice.risk > i { color: var(--danger); }

.ops-command-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(178px, .72fr) minmax(420px, 1.65fr) minmax(330px, 1.25fr);
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: #fff;
}
.ops-command-grid::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  z-index: 1;
  height: 2px;
  background: var(--primary);
  pointer-events: none;
}
.ops-priority, .ops-approvals, .ops-risk { min-width: 0; padding: 28px 28px 30px; }
.ops-priority, .ops-approvals { border-right: 1px solid var(--border); }
.ops-priority { position: relative; padding-left: 0; }
.ops-priority::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 68px;
  z-index: 2;
  height: 2px;
  background: #fff;
  pointer-events: none;
}
.ops-priority > * { position: relative; z-index: 3; }
.ops-priority-number {
  height: 184px;
  overflow: hidden;
  margin: -14px 0 3px -6px;
  color: var(--primary);
  font-family: var(--font-number);
  font-size: clamp(128px, 11vw, 180px);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.12em;
  line-height: 1;
}
.ops-priority h2 { margin: 0 0 22px; font-size: 26px; font-weight: 760; letter-spacing: -.035em; }
.ops-count-list { border-top: 1px solid var(--border-strong); }
.ops-count-list button {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.ops-count-list button:hover { color: var(--primary); }
.ops-count-list i { color: var(--primary); font-size: 20px; }
.ops-count-list span { font-size: 13px; }
.ops-count-list b { color: var(--primary); font-family: var(--font-number); font-size: 18px; font-variant-numeric: tabular-nums; }
.ops-section-title {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 15px;
}
.ops-section-title h2 { margin: 0; font-size: 18px; font-weight: 740; letter-spacing: -.025em; }
.ops-section-title > span { color: var(--text3); font-family: var(--font-number); font-size: 13px; font-variant-numeric: tabular-nums; }
.ops-approval-list, .ops-risk-list { position: relative; z-index: 2; background: #fff; }
.ops-approval-row {
  min-height: 126px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 17px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.ops-approval-row:last-child { border-bottom: 0; }
.ops-row-index { align-self: stretch; display: flex; align-items: flex-start; justify-content: center; padding-top: 3px; border-right: 3px solid var(--primary); color: var(--primary); font-family: var(--font-number); font-size: 18px; font-weight: 650; }
.ops-row-main { min-width: 0; }
.ops-row-title { display: block; overflow: hidden; color: var(--text); font-size: 18px; font-weight: 730; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ops-row-title:hover { color: var(--primary); }
.ops-row-main p { margin: 7px 0 9px; color: var(--text2); font-size: 12px; }
.ops-wait { color: var(--danger); font-size: 12px; font-weight: 620; }
.ops-risk-row {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.ops-risk-row:last-child { border-bottom: 0; }
.ops-risk-row:hover .ops-risk-main b { color: var(--primary); }
.ops-risk-index { color: var(--danger); font-family: var(--font-number); font-size: 28px; font-weight: 620; }
.ops-risk-main b, .ops-risk-main small { display: block; }
.ops-risk-main b { overflow: hidden; font-size: 14px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.ops-risk-main small { margin-top: 5px; color: var(--text2); font-size: 11px; }
.ops-risk-row > strong { color: var(--danger); font-size: 12px; white-space: nowrap; }
.ops-todo-row {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.ops-todo-row:last-child { border-bottom: 0; }
.ops-todo-row:hover .ops-row-title { color: var(--primary); }
.ops-todo-row .ops-row-index { align-items: center; padding-top: 0; font-size: 15px; }
.ops-todo-row .ops-row-title { font-size: 14px; }
.ops-todo-row .ops-row-main p { overflow: hidden; margin: 5px 0 0; text-overflow: ellipsis; white-space: nowrap; }
.ops-todo-row > i { color: var(--text3); }
.ops-todo-type {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--text2);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.ops-todo-type:is(.approval, .verify) { border-color: #b9c9fa; background: #eef3ff; color: var(--primary); }
.ops-todo-type:is(.rectify, .assign, .issue) { border-color: #d3cbff; background: #f3f0ff; color: var(--violet); }
.ops-approvals { display: flex; flex-direction: column; }
.ops-todo-carousel { min-height: 340px; display: flex; flex: 1; flex-direction: column; }
.ops-todo-pages { min-height: 304px; flex: 1; }
.ops-todo-page[hidden] { display: none; }
.ops-todo-controls {
  min-height: 36px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto 30px;
  align-items: center;
  gap: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--border);
}
.ops-todo-controls > button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text2); }
.ops-todo-controls > button:hover { border-color: var(--primary); color: var(--primary); }
.ops-todo-controls > span { color: var(--text3); font-family: var(--font-number); font-size: 10px; }
.ops-feedback-link { min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--primary); font-size: 12px; font-weight: 680; }
.ops-risk { display: flex; flex-direction: column; }
.ops-public-notice { min-height: 340px; display: flex; flex: 1; flex-direction: column; }
.ops-public-pages { min-height: 0; flex: 1; }
.ops-public-page[hidden] { display: none; }
.ops-public-row {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.ops-public-row:last-child { border-bottom: 0; }
.ops-public-row.urgent { box-shadow: inset 3px 0 var(--danger); }
.ops-public-row:hover .ops-risk-main b { color: var(--primary); }
.ops-public-status { text-align: right; white-space: nowrap; }
.ops-public-status b, .ops-public-status small { display: block; }
.ops-public-status b { color: var(--text2); font-size: 10px; }
.ops-public-row.urgent .ops-public-status b { color: var(--danger); }
.ops-public-status small { margin-top: 4px; color: var(--text3); font-size: 9px; }
.ops-public-controls { min-height: 36px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 30px; align-items: center; gap: 8px; padding-top: 7px; border-top: 1px solid var(--border); }
.ops-public-controls > button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text2); }
.ops-public-controls > button:hover { border-color: var(--primary); color: var(--primary); }
.ops-public-controls > div { display: flex; align-items: center; gap: 5px; }
.ops-public-controls [data-problem-dot] { width: 17px; height: 17px; padding: 0; border: 0; background: transparent; }
.ops-public-controls [data-problem-dot]::before { content: ''; width: 5px; height: 5px; display: block; margin: auto; border-radius: 50%; background: var(--border-strong); }
.ops-public-controls [data-problem-dot].active::before { width: 13px; border-radius: 999px; background: var(--primary); }
.ops-public-controls > span { color: var(--text3); font-family: var(--font-number); font-size: 10px; }
.ops-empty { min-height: 118px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; color: var(--text2); text-align: left; }
.ops-empty > i { color: var(--primary); font-size: 28px; }
.ops-empty b, .ops-empty span { display: block; }
.ops-empty b { color: var(--text); font-size: 13px; }
.ops-empty span { margin-top: 3px; font-size: 11px; }
.ops-empty.compact { min-height: 78px; }

.ops-task-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.ops-task-strip > button {
  min-width: 0;
  min-height: 78px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  border: 0;
  border-right: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.ops-task-strip > button:first-child { border-radius: 7px 0 0 7px; }
.ops-task-strip > button:last-child { border-right: 0; border-radius: 0 7px 7px 0; }
.ops-task-strip > button:hover { background: var(--primary-soft); }
.ops-task-strip > button > i:first-child { color: var(--primary); font-size: 31px; }
.ops-task-strip > button > i:last-child { color: var(--text3); font-size: 16px; }
.ops-task-strip b, .ops-task-strip small { display: block; }
.ops-task-strip b { font-size: 15px; }
.ops-task-strip small { overflow: hidden; margin-top: 4px; color: var(--text2); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.ops-projects, .ops-lower-grid > section {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.ops-projects > .ops-section-title, .ops-lower-grid .ops-section-title { min-height: 58px; margin: 0; padding: 0 20px; border-bottom: 1px solid var(--border); }
.ops-project-head { border-bottom: 1px solid var(--border); }
.ops-project-heading {
  min-height: 62px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 20px;
}
.ops-project-heading h2 {
  flex: 0 0 auto;
  margin: 0;
  font-size: 16px;
  letter-spacing: -.01em;
}
.ops-project-heading h2 span {
  margin-left: 5px;
  color: var(--text3);
  font-family: var(--font-number);
  font-size: 11px;
  font-weight: 550;
}
.ops-project-heading > button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-weight: 650;
}
.ops-stage-metrics {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}
.ops-stage-metrics::-webkit-scrollbar { display: none; }
.ops-stage-metric {
  min-width: max-content;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 2px 13px;
  border-left: 1px solid var(--border);
  color: var(--text2);
  font-size: 11px;
  white-space: nowrap;
}
.ops-stage-metric b {
  color: var(--primary);
  font-family: var(--font-number);
  font-size: 17px;
  font-weight: 750;
  line-height: 1;
}
.ops-stage-metric.empty { border-left: 0; }
.ops-project-table-wrap { overflow-x: auto; }
.ops-project-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ops-project-th { min-width: 0; display: flex; align-items: center; gap: 7px; }
.ops-project-th > .ops-th-label { margin-right: auto; white-space: nowrap; }
.ops-project-sort-inline { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.ops-project-sort-inline select { width: 112px; height: 30px; padding: 0 25px 0 8px; border: 1px solid var(--border-strong); border-radius: 4px; background-color: #fff; color: var(--text); font-size: 10px; font-weight: 600; }
.ops-sort-direction { width: 30px; height: 30px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; color: var(--text2); font-size: 15px; }
.ops-sort-direction:hover, .ops-project-sort-inline select:focus { border-color: var(--primary); color: var(--primary); }
.ops-project-table th { height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #f8f9fc; color: var(--text); font-size: 12px; font-weight: 700; line-height: 1.2; text-align: left; vertical-align: middle; }
.ops-project-table th:nth-child(1) { width: 18%; }
.ops-project-table th:nth-child(2) { width: 12%; }
.ops-project-table th:nth-child(3) { width: 12%; }
.ops-project-table th:nth-child(4) { width: 10%; }
.ops-project-table th:nth-child(5) { width: 27%; }
.ops-project-table th:nth-child(6) { width: 14%; }
.ops-project-table th:nth-child(7) { width: 7%; }
.ops-th-label { display: block; color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.ops-table-filter { min-width: 0; display: block; margin: 0; }
.ops-table-filter select {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 0 28px 0 9px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background-color: #fff;
  color: var(--text);
  font-size: 11px;
  font-weight: 500;
}
.ops-table-filter select:focus { border-color: var(--primary); outline: 2px solid rgba(21, 94, 239, .12); outline-offset: 0; }
.ops-table-filter-control { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 31px; gap: 5px; }
.ops-filter-reset { width: 31px; height: 31px; display: grid; place-items: center; padding: 0; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; color: var(--text2); }
.ops-filter-reset:hover { border-color: var(--primary); color: var(--primary); }
.ops-project-table td { height: 68px; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ops-project-table tbody tr:last-child td { border-bottom: 0; }
.ops-project-table tbody tr { cursor: pointer; }
.ops-project-table tbody tr:hover td { background: var(--primary-soft); }
.ops-project-table tbody tr.overdue td:first-child { box-shadow: inset 3px 0 var(--danger); }
.ops-project-table tbody tr.due-soon td:first-child { box-shadow: inset 3px 0 var(--violet); }
.ops-project-table td b, .ops-project-table td small { display: block; }
.ops-project-table td b { overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.ops-project-table td small { margin-top: 3px; color: var(--text3); font-size: 10px; }
.ops-stage-link { color: var(--primary); font-weight: 650; }
.ops-project-table td:nth-child(5) { overflow: hidden; }
.ops-project-priority { min-height: 24px; display: inline-flex; align-items: center; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; color: var(--text2); font-size: 11px; font-weight: 700; }
.ops-project-priority.important { border-color: rgba(21, 94, 239, .28); background: var(--primary-soft); color: var(--primary); }
.ops-project-priority.urgent { border-color: rgba(239, 68, 68, .28); background: #fff4f4; color: var(--danger); }
.ops-progress-rail { width: 100%; min-width: 0; max-width: 100%; display: grid; grid-template-columns: repeat(14, minmax(16px, 23px)); align-items: center; gap: clamp(2px, .3vw, 5px); overflow: hidden; }
.ops-progress-step {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--text3);
  font-family: var(--font-number);
  font-size: 9px;
}
.ops-progress-step + .ops-progress-step::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: 5px;
  height: 1px;
  background: var(--border-strong);
}
.ops-progress-step.done { border-color: var(--primary); background: var(--primary); color: #fff; }
.ops-progress-step.done::before { background: var(--primary); }
.ops-progress-step.current { border: 2px solid var(--violet); color: var(--violet); font-weight: 750; }
.ops-progress-step.current::before { background: var(--primary); }
.ops-progress-empty { color: var(--text3); font-size: 11px; }
.ops-project-warning {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid #bed0ff;
  border-radius: 999px;
  background: #eef3ff;
  color: #0b3ea8;
  font-size: 10px;
  font-weight: 700;
}
.ops-project-warning.overdue { border-color: #ffc4ca; background: #fff1f2; color: #c51f35; }
.ops-project-warning.due-soon { border-color: #d3cbff; background: #f3f0ff; color: #5846ca; }
.ops-project-warning.normal { border-color: #bed0ff; background: #eef3ff; color: #0b3ea8; }

.ops-lower-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.ops-stage-list, .ops-reminder-list { padding: 6px 18px 12px; }
.ops-stage-row {
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 74px 1fr 28px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.ops-stage-row:last-child { border-bottom: 0; }
.ops-stage-row > span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ops-stage-row > i { height: 6px; overflow: hidden; border-radius: 999px; background: #edf0f5; }
.ops-stage-row > i > b { height: 100%; display: block; border-radius: inherit; background: var(--primary); }
.ops-stage-row > strong { font-family: var(--font-number); font-size: 12px; text-align: right; }
.ops-reminder-row {
  width: 100%;
  min-height: 55px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.ops-reminder-row:last-child { border-bottom: 0; }
.ops-reminder-row > i:first-child { color: var(--violet); font-size: 19px; }
.ops-reminder-row.risk > i:first-child { color: var(--danger); }
.ops-reminder-row > i:last-child { color: var(--text3); }
.ops-reminder-row b, .ops-reminder-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-reminder-row b { font-size: 12px; font-weight: 620; }
.ops-reminder-row small { margin-top: 3px; color: var(--text2); font-size: 10px; }

/* ---------- Project register / risk-first list ---------- */
.pj-list-page .tabs { margin-bottom: 16px; }
.pj-filter-panel {
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  border-radius: 7px;
  background: #fff;
}
.pj-filter-grid {
  display: grid;
  grid-template-columns: minmax(210px, 1.45fr) repeat(4, minmax(118px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
}
.pj-filter-field { min-width: 0; margin: 0; }
.pj-filter-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text2);
  font-size: 11px;
  font-weight: 650;
}
.pj-filter-field input, .pj-filter-field select { width: 100%; height: 42px; border-radius: 5px; }
.pj-filter-search > div { position: relative; }
.pj-filter-search i {
  position: absolute;
  left: 13px;
  top: 50%;
  color: var(--text3);
  font-size: 17px;
  transform: translateY(-50%);
}
.pj-filter-search input { padding-left: 39px; }
.pj-filter-actions { display: grid; grid-template-columns: auto auto; gap: 8px; }
.pj-filter-actions .btn { height: 42px; }
.pj-filter-summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: #fafbfe;
}
.pj-result-count { margin-right: auto; color: var(--text2); font-size: 12px; }
.pj-result-count b { color: var(--text); font-family: var(--font-number); font-size: 15px; }
.pj-summary-chip, .pj-priority, .pj-health, .pj-stage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.pj-summary-chip { min-height: 25px; padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--text2); font-size: 11px; }
.pj-summary-chip.overdue { border-color: rgba(255, 77, 99, .36); color: var(--danger); }
.pj-summary-chip.due-soon { border-color: rgba(124, 91, 231, .32); color: var(--violet); }
.pj-summary-chip.normal { border-color: rgba(70, 92, 255, .28); color: var(--primary); }

.pj-table-wrap { border-radius: 7px; }
.pj-table { min-width: 1120px; table-layout: fixed; }
.pj-table th { height: 46px; padding: 0 15px; font-size: 11px; }
.pj-table th:nth-child(1) { width: 23%; }
.pj-table th:nth-child(2) { width: 14%; }
.pj-table th:nth-child(3) { width: 10%; }
.pj-table th:nth-child(4) { width: 15%; }
.pj-table th:nth-child(5) { width: 20%; }
.pj-table th:nth-child(6) { width: 8%; }
.pj-table th:nth-child(7) { width: 10%; }
.pj-table td {
  height: 86px;
  padding: 13px 15px;
  vertical-align: middle;
}
.pj-table .pj-row td:first-child { border-left: 3px solid transparent; }
.pj-table .pj-row.is-overdue td:first-child { border-left-color: var(--danger); }
.pj-table .pj-row.is-due-soon td:first-child { border-left-color: var(--violet); }
.pj-table .pj-row:hover td { background: #f8f9ff; }
.pj-project-cell, .pj-owner-cell { min-width: 0; }
.pj-project-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 730;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.pj-project-name:hover { color: var(--primary); }
.pj-project-meta { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
.pj-project-meta > span { overflow: hidden; color: var(--text3); font-family: var(--font-number); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pj-priority { min-height: 21px; padding: 2px 7px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text2); font-size: 10px; font-weight: 700; }
.pj-priority.urgent { border-color: rgba(255, 77, 99, .4); background: var(--danger-soft); color: var(--danger); }
.pj-priority.important { border-color: rgba(124, 91, 231, .35); background: #f4f1ff; color: var(--violet); }
.pj-priority.normal { background: #f8f9fc; }
.pj-owner-cell b, .pj-owner-cell small, .pj-cell-note { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pj-owner-cell b { color: var(--text); font-size: 12px; font-weight: 650; }
.pj-owner-cell small, .pj-cell-note { margin-top: 6px; color: var(--text3); font-size: 10px; font-weight: 450; }
.pj-stage { min-height: 26px; padding: 4px 9px; border: 1px solid rgba(70, 92, 255, .25); border-radius: 4px; background: var(--primary-light); color: var(--primary); font-size: 11px; font-weight: 700; }
.pj-stage.finished { border-color: var(--border-strong); background: #f4f5f8; color: var(--text2); }
.pj-health { min-height: 27px; gap: 5px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; font-size: 11px; font-weight: 700; }
.pj-health i { font-size: 15px; }
.pj-health.overdue { border-color: rgba(255, 77, 99, .42); background: var(--danger-soft); color: var(--danger); }
.pj-health.due-soon { border-color: rgba(124, 91, 231, .35); background: #f4f1ff; color: var(--violet); }
.pj-health.normal { border-color: rgba(70, 92, 255, .26); background: var(--primary-light); color: var(--primary); }
.pj-finance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.pj-finance-grid > span { min-width: 0; padding-left: 8px; border-left: 1px solid var(--border); }
.pj-finance-grid > span:first-child { padding-left: 0; border-left: 0; }
.pj-finance-grid small, .pj-finance-grid b { display: block; }
.pj-finance-grid small { color: var(--text3); font-size: 9px; }
.pj-finance-grid b { overflow: hidden; margin-top: 4px; color: var(--text); font-family: var(--font-number); font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.pj-margin { color: var(--text); font-family: var(--font-number); font-size: 15px; font-variant-numeric: tabular-nums; }
.pj-margin.risk { color: var(--danger); }
.pj-table td:last-child { white-space: nowrap; }
.pj-table td:last-child .btn + .btn { margin-left: 5px; }
.pj-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text3); }
.pj-empty i { color: var(--primary); font-size: 34px; }
.pj-empty b { color: var(--text); font-size: 14px; }
.pj-empty span { font-size: 11px; }

/* ---------- Generic page polish ---------- */
.page-head { margin-bottom: 22px; }
.page-title { color: var(--text); font-size: clamp(25px, 2.1vw, 34px); font-weight: 760; letter-spacing: -.04em; }
.page-sub { color: var(--text2); }
.panel, .dash-panel, .approval-section, .approval-summary, .tbl-wrap {
  border-color: var(--border);
  border-radius: 7px;
  background: #fff;
  box-shadow: none;
}
.panel, .dash-panel { padding: 20px; }
.tabs { gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.tab { min-height: 38px; display: flex; align-items: center; padding: 7px 14px; border: 0; border-radius: 5px; color: var(--text2); }
.tab.active { background: var(--primary-light); color: var(--primary); font-weight: 680; }
.tab:hover { background: var(--primary-soft); color: var(--primary); }
.tbl-wrap { overflow: auto; }
.tbl th, thead th { background: #f8f9fc; color: var(--text2); }
.tbl tbody tr:nth-child(even) td { background: #fcfdff; }
.tbl tbody tr:hover td { background: var(--primary-soft); }
.approval-section-primary { border-top-color: var(--primary); }
.approval-comment { border-left-color: var(--primary); background: var(--primary-soft); }
.approval-card-index, .approval-section-head span { color: var(--primary); }
.modal { border-radius: 10px; box-shadow: 0 24px 80px rgba(31, 36, 62, .2); }
.toast { border-radius: 7px; }

/* ---------- Project workspace / workflow ---------- */
.project-workflow {
  --workflow-gap: 24px;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--workflow-gap);
}
.project-shell-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 2px 0 4px;
}
.project-head-copy { min-width: 0; }
.project-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 19px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 620;
}
.project-back:hover { color: var(--primary); }
.project-eyebrow,
.section-kicker {
  color: var(--primary);
  font-family: var(--font-number);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.project-title {
  max-width: 800px;
  margin: 7px 0 15px;
  color: var(--text);
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.055em;
}
.project-title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.project-title-line .project-title { margin-right: auto; }
.project-priority {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}
button.project-priority { cursor: pointer; }
.project-priority.normal { border-color: #cfd6ff; background: var(--primary-soft); color: var(--primary); }
.project-priority.important { border-color: #d8d0ff; background: #f4f1ff; color: var(--violet); }
.project-priority.urgent { border-color: #ffc5ce; background: var(--danger-soft); color: var(--danger); }
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  color: var(--text2);
  font-size: 12px;
}
.project-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.project-meta i { color: var(--primary); font-size: 16px; }
.project-meta b { color: var(--text); font-weight: 650; }
.project-meta .is-risk, .project-meta .is-risk i { color: var(--danger); }
.project-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 4px;
}
.project-actions .btn { min-height: 42px; }
.project-actions .btn i, .project-gate .btn i { margin-right: 5px; font-size: 16px; }
.project-primary-tabs {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 56px;
  align-items: stretch;
  gap: 2px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.project-primary-tab,
.project-more-tabs > summary {
  position: relative;
  min-width: 118px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  background: #fff;
  color: var(--text2);
  font-size: 13px;
  font-weight: 620;
  cursor: pointer;
}
.project-primary-tab::after {
  content: "";
  position: absolute;
  inset: auto 18px -1px;
  height: 3px;
  background: transparent;
}
.project-primary-tab:hover { color: var(--primary); background: var(--primary-soft); }
.project-primary-tab.active { color: var(--primary); }
.project-primary-tab.active::after { background: var(--primary); }
.project-primary-tab > i:first-child, .project-more-tabs > summary i { font-size: 18px; }
.project-primary-tab.locked { color: var(--text3); cursor: not-allowed; }
.project-primary-tab .tab-lock { margin-left: -3px; font-size: 12px; }
.project-business-nav {
  min-height: 72px;
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.project-business-label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 6px;
  color: var(--text3);
  font-size: 11px;
  font-weight: 720;
  letter-spacing: .08em;
}
.project-business-group {
  min-width: 156px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: #f8f9fc;
  color: var(--text2);
  cursor: pointer;
  text-align: left;
}
.project-business-group > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  color: var(--primary);
  font-size: 18px;
}
.project-business-group > span { font-size: 12px; font-weight: 680; white-space: nowrap; }
.project-business-group > small { color: var(--text3); font-family: var(--font-number); font-size: 10px; }
.project-business-group:hover { border-color: #cbd3ff; background: var(--primary-soft); color: var(--primary); }
.project-business-group.active { border-color: #bac5ff; background: var(--primary-light); color: var(--primary); }
.project-business-group.active > i { background: var(--primary); color: #fff; }
.project-business-nav + .project-business-subnav { margin-top: calc(-1 * var(--workflow-gap)); }
.project-business-subnav {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: #fff;
}
.project-business-subnav > span {
  margin-right: 7px;
  padding-right: 14px;
  border-right: 1px solid var(--border);
  color: var(--text3);
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
}
.project-business-subnav button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: var(--text2);
  font-size: 12px;
  font-weight: 620;
  white-space: nowrap;
}
.project-business-subnav button:hover,
.project-business-subnav button.active { background: var(--primary-light); color: var(--primary); }
.project-more-tabs { position: relative; margin-left: auto; }
.project-more-tabs > summary { height: 100%; list-style: none; }
.project-more-tabs > summary::-webkit-details-marker { display: none; }
.project-more-tabs[open] > summary { color: var(--primary); background: var(--primary-soft); }
.project-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(520px, 78vw);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(29, 37, 72, .14);
}
.project-more-group { display: grid; gap: 4px; }
.project-more-group > b { padding: 5px 8px; color: var(--text3); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.project-more-group button { min-height: 36px; padding: 7px 9px; border: 0; border-radius: 5px; background: #fff; color: var(--text2); text-align: left; }
.project-more-group button:hover, .project-more-group button.active { background: var(--primary-light); color: var(--primary); }
.project-gate {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid #ffc8cf;
  border-left: 4px solid var(--danger);
  border-radius: 7px;
  background: var(--danger-soft);
}
.project-gate > i { color: var(--danger); font-size: 25px; }
.project-gate b, .project-gate span { display: block; }
.project-gate b { color: #a9172b; font-weight: 720; }
.project-gate span { margin-top: 2px; color: #87404c; font-size: 12px; }
.project-tab-body { min-width: 0; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.project-files-page,
.business-doc-page { display: grid; gap: 18px; }
.project-files-head,
.business-doc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.project-files-head h2,
.business-doc-head h2 { margin: 5px 0 4px; font-size: clamp(25px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -.045em; }
.project-files-head p,
.business-doc-head p { max-width: 710px; margin: 0; color: var(--text2); font-size: 13px; }
.project-files-summary {
  min-width: 116px;
  padding: 10px 14px;
  border-left: 3px solid var(--primary);
  background: #fff;
}
.project-files-summary strong,
.project-files-summary span { display: block; }
.project-files-summary strong { color: var(--primary); font-family: var(--font-number); font-size: 26px; line-height: 1; }
.project-files-summary span { margin-top: 4px; color: var(--text3); font-size: 10px; }
.project-file-stage-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0 8px;
}
.project-file-stage-filter button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--text2);
  font-size: 12px;
  white-space: nowrap;
}
.project-file-stage-filter button:hover,
.project-file-stage-filter button.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.project-upload-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(210px, .65fr) auto;
  align-items: end;
  gap: 13px;
  padding: 17px 18px;
  border: 1px solid #cfd6ff;
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: var(--primary-soft);
}
.project-upload-copy { display: flex; align-items: center; gap: 12px; align-self: center; }
.project-upload-copy > i { width: 38px; height: 38px; display: grid; flex: 0 0 38px; place-items: center; border-radius: 7px; background: var(--primary); color: #fff; font-size: 20px; }
.project-upload-copy b,
.project-upload-copy span { display: block; }
.project-upload-copy b { color: var(--text); font-size: 13px; }
.project-upload-copy span { margin-top: 2px; color: var(--text2); font-size: 10px; }
.project-upload-bar label > span { display: block; margin-bottom: 5px; color: var(--text2); font-size: 10px; font-weight: 650; }
.project-upload-bar select { width: 100%; min-height: 42px; }
.project-upload-bar > .btn { min-height: 42px; }
.project-upload-guide {
  min-height: 76px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px dashed #bac5ff;
  border-radius: 8px;
  background: var(--primary-soft);
}
.project-upload-guide > i:first-child { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: var(--primary); color: #fff; font-size: 19px; }
.project-upload-guide > i:last-child { color: var(--primary); font-size: 19px; }
.project-upload-guide b,
.project-upload-guide span { display: block; }
.project-upload-guide b { color: var(--text); font-size: 13px; }
.project-upload-guide span { margin-top: 2px; color: var(--text2); font-size: 11px; }
.project-file-scope { min-height: 42px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: #fff; color: var(--text2); font-size: 12px; }
.project-file-scope > i { color: var(--primary); font-size: 16px; }
.project-file-scope button { margin-left: auto; border: 0; background: transparent; color: var(--primary); font-size: 11px; font-weight: 650; }
.project-file-list { display: grid; gap: 8px; }
.project-file-node { border: 1px solid var(--border); border-radius: 8px; background: #fff; overflow: hidden; }
.project-file-node[open] { border-color: #cbd3ff; box-shadow: 0 8px 24px rgba(48, 62, 140, .05); }
.project-file-node > summary {
  min-height: 76px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto 34px 18px;
  align-items: center;
  gap: 14px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}
.project-file-node > summary::-webkit-details-marker { display: none; }
.project-file-node-index { color: var(--primary); font-family: var(--font-number); font-size: 11px; font-weight: 750; letter-spacing: .08em; }
.project-file-node-title,
.project-file-node-stat { min-width: 0; }
.project-file-node-title b,
.project-file-node-title small,
.project-file-node-stat b,
.project-file-node-stat small { display: block; }
.project-file-node-title b { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.project-file-node-title small { margin-top: 4px; color: var(--text3); font-size: 10px; }
.project-file-node-stat { min-width: 90px; text-align: right; }
.project-file-node-stat b { color: var(--text); font-family: var(--font-number); font-size: 17px; }
.project-file-node-stat small { margin-top: 2px; color: var(--text3); font-size: 9px; }
.project-file-node > summary > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text2); }
.project-file-node > summary > button:hover { border-color: var(--primary); color: var(--primary); }
.project-file-node > summary > i:last-child { color: var(--text3); transition: transform .2s ease; }
.project-file-node[open] > summary > i:last-child { transform: rotate(180deg); }
.project-file-node-body { display: grid; gap: 6px; padding: 8px; border-top: 1px solid var(--border); background: #f8f9fc; }
.project-file-node-body .project-file-row { min-height: 68px; border-color: transparent; border-radius: 5px; }
.project-file-node-empty { padding: 18px; color: var(--text3); font-size: 11px; text-align: center; }
.project-file-node.legacy .project-file-node-index { color: var(--text3); }
.project-file-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.project-file-row:hover { border-color: #ccd3ff; }
.project-file-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 7px; background: var(--primary-light); color: var(--primary); }
.project-file-icon i { font-size: 24px; }
.project-file-copy { min-width: 0; }
.project-file-copy > strong { display: block; overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.project-file-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 13px; margin-top: 5px; color: var(--text3); font-size: 10px; }
.project-file-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.project-file-category { padding: 2px 7px; border-radius: 4px; background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.project-file-actions { display: flex; align-items: center; gap: 7px; }
.project-file-actions .btn-danger { width: 34px; padding-inline: 0; }
.project-files-empty { min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 20px; border: 1px dashed var(--border-strong); border-radius: 8px; background: #fff; text-align: center; }
.project-files-empty > i { color: var(--primary); font-size: 42px; }
.project-files-empty strong { margin-top: 8px; color: var(--text); font-size: 15px; }
.project-files-empty p { max-width: 480px; margin: 5px 0 0; color: var(--text2); font-size: 11px; }
.business-doc-head-actions { flex: 0 0 auto; display: flex; align-items: stretch; gap: 10px; }
.business-doc-head-actions .btn { min-height: 54px; }
.business-doc-count { min-width: 112px; padding: 9px 14px; border-left: 3px solid var(--primary); background: #fff; }
.business-doc-count strong, .business-doc-count span { display: block; }
.business-doc-count strong { color: var(--primary); font-family: var(--font-number); font-size: 24px; line-height: 1; }
.business-doc-count span { margin-top: 5px; color: var(--text3); font-size: 10px; }
.business-doc-page .panel > h3 > span { margin-left: 7px; color: var(--text3); font-size: 10px; font-weight: 500; }
.business-doc-library { padding: 0; overflow: hidden; }
.business-doc-library-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.business-doc-library-head h3 { margin: 0; color: var(--text); font-size: 17px; }
.business-doc-library-head p { margin: 5px 0 0; color: var(--text2); font-size: 11px; }
.business-doc-library-head > span { color: var(--text3); font-size: 10px; }
.business-doc-group { padding: 0 22px 24px; }
.business-doc-group + .business-doc-group { border-top: 1px solid var(--border); }
.business-doc-group > header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.business-doc-group > header h3 { margin: 0; color: var(--text); font-size: 14px; }
.business-doc-group > header p { margin: 4px 0 0; color: var(--text2); font-size: 10px; }
.business-doc-group > header > strong { color: var(--primary); font-family: var(--font-number); font-size: 26px; font-weight: 500; }
.business-doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.business-doc-card { position: relative; min-height: 198px; display: grid; grid-template-rows: auto 1fr auto; padding: 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; transition: background-color .16s ease; }
.business-doc-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: transparent; }
.business-doc-card:hover { background: #f7f8fb; }
.business-doc-card:hover::before { background: var(--primary); }
.business-doc-number { color: var(--primary); font-family: var(--font-number); font-size: 28px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.business-doc-copy { padding-top: 15px; }
.business-doc-copy > span { color: var(--primary); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.business-doc-copy h4 { margin: 5px 0 0; color: var(--text); font-size: 14px; line-height: 1.35; }
.business-doc-copy p { margin: 6px 0 0; color: var(--text2); font-size: 10px; line-height: 1.65; }
.business-doc-actions { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 6px; padding-top: 16px; }
.business-doc-actions .btn { min-width: 0; justify-content: center; padding-inline: 8px; white-space: nowrap; }
.business-doc-help { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; padding: 15px 22px; border-top: 1px solid var(--border); background: #f7f8fb; }
.business-doc-help > i { color: var(--primary); font-size: 22px; }
.business-doc-help p { margin: 0; color: var(--text2); font-size: 10px; line-height: 1.65; }

/* 单据生成前置确认：Swiss 网格，左侧数据来源，右侧必要信息。 */
.document-prep-mask { padding: 24px; }
.document-prep-modal {
  width: min(1100px, calc(100vw - 48px)) !important;
  height: min(920px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #cfd4df;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 18px 55px rgba(28, 34, 50, .14);
}
.document-prep-head {
  min-height: 116px;
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr) 42px;
  align-items: center;
  border-bottom: 1px solid #cfd4df;
}
.document-prep-folio {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid #cfd4df;
  color: #002fa7;
  font-family: var(--font-number);
  font-size: 50px;
  font-weight: 500;
  letter-spacing: -.06em;
}
.document-prep-head > div:nth-child(2) { padding: 20px 26px; }
.document-prep-head > div:nth-child(2) > span { color: #002fa7; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.document-prep-head h3 { margin: 4px 0 3px; color: #15171d; font-size: 24px; line-height: 1.2; letter-spacing: -.03em; }
.document-prep-head p { max-width: 720px; margin: 0; color: #646a76; font-size: 11px; line-height: 1.6; }
.document-prep-head > button { width: 34px; height: 34px; display: grid; place-items: center; justify-self: center; border: 1px solid #cfd4df; border-radius: 0; background: #fff; color: #646a76; font-size: 17px; }
.document-prep-head > button:hover { border-color: #002fa7; color: #002fa7; }
.document-prep-body { min-height: 0; display: grid; grid-template-columns: 318px minmax(0, 1fr); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.document-prep-source { padding: 26px 24px; border-right: 1px solid #cfd4df; background: #f7f7f8; }
.document-prep-source > span { color: #002fa7; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.document-prep-source > h4 { margin: 8px 0 21px; color: #15171d; font-size: 18px; line-height: 1.35; letter-spacing: -.025em; }
.document-prep-source dl { margin: 0; border-top: 1px solid #dfe3ea; }
.document-prep-source dl > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid #dfe3ea; }
.document-prep-source dt { color: #8a909c; font-size: 10px; }
.document-prep-source dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #15171d; font-size: 11px; font-weight: 650; text-align: right; }
.document-prep-lock { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; margin-top: 20px; padding: 12px; border-left: 3px solid #002fa7; background: #fff; }
.document-prep-lock > i { color: #002fa7; font-size: 20px; }
.document-prep-lock p { margin: 0; }
.document-prep-lock b, .document-prep-lock span { display: block; }
.document-prep-lock b { color: #15171d; font-size: 11px; }
.document-prep-lock span { margin-top: 3px; color: #646a76; font-size: 9px; line-height: 1.55; }
.document-prep-form { min-width: 0; padding: 25px 26px 30px; }
.document-prep-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; padding-bottom: 11px; border-bottom: 1px solid #cfd4df; }
.document-prep-section-head span { color: #002fa7; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.document-prep-section-head h4 { margin: 3px 0 0; color: #15171d; font-size: 16px; }
.document-prep-section-head small { color: #8a909c; font-size: 10px; }
.document-prep-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.document-prep-field { min-width: 0; display: block; }
.document-prep-field.full { grid-column: 1 / -1; }
.document-prep-field > span { min-height: 18px; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: #454a54; font-size: 10px; font-weight: 650; }
.document-prep-field > span b, .document-prep-field > span em { font-size: 8px; font-style: normal; font-weight: 650; }
.document-prep-field > span b { color: #002fa7; }
.document-prep-field > span em { color: #a0a5af; }
.document-prep-field input, .document-prep-field select, .document-prep-field textarea { width: 100%; min-height: 42px; border: 1px solid #cfd4df; border-radius: 0; background: #fff; color: #15171d; font-size: 12px; }
.document-prep-field textarea { min-height: 74px; resize: vertical; line-height: 1.6; }
.document-prep-field input:focus, .document-prep-field select:focus, .document-prep-field textarea:focus { border-color: #002fa7; outline: 2px solid rgba(0, 47, 167, .1); outline-offset: 0; }
.document-prep-option { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 12px 14px; border: 1px solid #cfd4df; background: #fff; cursor: pointer; }
.document-prep-option.full { grid-column: 1 / -1; }
.document-prep-option > span { min-width: 0; }
.document-prep-option > span b, .document-prep-option > span small { display: block; }
.document-prep-option > span b { color: #15171d; font-size: 11px; }
.document-prep-option > span small { margin-top: 3px; color: #747b87; font-size: 9px; line-height: 1.5; }
.document-prep-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.document-prep-option > i { position: relative; width: 38px; height: 20px; border: 1px solid #aeb4c0; background: #eef0f4; transition: border-color .18s ease, background .18s ease; }
.document-prep-option > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: #8a909c; transition: transform .18s ease, background .18s ease; }
.document-prep-option input:checked + i { border-color: #002fa7; background: #002fa7; }
.document-prep-option input:checked + i::after { background: #fff; transform: translateX(18px); }
.document-prep-option:has(input:focus-visible) { border-color: #002fa7; outline: 2px solid rgba(0, 47, 167, .14); }
.document-prep-presentation { margin-top: 22px; padding-top: 18px; border-top: 2px solid #002fa7; }
.document-prep-presentation > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.document-prep-presentation > header span { color: #15171d; font-size: 12px; font-weight: 700; }
.document-prep-presentation > header small { color: #747b87; font-size: 9px; }
.document-prep-optional { margin-top: 20px; border-top: 1px solid #cfd4df; }
.document-prep-optional > summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; color: #15171d; font-size: 11px; font-weight: 650; }
.document-prep-optional > summary::-webkit-details-marker { display: none; }
.document-prep-optional > summary span { display: inline-flex; align-items: center; gap: 7px; }
.document-prep-optional > summary i { color: #002fa7; font-size: 15px; transition: transform .18s ease; }
.document-prep-optional[open] > summary i { transform: rotate(45deg); }
.document-prep-optional > summary small { color: #8a909c; font-size: 9px; font-weight: 500; }
.document-prep-optional[open] { padding-bottom: 4px; }
.document-prep-foot { position: relative; z-index: 2; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 20px 14px 24px; border-top: 1px solid #cfd4df; background: #fff; box-shadow: 0 -8px 22px rgba(26, 31, 44, .04); }
.document-prep-foot > div:first-child span, .document-prep-foot > div:first-child small { display: block; }
.document-prep-foot > div:first-child span { display: flex; align-items: center; gap: 6px; color: #454a54; font-size: 10px; }
.document-prep-foot > div:first-child span i { color: #002fa7; }
.document-prep-foot > div:first-child small { margin-top: 3px; color: #8a909c; font-size: 9px; }
.document-prep-foot > div:last-child { display: flex; align-items: center; gap: 8px; }
.document-prep-foot .btn { min-height: 42px; border-radius: 0; }
.document-prep-foot .btn-primary { min-width: 190px; }
.document-prep-foot .ph-spinner-gap { animation: spin .8s linear infinite; }
.workflow-overview,
.approval-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
}
.workflow-overview h2,
.approval-page-head h2 { margin: 5px 0 4px; color: var(--text); font-size: clamp(25px, 2.2vw, 34px); line-height: 1.15; letter-spacing: -.045em; }
.workflow-overview p,
.approval-page-head p { max-width: 650px; margin: 0; color: var(--text2); font-size: 13px; }
.workflow-health { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.workflow-health > span { min-width: 86px; padding: 10px 14px; border-right: 1px solid var(--border); color: var(--text2); font-size: 11px; text-align: center; }
.workflow-health > span:last-child { border-right: 0; }
.workflow-health b { display: block; color: var(--text); font-family: var(--font-number); font-size: 20px; line-height: 1.1; }
.workflow-health .risk, .workflow-health .risk b { color: var(--danger); }
.workflow-overview-actions { display: flex; align-items: stretch; gap: 10px; }
.workflow-gantt-button { min-height: 100%; white-space: nowrap; }
.workflow-gantt-button i { margin-right: 4px; font-size: 17px; }
.workflow-rail {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.workflow-steps { min-width: max-content; display: flex; align-items: stretch; }
.workflow-step {
  position: relative;
  width: 165px;
  min-height: 96px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-content: center;
  align-items: start;
  gap: 3px 10px;
  padding: 17px 14px;
  border: 0;
  border-right: 1px solid var(--border);
  background: #fff;
  color: var(--text2);
  text-align: left;
}
.workflow-step:last-child { border-right: 0; }
.workflow-step::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: transparent;
}
.workflow-step:hover { background: var(--primary-soft); }
.workflow-step.done { color: var(--primary); }
.workflow-step.active { background: #f6f4ff; color: #5744d6; }
.workflow-step.active::after { background: var(--violet); }
.workflow-step.selected:not(.active) { background: var(--primary-soft); }
.workflow-step.selected:not(.active)::after { background: var(--primary); }
.workflow-step-index {
  grid-row: 1 / span 2;
  color: var(--text3);
  font-family: var(--font-number);
  font-size: 21px;
  font-weight: 650;
  line-height: 1;
}
.workflow-step.done .workflow-step-index { color: var(--primary); }
.workflow-step.active .workflow-step-index { color: var(--violet); }
.workflow-step-copy { min-width: 0; }
.workflow-step-copy b, .workflow-step-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-step-copy b { color: var(--text); font-size: 13px; }
.workflow-step-copy small { margin-top: 4px; color: var(--text3); font-size: 10px; }
.workflow-step-state { grid-column: 2; color: var(--text3); font-size: 10px; }
.workflow-step.done .workflow-step-state { color: var(--primary); }
.workflow-step.active .workflow-step-state { color: var(--violet); font-weight: 700; }
.workflow-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 22px; align-items: start; margin-top: 22px; }
.workflow-main, .workflow-side { min-width: 0; }
.workflow-current-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  gap: 5px 28px;
  padding: 30px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--violet);
  border-radius: 8px;
  background: #fff;
}
.workflow-current-card.has-risk { border-top-color: var(--danger); }
.workflow-stage-count { grid-row: 1 / span 3; display: flex; align-items: baseline; color: var(--text3); font-family: var(--font-number); }
.workflow-stage-count strong { color: var(--violet); font-size: 58px; line-height: .95; letter-spacing: -.07em; }
.workflow-current-card.has-risk .workflow-stage-count strong { color: var(--danger); }
.workflow-stage-count span { margin-left: 7px; font-size: 16px; }
.workflow-status { display: inline-flex; width: max-content; padding: 3px 8px; border: 1px solid #cfc8ff; border-radius: 999px; background: #f3f0ff; color: #5744d6; font-size: 10px; font-weight: 720; }
.workflow-current-copy h3 { margin: 8px 0 7px; color: var(--text); font-size: clamp(25px, 2.4vw, 36px); line-height: 1.08; letter-spacing: -.045em; }
.workflow-current-copy p { max-width: 670px; margin: 0; color: var(--text2); font-size: 13px; }
.workflow-alert { grid-column: 2; display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--danger); font-size: 12px; font-weight: 650; }
.workflow-alert i { font-size: 18px; }
.workflow-facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.workflow-facts > div { min-width: 0; padding: 16px 18px; border-right: 1px solid var(--border); }
.workflow-facts > div:first-child { padding-left: 0; }
.workflow-facts > div:last-child { border-right: 0; }
.workflow-facts span, .workflow-facts b { display: block; }
.workflow-facts span { color: var(--text3); font-size: 10px; letter-spacing: .04em; }
.workflow-facts b { overflow: hidden; margin-top: 5px; color: var(--text); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.workflow-current-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.workflow-neighbors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.workflow-neighbors button { min-width: 0; min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-right: 1px solid var(--border); background: #fff; color: var(--text2); text-align: left; }
.workflow-neighbors button:last-child { justify-content: flex-end; border-right: 0; text-align: right; }
.workflow-neighbors button:disabled { color: var(--text3); cursor: default; }
.workflow-neighbors i { font-size: 18px; }
.workflow-neighbors span { min-width: 0; }
.workflow-neighbors small, .workflow-neighbors b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workflow-neighbors small { color: var(--text3); font-size: 10px; }
.workflow-neighbors b { margin-top: 2px; color: var(--text); font-size: 12px; }
.workflow-side { display: grid; gap: 12px; }
.workflow-side-card { overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.workflow-side-card.approval-card { display: block; min-height: 0; padding: 0; border: 1px solid var(--border); }
.workflow-side-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--border); color: var(--text2); font-size: 11px; font-weight: 680; letter-spacing: .04em; }
.workflow-side-head i { color: var(--primary); font-size: 20px; }
.approval-state { display: flex; align-items: center; gap: 12px; padding: 20px 18px; }
.approval-state > i { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--primary-light); color: var(--primary); font-size: 23px; }
.approval-state.pending > i { background: #f1efff; color: var(--violet); }
.approval-state.rejected > i { background: var(--danger-soft); color: var(--danger); }
.approval-state b, .approval-state span { display: block; }
.approval-state b { color: var(--text); font-size: 13px; }
.approval-state span { margin-top: 3px; color: var(--text2); font-size: 10px; }
.side-link { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border: 0; border-top: 1px solid var(--border); background: #fff; color: var(--primary); font-size: 11px; font-weight: 650; }
.side-link:hover { background: var(--primary-soft); }
.risk-card > strong, .risk-card > p { display: block; margin-right: 18px; margin-left: 18px; }
.risk-card > strong { margin-top: 18px; color: var(--text); font-size: 13px; }
.risk-card > p { margin-top: 7px; margin-bottom: 18px; color: var(--text2); font-size: 11px; }
.risk-card.has-risk .workflow-side-head i, .risk-card.has-risk > strong { color: var(--danger); }
.workflow-gantt-details { margin-top: 22px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.workflow-gantt-details > summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px; list-style: none; cursor: pointer; }
.workflow-gantt-details > summary::-webkit-details-marker { display: none; }
.workflow-gantt-details > summary span { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 680; }
.workflow-gantt-details > summary span i { color: var(--primary); font-size: 20px; }
.workflow-gantt-details > summary small { color: var(--text2); }
.workflow-gantt-details:not([open]) > .workflow-gantt-inner { display: none; }
.workflow-gantt-launch {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  background: #fff;
}
.workflow-gantt-launch > div { display: flex; align-items: center; gap: 12px; }
.workflow-gantt-launch > div > i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 7px; background: var(--primary-light); color: var(--primary); font-size: 20px; }
.workflow-gantt-launch b,
.workflow-gantt-launch span { display: block; }
.workflow-gantt-launch b { color: var(--text); }
.workflow-gantt-launch span { margin-top: 2px; color: var(--text2); font-size: 11px; }
.gantt-modal {
  width: min(1500px, 96vw);
  max-width: none;
  height: min(900px, 92dvh);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.gantt-modal .modal-head > div h3 { margin: 3px 0 0; }
.gantt-modal-body { overflow: auto; padding: 15px 18px 20px; }
.gantt-modal-body > .gantt-legend { position: sticky; top: -15px; z-index: 8; padding: 11px 0; background: #fff; }
.gantt-modal-body > .panel { min-width: 880px; margin: 0; border: 0; padding: 0; }
.gantt-modal .modal-foot { justify-content: space-between; }
.workflow-gantt-inner { padding: 0 18px 18px; border-top: 1px solid var(--border); }
.workflow-gantt-inner > .gantt-legend { margin-top: 14px; }
.legend-plan, .legend-actual, .legend-risk { width: 18px; height: 5px; display: inline-block; border-radius: 3px; }
.legend-plan { background: #a8b6f7; }
.legend-actual { background: var(--primary); }
.legend-risk { background: var(--danger); }
.workflow-empty, .approval-empty { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px dashed var(--border-strong); border-radius: 8px; background: #fff; color: var(--text2); text-align: center; }
.workflow-empty > i, .approval-empty > i { color: var(--primary); font-size: 34px; }
.workflow-empty b, .approval-empty b { color: var(--text); }

/* Approval trace */
.approval-page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.approval-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.approval-summary-grid > div { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--border); }
.approval-summary-grid > div:last-child { border-right: 0; }
.approval-summary-grid span, .approval-summary-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-summary-grid span { color: var(--text3); font-size: 10px; letter-spacing: .04em; }
.approval-summary-grid b { margin-top: 6px; color: var(--text); font-size: 14px; }
.approval-timeline { position: relative; margin-top: 24px; padding-left: 18px; }
.approval-timeline::before { content: ""; position: absolute; inset: 18px auto 18px 33px; width: 1px; background: var(--border-strong); }
.approval-timeline-row { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.approval-timeline-mark { position: relative; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #c8d1ff; border-radius: 50%; background: #fff; color: var(--primary); }
.approval-timeline-row.pending .approval-timeline-mark { border-color: #d4ceff; color: var(--violet); }
.approval-timeline-row.rejected .approval-timeline-mark { border-color: #ffc8cf; color: var(--danger); }
.approval-timeline-card { min-width: 0; padding: 17px 20px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.approval-timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.approval-timeline-top > div { display: flex; align-items: center; gap: 9px; }
.approval-timeline-top > span { color: var(--text3); font-family: var(--font-number); font-size: 11px; }
.approval-seq { color: var(--primary); font-family: var(--font-number); font-size: 11px; font-weight: 700; }
.approval-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; color: var(--text); font-size: 12px; }
.approval-route i { color: var(--primary); }
.approval-route small { margin-left: auto; color: var(--text3); }
.approval-timeline-card > p { margin: 10px 0 0; color: var(--text2); font-size: 11px; }

/* Persistent notification center */
.notification-mask { justify-content: flex-end; padding: 0; }
.notification-center {
  width: min(440px, 100vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--border);
  background: #fff;
  box-shadow: -22px 0 60px rgba(31, 38, 75, .15);
}
.notification-center > header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--border);
}
.notification-center > header h3 { margin: 3px 0 0; color: var(--text); font-size: 22px; letter-spacing: -.035em; }
.notification-center > header > div:last-child { display: flex; align-items: center; gap: 8px; }
.notification-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--text2); }
.notification-list { overflow-y: auto; }
.notification-row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 8px;
  align-items: start;
  gap: 12px;
  padding: 17px 20px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  text-align: left;
}
.notification-row:hover, .notification-row.unread { background: var(--primary-soft); }
.notification-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--primary-light); color: var(--primary); }
.notification-icon i { font-size: 21px; }
.notification-copy { min-width: 0; }
.notification-copy b, .notification-copy small, .notification-copy em { display: block; }
.notification-copy b { color: var(--text); font-size: 13px; font-style: normal; }
.notification-copy small { margin-top: 4px; color: var(--text2); font-size: 11px; line-height: 1.5; }
.notification-copy em { margin-top: 7px; color: var(--text3); font-family: var(--font-number); font-size: 10px; font-style: normal; }
.notification-unread { width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--danger); }
.notification-empty { height: 100%; min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text2); text-align: center; }
.notification-empty i { color: var(--primary); font-size: 35px; }
.notification-empty b { color: var(--text); }
.notification-empty span { font-size: 11px; }
.notification-center > footer { min-height: 58px; border-top: 1px solid var(--border); }
.notification-center > footer button { width: 100%; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border: 0; background: #fff; color: var(--primary); font-weight: 680; }
.notification-center > footer button:hover { background: var(--primary-soft); }

/* Feedback and issue workflow share one restrained right-side sheet. */
.feedback-mask { justify-content: flex-end; padding: 0; }
.feedback-drawer {
  width: min(460px, 100vw);
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border-left: 1px solid var(--border);
  background: #fff;
  box-shadow: -22px 0 60px rgba(31, 38, 75, .15);
}
.feedback-drawer > header { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
.feedback-drawer > header h3 { margin: 3px 0 0; color: var(--text); font-size: 22px; letter-spacing: -.035em; }
.feedback-body { min-height: 0; overflow-y: auto; padding: 20px; }
.feedback-body > p { margin: 0 0 18px; color: var(--text2); font-size: 12px; }
.feedback-body > label { display: block; margin-bottom: 16px; }
.feedback-body > label > span, .issue-assign-grid label > span { display: block; margin-bottom: 6px; color: var(--text2); font-size: 11px; font-weight: 650; }
.feedback-body :is(input, select, textarea) { width: 100%; }
.feedback-body :is(input, select) { height: 44px; }
.feedback-body textarea { min-height: 98px; resize: vertical; }
.feedback-drawer > footer { min-height: 66px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 10px 20px; border-top: 1px solid var(--border); }
.feedback-drawer > footer .btn { min-width: 96px; }
.issue-workflow-drawer { width: min(560px, 100vw); grid-template-rows: auto minmax(0, 1fr); }
.issue-status-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 15px; border-bottom: 1px solid var(--border); }
.issue-status-line > b { color: var(--primary); font-size: 13px; }
.issue-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-bottom: 1px solid var(--border); }
.issue-facts > div { min-width: 0; padding: 14px 10px 14px 0; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.issue-facts > div:nth-child(even) { padding-left: 14px; border-right: 0; }
.issue-facts dt { color: var(--text3); font-size: 10px; }
.issue-facts dd { overflow: hidden; margin: 5px 0 0; color: var(--text); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.issue-detail, .issue-action-block, .issue-history { padding: 17px 0; border-bottom: 1px solid var(--border); }
.issue-detail h4, .issue-action-block h4, .issue-history h4 { margin: 0 0 10px; color: var(--text); font-size: 13px; }
.issue-detail p { margin: 0; color: var(--text2); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.issue-action-block textarea { width: 100%; margin-bottom: 10px; }
.issue-action-block > .btn { width: 100%; }
.issue-action-block > div:last-child { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.issue-assign-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 10px; }
.issue-history ol { margin: 0; padding: 0; list-style: none; }
.issue-history li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; }
.issue-history li > span { width: 9px; height: 9px; margin-top: 4px; border: 2px solid var(--primary); border-radius: 50%; background: #fff; }
.issue-history li:not(:last-child) > span::after { content: ''; position: absolute; top: 14px; bottom: 0; left: 4px; width: 1px; background: var(--border-strong); }
.issue-history li b, .issue-history li small { display: block; }
.issue-history li b { color: var(--text); font-size: 11px; }
.issue-history li small { margin-top: 4px; color: var(--text3); font-size: 10px; line-height: 1.5; }
.issue-history li.issue-history-empty { display: block; color: var(--text3); font-size: 11px; }

/* ---------- System settings: unified directory + workspace ---------- */
.tb-brand-logo {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
  object-fit: contain;
  color: var(--primary);
  font-size: 30px;
}
.lb-mark {
  width: 58px !important;
  height: 58px !important;
  display: grid;
  place-items: center;
  margin-bottom: 26px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .08) !important;
}
.lb-logo { width: 38px; height: 38px; display: block; object-fit: contain; color: #fff; font-size: 38px; }
.system-page { width: min(100%, 1500px); margin: 0 auto; }
.system-page-head {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 2px 0 22px;
}
.system-page-head h1 { margin: 0; color: var(--text); font-size: 30px; font-weight: 780; letter-spacing: -.035em; line-height: 1.15; }
.system-page-head p { margin: 8px 0 0; color: var(--text2); font-size: 13px; }
.system-page-head > span { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border); border-radius: 5px; background: #fff; color: var(--text2); font-size: 11px; font-weight: 650; }
.system-settings-layout { display: grid; grid-template-columns: 256px minmax(0, 1fr); align-items: start; gap: 20px; }
.system-settings-nav {
  position: sticky;
  top: calc(var(--topbar-h) + 24px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.system-settings-nav section { padding: 16px 10px 10px; border-bottom: 1px solid var(--border); }
.system-settings-nav section:last-child { border-bottom: 0; }
.system-settings-nav h2 { margin: 0 8px 8px; color: var(--text3); font-size: 10px; font-weight: 720; letter-spacing: .12em; }
.system-settings-nav button {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--text2);
  text-align: left;
}
.system-settings-nav button:hover { background: #f7f8fc; color: var(--text); }
.system-settings-nav button.active { border-left-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.system-settings-nav button > i:first-child { font-size: 19px; }
.system-settings-nav button > i:last-child { color: var(--text3); font-size: 13px; }
.system-settings-nav button span { min-width: 0; }
.system-settings-nav button b, .system-settings-nav button small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-settings-nav button b { color: var(--text); font-size: 12px; font-weight: 680; }
.system-settings-nav button small { margin-top: 2px; color: var(--text3); font-size: 9px; font-weight: 500; }
.system-settings-nav button.active b { color: var(--primary); }
.system-workspace { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.system-workspace-head { min-height: 82px; display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--border); }
.system-workspace-head > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 21px; }
.system-workspace-head h2 { margin: 0; color: var(--text); font-size: 20px; font-weight: 740; letter-spacing: -.02em; }
.system-workspace-head p { margin: 4px 0 0; color: var(--text2); font-size: 11px; }
.system-workspace-body { padding: 22px; background: #fafbfe; }
.system-workspace-body > :first-child { margin-top: 0; }
.system-workspace-body > :last-child { margin-bottom: 0; }
.system-card { margin-bottom: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.system-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.system-card-head h3, .backup-primary h3 { margin: 0; color: var(--text); font-size: 15px; font-weight: 720; }
.system-card-head p, .backup-primary p { margin: 5px 0 0; color: var(--text2); font-size: 11px; line-height: 1.6; }
.system-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
.system-field { min-width: 0; display: grid; gap: 7px; margin: 0; }
.system-field.full { grid-column: 1 / -1; }
.system-field > span { color: var(--text); font-size: 11px; font-weight: 680; }
.system-field > input { width: 100%; height: 42px; padding-inline: 12px; border-radius: 5px; font-size: 13px; }
.system-field > input[type="file"] { height: auto; min-height: 44px; padding: 8px; color: var(--text2); font-size: 11px; }
.system-field > small { color: var(--text3); font-size: 10px; font-weight: 500; line-height: 1.55; }
.system-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.system-form-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
.brand-settings-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); align-items: start; gap: 18px; }
.brand-settings-grid .system-card { margin: 0; }
.brand-live-preview { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.brand-preview-label { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text3); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.brand-preview-bar { min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.brand-preview-bar b { min-width: 0; overflow: hidden; color: var(--text); font-size: 14px; font-weight: 740; text-overflow: ellipsis; white-space: nowrap; }
.brand-preview-logo { width: 34px; height: 34px; display: block; object-fit: contain; color: var(--primary); font-size: 33px; }
.brand-preview-screen { min-height: 250px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: #f7f7f8; }
.brand-preview-screen > span { color: var(--text3); font-family: var(--font-number); font-size: 10px; }
.brand-preview-screen > strong { max-width: 12ch; color: var(--text); font-size: clamp(25px, 3vw, 40px); font-weight: 780; letter-spacing: -.045em; line-height: 1.08; }
.brand-preview-screen > div { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-strong); }
.brand-preview-screen > div b { padding-top: 9px; border-right: 1px solid var(--border); color: var(--text2); font-size: 9px; font-weight: 650; }
.brand-preview-screen > div b:last-child { border-right: 0; padding-left: 9px; }
.system-stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 16px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.system-stat-strip > div { min-height: 74px; display: flex; align-items: baseline; gap: 8px; padding: 18px; border-right: 1px solid var(--border); }
.system-stat-strip > div:last-child { border-right: 0; }
.system-stat-strip b { color: var(--primary); font-family: var(--font-number); font-size: 26px; line-height: 1; }
.system-stat-strip span { color: var(--text2); font-size: 10px; }
.system-toolbar { min-height: 54px; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.system-toolbar .btn { display: inline-flex; align-items: center; gap: 7px; }
.system-table-search { position: relative; width: min(320px, 100%); margin: 0; }
.system-table-search i { position: absolute; left: 11px; top: 50%; z-index: 1; color: var(--text3); transform: translateY(-50%); }
.system-table-search input { width: 100%; height: 40px; padding: 0 12px 0 34px; border-radius: 5px; font-size: 12px; }
.system-table-wrap { border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.system-workspace .tbl { margin: 0; }
.system-workspace .tbl th { height: 42px; background: #f7f7f8; color: var(--text2); font-size: 10px; font-weight: 700; letter-spacing: .02em; }
.system-workspace .tbl td { height: 54px; font-size: 11px; }
.system-note { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--primary); background: var(--primary-soft); color: var(--text2); font-size: 11px; line-height: 1.6; }
.system-note i { margin-top: 2px; color: var(--primary); font-size: 16px; }
.backup-grid { display: grid; gap: 16px; }
.backup-primary { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.backup-primary > i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--primary); font-size: 25px; }
.backup-primary .btn { display: inline-flex; align-items: center; gap: 7px; }
.backup-path { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.backup-path span { color: var(--text2); font-size: 11px; }
.backup-path code { width: max-content; max-width: 100%; overflow: hidden; color: var(--text); font-family: var(--font-number); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Login follows the same system without decorative gradients. */
.login-wrap { background: #f4f6fa; }
.login-box { border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: 10px; box-shadow: 0 24px 70px rgba(36, 43, 78, .12); }

/* Never reintroduce yellow/green semantic surfaces in V2. */
.gantt-bar.actual, .gantt-bar.actual.doing, .sc-chip.ok, .sc-seg.done, .sc-seg.doing { background: var(--primary) !important; }
.gantt-bar.duesoon, .sc-chip.miss { background: var(--violet) !important; border-color: var(--violet) !important; color: #fff !important; }
.gantt-bar.overdue, .sc-proj-fill.over, .sc-tag.over { background: var(--danger) !important; }

@media (max-width: 1220px) {
  :root { --sidebar-w: 226px; }
  .shell-v2 .topbar { grid-template-columns: var(--sidebar-w) minmax(220px, 1fr) auto 42px auto; gap: 14px; padding-right: 18px; }
  .shell-v2 .topbar:not(:has(.topbar-create)) { grid-template-columns: var(--sidebar-w) minmax(220px, 1fr) 42px auto; }
  .topbar-date { display: none; }
  .ops-command-grid { grid-template-columns: 170px minmax(360px, 1.45fr) minmax(290px, 1fr); }
  .ops-priority, .ops-approvals, .ops-risk { padding-right: 20px; padding-left: 20px; }
  .ops-priority { padding-left: 0; }
  .ops-progress-step { width: 21px; height: 21px; flex-basis: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Personnel directory + permission work orders ---------- */
.employee-directory-toolbar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.employee-directory-count { color: var(--text3); font-size: 10px; white-space: nowrap; }
.employee-directory-count b { color: var(--primary); font-family: var(--font-number); font-size: 16px; }
.employee-data-actions { position: relative; }
.employee-data-actions > summary,
.employee-more-actions > summary {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--text2);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.employee-data-actions > summary::-webkit-details-marker,
.employee-more-actions > summary::-webkit-details-marker,
.permission-user-card > summary::-webkit-details-marker { display: none; }
.employee-data-actions[open] > summary,
.employee-more-actions[open] > summary { border-color: var(--primary); color: var(--primary); }
.employee-data-actions[open] > summary .ph-caret-down,
.employee-more-actions[open] > summary .ph-caret-down { transform: rotate(180deg); }
.employee-data-actions > div {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 12;
  width: 180px;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(31, 38, 75, .12);
}
.employee-data-actions > div .btn { width: 100%; min-height: 38px; justify-content: flex-start; border: 0; background: #fff; }
.employee-data-actions > div .btn:hover { background: var(--primary-soft); color: var(--primary); }
.employee-directory-list { display: grid; gap: 10px; }
.employee-record {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.employee-record[hidden], .permission-user-card[hidden] { display: none !important; }
.employee-record-head {
  min-height: 72px;
  display: grid;
  grid-template-columns: 44px minmax(180px, .8fr) minmax(260px, 1.2fr);
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
}
.employee-record-index,
.permission-user-index {
  color: var(--primary);
  font-family: var(--font-number);
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -.02em;
}
.employee-record-identity { min-width: 0; }
.employee-record-identity button {
  max-width: 100%;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 740;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.employee-record-identity button:hover { color: var(--primary); }
.employee-record-identity small { display: block; overflow: hidden; margin-top: 4px; color: var(--text3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.employee-record-status { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.employee-record-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--border);
  background: #fafbfe;
}
.employee-record-facts > div { min-width: 0; padding: 12px 16px; border-right: 1px solid var(--border); }
.employee-record-facts > div:last-child { border-right: 0; }
.employee-record-facts span,
.employee-record-facts b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-record-facts span { color: var(--text3); font-size: 9px; font-weight: 650; letter-spacing: .04em; }
.employee-record-facts b { margin-top: 5px; color: var(--text); font-size: 11px; font-weight: 620; }
.employee-record-controls { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--border); }
.employee-profile-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  font-weight: 680;
}
.employee-more-actions { position: relative; }
.employee-more-actions > summary { min-height: 36px; }
.employee-more-actions > div {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 7px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.employee-more-actions[open] { width: 100%; }
.employee-more-actions > div button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text2);
  font-size: 10px;
}
.employee-more-actions > div button:hover { border-color: var(--primary); color: var(--primary); }
.employee-more-actions > div button.danger { color: var(--danger); }
.system-empty-state { min-height: 170px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px solid var(--border); background: #fff; color: var(--text3); text-align: center; }
.system-empty-state i { color: var(--primary); font-size: 28px; }
.system-empty-state b { color: var(--text); font-size: 13px; }
.system-empty-state span { font-size: 10px; }

.permission-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(260px, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: #fff;
}
.permission-toolbar > div { min-width: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.permission-toolbar > div b,
.permission-toolbar > div span { display: block; }
.permission-toolbar > div b { color: var(--text); font-size: 11px; }
.permission-toolbar > div span { margin-top: 3px; color: var(--text3); font-size: 10px; }
.permission-user-list { display: grid; gap: 9px; }
.permission-user-card { overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.permission-user-card > summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(150px, .7fr) auto minmax(160px, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
}
.permission-user-card > summary:hover { background: #fafbfe; }
.permission-user-card[open] > summary { border-bottom: 1px solid var(--border); background: var(--primary-soft); }
.permission-user-card[open] > summary > .ph-caret-down { color: var(--primary); transform: rotate(180deg); }
.permission-user-name { min-width: 0; }
.permission-user-name b,
.permission-user-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-user-name b { color: var(--text); font-size: 13px; }
.permission-user-name small { margin-top: 3px; color: var(--text3); font-size: 10px; }
.permission-user-summary { justify-self: end; color: var(--text3); font-size: 10px; white-space: nowrap; }
.permission-user-summary b { color: var(--primary); font-family: var(--font-number); font-size: 13px; }
.permission-user-card > summary > .ph-caret-down { justify-self: end; color: var(--text3); transition: transform .18s ease; }
.permission-user-body { padding: 18px; }
.permission-level { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.permission-level > div b,
.permission-level > div small { display: block; }
.permission-level > div b { color: var(--text); font-size: 12px; }
.permission-level > div small { margin-top: 4px; color: var(--text3); font-size: 10px; }
.permission-level select { width: 180px; height: 42px; }
.permission-level-static { min-width: 90px; padding: 8px 12px; border: 1px solid var(--border); background: #f7f7f8; color: var(--text2); font-size: 11px; text-align: center; }
.permission-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.permission-module { min-width: 0; min-height: 76px; display: grid; align-content: center; gap: 7px; margin: 0; padding: 11px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.permission-module > span,
.permission-module > div b { color: var(--text); font-size: 10px; font-weight: 680; }
.permission-module select { width: 100%; height: 38px; font-size: 11px; }
.permission-module.locked { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.permission-module.locked div { min-width: 0; }
.permission-module.locked b,
.permission-module.locked small { display: block; }
.permission-module.locked small { margin-top: 3px; color: var(--text3); font-size: 9px; }
.permission-module.locked > span { padding: 6px 8px; border: 1px solid #cdd8ff; background: var(--primary-soft); color: var(--primary); white-space: nowrap; }
.permission-save { min-height: 60px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 14px; }
.permission-save > span { color: var(--text3); font-size: 10px; }
.permission-save .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; }
.employee-directory-toolbar :is(button, summary, input):focus-visible,
.employee-record :is(button, summary):focus-visible,
.permission-user-card :is(summary, select, button):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Permission console — account list + grouped view/operate matrix. */
.permission-console {
  --permission-column: 108px;
  display: grid;
  grid-template-columns: minmax(260px, 304px) minmax(520px, 1fr);
  align-items: start;
  gap: 16px;
}
.permission-role-panel,
.permission-editor { min-width: 0; border: 1px solid var(--border-strong); background: #fff; }
.permission-role-panel { position: sticky; top: 92px; }
.permission-role-panel > header { display: grid; gap: 9px; padding: 14px; border-bottom: 1px solid var(--border-strong); background: #f7f7f8; }
.permission-role-panel > header > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.permission-role-panel > header > div b { color: var(--text); font-size: 13px; }
.permission-role-panel > header > div span { color: var(--text3); font-size: 10px; }
.permission-role-panel > header > div em { color: var(--primary); font-family: var(--font-number); font-size: 15px; font-style: normal; font-weight: 750; }
.permission-role-panel .system-table-search { width: 100%; }
.permission-role-panel .system-table-search input,
.permission-role-panel > header > select { width: 100%; min-height: 40px; }
.permission-role-panel .permission-user-list { max-height: min(620px, calc(100vh - 310px)); display: block; overflow: auto; }
.permission-role-panel .permission-user-card { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
.permission-role-panel .permission-user-card:last-child { border-bottom: 0; }
.permission-role-panel .permission-user-card > summary {
  min-height: 88px;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  grid-template-rows: auto auto auto;
  gap: 3px 9px;
  padding: 11px 12px;
  border-left: 3px solid transparent;
}
.permission-role-panel .permission-user-card > summary:hover { background: #fafbfe; }
.permission-role-panel .permission-user-card.selected > summary { border-left-color: var(--primary); background: var(--primary-soft); }
.permission-role-panel .permission-user-index { grid-column: 1; grid-row: 1 / 4; align-self: start; margin-top: 1px; font-size: 15px; }
.permission-role-panel .permission-user-name { grid-column: 2; grid-row: 1; }
.permission-role-panel .permission-user-name b { font-size: 12px; }
.permission-role-panel .permission-user-card > summary > .tag { grid-column: 2; grid-row: 2; justify-self: start; }
.permission-role-panel .permission-user-summary { grid-column: 2; grid-row: 3; justify-self: start; font-size: 9px; }
.permission-role-panel .permission-user-card > summary > .ph-caret-right { grid-column: 3; grid-row: 1 / 4; align-self: center; color: var(--text3); }
.permission-role-panel .permission-user-card.selected > summary > .ph-caret-right { color: var(--primary); }
.permission-user-empty { padding: 28px 14px; color: var(--text3); font-size: 11px; text-align: center; }
.permission-editor { overflow: hidden; }
.permission-editor-head { min-height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; border-bottom: 1px solid var(--border-strong); }
.permission-editor-head > div { min-width: 0; display: flex; align-items: center; gap: 13px; }
.permission-editor-folio { color: var(--primary); font-family: var(--font-number); font-size: 28px; font-weight: 760; letter-spacing: -.04em; }
.permission-editor-head h3,
.permission-editor-head p { margin: 0; }
.permission-editor-head h3 { color: var(--text); font-size: 18px; letter-spacing: -.025em; }
.permission-editor-head p { margin-top: 4px; color: var(--text3); font-size: 10px; }
.permission-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--border-strong); background: #f7f7f8; }
.permission-overview > div { min-width: 0; min-height: 78px; display: grid; align-content: center; gap: 4px; padding: 12px 16px; border-right: 1px solid var(--border); }
.permission-overview > div:last-child { border-right: 0; }
.permission-overview strong { color: var(--primary); font-family: var(--font-number); font-size: 24px; font-weight: 740; font-variant-numeric: tabular-nums; line-height: 1; }
.permission-overview span { color: var(--text3); font-size: 9px; }
.permission-editor > .permission-level { min-height: 66px; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.permission-editor > .permission-level select { width: min(250px, 100%); }
.permission-template { min-height: 72px; display: grid; grid-template-columns: minmax(170px, .65fr) minmax(300px, 1fr); align-items: center; gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.permission-template > div b,
.permission-template > div small { display: block; }
.permission-template > div b { color: var(--text); font-size: 12px; }
.permission-template > div small { margin-top: 4px; color: var(--text3); font-size: 9px; line-height: 1.45; }
.permission-template > label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.permission-template select { width: 100%; min-height: 40px; }
.permission-template .btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.permission-matrix-toolbar { min-height: 58px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.permission-matrix-toolbar .system-table-search { width: min(300px, 100%); }
.permission-matrix-toolbar .btn { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.permission-matrix-header,
.permission-matrix-row { display: grid; grid-template-columns: minmax(0, 1fr) var(--permission-column) var(--permission-column); }
.permission-matrix-header { min-height: 52px; align-items: stretch; border-bottom: 1px solid var(--border-strong); background: #f7f7f8; }
.permission-matrix-header > div { align-self: center; padding: 8px 16px; }
.permission-matrix-header > div b,
.permission-matrix-header > div small { display: block; }
.permission-matrix-header > div b { color: var(--text); font-size: 11px; }
.permission-matrix-header > div small { margin-top: 3px; color: var(--text3); font-size: 9px; }
.permission-matrix-header > label,
.permission-group-actions label,
.permission-capability { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; color: var(--text2); font-size: 10px; font-weight: 650; cursor: pointer; }
.permission-matrix-header > label { border-left: 1px solid var(--border); }
.permission-console input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--primary); }
.permission-console input[type="checkbox"]:disabled { cursor: not-allowed; opacity: .68; }
.permission-module-groups { display: grid; }
.permission-module-group { border-bottom: 1px solid var(--border-strong); }
.permission-module-group[hidden] { display: none !important; }
.permission-module-group > summary { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto calc(var(--permission-column) * 2) 20px; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; background: #fff; cursor: pointer; list-style: none; }
.permission-module-group > summary::-webkit-details-marker { display: none; }
.permission-module-group[open] > summary { background: var(--primary-soft); }
.permission-module-group > summary > div:first-child b,
.permission-module-group > summary > div:first-child small { display: block; }
.permission-module-group > summary > div:first-child b { color: var(--text); font-size: 12px; }
.permission-module-group > summary > div:first-child small { margin-top: 3px; color: var(--text3); font-size: 9px; }
.permission-group-count { color: var(--text3); font-size: 9px; white-space: nowrap; }
.permission-group-actions { height: 100%; display: grid; grid-template-columns: repeat(2, var(--permission-column)); }
.permission-group-actions label { border-left: 1px solid var(--border); }
.permission-module-group > summary > .ph-caret-down { color: var(--text3); transition: transform .16s ease; }
.permission-module-group[open] > summary > .ph-caret-down { color: var(--primary); transform: rotate(180deg); }
.permission-matrix { border-top: 1px solid var(--border); }
.permission-matrix-row { min-height: 62px; border-bottom: 1px solid var(--border); background: #fff; }
.permission-matrix-row:last-child { border-bottom: 0; }
.permission-matrix-row:hover { background: #fafbfe; }
.permission-matrix-row[hidden] { display: none !important; }
.permission-module-copy { min-width: 0; align-self: center; padding: 10px 16px 10px 28px; }
.permission-module-copy b,
.permission-module-copy small { display: block; }
.permission-module-copy b { color: var(--text); font-size: 11px; }
.permission-module-copy small { margin-top: 4px; color: var(--text3); font-size: 9px; line-height: 1.4; }
.permission-capability { border-left: 1px solid var(--border); }
.permission-capability:has(input:checked) { background: #f8faff; color: var(--primary); }
.permission-admin-note { margin: 12px 16px; }
.permission-editor > .permission-save { position: sticky; bottom: 0; z-index: 3; min-height: 66px; padding: 10px 16px; border-top: 1px solid var(--border-strong); background: rgba(255, 255, 255, .96); }
.permission-editor > .permission-save .btn { min-height: 42px; }
.permission-console :is(summary, button, input, select):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* RBAC v2 — module / function / operation matrix. */
.permission-console-v2 { grid-template-columns: minmax(270px, 310px) minmax(640px, 1fr); }
.permission-console-v2 .permission-matrix-scroll {
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
  background: #fff;
}
.permission-scroll-proxy {
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--border-strong);
  background: #f7f7f8;
  scrollbar-color: var(--primary) #e8ebf2;
  scrollbar-width: thin;
}
.permission-scroll-proxy[hidden] { display: none !important; }
.permission-scroll-proxy > div { height: 1px; min-width: 900px; }
.permission-scroll-proxy::-webkit-scrollbar { height: 12px; }
.permission-scroll-proxy::-webkit-scrollbar-track { background: #e8ebf2; }
.permission-scroll-proxy::-webkit-scrollbar-thumb { border: 3px solid #e8ebf2; border-radius: 999px; background: var(--primary); }
.permission-operation-header,
.permission-function-row {
  min-width: 900px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) repeat(7, 80px);
}
.permission-operation-header {
  min-height: 56px;
  align-items: stretch;
  border-bottom: 1px solid var(--border-strong);
  background: #f7f7f8;
}
.permission-operation-header > div {
  align-self: center;
  padding: 9px 16px;
}
.permission-operation-header > div b,
.permission-operation-header > div small { display: block; }
.permission-operation-header > div b { color: var(--text); font-size: 11px; }
.permission-operation-header > div small { margin-top: 3px; color: var(--text3); font-size: 9px; }
.permission-operation-header > label,
.permission-operation-cell,
.permission-module-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: var(--text2);
  font-size: 10px;
  font-weight: 650;
  cursor: pointer;
}
.permission-operation-header > label { border-left: 1px solid var(--border); }
.permission-operation-header > label:has(input:checked),
.permission-operation-cell:has(input:checked) { background: #f5f7ff; color: var(--primary); }
.permission-console-v2 .permission-module-group { min-width: 900px; }
.permission-console-v2 .permission-module-group > summary.permission-module-summary {
  min-height: 64px;
  grid-template-columns: 44px minmax(230px, 1fr) auto 116px 20px;
  gap: 10px;
  padding: 8px 12px 8px 0;
  border-left: 3px solid transparent;
}
.permission-console-v2 .permission-module-group[open] > summary.permission-module-summary {
  border-left-color: var(--primary);
  background: var(--primary-soft);
}
.permission-module-index {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--border);
  color: var(--primary);
  font-family: var(--font-number);
  font-size: 14px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}
.permission-module-heading { min-width: 0; }
.permission-module-heading b,
.permission-module-heading small { display: block; }
.permission-module-heading b { color: var(--text); font-size: 12px; }
.permission-module-heading small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--text3);
  font-size: 9px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.permission-console-v2 .permission-group-count { justify-self: end; }
.permission-module-all {
  min-height: 36px;
  padding: 0 10px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
}
.permission-function-row {
  min-height: 58px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.permission-function-row:last-child { border-bottom: 0; }
.permission-function-row:hover { background: #fafbfe; }
.permission-function-row[hidden] { display: none !important; }
.permission-function-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 10px 16px 10px 60px;
}
.permission-function-copy b { color: var(--text); font-size: 11px; font-weight: 680; }
.permission-operation-cell { min-width: 0; border-left: 1px solid var(--border); }
.permission-operation-cell input:disabled + span { opacity: .72; }
.permission-console-v2 .permission-admin-note { margin-block: 12px; }

/* ---------- Approval center: inspect first, decide second ---------- */
.approval-center-v2 { width: min(100%, 1500px); margin: 0 auto; }
.approval-center-head {
  min-height: 118px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--border-strong);
}
.approval-center-folio { display: block; margin-bottom: 6px; color: var(--primary); font-family: var(--font-number); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.approval-center-head h1 { margin: 0; color: var(--text); font-size: clamp(27px, 2.5vw, 36px); font-weight: 780; letter-spacing: -.045em; line-height: 1; }
.approval-center-head p { margin: 9px 0 0; color: var(--text2); font-size: 12px; }
.approval-center-metrics { display: grid; grid-template-columns: repeat(3, minmax(92px, 1fr)); border: 1px solid var(--border-strong); background: #fff; }
.approval-center-metrics > div { min-width: 96px; padding: 13px 15px; border-right: 1px solid var(--border); }
.approval-center-metrics > div:last-child { border-right: 0; }
.approval-center-metrics b,
.approval-center-metrics span { display: block; }
.approval-center-metrics b { color: var(--primary); font-family: var(--font-number); font-size: 23px; line-height: 1; }
.approval-center-metrics span { margin-top: 6px; color: var(--text3); font-size: 9px; font-weight: 650; }
.approval-work-section { min-width: 0; margin-top: 18px; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 6px; background: #fff; }
.approval-work-section.primary { border-top: 3px solid var(--primary); }
.approval-work-section > header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 15px; border-bottom: 1px solid var(--border); }
.approval-work-section > header > div { display: flex; align-items: center; gap: 10px; }
.approval-work-section > header span { color: var(--primary); font-family: var(--font-number); font-size: 10px; font-weight: 750; }
.approval-work-section > header h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 720; }
.approval-work-section > header > b { color: var(--text3); font-family: var(--font-number); font-size: 12px; }
.approval-secondary-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.approval-work-list,
.approval-round-list { display: grid; }
.approval-work-card,
.approval-round-card { min-width: 0; border-bottom: 1px solid var(--border); background: #fff; }
.approval-work-card:last-child,
.approval-round-card:last-child { border-bottom: 0; }
.approval-work-card > summary,
.approval-round-card > summary { cursor: pointer; list-style: none; }
.approval-work-card > summary::-webkit-details-marker,
.approval-round-card > summary::-webkit-details-marker { display: none; }
.approval-work-card > summary {
  min-height: 76px;
  display: grid;
  grid-template-columns: 34px minmax(150px, 1fr) auto minmax(160px, .8fr) auto 20px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
}
.approval-secondary-grid .approval-work-card > summary {
  min-height: 88px;
  grid-template-columns: 30px minmax(0, 1fr) auto auto 18px;
  grid-template-rows: auto auto;
  gap: 5px 8px;
}
.approval-secondary-grid .approval-work-card .approval-work-index { grid-column: 1; grid-row: 1 / 3; }
.approval-secondary-grid .approval-work-card .approval-work-title { grid-column: 2; grid-row: 1; }
.approval-secondary-grid .approval-work-card .approval-priority { grid-column: 3; grid-row: 1; }
.approval-secondary-grid .approval-work-card .approval-work-flow { grid-column: 2 / 5; grid-row: 2; }
.approval-secondary-grid .approval-work-card > summary > .tag { grid-column: 4; grid-row: 1; min-width: 48px; text-align: center; white-space: nowrap; }
.approval-secondary-grid .approval-work-card > summary > .ph-caret-down { grid-column: 5; grid-row: 1 / 3; }
.approval-work-card > summary:hover,
.approval-round-card > summary:hover { background: #fafbfe; }
.approval-work-card[open] > summary,
.approval-round-card[open] > summary { border-bottom: 1px solid var(--border); background: var(--primary-soft); }
.approval-work-card[open] > summary > .ph-caret-down,
.approval-round-card[open] > summary > .ph-caret-down { color: var(--primary); transform: rotate(180deg); }
.approval-work-index,
.approval-round-index { color: var(--primary); font-family: var(--font-number); font-size: 13px; font-weight: 750; }
.approval-work-title { min-width: 0; }
.approval-work-title b,
.approval-work-title small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-work-title b { color: var(--text); font-size: 13px; }
.approval-work-title small { margin-top: 4px; color: var(--text3); font-family: var(--font-number); font-size: 9px; }
.approval-priority { padding: 5px 7px; border: 1px solid var(--border-strong); background: #fff; color: var(--text2); font-size: 9px; font-weight: 700; white-space: nowrap; }
.approval-priority.important { border-color: #cbd6ff; color: var(--primary); }
.approval-priority.urgent { border-color: #ffc3ca; color: var(--danger); }
.approval-work-flow { min-width: 0; overflow: hidden; }
.approval-work-flow b,
.approval-work-flow small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-work-flow b { color: var(--text2); font-size: 10px; font-weight: 650; }
.approval-work-flow small { margin-top: 4px; color: var(--text3); font-size: 8px; }
.approval-work-card > summary > .ph-caret-down,
.approval-round-card > summary > .ph-caret-down { justify-self: end; color: var(--text3); font-size: 14px; transition: transform .18s ease; }
.approval-work-detail { padding: 14px; background: #fff; }
.approval-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.approval-detail-grid > div { min-width: 0; min-height: 58px; padding: 10px 11px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.approval-detail-grid span,
.approval-detail-grid b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-detail-grid span { color: var(--text3); font-size: 9px; font-weight: 650; }
.approval-detail-grid b { margin-top: 5px; color: var(--text); font-size: 11px; font-weight: 650; }
.approval-detail-comment { margin-top: 10px; padding: 10px 12px; border-left: 2px solid var(--primary); background: #f7f7f8; }
.approval-detail-comment span { color: var(--text3); font-size: 9px; }
.approval-detail-comment p { margin: 4px 0 0; color: var(--text2); font-size: 11px; line-height: 1.55; white-space: pre-wrap; }
.approval-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.approval-detail-actions .btn { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; }
.approval-detail-actions .btn:first-child { margin-right: auto; }
.approval-compact-empty { min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 10px 14px; color: var(--text3); }
.approval-compact-empty i { color: var(--primary); font-size: 17px; }
.approval-compact-empty b { color: var(--text); font-size: 11px; }
.approval-compact-empty span { margin-left: auto; font-size: 9px; }
.approval-round-card > summary { min-height: 68px; display: grid; grid-template-columns: 30px minmax(135px, 1fr) auto auto 18px; align-items: center; gap: 9px; padding: 10px 13px; }
.approval-round-card > summary > span:nth-child(2) { min-width: 0; }
.approval-round-card > summary > span:nth-child(2) b,
.approval-round-card > summary > span:nth-child(2) small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-round-card > summary > span:nth-child(2) b { color: var(--text); font-size: 11px; }
.approval-round-card > summary > span:nth-child(2) small { margin-top: 4px; color: var(--text3); font-size: 9px; }
.approval-round-card > summary > span:nth-child(4) { color: var(--text3); font-family: var(--font-number); font-size: 9px; white-space: nowrap; }
.approval-round-events { padding: 7px 13px 12px; }
.approval-round-events > div { position: relative; min-height: 58px; padding: 9px 0 9px 86px; border-bottom: 1px solid var(--border); }
.approval-round-events > div:last-child { border-bottom: 0; }
.approval-round-level { position: absolute; top: 10px; left: 0; width: 72px; color: var(--primary); font-size: 9px; font-weight: 700; }
.approval-round-events p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text2); font-size: 10px; }
.approval-round-events p i { color: var(--primary); }
.approval-round-events small { display: block; margin-top: 5px; color: var(--text3); font-size: 9px; line-height: 1.45; }
.approval-center-v2 :is(summary, button):focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

.overview-review-result {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid #dfe3ee;
  background: #f7f7f8;
  color: #4d5870;
  font-size: 13px;
}
.approval-version-snapshot { margin: 18px 0 22px; border: 1px solid #dfe3ee; border-top: 3px solid #002fa7; background: #fff; }
.approval-version-snapshot > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid #e8ebf2; }
.approval-version-snapshot > header div { display: grid; gap: 3px; }
.approval-version-snapshot > header span,
.approval-version-snapshot dt,
.approval-version-snapshot > div > span { color: #7d879a; font-size: 12px; }
.approval-version-snapshot > header b { color: #111827; font-size: 16px; }
.approval-version-snapshot dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.approval-version-snapshot dl > div { min-width: 0; padding: 14px 18px; border-right: 1px solid #e8ebf2; border-bottom: 1px solid #e8ebf2; }
.approval-version-snapshot dl > div:nth-child(3n) { border-right: 0; }
.approval-version-snapshot dt { margin-bottom: 5px; }
.approval-version-snapshot dd { margin: 0; color: #111827; font-weight: 650; overflow-wrap: anywhere; }
.approval-version-snapshot > div { padding: 14px 18px 18px; }
.approval-version-snapshot > div p { margin: 6px 0 0; color: #3f4a60; line-height: 1.7; }

/* 问题档案：沿用工作台的 Swiss 网格、编号和细线体系 */
.ops-section-actions { display: flex; align-items: center; gap: 14px; }
.ops-section-actions .ops-feedback-link + .ops-feedback-link { position: relative; }
.ops-section-actions .ops-feedback-link + .ops-feedback-link::before { content: ''; position: absolute; left: -7px; top: 9px; width: 1px; height: 14px; background: var(--border); }
.issue-archive-page { width: min(1440px, 100%); margin: 0 auto; }
.issue-archive-head { min-height: 116px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 8px 0 22px; border-bottom: 1px solid var(--border-strong); }
.issue-archive-head h1 { margin: 4px 0 6px; color: var(--text); font-size: 38px; line-height: 1; letter-spacing: -.055em; }
.issue-archive-head p { margin: 0; color: var(--text2); font-size: 13px; }
.issue-archive-head .btn { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; }
.issue-archive-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.issue-archive-summary > div { min-height: 92px; display: flex; align-items: baseline; gap: 12px; padding: 20px 22px; border-right: 1px solid var(--border); }
.issue-archive-summary strong { color: var(--primary); font-family: var(--font-number); font-size: 32px; font-weight: 650; font-variant-numeric: tabular-nums; }
.issue-archive-summary span { color: var(--text2); font-size: 12px; }
.issue-archive-summary .is-risk strong { color: var(--danger); }
.issue-archive-filter { display: grid; grid-template-columns: minmax(260px, 1.6fr) minmax(210px, 1fr) 150px 130px auto auto; align-items: center; gap: 9px; padding: 16px 0; border-bottom: 1px solid var(--border-strong); }
.issue-archive-filter :is(input, select) { width: 100%; min-height: 40px; border: 1px solid var(--border-strong); border-radius: 4px; background: #fff; color: var(--text); }
.issue-archive-search { position: relative; }
.issue-archive-search i { position: absolute; top: 50%; left: 13px; z-index: 1; color: var(--text3); transform: translateY(-50%); }
.issue-archive-search input { padding-left: 38px; }
.issue-filter-reset { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; border: 0; background: transparent; color: var(--text2); white-space: nowrap; }
.issue-filter-reset:hover { color: var(--primary); }
.issue-archive-ledger { margin-top: 18px; border: 1px solid var(--border); background: #fff; }
.issue-archive-ledger > header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--border-strong); }
.issue-archive-ledger > header > div { display: flex; align-items: baseline; gap: 12px; }
.issue-archive-ledger > header h2 { margin: 0; font-size: 18px; letter-spacing: -.025em; }
.issue-archive-ledger > header span,
.issue-archive-ledger > header small { color: var(--text3); font-size: 10px; }
.issue-archive-ledger > header small { display: inline-flex; align-items: center; gap: 5px; }
.issue-archive-ledger > header small i { color: var(--primary); font-size: 15px; }
.issue-archive-row { min-height: 86px; display: grid; grid-template-columns: minmax(0, 1fr) 48px; border-bottom: 1px solid var(--border); }
.issue-archive-row:last-child { border-bottom: 0; }
.issue-archive-row:hover { background: #fafbfe; }
.issue-archive-row.is-closed { background: #fbfbfc; }
.issue-archive-main { min-width: 0; display: grid; grid-template-columns: 58px minmax(220px, 1.5fr) minmax(170px, .8fr) 115px 16px; align-items: center; gap: 16px; padding: 13px 18px; border: 0; background: transparent; color: var(--text); text-align: left; }
.issue-archive-index { color: var(--primary); font-family: var(--font-number); font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.issue-archive-copy,
.issue-archive-time,
.issue-archive-state { min-width: 0; }
.issue-archive-copy b,
.issue-archive-copy small,
.issue-archive-time b,
.issue-archive-time small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issue-archive-copy b { font-size: 14px; font-weight: 700; }
.issue-archive-copy small { margin-top: 6px; color: var(--text2); font-size: 10px; }
.issue-archive-time b { color: var(--text2); font-family: var(--font-number); font-size: 10px; font-weight: 550; }
.issue-archive-time small { margin-top: 6px; color: var(--text3); font-size: 9px; }
.issue-archive-state { text-align: right; }
.issue-archive-state em,
.issue-archive-state b { display: block; font-style: normal; }
.issue-archive-state em { color: var(--text2); font-size: 10px; }
.issue-archive-state em.serious,
.issue-archive-state em.urgent { color: var(--danger); }
.issue-archive-state b { margin-top: 5px; color: var(--primary); font-size: 11px; }
.issue-archive-row.is-closed .issue-archive-state b { color: var(--text3); }
.issue-archive-main > i { color: var(--text3); }
.issue-archive-delete { margin: 18px 10px 18px 0; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text3); }
.issue-archive-delete:hover { color: var(--danger); }
.issue-archive-ledger > footer { min-height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--border-strong); }
.issue-archive-ledger > footer span { color: var(--text3); font-family: var(--font-number); font-size: 10px; }
.issue-archive-ledger > footer .btn { min-height: 36px; display: inline-flex; align-items: center; gap: 6px; }
.issue-archive-empty { min-height: 260px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--text3); }
.issue-archive-empty i { color: var(--primary); font-size: 28px; }
.issue-archive-empty b { color: var(--text); font-size: 14px; }
.issue-archive-empty span { font-size: 11px; }
.project-issue-open { max-width: 420px; padding: 0; border: 0; background: transparent; color: var(--text); text-align: left; }
.project-issue-open b,
.project-issue-open small { display: block; }
.project-issue-open b { font-size: 13px; }
.project-issue-open small { margin-top: 4px; color: var(--text3); font-size: 10px; }
.project-issue-open:hover b { color: var(--primary); }
.project-event-toolbar { min-height: 54px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.project-event-toolbar .btn { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; }
.project-event-issue-entry { border-color: #ffb5bd; color: var(--danger); }
.project-event-issue-entry:hover { border-color: var(--danger); background: #fff7f8; }
.project-event-timeline { padding-top: 10px; }
.project-event-timeline .tl-item { padding-left: 28px; padding-bottom: 18px; }
.project-event-timeline .tl-item::before { left: 7px; width: 1px; background: var(--border-strong); }
.project-event-timeline .tl-dot { left: 1px; width: 14px; height: 14px; border-width: 3px; }
.project-event-issue {
  overflow: hidden;
  margin-top: 0;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--danger);
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.project-event-issue:hover { border-color: #9ca9bf; border-left-color: var(--danger); background: #fcfdff; }
.project-event-issue:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.project-event-issue-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid var(--border); }
.project-event-issue-head > div { min-width: 0; display: flex; align-items: center; gap: 9px; }
.project-event-issue-head b { color: var(--text2); font-family: var(--font-number); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; }
.project-event-issue-head small { overflow: hidden; color: var(--text3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.project-event-issue-status { flex: 0 0 auto; padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text2); font-size: 10px; font-weight: 700; }
.project-event-issue-status.orange { border-color: #ffccc2; background: #fff7f5; color: #c4320a; }
.project-event-issue-status.blue { border-color: #b9c7ff; background: var(--primary-soft); color: var(--primary); }
.project-event-issue-status.green { border-color: #abefc6; background: #ecfdf3; color: #067647; }
.project-event-issue-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, .42fr); gap: 22px; padding: 15px 16px; }
.project-event-issue-copy { min-width: 0; }
.project-event-issue-copy h4 { margin: 0; color: var(--text); font-size: 15px; font-weight: 750; letter-spacing: -.018em; }
.project-event-issue-copy p { display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: var(--text2); font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.project-event-issue-main dl { min-width: 0; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 10px; margin: 0; padding-left: 18px; border-left: 1px solid var(--border); }
.project-event-issue-main dl > div { display: contents; }
.project-event-issue-main dt { color: var(--text3); font-size: 10px; }
.project-event-issue-main dd { overflow: hidden; margin: 0; color: var(--text); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.project-event-issue-files { padding: 12px 15px; border-top: 1px solid var(--border); background: #fafbfe; }
.project-event-issue-files > span,
.project-issue-table-files > span { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text3); font-size: 10px; font-weight: 700; }
.project-event-issue .project-event-issue-files .issue-attachment-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px; }
.project-event-issue-files .issue-attachment-item { background: #fff; }
.project-event-issue-files.legacy .thumb-row { margin-top: 0; }
.project-event-issue > footer { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 14px; border-top: 1px solid var(--border); }
.project-event-issue > footer > span { color: var(--text3); font-family: var(--font-number); font-size: 9px; font-variant-numeric: tabular-nums; }
.project-event-issue > footer button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 0; border: 0; background: transparent; color: var(--primary); font-size: 10px; font-weight: 700; }
.project-issue-table-files { max-width: 420px; margin-top: 8px; }
.project-issue-table-files > span { margin-bottom: 5px; }
.project-issue-table-files .issue-attachment-list { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.project-issue-table-files .issue-attachment-item { min-height: 38px; }
.issue-detail-head-actions { display: flex; align-items: center; gap: 8px; }
.issue-detail-delete { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--text2); font-size: 10px; }
.issue-detail-delete:hover { border-color: var(--danger); color: var(--danger); }
.issue-legacy-notice { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border-left: 2px solid var(--primary); background: #f7f7f8; color: var(--text2); font-size: 10px; line-height: 1.55; }
.issue-legacy-notice i { flex: 0 0 auto; color: var(--primary); font-size: 16px; }
.report-attachment-preview { margin-top: 9px; }
.report-attachment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 7px; }
.report-attachment-item { min-width: 0; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
.report-attachment-item > a { min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px 10px; color: var(--text); text-decoration: none; }
.report-attachment-item > a > i { color: var(--primary); font-size: 20px; }
.report-attachment-item > a span,
.report-attachment-item > a b,
.report-attachment-item > a small { min-width: 0; display: block; }
.report-attachment-item > a b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.report-attachment-item > a small { margin-top: 3px; color: var(--text3); font-size: 9px; }
.report-attachment-item > button { width: 38px; align-self: stretch; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--text3); }
.report-attachment-item > button:hover { color: var(--danger); }
.report-attachment-empty { min-height: 48px; display: flex; align-items: center; padding: 0 12px; border: 1px dashed var(--border-strong); color: var(--text3); font-size: 10px; }

/* Keep the planned-task sheet wider than the compact feedback sheet. */
.feedback-drawer.pt-detail-drawer { width: min(620px, 100vw); }
.feedback-drawer.pt-detail-drawer > header { min-height: 104px; }
.feedback-drawer.pt-detail-drawer > footer { min-height: 66px; justify-content: flex-end; }

@media (max-width: 768px) {
  .ops-todo-carousel { min-height: 348px; }
  .ops-todo-pages { min-height: 304px; }
  .ops-todo-controls { min-height: 44px; grid-template-columns: 44px minmax(0, 1fr) auto 44px; padding-top: 0; }
  .ops-todo-controls > button { width: 44px; height: 44px; }
  .pt-update-fields { grid-template-columns: 1fr; }
}