:root {
  --bg: #f4f2ed;
  --panel: #fffdf8;
  --panel-soft: #faf7f1;
  --line: #dfd8cc;
  --text: #242322;
  --muted: #777068;
  --amber: #a57c4d;
  --blue: #566f86;
  --green: #5f8068;
  --teal: #637f7a;
  --indigo: #6b6678;
  --red: #a75650;
  --orange: #b08a55;
  --gray: #a6a098;
  --header: #242322;
  --accent: #a99c8b;
  --shadow: 0 12px 26px rgba(52, 45, 36, 0.08);
  --app-sticky-top: 92px;
  --timeline-plan-head-height: 50px;
  --timeline-brand-head-height: 31px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 28px;
  background: #fffdf8;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 18px rgba(52, 45, 36, 0.06);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 260px; }
.brand-mark {
  width: 2px;
  height: 40px;
  border-radius: 0;
  background: var(--text);
}
h1 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 700;
}
.brand-word {
  font-size: 27px;
  font-weight: 400;
}
.brand-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
}
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }

.actions { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
input, select, textarea, button {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fffdf8;
  color: var(--text);
  font: inherit;
}
input, select { padding: 0 8px; }
textarea {
  min-height: 96px;
  padding: 9px 10px;
  resize: vertical;
  line-height: 1.6;
}
button {
  padding: 0 14px;
  background: var(--header);
  border-color: var(--header);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
button:hover { background: #383532; border-color: #383532; }
button:disabled { cursor: not-allowed; opacity: 0.62; }
button.secondary {
  background: #fffdf8;
  border-color: var(--line);
  color: var(--text);
}
button.secondary:hover { background: var(--panel-soft); border-color: #c9beb0; }
fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
}
fieldset:disabled { opacity: 0.62; }

.wrap { width: 100%; max-width: none; margin: 0; padding: 14px 24px 42px; }
.app-layout {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.app-sidebar {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 14px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.app-content { min-width: 0; }
.sidebar-group {
  display: grid;
  gap: 8px;
}
.sidebar-group + .sidebar-group {
  padding-top: 12px;
  border-top: 1px solid #ebe5dc;
}
.sidebar-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.view-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: #ebe6dc;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.tab-btn {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  background: var(--panel-soft);
  border-color: var(--line);
  color: #4f4942;
  text-align: left;
}
.tab-btn:hover { background: #efe9df; border-color: #c8bdaf; }
.tab-btn.active { background: var(--header); border-color: var(--header); color: #fff; box-shadow: none; }
.view { display: none; }
.view.active { display: block; }
.dashboard-layout {
  display: block;
}
.dashboard-content {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.dashboard-layout > .month-sidebar { display: none; }
.month-sidebar {
  position: sticky;
  top: 86px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.month-sidebar-title {
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 900;
}
.month-nav {
  display: grid;
  gap: 8px;
}
.month-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  background: var(--panel-soft);
  border-color: var(--line);
  color: #4f4942;
  text-align: left;
}
.month-btn:hover {
  background: #efe9df;
  border-color: #c8bdaf;
}
.month-btn.active {
  background: var(--header);
  border-color: var(--header);
  color: #fff;
}
.month-btn strong {
  min-width: 28px;
  padding: 2px 7px;
  color: inherit;
  background: rgba(36, 35, 34, 0.08);
  border-radius: 999px;
  text-align: center;
}
.month-btn.active strong { background: rgba(255, 255, 255, 0.18); }
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  color: var(--muted);
  line-height: 1.7;
}
.summary-line strong { color: var(--text); margin-right: 10px; }
.page-head {
  display: grid;
  gap: 5px;
  margin-bottom: 14px;
}
.page-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
}
.page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.standalone-content { max-width: none; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.kpi {
  min-height: 112px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.kpi-label { color: var(--muted); font-weight: 700; }
.kpi-value { margin-top: 8px; font-size: 28px; font-weight: 900; line-height: 1; }
.kpi-sub { margin-top: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.kpi.amber .kpi-value { color: var(--amber); }
.kpi.blue .kpi-value { color: var(--blue); }
.kpi.green .kpi-value { color: var(--green); }
.kpi.teal .kpi-value { color: var(--teal); }
.kpi.indigo .kpi-value { color: var(--indigo); }
.kpi.red .kpi-value { color: var(--red); }
.kpi.amber { border-top-color: var(--amber); }
.kpi.blue { border-top-color: var(--blue); }
.kpi.green { border-top-color: var(--green); }
.kpi.teal { border-top-color: var(--teal); }
.kpi.indigo { border-top-color: var(--indigo); }
.kpi.red { border-top-color: var(--red); }

.capacity-panel {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  background: #fffaf0;
  border: 1px solid #e3d7c6;
  border-left: 3px solid #c58a33;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.capacity-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}
.capacity-head div {
  display: grid;
  gap: 3px;
}
.capacity-head strong {
  color: var(--text);
  font-size: 16px;
}
.capacity-head span,
.capacity-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.capacity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.capacity-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: #fffdf8;
  border: 1px solid #ddd3c3;
  border-radius: 6px;
}
.capacity-card.danger {
  background: #f6e7e4;
  border-color: #e1bdb8;
}
.capacity-card.warn {
  background: #f6efe1;
  border-color: #e5d1ac;
}
.capacity-card.steady {
  background: #eef4ef;
  border-color: #d4e3d7;
}
.capacity-card.idle {
  background: #edf3f4;
  border-color: #d4e0e3;
}
.capacity-card-head,
.capacity-meta {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 10px;
}
.capacity-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.capacity-card-head strong {
  display: block;
  margin-top: 3px;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
}
.capacity-card-head b {
  min-width: 58px;
  padding: 4px 8px;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
}
.capacity-card.danger .capacity-card-head b { background: var(--red); }
.capacity-card.warn .capacity-card-head b { background: var(--orange); }
.capacity-card.steady .capacity-card-head b { background: var(--green); }
.capacity-card.idle .capacity-card-head b { background: var(--blue); }
.capacity-meta {
  color: var(--muted);
  font-size: 12px;
}
.capacity-bar {
  height: 8px;
  overflow: hidden;
  background: rgba(36, 35, 34, 0.08);
  border-radius: 999px;
}
.capacity-bar span {
  display: block;
  width: var(--pct);
  height: 100%;
  background: #8a9c8c;
  border-radius: inherit;
}
.capacity-card.danger .capacity-bar span { background: #a75650; }
.capacity-card.warn .capacity-bar span { background: #aa7b57; }
.capacity-card.idle .capacity-bar span { background: #6f8396; }
.capacity-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.capacity-stats span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px;
  background: rgba(255, 253, 248, 0.72);
  border: 1px solid rgba(121, 112, 101, 0.14);
  border-radius: 4px;
}
.capacity-stats b {
  color: var(--text);
  font-size: 14px;
}
.capacity-stats em,
.capacity-card small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.capacity-card p {
  min-height: 34px;
  margin: 0;
  color: #4c4741;
  font-size: 13px;
  line-height: 1.45;
}
.capacity-card.danger p { color: #7e332e; font-weight: 900; }
.capacity-card.warn p { color: #7b552c; font-weight: 900; }

.legend {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  color: var(--muted);
  font-size: 12px;
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.sq { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend .sq.done { background: var(--green); }
.legend .sq.progress { background: var(--blue); }
.legend .sq.warn { background: var(--orange); }
.legend .sq.late { background: var(--red); }
.legend .sq.neutral { background: var(--gray); }

.issue-panel {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #f7f1e8;
  border: 1px solid #d7cab9;
  border-radius: 4px;
  color: #665744;
}
.section-title { margin-bottom: 8px; color: var(--text); font-weight: 900; }
.issue-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.issue-pill {
  padding: 5px 9px;
  background: var(--panel);
  border: 1px solid #d7cab9;
  border-radius: 999px;
  font-size: 12px;
}

.room-page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 10px;
}
.room-page-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
}
.room-page-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.room-page-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.room-page-meta strong {
  color: var(--text);
  font-size: 13px;
}
.room-month-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.room-month-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px;
  color: #4f4942;
  background: var(--panel);
  border-color: #d5cabe;
  border-radius: 4px;
}
.room-month-tab:hover {
  color: var(--text);
  background: #f2ede5;
  border-color: #c8bdaf;
}
.room-month-tab.active {
  color: #fff;
  background: var(--header);
  border-color: var(--header);
}
.room-month-tab strong {
  min-width: 22px;
  padding: 1px 7px;
  color: inherit;
  background: rgba(36, 35, 34, 0.08);
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
}
.room-month-tab.active strong {
  background: rgba(255, 255, 255, 0.18);
}
.room-total-panel {
  margin-bottom: 14px;
  padding: 16px 18px 18px;
  background: #eef4f8;
  border: 1px solid #cbd9e4;
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.room-total-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  color: #52616d;
}
.room-total-head div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.room-total-head strong {
  color: var(--text);
  font-size: 16px;
}
.room-total-head span {
  color: #5f6e79;
  font-size: 12px;
}
.room-total-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.room-total-card {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid #dce4ea;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(52, 45, 36, 0.05);
}
.room-total-card span,
.room-total-card em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.room-total-card strong {
  color: var(--text);
  font-size: 24px;
  line-height: 1.1;
}
.room-total-card.main strong { color: #273445; }
.room-total-card.slate strong { color: var(--blue); }
.room-total-card.green strong { color: var(--green); }
.room-total-card.blue strong { color: var(--blue); }
.room-total-card.teal strong { color: var(--teal); }
.room-total-card.red strong { color: var(--red); }
.room-total-card.amber strong { color: var(--orange); }
.room-stage-panel { margin-bottom: 14px; }
.room-stage-panel .room-stage-overview { margin-bottom: 0; }
.room-month-tabs { display: none; }
.dashboard-flow-panel { margin-bottom: 14px; }
.dashboard-flow-panel .room-wave-row {
  grid-template-columns: 132px minmax(0, 1fr) 70px;
}
.dashboard-flow-panel .room-flow-node {
  min-height: 66px;
}

.timeline-board {
  display: grid;
  gap: 10px;
}
.timeline-rule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.timeline-rule span {
  padding: 4px 9px;
  background: #f7f1e7;
  border: 1px solid #e5dacb;
  border-radius: 3px;
}
.timeline-plan {
  overflow: clip;
  background: #fcfaf6;
  border: 1px solid #e2d8ca;
  border-left: 4px solid #bd8758;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(78, 60, 38, 0.06);
}
.timeline-plan-head {
  position: sticky;
  top: var(--app-sticky-top);
  z-index: 8;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f8efd8;
  border-bottom: 1px solid #e1d4c0;
}
.timeline-plan-head strong {
  color: var(--text);
  font-size: 18px;
}
.timeline-plan-head span {
  color: var(--muted);
  font-size: 12px;
}
.timeline-plan-scroll {
  overflow-x: visible;
}
.timeline-plan-table {
  width: 100%;
  min-width: 1320px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: #fcfaf6;
}
.timeline-wave-col { width: 162px; }
.timeline-list-col { width: 76px; }
.timeline-stage-col { width: calc((100% - 238px) / 9); }
.timeline-plan-table th,
.timeline-plan-table td {
  padding: 7px 8px;
  border-right: 1px solid rgba(218, 204, 184, 0.72);
  border-bottom: 1px solid rgba(218, 204, 184, 0.72);
  text-align: left;
  vertical-align: middle;
}
.timeline-plan-table th:nth-child(n+3),
.timeline-plan-table td:nth-child(n+3) {
  text-align: center;
}
.timeline-plan-table thead tr:last-child th {
  text-align: center;
}
.timeline-plan-table th.timeline-stage-head {
  text-align: center !important;
}
.timeline-plan-table th.timeline-stage-head.material-head {
  color: #9a8f83;
  background: #faf7f1;
}
.timeline-plan-table th.timeline-stage-head.owner-head {
  color: #a0473f;
  background: #fff2dc;
}
.timeline-plan-table th.timeline-stage-head.owner-head small {
  color: #a0473f;
}
.timeline-plan-table th.timeline-stage-head.review-head {
  color: #7c5f54;
}
.timeline-plan-table th.timeline-stage-head small {
  display: block;
  margin-top: 2px;
  color: #8d8174;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}
.timeline-plan-table th {
  position: sticky;
  color: #5b5147;
  background: #f9f4eb;
  font-size: 12px;
  font-weight: 900;
}
.timeline-plan-table thead tr:first-child th {
  top: calc(var(--app-sticky-top) + var(--timeline-plan-head-height));
  z-index: 7;
}
.timeline-plan-table thead tr:nth-child(2) th {
  top: calc(var(--app-sticky-top) + var(--timeline-plan-head-height) + var(--timeline-brand-head-height));
  z-index: 6;
}
.timeline-plan-table thead th[rowspan] {
  top: calc(var(--app-sticky-top) + var(--timeline-plan-head-height));
  z-index: 8;
}
.timeline-brand-row th {
  height: 31px;
  padding: 5px 10px;
  border-bottom: 3px solid #9a755b;
  text-align: center;
}
.timeline-brand-row th:first-child,
.timeline-brand-row th:nth-child(2) {
  border-bottom-width: 1px;
}
.timeline-brand-row b {
  margin-left: 7px;
  color: #806f62;
  font-weight: 400;
}
.timeline-plan-table th:first-child,
.timeline-plan-table td:first-child {
  width: 162px;
}
.timeline-plan-table th:nth-child(2),
.timeline-plan-table td:nth-child(2) {
  width: 76px;
  text-align: center;
}
.timeline-plan-table td:nth-child(2) {
  background: #f5edcf;
}
.timeline-plan-table tr:last-child td {
  border-bottom: 0;
}
.timeline-plan-table th:last-child,
.timeline-plan-table td:last-child {
  border-right: 0;
}
.timeline-plan-table tbody tr { height: 64px; }
.timeline-wave-cell,
.timeline-list-cell {
  display: table-cell;
}
.timeline-wave-cell strong,
.timeline-list-cell strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 14px;
}
.timeline-wave-title {
  display: grid;
  gap: 3px;
  margin-bottom: 3px;
}
.timeline-wave-main {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.timeline-wave-title strong {
  margin-bottom: 0;
  white-space: nowrap;
}
.timeline-wave-main em {
  max-width: 54px;
  overflow: hidden;
  padding: 1px 5px;
  color: #9b5200;
  background: #fff4dc;
  border: 1px solid #e9c37a;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-wave-cell span,
.timeline-list-cell span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.timeline-owner-tags {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.timeline-owner-tags em {
  width: fit-content;
  max-width: 48px;
  overflow: hidden;
  padding: 1px 5px;
  color: #9b5200;
  background: #fff4dc;
  border: 1px solid #e9c37a;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.timeline-list-cell strong {
  color: #ad5f00;
  font-size: 14px;
}
.plan-cell {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 6px 7px;
  background: rgba(255, 252, 246, 0.76);
  border: 1px solid rgba(218, 204, 184, 0.42);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(82, 61, 40, 0.03);
}
.plan-cell.done,
.plan-cell.late,
.plan-cell.warn,
.plan-cell.progress,
.plan-cell.future,
.plan-cell.neutral {
  background: rgba(255, 252, 246, 0.76);
}
.plan-date {
  color: #3f3933;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
}
.plan-date i {
  display: none;
}
.plan-progress-row {
  display: grid;
  grid-template-columns: auto minmax(36px, 1fr);
  gap: 5px;
  align-items: center;
  min-height: 12px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.plan-progress-row strong {
  color: #5b7464;
  font-size: 11px;
  font-weight: 900;
}
.plan-cell.late .plan-progress-row strong,
.plan-cell.warn .plan-progress-row strong {
  color: #8c5b56;
}
.plan-progress {
  height: 6px;
  overflow: hidden;
  background: #ebe5dc;
  border-radius: 999px;
}
.plan-progress span {
  display: block;
  height: 100%;
  background: #728b76;
  border-radius: inherit;
}
.plan-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  line-height: 1.15;
}
.plan-meta em,
.plan-cell b {
  color: #766d62;
  font-size: 10px;
  font-style: normal;
}
.plan-cell b {
  color: #875a54;
  font-weight: 800;
}
.timeline-plan-table td.plan-td.due-hot {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.warn.due-hot {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.late.due-hot.due-strong {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.due-hot .plan-progress {
  background: #e9dfdb;
}
.timeline-plan-table td.plan-td.late:not(.due-hot),
.timeline-plan-table td.plan-td.warn:not(.due-hot) {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.done {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.material {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.progress,
.timeline-plan-table td.plan-td.future {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.neutral {
  background: #fcfaf6;
}
.timeline-plan-table td.plan-td.late,
.timeline-plan-table td.plan-td.warn,
.timeline-plan-table td.plan-td.material.late,
.timeline-plan-table td.plan-td.material.warn,
.timeline-plan-table td.plan-td.due-hot,
.timeline-plan-table td.plan-td.warn.due-hot,
.timeline-plan-table td.plan-td.late.due-hot.due-strong,
.timeline-plan-table td.plan-td.late:not(.due-hot),
.timeline-plan-table td.plan-td.warn:not(.due-hot) {
  background: #fbf8f2;
}
.timeline-plan-table td.plan-td.progress .plan-date,
.timeline-plan-table td.plan-td.future .plan-date,
.timeline-plan-table td.plan-td.neutral .plan-date {
  color: #514941;
}
.timeline-plan-table td.plan-td.progress .plan-meta em,
.timeline-plan-table td.plan-td.future .plan-meta em,
.timeline-plan-table td.plan-td.neutral .plan-meta em {
  color: #635b52;
}
.timeline-plan-table td.plan-td.progress .plan-cell b,
.timeline-plan-table td.plan-td.future .plan-cell b {
  color: #49657c;
}
.timeline-plan-table td.plan-td.due-today {
  position: relative;
  background: #fffaf0;
  box-shadow: inset 0 0 0 1px #bd8758;
}
.timeline-plan-table td.plan-td.due-today .plan-date {
  color: #8a4c00;
}
.timeline-plan-table td.plan-td.due-today .plan-progress-row {
  background: transparent;
}
.timeline-plan-table td.plan-td.material,
.timeline-plan-table td.plan-td.material.due-hot,
.timeline-plan-table td.plan-td.material.warn.due-hot,
.timeline-plan-table td.plan-td.material.late.due-hot.due-strong,
.timeline-plan-table td.plan-td.material.due-today {
  background: #fbf8f2;
  box-shadow: inset 0 0 0 1px #eee5d9;
}
.timeline-plan-table td.plan-td.material .plan-cell {
  background: rgba(248, 244, 236, 0.48);
  border-color: rgba(224, 214, 198, 0.34);
  opacity: 0.6;
  box-shadow: none;
}
.timeline-plan-table td.plan-td.material .plan-date,
.timeline-plan-table td.plan-td.material.due-today .plan-date {
  color: #81766b;
}
.timeline-plan-table td.plan-td.material .plan-progress-row,
.timeline-plan-table td.plan-td.material.due-today .plan-progress-row {
  background: transparent;
}
.timeline-plan-table td.plan-td.material .plan-progress span {
  background: #a99f93;
}
.timeline-plan-table td.plan-td.material .plan-progress-row strong,
.timeline-plan-table td.plan-td.material .plan-meta em,
.timeline-plan-table td.plan-td.material .plan-cell b {
  color: #756b61;
}
.plan-cell.done .plan-progress-row {
  background: transparent;
}
.plan-cell.progress .plan-progress-row,
.plan-cell.future .plan-progress-row,
.plan-cell.neutral .plan-progress-row {
  background: transparent;
}
.plan-cell.done .plan-progress span { background: #78917c; }
.plan-cell.late .plan-progress span { background: #a35d57; }
.plan-cell.warn .plan-progress span { background: #aa7b57; }
.plan-cell.progress .plan-progress span,
.plan-cell.future .plan-progress span { background: #788b91; }
.plan-cell.neutral .plan-progress span { background: #d7d5d0; }
.plan-cell.late b { color: #8d4f4a; }
.plan-cell.warn b { color: #8f674f; }

body.timeline-compact {
  --app-sticky-top: 54px;
  --timeline-plan-head-height: 34px;
  --timeline-brand-head-height: 22px;
}
body.timeline-compact .topbar {
  gap: 14px;
  padding: 7px 24px;
}
body.timeline-compact .brand {
  min-width: 250px;
}
body.timeline-compact .brand-mark {
  height: 34px;
}
body.timeline-compact .brand-word {
  font-size: 25px;
}
body.timeline-compact h1 {
  gap: 10px;
  font-size: 18px;
}
body.timeline-compact .brand p {
  display: none;
}
body.timeline-compact .actions {
  gap: 8px;
}
body.timeline-compact .actions label {
  gap: 2px;
  font-size: 11px;
}
body.timeline-compact .topbar input,
body.timeline-compact .topbar button {
  height: 30px;
}
body.timeline-compact .wrap {
  padding: 8px 16px 28px;
}
body.timeline-compact .app-layout {
  grid-template-columns: 164px minmax(0, 1fr);
  gap: 12px;
}
body.timeline-compact .app-sidebar {
  top: 58px;
  gap: 10px;
  padding: 10px;
}
body.timeline-compact .sidebar-group {
  gap: 6px;
}
body.timeline-compact .sidebar-group + .sidebar-group {
  padding-top: 9px;
}
body.timeline-compact .sidebar-title {
  font-size: 11px;
}
body.timeline-compact .tab-btn,
body.timeline-compact .month-nav button {
  min-height: 29px;
  padding: 0 10px;
  font-size: 12px;
}
body.timeline-compact #timelineView > .section-head {
  display: none;
}
body.timeline-compact .timeline-board {
  gap: 8px;
}
body.timeline-compact .timeline-plan {
  border-left-width: 3px;
}
body.timeline-compact .timeline-plan-head {
  padding: 7px 12px;
}
body.timeline-compact .timeline-plan-head strong {
  font-size: 16px;
}
body.timeline-compact .timeline-plan-head span {
  font-size: 11px;
}
body.timeline-compact .timeline-plan-table {
  min-width: 1160px;
}
body.timeline-compact .timeline-wave-col,
body.timeline-compact .timeline-plan-table th:first-child,
body.timeline-compact .timeline-plan-table td:first-child {
  width: 174px;
}
body.timeline-compact .timeline-list-col,
body.timeline-compact .timeline-plan-table th:nth-child(2),
body.timeline-compact .timeline-plan-table td:nth-child(2) {
  width: 58px;
}
body.timeline-compact .timeline-stage-col {
  width: calc((100% - 232px - 304px) / 5);
}
body.timeline-compact .timeline-material-col {
  width: 76px;
}
body.timeline-compact .timeline-plan-table th,
body.timeline-compact .timeline-plan-table td {
  padding: 2px 4px;
}
body.timeline-compact .timeline-plan-table th {
  font-size: 11px;
}
body.timeline-compact .timeline-brand-row th {
  height: 22px;
  padding: 2px 8px;
  border-bottom-width: 2px;
}
body.timeline-compact .timeline-brand-row b {
  margin-left: 5px;
}
body.timeline-compact .timeline-plan-table th.timeline-stage-head small {
  margin-top: 0;
  font-size: 9px;
}
body.timeline-compact .timeline-plan-table tbody tr {
  height: 50px;
}
body.timeline-compact .timeline-wave-cell strong,
body.timeline-compact .timeline-list-cell strong {
  margin-bottom: 1px;
  font-size: 12px;
}
body.timeline-compact .timeline-wave-title {
  gap: 1px;
  margin-bottom: 1px;
}
body.timeline-compact .timeline-wave-main {
  gap: 4px;
  flex-wrap: nowrap;
}
body.timeline-compact .timeline-wave-main strong {
  flex: 0 0 auto;
}
body.timeline-compact .timeline-wave-main em {
  max-width: 50px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1.25;
}
body.timeline-compact .timeline-owner-tags {
  gap: 2px;
}
body.timeline-compact .timeline-owner-tags em {
  max-width: 48px;
  padding: 0 4px;
  font-size: 9px;
  line-height: 1.25;
}
body.timeline-compact .timeline-wave-cell span,
body.timeline-compact .timeline-list-cell span {
  font-size: 9px;
  line-height: 1.16;
}
body.timeline-compact .timeline-list-cell strong {
  font-size: 12px;
}
body.timeline-compact .timeline-list-cell span {
  display: none;
}
body.timeline-compact .plan-cell {
  gap: 2px;
  padding: 2px 3px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.timeline-compact .plan-cell.done,
body.timeline-compact .plan-cell.late,
body.timeline-compact .plan-cell.warn,
body.timeline-compact .plan-cell.progress,
body.timeline-compact .plan-cell.future,
body.timeline-compact .plan-cell.neutral {
  background: transparent;
}
body.timeline-compact .plan-date {
  font-size: 12px;
  line-height: 1;
}
body.timeline-compact .plan-progress-row {
  grid-template-columns: auto minmax(30px, 1fr);
  gap: 3px;
  min-height: 8px;
}
body.timeline-compact .plan-progress-row strong,
body.timeline-compact .plan-meta em,
body.timeline-compact .plan-cell b {
  font-size: 9px;
}
body.timeline-compact .plan-progress {
  height: 4px;
}
body.timeline-compact .plan-meta {
  line-height: 1;
}
body.timeline-compact .plan-cell > b {
  justify-self: end;
  line-height: 1;
  margin-top: -1px;
}
body.timeline-compact .timeline-plan-table td.plan-td.material .plan-cell {
  opacity: 0.52;
}
body.timeline-compact .timeline-plan-table td.plan-td.material {
  padding-left: 3px;
  padding-right: 3px;
}
body.timeline-compact .timeline-plan-table td.plan-td.material .plan-date {
  font-size: 11px;
}
body.timeline-compact .timeline-plan-table td.plan-td.material .plan-progress-row {
  grid-template-columns: 1fr;
}
body.timeline-compact .timeline-plan-table td.plan-td.material .plan-progress-row strong {
  display: none;
}
body.timeline-compact .timeline-plan-table td.plan-td.material .plan-meta {
  justify-content: flex-end;
}
body.timeline-compact .timeline-plan-table td.plan-td.material .plan-meta b {
  display: none;
}
body.timeline-compact .timeline-plan-table td.plan-td.review {
  padding-left: 3px;
  padding-right: 3px;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-date {
  font-size: 11px;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-progress-row {
  grid-template-columns: 1fr;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-progress-row strong {
  display: none;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-meta {
  justify-content: flex-end;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-meta b {
  display: none;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-cell {
  background: rgba(248, 244, 236, 0.48);
  border-color: rgba(224, 214, 198, 0.34);
  opacity: 0.58;
  box-shadow: none;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-progress span {
  background: #a99f93;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-date,
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-progress-row strong,
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-meta em,
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-cell b {
  color: #756b61;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material) .plan-cell {
  background: #fff5cf;
  border: 1px solid #ead49a;
  border-radius: 4px;
}
body.timeline-compact .timeline-plan-table td.plan-td.owner-stage .plan-date,
body.timeline-compact .timeline-plan-table td.plan-td.owner-stage .plan-cell > b,
body.timeline-compact .timeline-plan-table td.plan-td.owner-stage .plan-meta b {
  color: #a0473f;
}
body.timeline-compact .timeline-plan-table td.plan-td.owner-stage .plan-progress-row strong {
  color: #8f4a42;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).done .plan-cell {
  background: #fff7da;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).progress .plan-cell,
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).future .plan-cell {
  background: #fff4ca;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).due-today {
  background: #fff1bf;
  box-shadow: inset 0 0 0 2px #c87913;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).due-today .plan-cell {
  background: #ffe9a3;
  border-color: #c87913;
  box-shadow: 0 0 0 1px rgba(200, 121, 19, 0.18);
}
body.timeline-compact .timeline-plan-table td.plan-td.review.due-today .plan-cell {
  background: rgba(248, 244, 236, 0.68);
  border-color: #c87913;
  opacity: 0.74;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).due-today .plan-date {
  color: #8a3f00;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).due-today .plan-cell > b {
  padding: 1px 4px;
  color: #8a3f00;
  background: #fff7d5;
  border: 1px solid #e1a449;
  border-radius: 999px;
  font-weight: 900;
}
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).late .plan-cell,
body.timeline-compact .timeline-plan-table td.plan-td:not(.material).warn .plan-cell {
  border-color: #e1b686;
}
body.timeline-compact .timeline-plan-table td.plan-td.review .plan-cell {
  background: rgba(248, 244, 236, 0.48);
  border-color: rgba(224, 214, 198, 0.34);
  opacity: 0.58;
  box-shadow: none;
}
body.timeline-compact .timeline-plan-table td.plan-td.review.due-today .plan-cell {
  background: rgba(248, 244, 236, 0.68);
  border-color: #c87913;
  opacity: 0.74;
}

.timeline-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.timeline-wave {
  display: grid;
  align-content: center;
  gap: 5px;
  padding-right: 12px;
  border-right: 1px solid #e7ded2;
}
.timeline-wave strong {
  color: var(--text);
  font-size: 16px;
}
.timeline-wave span,
.timeline-wave em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.timeline-track {
  display: grid;
  grid-template-columns: repeat(6, minmax(90px, 1fr));
  gap: 8px;
}
.timeline-step {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 86px;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid #e4dccf;
  border-radius: 4px;
}
.timeline-step i {
  width: 9px;
  height: 9px;
  background: var(--gray);
  border-radius: 50%;
}
.timeline-step strong {
  color: var(--text);
  font-size: 13px;
}
.timeline-step span,
.timeline-step em,
.timeline-step b {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
}
.timeline-step.done {
  background: #eef5ef;
  border-color: #d7e5da;
}
.timeline-step.progress,
.timeline-step.future {
  background: #eef3f6;
  border-color: #d8e1e8;
}
.timeline-step.warn {
  background: #f6efe1;
  border-color: #e6d7bc;
}
.timeline-step.late {
  background: #f6e7e4;
  border-color: #e2c2bd;
}
.timeline-step.done i { background: var(--green); }
.timeline-step.progress i,
.timeline-step.future i { background: var(--blue); }
.timeline-step.warn i { background: var(--orange); }
.timeline-step.late i { background: var(--red); }

.room-stage-overview {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.room-stage-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.room-stage-title,
.room-stage-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.room-stage-title span { color: var(--muted); font-weight: 900; }
.room-stage-title strong { font-size: 20px; }
.room-stage-meta { color: var(--muted); font-size: 12px; }
.room-board-panel,
.people-board article {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.room-board-panel { margin-bottom: 14px; }
.room-wave-board { display: grid; gap: 8px; }
.room-wave-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 72px;
  gap: 12px;
  align-items: center;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid #e4dccf;
  border-radius: 4px;
}
.room-wave-name { display: grid; gap: 4px; }
.room-wave-name strong { font-size: 15px; }
.room-wave-name span { color: var(--muted); font-size: 12px; }
.room-flow {
  display: grid;
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  gap: 8px;
}
.room-flow-node {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 72px;
  padding: 8px;
  background: #fffdf8;
  border: 1px solid #e3dbcf;
  border-radius: 4px;
}
.room-flow-node.done {
  background: #eef5ef;
  border-color: #d7e5da;
}
.room-flow-node.progress,
.room-flow-node.future,
.room-flow-node.warn {
  background: #f6efe1;
  border-color: #e6d7bc;
}
.room-flow-node.late {
  background: #f6e7e4;
  border-color: #e2c2bd;
}
.room-flow-head,
.room-flow-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.room-flow-node i {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--gray);
  border-radius: 50%;
}
.room-flow-node strong { flex: 1; font-size: 12px; }
.room-flow-head span {
  color: #5f8068;
  font-size: 12px;
  font-weight: 900;
}
.room-flow-count span,
.room-flow-count b,
.room-flow-node em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.room-flow-count b {
  color: #9e5b55;
  font-weight: 900;
}
.room-flow-bar {
  height: 8px;
  overflow: hidden;
  background: #e4ded4;
  border-radius: 999px;
}
.room-flow-bar span {
  display: block;
  width: var(--pct);
  height: 100%;
  background: #8fa390;
  border-radius: inherit;
}
.room-flow-node.late .room-flow-bar span { background: #a75650; }
.room-flow-node.warn .room-flow-bar span { background: #b08a55; }
.room-flow-node.future .room-flow-bar span,
.room-flow-node.progress .room-flow-bar span { background: #6f8396; }
.room-flow-node.neutral .room-flow-bar span { background: var(--gray); }
.room-flow-node.done i { background: var(--green); }
.room-flow-node.progress i,
.room-flow-node.future i { background: var(--blue); }
.room-flow-node.warn i { background: var(--orange); }
.room-flow-node.late i { background: var(--red); }
.room-wave-percent {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 54px;
  border-radius: 4px;
  background: #f3ead6;
  color: #8a682f;
}
.room-wave-percent.high { background: #e4efe5; color: #476b54; }
.room-wave-percent.low { background: #f2dfdc; color: #974c46; }
.room-wave-percent strong { font-size: 18px; }
.room-wave-percent span { font-size: 12px; }
.people-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.room-report-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: -2px 0 14px;
}
.report-filter-btn {
  min-width: 74px;
  height: 34px;
  padding: 0 16px;
  color: #5d554b;
  background: #fbf8f2;
  border: 1px solid #d9cbb8;
  border-radius: 4px;
  font-weight: 900;
  cursor: pointer;
}
.report-filter-btn:hover {
  border-color: #9b7b54;
  color: #2b2620;
}
.report-filter-btn.active {
  color: #fff;
  background: #1f1d1b;
  border-color: #1f1d1b;
}
.room-report-query {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(170px, 230px) minmax(150px, 190px) minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  margin: 0 0 14px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.room-report-query label {
  min-width: 0;
  gap: 6px;
}
.room-report-query label.wide {
  min-width: 240px;
}
.room-report-query input,
.room-report-query select {
  width: 100%;
  height: 34px;
  background: #fbf8f2;
  border-color: #d9cbb8;
}
.room-report-query button {
  height: 34px;
  align-self: end;
}
.report-query-hidden {
  display: none !important;
}
.room-performance-grid,
.room-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.room-performance-grid.single-report-section,
.room-report-grid.single-report-section {
  grid-template-columns: minmax(0, 1fr);
}
.empty-report-section {
  display: none;
}
.report-section-hidden {
  display: none !important;
}
.room-performance-grid article,
.room-report-grid article {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.performance-kpis,
.report-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.performance-kpis span,
.report-kpis span {
  display: grid;
  gap: 3px;
  padding: 10px;
  background: var(--panel-soft);
  border: 1px solid #e4dccf;
  border-radius: 4px;
  color: var(--muted);
  font-size: 12px;
}
.performance-kpis strong,
.report-kpis b {
  color: var(--text);
  font-size: 20px;
}
.report-control-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.report-control-cards span {
  display: grid;
  gap: 3px;
  padding: 10px;
  color: var(--muted);
  background: #f7f0e5;
  border: 1px solid #e4dccf;
  border-radius: 4px;
  font-size: 12px;
}
.report-control-cards b {
  color: #273445;
  font-size: 20px;
}
.report-control-cards em {
  color: #6d665d;
  font-style: normal;
}
.performance-subtitle {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 12px;
}
.mini-people-group {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.mini-people-group b {
  color: var(--text);
}
.mini-people-group span,
.performance-empty {
  padding: 4px 7px;
  color: #5f5850;
  background: #f3eee5;
  border-radius: 999px;
  font-size: 12px;
}
.ranking-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 78px 90px;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  border-bottom: 1px solid #ebe5dc;
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-row i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #fff;
  background: var(--header);
  border-radius: 50%;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}
.ranking-row span,
.ranking-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}
.report-table-wrap {
  overflow-x: auto;
  border: 1px solid #e4dccf;
  border-radius: 4px;
}
.report-section {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.report-section > strong {
  color: var(--text);
  font-size: 13px;
}
.report-table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  background: #fffdf8;
  font-size: 12px;
}
.report-table th,
.report-table td {
  padding: 8px;
  border-bottom: 1px solid #ebe5dc;
  text-align: left;
  white-space: nowrap;
}
.report-table th {
  color: #665f56;
  background: var(--panel-soft);
  font-weight: 900;
}
.missing-attendance-cell {
  min-width: 150px;
  max-width: 260px;
  color: #9a463e;
  line-height: 1.5;
  white-space: normal;
}
.reason-box {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 10px;
  color: #5f5850;
  background: #f8f2e8;
  border: 1px solid #e4d7c2;
  border-radius: 4px;
  line-height: 1.6;
  font-size: 12px;
}
.reason-box p { margin: 0; }
.people-list { display: grid; gap: 8px; }
.person-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 68px;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 8px;
  background: var(--panel-soft);
  border: 1px solid #e4dccf;
  border-radius: 4px;
}
.person-rank {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  background: var(--header);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
}
.person-main { display: grid; gap: 7px; min-width: 0; }
.person-main div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.person-main span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.person-score { display: grid; justify-items: end; gap: 2px; }
.person-score span { color: var(--muted); font-size: 12px; }

.wave-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wave-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.wave-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  color: #fff;
  background: var(--header);
}
.wave-head h2 { margin: 0; font-size: 20px; line-height: 1.2; }
.owner, .listing { margin: 6px 0 0; font-weight: 700; opacity: 0.92; }
.listing { margin: 0; min-width: 124px; text-align: right; line-height: 1.7; }
.node-list { padding: 10px 12px 4px; }
.node-row {
  display: grid;
  grid-template-columns: 116px 82px 82px 108px minmax(140px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid #ebe5dc;
}
.node-row-head {
  min-height: 30px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  background: var(--panel-soft);
  border: 1px solid #e7ded2;
  border-radius: 4px;
  padding: 0 8px;
}
.node-name { font-weight: 800; color: #2f2d2a; }
.node-date, .node-count { color: var(--muted); white-space: nowrap; }
.node-count { font-weight: 900; color: var(--text); }
.node-row.done-row {
  opacity: 0.58;
}
.node-row.done-row:hover {
  opacity: 0.9;
}
.tag {
  padding: 5px 7px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.tag.done { color: #476b54; background: #e4efe5; }
.tag.progress { color: #4d6378; background: #e7edf1; }
.tag.warn { color: #8a682f; background: #f2e8d6; }
.tag.late { color: #974c46; background: #f2dfdc; }
.tag.future { color: #4d6378; background: #e7edf1; }
.tag.neutral { color: #6d675f; background: #ece7df; }
.bar-bg { height: 10px; overflow: hidden; background: #e3ddd4; border-radius: 999px; }
.bar { height: 100%; border-radius: 999px; }
.bar.done { background: var(--green); }
.bar.progress, .bar.future { background: var(--blue); }
.bar.warn { background: var(--orange); }
.bar.late { background: var(--red); }
.bar.neutral { background: var(--gray); }
.node-progress {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 42px;
  gap: 8px;
  align-items: center;
}
.node-progress span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}
.wave-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--muted);
  border-top: 1px solid #ebe5dc;
  font-size: 12px;
}
.wave-foot strong { color: var(--text); }
.attention {
  display: none;
  padding: 10px 14px;
  color: #665744;
  background: #f7f1e8;
  border-top: 1px solid #d7cab9;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-line;
}
.attention.show { display: block; }
.style-progress-board {
  display: grid;
  gap: 16px;
  margin-top: 14px;
}
.style-board-head,
.style-wave-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.style-board-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding: 14px 16px;
}
.style-board-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.style-board-head > span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.style-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 160px)) minmax(220px, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.style-filter-bar label {
  min-width: 0;
}
.style-filter-bar select,
.style-filter-bar input {
  width: 100%;
  background: var(--panel-soft);
}
.style-search-label {
  min-width: 220px;
}
.style-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.style-filter-actions button {
  min-width: 64px;
}
.style-wave-section {
  overflow: hidden;
}
.style-wave-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  background: var(--header);
  color: #fff;
}
.style-wave-head h3 {
  margin: 0;
  font-size: 18px;
}
.style-wave-head p {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}
.style-wave-alert {
  display: grid;
  justify-items: end;
  align-content: center;
  min-width: 118px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 12px;
}
.style-wave-alert strong {
  color: #fff;
  font-size: 14px;
}
.style-wave-alert.late strong { color: #ffd7d1; }
.style-wave-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel-soft);
  border-bottom: 1px solid #ebe5dc;
}
.style-wave-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  align-items: center;
  padding: 8px 10px;
  background: #fffdf8;
  border: 1px solid #e4dccf;
  border-radius: 4px;
  font-size: 12px;
}
.style-wave-chip strong { color: var(--text); }
.style-wave-chip em,
.style-wave-chip i {
  color: var(--muted);
  font-style: normal;
}
.style-wave-chip b {
  color: #516d5a;
  font-size: 14px;
  text-align: right;
}
.style-wave-chip.late {
  background: #f4e5e2;
  border-color: #dec2bd;
}
.style-wave-chip.late b,
.style-wave-chip.late i { color: #9d4f49; }
.style-wave-chip.warn,
.style-wave-chip.progress,
.style-wave-chip.future {
  background: #f7eedc;
  border-color: #e2d0ae;
}
.style-wave-chip.neutral {
  background: #f2eee7;
}
.style-card-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(198px, 226px);
  gap: 10px;
  overflow-x: auto;
  padding: 14px;
  overscroll-behavior-x: contain;
}
.style-progress-card {
  min-width: 0;
  overflow: hidden;
  background: #f4f6f0;
  border: 1px solid #d5decf;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(52, 45, 36, 0.05);
}
.style-progress-card.late {
  background: #f6ebe8;
  border-color: #e1c5c0;
}
.style-progress-card.progress,
.style-progress-card.pending {
  background: #f7f1e4;
  border-color: #e4d6ba;
}
.style-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #eee8dd;
}
.style-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.style-thumb span,
.style-thumb strong {
  position: absolute;
  z-index: 1;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 900;
}
.style-thumb span {
  left: 8px;
  top: 8px;
  padding: 4px 7px;
  color: #fff;
  background: rgba(36, 35, 34, 0.84);
}
.style-thumb strong {
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  color: #9d4f49;
  background: #f4dedb;
}
.style-progress-card.done .style-thumb strong {
  color: #4f7259;
  background: #e0ecdf;
}
.style-card-body {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.style-code-row,
.style-meta-row,
.style-price-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.style-code-row b {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-code-row em {
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.style-card-body p {
  margin: 0;
  min-height: 18px;
  color: var(--text);
  font-weight: 900;
}
.style-meta-row span,
.style-price-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding-top: 2px;
}
.style-stage-pill {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  padding: 4px 6px;
  background: rgba(255, 253, 248, 0.76);
  border: 1px solid #e5ded2;
  border-radius: 4px;
  font-size: 11px;
}
.style-stage-pill b,
.style-stage-pill em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-stage-pill em {
  color: var(--muted);
  font-style: normal;
}
.style-stage-pill.done em { color: #51735b; }
.style-stage-pill.late em { color: #9d4f49; }
.style-flow-mini {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 2px;
  padding: 9px 6px 7px;
  background: rgba(255, 253, 248, 0.64);
  border: 1px solid #e7ded2;
  border-radius: 4px;
}
.style-flow-step {
  display: grid;
  justify-items: center;
  gap: 4px;
  position: relative;
  min-width: 0;
  color: var(--muted);
  background: transparent !important;
  border: 0 !important;
  font-size: 10px;
}
.style-flow-step::before {
  content: "";
  position: absolute;
  top: 6px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: #d9d2c7;
}
.style-flow-step.line-done::before { background: #8a9d8b; }
.style-flow-step:first-child::before { display: none; }
.style-flow-step i {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  background: #fffdf8;
  border: 2px solid #9d958a;
  border-radius: 50%;
}
.style-flow-step.done i {
  background: #6f8c73;
  border-color: #6f8c73;
}
.style-flow-step.late i,
.style-flow-step.warn i,
.style-flow-step.progress i,
.style-flow-step.future i {
  background: #fffdf8;
  border-color: #6b8297;
}
.style-flow-step b {
  max-width: 100%;
  overflow: hidden;
  color: #5f5850;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.style-note {
  display: -webkit-box;
  overflow: hidden;
  color: #665744;
  font-size: 12px;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.state {
  padding: 44px 20px;
  color: var(--muted);
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.state.compact { padding: 22px 16px; box-shadow: none; }

.review-layout {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
#reviewView.active {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
#reviewView .review-layout {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
#reviewView .pending-panel,
#reviewView .review-history {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#reviewView .pending-panel {
  display: grid;
  gap: 10px;
}
#reviewView .review-document-head {
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
#reviewView .pending-review-card {
  grid-template-columns: 130px minmax(0, 1fr);
  background: var(--panel-soft);
}
#reviewView .pending-grid {
  grid-template-columns: repeat(4, minmax(120px, 1fr));
}
.upload-entry {
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.pending-panel,
.batch-upload-form,
.upload-result-panel,
.review-form,
.review-history {
  padding: 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.pending-panel { margin-top: 0; }
.review-form {
  display: grid;
  gap: 12px;
}
.batch-upload-form {
  display: grid;
  gap: 12px;
}
.upload-kind {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}
.batch-fixed-type {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  color: #284b73;
  background: #eef4fb;
  border: 1px solid #c6d6e8;
  border-radius: 6px;
  line-height: 1.5;
}
.batch-fixed-type strong {
  color: #17263b;
}
.batch-fixed-type span {
  color: var(--muted);
  font-size: 12px;
}
.batch-upload-form input,
.batch-upload-form select,
.batch-upload-form textarea {
  width: 100%;
}
.batch-type-hint {
  padding: 9px 10px;
  color: #284b73;
  background: #eef4fb;
  border: 1px solid #c6d6e8;
  border-radius: 6px;
  line-height: 1.6;
}
.batch-preview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.upload-batch-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.upload-batch-card {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.upload-type-tag {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}
.upload-type-tag.review { color: #265f9c; background: #e3eef9; }
.upload-type-tag.modification { color: #1f6f4d; background: #dff2e9; }
.assistant-prompt {
  max-height: 170px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 10px;
  color: #263244;
  background: #f8fafc;
  border: 1px solid #e3e8ef;
  border-radius: 6px;
  font: 12px/1.6 "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  white-space: pre-wrap;
}
.sample-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.sample-search input,
.review-form select,
.review-form textarea,
.review-form label input {
  width: 100%;
}
.match-state {
  padding: 8px 10px;
  color: var(--muted);
  background: #f4f7fa;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.match-state.success { color: #1f6f4d; background: #e1f3ea; border-color: #b9dfcd; }
.match-state.error { color: #a73a3a; background: #f8dddd; border-color: #efb7b7; }
.sample-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sample-info div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.sample-info span {
  color: var(--muted);
  font-size: 12px;
}
.sample-info strong {
  overflow-wrap: anywhere;
  font-size: 13px;
}
.upload-box {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px;
  background: #f8fafc;
  border: 1px dashed #aebccc;
  border-radius: 8px;
}
.upload-box.dragging { background: #eef6f1; border-color: var(--green); }
.upload-box span { color: var(--muted); }
.image-preview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.preview-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eef2f6;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.preview-item button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 29, 47, 0.78);
  line-height: 1;
}
.preview-item span {
  position: absolute;
  left: 5px;
  bottom: 5px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(17, 29, 47, 0.7);
  border-radius: 4px;
  font-size: 11px;
}
.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.form-actions .danger {
  color: #9a3b36;
  border-color: #e3b8b2;
  background: #f8e9e5;
}
.record-actions { margin-top: 10px; }
.pending-review-list {
  display: grid;
  gap: 12px;
}
.pending-review-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pending-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  background: #e7edf3;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.pending-content {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.pending-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.pending-grid div,
.pending-grid label {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 9px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 6px;
}
.pending-grid span,
.pending-wide-field span,
.candidate-list span {
  color: var(--muted);
  font-size: 12px;
}
.pending-grid strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
}
.pending-grid input,
.pending-grid select,
.pending-wide-field textarea {
  width: 100%;
}
.pending-wide-field {
  display: grid;
  gap: 5px;
}
.candidate-list {
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 6px;
}
.candidate-list summary {
  cursor: pointer;
  font-weight: 800;
}
.candidate-list div {
  display: grid;
  grid-template-columns: 140px 90px 90px 1fr;
  gap: 8px;
  padding-top: 8px;
  align-items: center;
}
.review-record-list {
  display: grid;
  gap: 10px;
}
.review-document-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.doc-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.review-document-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.review-document {
  margin-top: 10px;
}
.upload-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.upload-filter-bar button {
  min-height: 34px;
}
.upload-filter-bar label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.upload-filter-bar select {
  min-height: 34px;
  background: #fff;
}
.review-document-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.review-document-summary span {
  padding: 4px 8px;
  color: #284761;
  background: #edf4fb;
  border: 1px solid #d8e7f4;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
}
.review-document-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.review-document-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}
.modification-document-table {
  min-width: 1680px;
  background: var(--panel);
}
.review-document-table th,
.review-document-table td {
  padding: 8px;
  border-bottom: 1px solid #e7edf4;
  border-right: 1px solid #e7edf4;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
.review-document-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #17263b;
  background: #eef6ef;
  font-weight: 900;
  white-space: nowrap;
}
.modification-document-table th {
  color: var(--text);
  background: #efe7dc;
  border-color: var(--line);
  text-align: center;
}
.modification-document-table td {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  vertical-align: middle;
}
.modification-document-table tbody tr:nth-child(even) td {
  background: var(--panel-soft);
}
.modification-document-table td:nth-child(2),
.modification-document-table td:nth-child(3),
.modification-document-table td:nth-child(4),
.modification-document-table td:nth-child(5),
.modification-document-table td:nth-child(6),
.modification-document-table td:nth-child(7),
.modification-document-table td:nth-child(8),
.modification-document-table td:nth-child(9),
.modification-document-table td:nth-child(11),
.modification-document-table td:nth-child(12),
.modification-document-table td:nth-child(13),
.modification-document-table td:nth-child(14),
.modification-document-table td:nth-child(15) {
  text-align: center;
}
.modification-document-table .reason-cell {
  min-width: 260px;
  text-align: left;
  white-space: normal;
}
.review-document-table th:last-child,
.review-document-table td:last-child {
  border-right: 0;
}
.review-document-table tbody tr:last-child td {
  border-bottom: 0;
}
.doc-image-cell img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.modification-image-cell img {
  width: 116px;
  height: 86px;
  margin: 0 auto;
  object-fit: cover;
  object-position: center top;
}
.pending-modification-panel {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}
.mod-pending-list {
  display: grid;
  gap: 10px;
}
.mod-pending-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.mod-pending-card .form-actions {
  grid-column: 2;
}
.mod-pending-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.mod-pending-fields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.mod-pending-fields label.wide {
  grid-column: 1 / -1;
}
.mod-pending-fields input,
.mod-pending-fields textarea {
  width: 100%;
}
.month-document-section {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.month-document-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
}
.muted {
  color: var(--muted);
}
.review-record {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.record-main,
.record-meta {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.record-main h3 {
  margin: 0;
  font-size: 17px;
}
.record-main p {
  margin: 4px 0 0;
  color: var(--muted);
}
.pass-tag {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}
.pass-tag.yes { color: #1f6f4d; background: #dff2e9; }
.pass-tag.no { color: #a73a3a; background: #f8dddd; }
.pass-tag.pending { color: #75611d; background: #f6edc8; }
.record-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.sync-tag {
  padding: 2px 6px;
  border-radius: 5px;
  font-weight: 900;
}
.sync-tag.pending { color: #75611d; background: #f6edc8; }
.sync-tag.synced { color: #1f6f4d; background: #dff2e9; }
.sync-tag.failed { color: #a73a3a; background: #f8dddd; }
.record-store-tag {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  padding: 5px 8px;
  color: #1f6f4d;
  background: #dff2e9;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
}
.record-text {
  margin-top: 8px;
  color: #263244;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.record-images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.record-images img {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.task-auth-note {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: #f4efe6;
  border: 1px solid #ddcfba;
  border-radius: 4px;
  color: #5f574f;
}
.task-auth-note strong {
  flex: 0 0 auto;
  color: var(--text);
}
.task-login-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.task-login-strip strong,
.task-login-strip span {
  display: block;
}
.task-login-strip span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.task-auth-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.task-filter-bar {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) minmax(150px, 190px) auto auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.task-filter-bar label {
  min-width: 0;
  gap: 6px;
}
.task-filter-bar input,
.task-filter-bar select {
  width: 100%;
  height: 34px;
  background: #fbf8f2;
  border-color: #d9cbb8;
}
.task-filter-bar button {
  height: 34px;
}
.task-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.task-summary-card {
  min-height: 94px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.task-summary-card span,
.task-summary-card em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 12px;
}
.task-summary-card strong {
  display: block;
  margin: 6px 0 4px;
  color: #273244;
  font-size: 26px;
  line-height: 1;
}
.task-summary-card.main strong { color: #255d73; }
.task-summary-card.late strong { color: var(--red); }
.task-stage-panel {
  padding: 14px;
  margin-bottom: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.task-stage-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.task-stage-lane {
  display: grid;
  gap: 10px;
  min-height: 230px;
  padding: 12px;
  background: #fbf8f2;
  border: 1px solid #d9cbb8;
  border-top: 4px solid #8a7b67;
  border-radius: 4px;
}
.task-stage-lane.paper { border-top-color: #9b705c; }
.task-stage-lane.sample { border-top-color: #7f8d77; }
.task-stage-lane.review { border-top-color: #9a736f; }
.task-stage-lane.price { border-top-color: #607383; }
.task-stage-lane.clerk { border-top-color: #a68b63; }
.task-stage-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.task-stage-head strong,
.task-stage-head span {
  display: block;
}
.task-stage-head strong {
  font-size: 16px;
}
.task-stage-head span,
.task-stage-meta,
.task-person-row em {
  color: var(--muted);
  font-size: 12px;
}
.task-stage-head b {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 32px;
  color: #fff;
  background: var(--header);
  border-radius: 4px;
  font-size: 18px;
}
.task-stage-meter {
  height: 8px;
  overflow: hidden;
  background: #e8e0d6;
  border-radius: 999px;
}
.task-stage-meter span {
  display: block;
  width: var(--pct);
  height: 100%;
  background: #7f8d77;
  border-radius: inherit;
}
.task-stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.task-stage-meta .late {
  color: var(--red);
  font-weight: 900;
}
.task-stage-people {
  display: grid;
  gap: 7px;
}
.task-person-row {
  padding: 8px;
  background: #fffdf8;
  border: 1px solid #e5dccf;
  border-radius: 4px;
}
.task-person-row strong,
.task-person-row span,
.task-person-row em {
  display: block;
}
.task-person-row span {
  margin-top: 2px;
  color: #273244;
  font-size: 12px;
  font-weight: 900;
}
.task-stage-empty {
  display: grid;
  place-items: center;
  min-height: 78px;
  color: var(--muted);
  background: #fffdf8;
  border: 1px dashed #d8cabb;
  border-radius: 4px;
}
.task-board-panel {
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: var(--shadow);
}
.task-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 12px;
}
.task-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  min-height: 150px;
  padding: 10px;
  background: #fbf8f2;
  border: 1px solid #d9cbb8;
  border-left: 4px solid #7c947f;
  border-radius: 4px;
}
.task-card.late {
  border-left-color: var(--red);
  background: #f7ebe7;
}
.task-image {
  width: 96px;
  height: 128px;
  overflow: hidden;
  background: #eee7dd;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.task-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.task-image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--muted);
  font-size: 12px;
}
.task-card-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.task-card-head,
.task-card-main {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.task-card-head strong {
  display: block;
  font-size: 16px;
}
.task-card-head span,
.task-card-head em,
.task-card-main span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.task-card-head em {
  flex: 0 0 auto;
  height: fit-content;
  padding: 3px 7px;
  color: #5b523f;
  background: #efe7da;
  border-radius: 999px;
}
.task-card-main b {
  color: #111;
  overflow-wrap: anywhere;
}
.task-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}
.task-meta-grid span {
  min-width: 0;
  color: #283548;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.task-meta-grid i {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
}
.task-card p {
  margin: 0;
  color: #514a42;
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1180px) {
  :root {
    --app-sticky-top: 154px;
  }
  .app-layout { grid-template-columns: 1fr; }
  .app-sidebar { position: static; }
  .sidebar-group .month-nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .dashboard-layout { grid-template-columns: 1fr; }
  .month-sidebar { position: static; }
  .month-nav { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .capacity-grid { grid-template-columns: 1fr; }
  .capacity-head { align-items: start; flex-direction: column; }
  .room-total-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-stage-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .style-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-search-label,
  .style-filter-actions { grid-column: 1 / -1; }
  .room-report-query {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-filter-bar button {
    width: 100%;
  }
  .task-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-stage-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .room-report-query label.wide {
    min-width: 0;
    grid-column: 1 / -1;
  }
  .room-wave-row { grid-template-columns: 1fr; }
  .room-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-flow-panel .room-wave-row { grid-template-columns: 1fr; }
  .timeline-row { grid-template-columns: 1fr; }
  .timeline-wave { padding-right: 0; padding-bottom: 10px; border-right: 0; border-bottom: 1px solid #e7ded2; }
  .timeline-track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .people-board,
  .room-performance-grid,
  .room-report-grid { grid-template-columns: 1fr; }
  .wave-grid { grid-template-columns: 1fr; }
  .upload-entry { grid-template-columns: 1fr; }
  #reviewView.active { grid-template-columns: 1fr; }
  .review-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root {
    --app-sticky-top: 218px;
  }
  .topbar, .summary-line, .room-page-head, .room-total-head, .wave-head, .wave-foot { align-items: stretch; flex-direction: column; }
  .actions { justify-content: stretch; }
  .actions label, .actions button { flex: 1 1 120px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capacity-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-page-meta { justify-items: start; }
  .task-login-strip { align-items: stretch; flex-direction: column; }
  .task-auth-actions { justify-content: flex-start; }
  .room-total-grid { grid-template-columns: 1fr; }
  .room-stage-overview,
  .room-flow { grid-template-columns: 1fr; }
  .style-board-head,
  .style-wave-head { flex-direction: column; align-items: stretch; }
  .style-wave-alert { justify-items: start; }
  .style-filter-bar { grid-template-columns: 1fr; }
  .style-search-label,
  .style-filter-actions { grid-column: auto; }
  .style-filter-actions { justify-content: stretch; }
  .style-filter-actions button { flex: 1; }
  .room-report-query {
    grid-template-columns: 1fr;
  }
  .task-filter-bar,
  .task-summary,
  .task-stage-board,
  .task-list {
    grid-template-columns: 1fr;
  }
  .room-report-query label.wide {
    grid-column: auto;
  }
  .room-report-query button {
    width: 100%;
  }
  .performance-kpis,
  .report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-row { grid-template-columns: 28px minmax(0, 1fr); }
  .ranking-row span,
  .ranking-row em { grid-column: 2; text-align: left; }
  .person-row { grid-template-columns: 26px minmax(0, 1fr); }
  .person-score { grid-column: 2; justify-items: start; }
  .node-row { grid-template-columns: 1fr 78px; gap: 6px 10px; padding: 8px 0; }
  .node-row-head { display: none; }
  .node-row .tag, .node-row .node-progress, .node-row .node-count { grid-column: 1 / -1; }
  .node-count { text-align: left; }
  .view-tabs { display: flex; }
  .tab-btn { flex: 1; }
  .app-sidebar .tab-btn { flex: 0 0 auto; }
  .app-sidebar .month-nav { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .month-nav { display: flex; overflow-x: auto; padding-bottom: 2px; }
  .month-btn { flex: 0 0 118px; }
  .timeline-track { grid-template-columns: 1fr; }
  .pending-review-card { grid-template-columns: 1fr; }
  .pending-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .candidate-list div { grid-template-columns: 1fr 72px; }
  .upload-kind { grid-template-columns: 1fr; }
  .sample-search { grid-template-columns: 1fr; }
  .sample-info { grid-template-columns: 1fr; }
  .image-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .record-main { flex-direction: column; }
  .review-document-head { align-items: stretch; flex-direction: column; }
}