:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --line: #d9dde3;
  --text: #20242a;
  --muted: #68707c;
  --blue: #0878d7;
  --blue-dark: #075da7;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 260px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.brand { font-weight: 700; font-size: 20px; }
nav { display: flex; flex-direction: column; gap: 6px; }
nav a { color: var(--text); padding: 10px; border-radius: 6px; }
nav a:hover { background: #eef2f6; text-decoration: none; }
.new-plan, .primary, .secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: 6px;
  background: var(--blue);
  color: white;
  font-weight: 700;
  cursor: pointer;
}
.secondary {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}
.secondary.danger {
  border-color: #d77b7b;
  color: #9f2323;
  background: #fff7f7;
}
.new-plan:hover, .primary:hover { background: var(--blue-dark); text-decoration: none; }
.secondary:hover { background: #eef2f6; text-decoration: none; }
.secondary.danger:hover { background: #ffe9e9; }
.disabled-action {
  color: var(--muted);
  background: #f7f8fa;
  cursor: not-allowed;
}
.disabled-action:hover { background: #f7f8fa; }
.context-switch label, .context-switch select { display: block; width: 100%; }
.context-switch label { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.context-switch select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
}
input[type="checkbox"],
input[type="radio"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
button { font: inherit; }
.signed-in { color: var(--muted); font-size: 14px; }
.auth-state {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.auth-state-optional { color: #075da7; }
.auth-state-mandatory { color: #17662a; }
.auth-state-incomplete { color: #7a4b00; }
.main { margin-left: 260px; padding: 34px; }
.page-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: start;
  margin-bottom: 22px;
}
h1 { margin: 0 0 4px; font-size: 28px; }
h2 { margin-top: 28px; font-size: 20px; }
p { color: var(--muted); }
.hint { margin-top: 0; color: var(--muted); font-size: 14px; }
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.data-table.compact th, .data-table.compact td { padding: 7px 9px; font-size: 14px; }
.data-table th { color: var(--muted); font-weight: 600; background: #fbfcfd; }
.data-table tr:last-child td { border-bottom: 0; }
.compact-index-table th,
.compact-index-table td {
  vertical-align: top;
}
.compact-index-table code {
  font-size: 12px;
  overflow-wrap: anywhere;
}
.column-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #344054;
  font-weight: 700;
}
.column-sort-link.active {
  color: var(--blue-dark);
}
.table-filter-row th {
  padding: 5px 6px;
  background: #f3f6f9;
}
.table-filter-row input,
.table-filter-row select {
  min-height: 30px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
}
.bulk-action-row {
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.bulk-action-row select {
  max-width: 300px;
}
.territory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 18px;
}
.territory-card h3 {
  margin: 18px 0 10px;
  font-size: 16px;
}
.territory-member-editor {
  margin-top: 14px;
}
.territory-member-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.inline-action-form {
  display: inline;
}
.header-filter-button {
  width: 100%;
  margin-top: 4px;
}
.muted-truncate {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.plan-match-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
}
.plan-match-badge.has-plan {
  color: #17662a;
  border-color: #8bc99a;
  background: #eefbf1;
}
.plan-match-badge.no-plan {
  color: #7a4b00;
  border-color: #e2b762;
  background: #fff7df;
}
.inline-plan-create-form {
  display: inline;
  margin: 0;
}
button.plan-match-badge {
  cursor: pointer;
  font: inherit;
}
button.plan-match-badge.no-plan:hover,
button.plan-match-badge.no-plan:focus {
  border-color: #b47700;
  background: #fff0bd;
}
.pill, .stage, .status-badge {
  display: inline-block;
  border: 1px solid #cfd6e0;
  color: #344054;
  background: #f7f8fa;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 13px;
}
.status-draft, .status-unknown {
  border-color: #cfd6e0;
  color: #344054;
  background: #f7f8fa;
}
.status-submitted {
  border-color: #95c7f4;
  color: #075da7;
  background: #eef7ff;
}
.status-re-review {
  border-color: #b9a8f5;
  color: #4d36a6;
  background: #f4f0ff;
}
.status-revising {
  border-color: #e2b762;
  color: #7a4b00;
  background: #fff7df;
}
.status-revise-resubmit {
  border-color: #f0a45d;
  color: #7a3d00;
  background: #fff3e7;
}
.status-on-hold {
  border-color: #d7c86c;
  color: #665700;
  background: #fff9cf;
}
.status-delayed {
  border-color: #7bcfd7;
  color: #00656f;
  background: #e8fbfd;
}
.status-accepted {
  border-color: #8bc99a;
  color: #17662a;
  background: #eefbf1;
}
.status-denied {
  border-color: #e39191;
  color: #9b1c28;
  background: #fff0f0;
}
.status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  margin-right: 5px;
  vertical-align: 1px;
  border-width: 1px;
  border-style: solid;
}
.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 28px;
}
.summary-strip div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.summary-strip span { display: block; color: var(--muted); font-size: 12px; }
.summary-strip strong { font-size: 22px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.form-card, .edit-form, .workflow-panel, .line-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.auth-card {
  display: grid;
  gap: 16px;
}
.auth-local-form p { margin: 0 0 12px; }
.microsoft-signin {
  width: 100%;
  background: #2f2f2f;
}
.microsoft-signin:hover { background: #111; }
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}
.auth-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.resolution-panel {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}
.resolution-panel h2 { margin-top: 0; }
.resolution-options {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.resolution-options legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.affected-components-table { margin-top: 12px; }
.danger-zone {
  margin-top: 16px;
  border-color: #f0b2b2;
}
.form-stack {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}
.form-row {
  display: grid;
  gap: 5px;
}
.form-row label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.field-error, .field-errors {
  color: #b52232;
  font-size: 13px;
}
.compact-create-card { margin-bottom: 18px; }
.compact-create-card h2 { margin: 0 0 12px; }
.inline-create-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr) auto;
  gap: 12px;
  align-items: end;
}
.compact-inline-form {
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  margin-top: 12px;
}
.inline-create-form textarea {
  min-height: 40px;
  height: 40px;
}
.reference-section {
  margin-bottom: 16px;
}
.reference-section h2,
.reference-section h3 {
  margin: 0 0 4px;
}
.reference-card {
  --section-accent: #0878d7;
  --section-tint: #eef7ff;
  --section-tint-strong: #d9ecff;
  padding: 0;
  border-color: color-mix(in srgb, var(--section-accent) 32%, #cbd7e6);
  border-left: 4px solid var(--section-accent);
  box-shadow: 0 8px 20px rgba(32, 36, 42, .05);
}
.reference-accent-blue {
  --section-accent: #0878d7;
  --section-tint: #eef7ff;
  --section-tint-strong: #d9ecff;
}
.reference-accent-green {
  --section-accent: #26875a;
  --section-tint: #edf9f3;
  --section-tint-strong: #d8f1e5;
}
.reference-accent-violet {
  --section-accent: #6a55d8;
  --section-tint: #f4f1ff;
  --section-tint-strong: #e4ddff;
}
.reference-accent-amber {
  --section-accent: #b36b00;
  --section-tint: #fff7e8;
  --section-tint-strong: #ffe9bf;
}
.reference-accent-teal {
  --section-accent: #00818a;
  --section-tint: #eafafb;
  --section-tint-strong: #cdf0f3;
}
.reference-accent-slate {
  --section-accent: #526070;
  --section-tint: #f2f5f8;
  --section-tint-strong: #e4eaf0;
}
.reference-card .section-title {
  margin: 0;
  padding: 14px 16px;
  align-items: start;
  border-bottom: 1px solid color-mix(in srgb, var(--section-accent) 18%, #e1e8f0);
  background: linear-gradient(90deg, var(--section-tint-strong) 0%, var(--section-tint) 50%, #ffffff 100%);
}
.reference-card .section-title > div {
  min-width: 0;
}
.reference-card .section-title h2,
.reference-card .section-title h3 {
  color: #1f2937;
}
.reference-card .data-table {
  border: 0;
  border-radius: 0 0 8px 8px;
}
.reference-card .data-table th {
  background: color-mix(in srgb, var(--section-tint) 70%, #ffffff);
  color: #475467;
}
.reference-card .data-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--section-tint) 28%, #ffffff);
}
.reference-card > .detail-grid {
  padding: 16px;
  margin: 0;
}
.card-toolbar {
  padding: 12px 16px 0;
}
.card-toolbar .table-controls {
  margin-bottom: 12px;
}
.form-card-body {
  padding: 16px;
}
.form-card-body p:first-child {
  margin-top: 0;
}
.customer-profile-card {
  margin-bottom: 18px;
}
.export-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}
.export-list-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 20%, #d9dde3);
  border-radius: 8px;
  background: #fff;
}
.export-list-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.export-list-card h3 {
  margin: 0 0 2px;
}
.export-list-card textarea {
  min-height: 68px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
}
.export-picker {
  position: relative;
}
.export-picker summary {
  list-style: none;
}
.export-picker summary::-webkit-details-marker {
  display: none;
}
.export-choice-list {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(100% + 8px);
  display: grid;
  gap: 6px;
  width: 180px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 28, 38, .16);
}
.export-choice-list button {
  justify-content: flex-start;
}
.export-empty-state {
  margin: 16px;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--section-accent) 32%, #d9dde3);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--section-tint) 52%, #fff);
}
.customer-export-modal {
  width: min(720px, 92vw);
}
.export-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 12px;
}
.export-modal-header h2 {
  margin: 0 0 4px;
}
.customer-export-modal textarea {
  min-height: 180px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.45;
}
.compact-action {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.quick-add-panel {
  display: grid;
  justify-items: end;
  width: min(620px, 100%);
  min-width: 0;
}
.quick-add-panel summary {
  list-style: none;
}
.quick-add-panel summary::-webkit-details-marker {
  display: none;
}
.quick-add-panel[open] summary {
  border-color: color-mix(in srgb, var(--section-accent) 45%, #95c7f4);
  background: var(--section-tint);
  color: var(--section-accent);
}
.quick-add-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  width: min(620px, 100%);
  margin-top: 10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--section-accent) 24%, #d5e1ec);
  border-radius: 8px;
  background: #ffffff;
}
.quick-add-form label {
  color: var(--muted);
  font-size: 13px;
}
.territory-change-panel {
  display: inline-grid;
  width: auto;
  margin-top: 4px;
  vertical-align: middle;
}
.territory-change-form {
  grid-template-columns: minmax(180px, 1fr) auto;
  width: min(360px, 90vw);
  align-items: end;
}
.territory-change-form select {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}
.contributor-quick-form {
  grid-template-columns: minmax(180px, 1.35fr) minmax(130px, .8fr) auto auto;
  width: min(640px, 100%);
}
.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  color: var(--text);
  font-weight: 600;
}
.checkbox-field input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}
.compact-checkbox-field {
  min-height: 32px;
  font-size: 13px;
  white-space: nowrap;
}
.contributor-inline-edit-form {
  display: grid;
  grid-template-columns: minmax(110px, 150px) auto auto;
  gap: 6px;
  align-items: center;
  max-width: 330px;
}
.contributor-inline-edit-form select {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}
.contributor-inline-edit-form .compact-action {
  min-height: 32px;
  padding: 5px 9px;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 18px;
  margin: 0 0 18px;
}
.detail-grid dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.detail-grid dd {
  margin: 3px 0 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.code-block {
  white-space: pre-wrap;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}
.inline-row-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  gap: 10px;
  align-items: end;
}
.inline-row-form label {
  color: var(--muted);
  font-size: 13px;
}
.subscription-action-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
}
.subscription-move-panel summary {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
  color: #344054;
  font-weight: 700;
}
.subscription-move-form {
  display: grid;
  gap: 10px;
  min-width: min(760px, 100%);
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}
.move-target-grid, .move-candidate-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}
.move-candidate-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
.subscription-move-form fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.subscription-move-form legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.candidate-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #1f2937;
  font-size: 13px;
}
.candidate-option input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 2px 0 0;
}
.candidate-option small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.candidate-option.locked { color: var(--muted); }
.subscription-revert-form { margin: 0; }
.table-controls {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}
.column-view-picker summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}
.column-view-picker form {
  display: grid;
  gap: 10px;
  width: min(680px, 100%);
  margin-top: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.column-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px 12px;
}
.opportunity-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}
.opportunity-create-form label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.table-control-bar, .saved-view-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 170px 160px 140px auto;
  gap: 8px;
  align-items: center;
}
.saved-view-form { grid-template-columns: minmax(180px, 1fr) auto auto; }
.column-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.column-filter summary {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.column-filter form {
  position: absolute;
  z-index: 20;
  display: grid;
  gap: 8px;
  width: 240px;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(20, 28, 38, .16);
}
.inline-checkbox {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.inline-checkbox input {
  width: auto;
  min-height: 0;
}
.field label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.field .errorlist {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #b52232;
}
.customer-combobox { position: relative; }
.combobox-panel {
  position: absolute;
  z-index: 30;
  inset: calc(100% - 18px) 0 auto 0;
  max-height: 260px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(20, 28, 38, .16);
  padding: 6px;
}
.combobox-option {
  display: block;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 4px;
  padding: 7px 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.combobox-option:hover, .combobox-option:focus { background: #eef2f6; }
.combobox-option.create { color: var(--blue-dark); font-weight: 700; }
.combobox-empty { padding: 8px; color: var(--muted); font-size: 14px; }
.diff-panel {
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.history-panel {
  margin-top: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.history-list {
  display: grid;
  gap: 10px;
}
.history-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 12px;
}
.history-item-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.history-item-header span, .history-meta {
  color: var(--muted);
  font-size: 13px;
}
.history-item p { margin: 6px 0 0; }
.history-item ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.form-grid, .line-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
}
.line-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.identifier-panel {
  margin: 18px 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.identifier-panel h2 { margin-top: 0; }
.identifier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 18px;
}
.new-reference-field { margin-top: 8px; }
.delayed-fields {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.transition-thread {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.transition-thread h3 { margin: 0 0 10px; }
.transition-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
  padding: 10px;
  margin-bottom: 10px;
}
.transition-note-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 6px;
}
.transition-note p { margin: 8px 0 0; }
.delayed-summary {
  border: 1px solid #7bcfd7;
  border-radius: 8px;
  background: #f2fcfd;
  padding: 10px;
  margin: 12px 0;
}
.delayed-summary p { margin: 6px 0 0; }
.line-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.line-title { font-weight: 700; }
.line-field label { display: block; margin-bottom: 4px; font-weight: 600; }
.line-card.has-errors {
  border-color: #e39191;
  box-shadow: 0 0 0 2px rgba(181, 34, 50, .08);
}
.line-card.has-errors .line-title { color: #8e1c2d; }
.line-field.has-errors label { color: #8e1c2d; }
.line-field.has-errors input,
.line-field.has-errors select,
.line-field.has-errors textarea,
.line-field.has-errors .compact-multi-select-button {
  border-color: #c73c4c;
  background: #fff7f7;
}
.line-field.has-errors input:focus,
.line-field.has-errors select:focus,
.line-field.has-errors textarea:focus,
.line-field.has-errors .compact-multi-select-button:focus {
  outline: 2px solid rgba(199, 60, 76, .28);
  outline-offset: 1px;
}
.line-field input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 8px 0;
}
.multi-select-source {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.compact-multi-select { position: relative; }
.compact-multi-select-button {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 36px 8px 10px;
  background: #fff;
  color: var(--text);
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.compact-multi-select-button::after {
  content: "▾";
  position: absolute;
  right: 12px;
  color: var(--muted);
}
.compact-multi-select-panel {
  position: absolute;
  z-index: 20;
  inset: calc(100% + 4px) 0 auto 0;
  max-height: 220px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(20, 28, 38, .16);
  padding: 6px;
}
.compact-multi-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  font-weight: 400;
  cursor: pointer;
}
.compact-multi-select-option:hover { background: #eef2f6; }
.compact-multi-select-option input {
  width: auto;
  min-height: 0;
  margin: 0;
}
.field-help { color: var(--muted); font-size: 13px; }
.submit-gate-summary {
  border: 1px solid #e39191;
  background: #fff4f4;
  color: #8e1c2d;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.submit-gate-summary ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.delete-line-button {
  min-height: 32px;
  padding: 5px 10px;
}
.section-title {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: start;
  margin-top: 20px;
}
.section-title h2 { margin-top: 0; }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
}
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.row-actions form { margin: 0; }
.row-actions .secondary { min-height: 32px; padding: 5px 10px; }
.narrow { max-width: 720px; }
.message {
  margin-bottom: 16px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #eef7ee;
  border: 1px solid #b9dab9;
}
.message.error { background: #fff0f0; border-color: #f0b2b2; }
.message.info { background: #eef7ff; border-color: #95c7f4; }
.upload-progress-card {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #95c7f4;
  border-radius: 8px;
  background: #f1f8ff;
}
.upload-progress-card[hidden] { display: none; }
.upload-progress-card progress,
.import-progress-bar {
  width: 100%;
  height: 16px;
}
.upload-progress-card p {
  margin: 0;
}
.import-progress-card .panel-heading h2 {
  margin-bottom: 4px;
}
.import-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f8fa;
  color: #344054;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.import-status-queued {
  border-color: #cfd6e0;
  background: #f7f8fa;
  color: #344054;
}
.import-status-processing {
  border-color: #95c7f4;
  background: #eef7ff;
  color: #075da7;
}
.import-status-completed {
  border-color: #8bc99a;
  background: #eefbf1;
  color: #17662a;
}
.import-status-failed {
  border-color: #e39191;
  background: #fff0f0;
  color: #9b1c28;
}
.compact-detail-grid {
  margin-top: 14px;
}
.recent-block { border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; }
.recent-block h3 { margin: 0 0 8px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.recent-block a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.workflow-map-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: zoom-in;
  overflow: hidden;
}
.workflow-map-button img { display: block; width: 100%; height: auto; }
.split-form { display: grid; gap: 18px; }
.split-plan-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
}
.split-plan-summary div {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fbfcfd;
}
.split-plan-summary dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.split-plan-summary dd { margin: 2px 0 0; }
.split-line-table input[type="checkbox"] {
  width: auto;
  min-height: 0;
  margin: 0;
}
.split-line-table label {
  font-weight: 700;
  cursor: pointer;
}
.lightbox {
  width: min(1100px, 92vw);
  border: 0;
  border-radius: 8px;
  padding: 18px;
}
.lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.lightbox img { display: block; width: 100%; height: auto; }
.lightbox-close {
  float: right;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.panel h2 { margin-top: 0; }
.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 12px;
}
.panel-heading span {
  color: var(--muted);
  font-size: 13px;
}
.dashboard-filter-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  width: 100%;
  min-width: 0;
}
#consumption-dashboard > .page-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
#consumption-dashboard > .page-header > div:first-child {
  max-width: 760px;
}
#consumption-dashboard > .page-header > div:first-child p {
  max-width: 680px;
}
.dashboard-header-actions {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
}
.data-freshness-note {
  display: grid;
  gap: 2px;
  justify-self: end;
  max-width: none;
  justify-items: end;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}
.data-freshness-note strong {
  color: var(--text);
  font-size: 13px;
}
.dashboard-filter-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.dashboard-filter-form input,
.dashboard-filter-form select {
  min-height: 36px;
  font-weight: 400;
}
.dashboard-filter-form input[readonly] {
  color: var(--muted);
  background: #f7f8fa;
}
.dashboard-filter-form button {
  min-width: 160px;
}
.dashboard-filter-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.metric-card {
  display: grid;
  gap: 4px;
  min-height: 116px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 14px;
}
.metric-card strong {
  font-size: 24px;
  line-height: 1.1;
}
.metric-card span:last-child {
  color: var(--muted);
  font-size: 13px;
}
.metric-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.primary-metric {
  border-color: #95c7f4;
  background: #f1f8ff;
}
.warning-metric {
  border-color: #e2b762;
  background: #fff9eb;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 18px;
  margin-bottom: 18px;
}
.dashboard-grid.three-up {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dashboard-grid.two-up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.panel-title-row h2 {
  margin: 0;
}
.movement-card-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
}
.inline-filter-form {
  margin: 0;
}
.movement-level-select {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.movement-level-select select {
  width: auto;
  min-width: 142px;
  min-height: 36px;
  padding: 6px 32px 6px 10px;
}
.basis-toggle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f8fa;
}
.basis-toggle a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}
.basis-toggle a.active {
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08);
}
.dashboard-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.dashboard-tabs a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 38px;
  padding: 8px 16px;
  margin-right: 2px;
  margin-bottom: -1px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  background: #eef2f6;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-tabs a.active {
  position: relative;
  z-index: 1;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 -1px 3px rgba(16, 24, 40, .05);
}
.stopped-reporting-panel {
  border-color: #e2b762;
  background: #fffdf7;
  margin-bottom: 18px;
}
.stopped-reporting-list {
  display: grid;
  gap: 8px;
}
.stopped-reporting-row {
  display: grid;
  grid-template-columns: minmax(240px, 1.1fr) minmax(180px, .7fr) minmax(220px, .9fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}
.stopped-reporting-row div {
  display: grid;
  gap: 2px;
}
.stopped-reporting-row span {
  color: var(--muted);
  font-size: 13px;
}
.stopped-reporting-history {
  min-width: 0;
}
.stopped-reporting-history summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 800;
}
.stopped-reporting-history ol {
  display: grid;
  gap: 3px;
  max-height: 150px;
  margin: 6px 0 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.stopped-reporting-history li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.stopped-reporting-history li strong {
  white-space: nowrap;
}
.trend-chart {
  width: 100%;
  height: auto;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(#ffffff, #fbfcfd);
}
.chart-axis {
  stroke: #cfd6e0;
  stroke-width: 1;
}
.chart-value-label,
.chart-date-label {
  fill: #667085;
  font-size: 12px;
  font-weight: 700;
}
.chart-value-label {
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
}
.chart-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-point {
  fill: var(--blue);
  stroke: #ffffff;
  stroke-width: 3;
}
.chart-pace {
  fill: none;
  stroke: #e2b762;
  stroke-width: 3;
  stroke-dasharray: 8 8;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}
.legend-line {
  display: inline-block;
  width: 24px;
  height: 4px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 999px;
}
.legend-line.actual { background: var(--blue); }
.legend-line.pace { background: #e2b762; }
.waterfall {
  display: grid;
  gap: 10px;
}
.waterfall-row {
  display: grid;
  grid-template-columns: 110px minmax(120px, 1fr) 100px;
  gap: 10px;
  align-items: center;
  font-size: 14px;
}
.waterfall-track {
  min-height: 14px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}
.waterfall-bar {
  display: block;
  min-height: 14px;
  border-radius: 999px;
}
.waterfall-bar.positive { background: #4b9f63; }
.waterfall-bar.negative { background: #c73c4c; }
.waterfall-bar.neutral { background: #9aa3af; }
.waterfall-bar.total { background: var(--blue); }
.movement-table td { vertical-align: top; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sort-header {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.sort-header.active {
  color: var(--blue);
}
.movement-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.movement-up, .movement-new {
  color: #17662a;
  border-color: #8bc99a;
  background: #eefbf1;
}
.movement-down, .movement-missing {
  color: #8e1c2d;
  border-color: #e39191;
  background: #fff4f4;
}
.movement-flat {
  color: #344054;
  border-color: #cfd6e0;
  background: #f7f8fa;
}
.drilldown-expander-header {
  width: 38px;
}
.drilldown-record-row > td {
  padding: 0;
}
.drilldown-weekly-details summary::-webkit-details-marker {
  display: none;
}
.drilldown-weekly-details summary::marker {
  content: "";
}
.drilldown-record-summary {
  display: grid;
  grid-template-columns: 34px minmax(190px, 1.35fr) minmax(90px, .65fr) minmax(90px, .65fr) minmax(90px, .65fr) minmax(90px, .65fr) minmax(100px, .7fr) minmax(130px, .9fr) minmax(120px, .75fr);
  gap: 10px;
  align-items: center;
  min-width: 980px;
  padding: 10px;
  cursor: pointer;
}
.drilldown-record-summary:hover {
  background: #f9fbfd;
}
.drilldown-summary-cell {
  min-width: 0;
}
.drilldown-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  background: #ffffff;
  transform: rotate(-90deg);
  transition: transform .15s ease;
}
.drilldown-weekly-details[open] .drilldown-arrow {
  transform: rotate(0deg);
  color: var(--blue);
  border-color: #95c7f4;
  background: #eef7ff;
}
.drilldown-weekly-panel {
  padding: 10px 10px 14px 44px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
}
.drilldown-weekly-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}
.drilldown-weekly-title strong {
  color: var(--text);
}
.weekly-horizontal-scroll {
  overflow-x: auto;
  padding-bottom: 2px;
}
.weekly-horizontal-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.weekly-horizontal-table th,
.weekly-horizontal-table td {
  min-width: 96px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.weekly-horizontal-table th {
  color: var(--muted);
  background: #f3f6f9;
  font-size: 12px;
}
.weekly-horizontal-table td {
  font-weight: 800;
  background: #ffffff;
}
.dashboard-detail {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.dashboard-detail summary {
  cursor: pointer;
  font-weight: 800;
  margin-bottom: 10px;
}
@media (max-width: 960px) {
  .sidebar { position: static; width: auto; }
  .main { margin-left: 0; padding: 20px; }
  .split, .form-grid, .line-grid, .move-target-grid, .move-candidate-grid, .quick-add-form, .contributor-quick-form, .contributor-inline-edit-form, .export-list-grid, .dashboard-filter-form, .dashboard-header-actions, .metric-grid, .dashboard-grid, .dashboard-grid.three-up, .dashboard-grid.two-up { grid-template-columns: 1fr; }
  #consumption-dashboard > .page-header { grid-template-columns: 1fr; }
  .dashboard-header-actions, .data-freshness-note {
    justify-items: start;
    text-align: left;
  }
  .panel-title-row { align-items: stretch; }
  .panel-title-row {
    flex-direction: column;
  }
  .stopped-reporting-row {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .movement-card-controls {
    justify-content: flex-start;
  }
  .dashboard-tabs {
    overflow-x: auto;
  }
  .reference-card .section-title { display: grid; }
  .quick-add-panel { justify-items: stretch; width: 100%; min-width: 0; }
}