:root {
  --bg: #f5efe6;
  --surface: #fffdf9;
  --surface-alt: #fbf5ee;
  --sidebar: #231d1d;
  --sidebar-alt: #3a2d2a;
  --ink: #292424;
  --muted: #776b66;
  --line: #dfd1c2;
  --blue: #9f2d31;
  --blue-bg: #f5d9db;
  --green: #8a6413;
  --green-bg: #f6e8b3;
  --amber: #b27b11;
  --amber-bg: #fbedc8;
  --red: #d5302e;
  --red-bg: #fad9d6;
  --gray: #796c66;
  --gray-bg: #f0e7df;
  --violet: #b44d36;
  --violet-bg: #f5dfd7;
  --shadow: 0 18px 50px rgba(61, 42, 34, 0.10);
  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(245, 196, 67, 0.34), transparent 28%),
    radial-gradient(circle at top right, rgba(213, 48, 46, 0.12), transparent 24%),
    linear-gradient(180deg, #fffbf5 0%, var(--bg) 100%);
  color: var(--ink);
  font-family: "Iowan Old Style", Georgia, serif;
}

.page-shell {
  display: grid;
  grid-template-columns: 330px 1fr;
  align-items: start;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 28px 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-alt) 100%);
  color: #eff4f2;
}

.brand-logo {
  display: block;
  width: min(100%, 250px);
  height: auto;
  margin: 0 0 14px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.16));
}

.brand-kicker,
.eyebrow,
.metric-label,
.meta-label,
.api-label,
.field-tags,
.tag,
.panel-note,
.phase-title {
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-kicker {
  font-size: 12px;
  color: #f1c446;
}

.sidebar h1 {
  margin: 10px 0 12px;
  font-size: 44px;
  line-height: 0.98;
}

.sidebar p {
  color: rgba(239, 244, 242, 0.82);
  line-height: 1.55;
}

.sidebar-nav {
  display: grid;
  gap: 6px;
  margin: 28px 0;
}

.nav-item {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #eff4f2;
  border-radius: 14px;
  padding: 12px 14px;
  text-align: left;
  font: 600 14px/1.2 "Avenir Next", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.nav-item:hover {
  transform: translateX(2px);
  border-color: rgba(255,255,255,0.16);
}

.nav-item-active {
  background: linear-gradient(135deg, #f5c84d 0%, #e6a41f 100%);
  color: #44231d;
  border-color: transparent;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  padding: 0 4px;
  margin-bottom: -4px;
}

.nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 4px 0;
}

.nav-item-sub {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 14px 8px 22px;
  border-color: transparent;
  background: transparent;
  color: rgba(255,255,255,0.55);
  border-radius: 10px;
}

.nav-item-sub:hover {
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

.nav-item-sub.nav-item-active {
  background: rgba(245,200,77,0.18);
  color: #f5c84d;
  border-color: rgba(245,200,77,0.25);
}

.nav-item-ref {
  font-size: 13px;
  font-weight: 500;
  padding: 10px 14px;
  border-color: rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.45);
}

.nav-item-ref:hover {
  color: rgba(255,255,255,0.70);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}

.nav-item-ref.nav-item-active {
  background: rgba(245,200,77,0.12);
  color: #f5c84d;
  border-color: rgba(245,200,77,0.20);
}

[data-nav-section] {
  scroll-margin-top: 24px;
}

.sidebar-card {
  margin-top: 14px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,248,240,0.06);
  border: 1px solid rgba(255,219,173,0.11);
}

.sidebar-card + .sidebar-card {
  margin-top: 14px;
}

.meta-label {
  font-size: 11px;
  color: #f1c446;
}

.meta-value {
  margin-top: 8px;
  font: 700 28px/1 "Avenir Next Condensed", Arial Narrow, sans-serif;
}

.api-control-card {
  display: grid;
  gap: 12px;
}

.api-control-field {
  display: grid;
  gap: 8px;
}

.api-control-field label {
  font: 700 12px/1.2 "Avenir Next", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(239, 244, 242, 0.78);
}

.api-control-field input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: #eff4f2;
  font: 15px/1.4 "Avenir Next", "Segoe UI", Arial, sans-serif;
}

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

.api-control-actions button {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.07);
  color: #eff4f2;
  padding: 10px 11px;
  font: 600 12px/1.2 "Avenir Next", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.api-control-actions button:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}

.api-control-actions button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
}

.api-control-meta,
.api-control-status {
  font-family: "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.api-control-meta {
  color: rgba(239, 244, 242, 0.86);
}

.api-control-status {
  min-height: 40px;
  color: rgba(239, 244, 242, 0.75);
  line-height: 1.4;
}

.api-control-status[data-kind="present"] {
  color: #f7e6b0;
}

.api-control-status[data-kind="missing"] {
  color: #f7c7c1;
}

.api-control-status[data-kind="unavailable"] {
  color: #f7d48a;
}

.api-control-response {
  margin: 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(13, 15, 17, 0.34);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(239, 244, 242, 0.82);
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow: auto;
}

.simple-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.simple-list li {
  margin-bottom: 8px;
}

.main-content {
  display: grid;
  gap: 24px;
  padding: 28px;
}

.hero-panel,
.panel,
.metric-card,
.payload-card,
.phase-card,
.api-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.hero-panel {
  padding: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,0.96) 0%, rgba(255,246,236,0.96) 100%);
}

.hero-panel h2 {
  margin: 6px 0 12px;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1;
}

.hero-copy {
  max-width: 900px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.5;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.metric-card {
  padding: 18px;
}

.metric-label {
  font-size: 11px;
  color: var(--muted);
}

.metric-value,
.mini-metric {
  margin: 8px 0;
  font-family: "Avenir Next Condensed", Arial Narrow, sans-serif;
  line-height: 0.95;
}

.metric-value {
  font-size: 56px;
}

.mini-metric {
  font-size: 44px;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.primary-column {
  display: grid;
  gap: 24px;
  align-content: start;
}

.panel {
  padding: 22px;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.panel-header h3 {
  margin: 4px 0 0;
  font-size: 29px;
}

.panel-note {
  max-width: 340px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.readiness-strip {
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fffefb 0%, #f8f1e6 100%);
}

.readiness-strip-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 8px;
}

.readiness-strip-value {
  margin-top: 4px;
  font-family: "Avenir Next Condensed", Arial Narrow, sans-serif;
  font-size: 34px;
  line-height: 0.95;
}

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

.field-card {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.field-card-wide {
  grid-column: 1 / -1;
}

.field-card label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.field-tags {
  margin-bottom: 10px;
}

.field-card input,
.field-card select,
.field-card textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #c8d4cd;
  border-radius: 12px;
  background: #ffffff;
  color: var(--ink);
  font: 15px/1.4 "Avenir Next", "Segoe UI", Arial, sans-serif;
}

.field-card textarea {
  min-height: 92px;
  resize: vertical;
}

.field-note {
  min-height: 22px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.field-note .status-pill {
  margin-bottom: 8px;
}

.field-note.note-valid {
  color: var(--green);
}

.field-note.note-invalid {
  color: var(--muted);
}

.field-card.is-valid {
  border-color: rgba(138, 100, 19, 0.45);
  box-shadow: 0 0 0 1px rgba(138, 100, 19, 0.10), var(--shadow);
}

.field-card.is-invalid {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.tag,
.status-pill {
  display: inline-block;
  padding: 7px 11px;
  margin: 0 6px 6px 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  max-width: 100%;
  white-space: normal;
}

.tag-user,
.tag-form,
.status-derived {
  background: var(--blue-bg);
  color: var(--blue);
}

.tag-erp {
  background: var(--amber-bg);
  color: var(--amber);
}

.tag-agent {
  background: var(--violet-bg);
  color: var(--violet);
}

.status-present {
  background: var(--green-bg);
  color: var(--green);
}

.status-missing {
  background: var(--red-bg);
  color: var(--red);
}

.status-unavailable {
  background: var(--amber-bg);
  color: var(--amber);
}

.payload-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.payload-card,
.phase-card,
.api-card {
  padding: 16px;
  min-width: 0;
  overflow: hidden;
}

.payload-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  align-items: start;
}

.payload-header h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
  word-break: break-word;
}

.progress-bar {
  height: 10px;
  margin-top: 10px;
  background: #e9eeeb;
  border-radius: 999px;
  overflow: hidden;
}

.progress-large {
  margin-bottom: 14px;
}

.progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d5302e 0%, #f0bf43 100%);
}

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

.dataflow-card {
  padding: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fffdfa 0%, #faf4ec 100%);
  box-shadow: var(--shadow);
}

.dataflow-card p {
  margin: 10px 0 0;
  color: var(--muted);
}

.dataflow-note {
  font-size: 14px;
}

.json-preview {
  margin-top: 18px;
  border-radius: var(--radius-lg);
  background: #f8fbf9;
  border: 1px solid var(--line);
  padding: 16px;
}

.json-preview pre,
code {
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
}

.json-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  line-height: 1.6;
}

.phase-stack {
  display: grid;
  gap: 12px;
}

.check-row,
.phase-card p,
.api-card p {
  color: var(--muted);
}

.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--line);
}

.phase-title,
.api-label {
  font-size: 12px;
  color: var(--ink);
}

.api-card + .api-card {
  margin-top: 12px;
}

@media (max-width: 1260px) {
  .page-shell,
  .content-grid,
  .metrics-grid,
  .payload-grid,
  .dataflow-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    padding-bottom: 8px;
  }

  .main-content {
    padding-top: 0;
  }
}

@media (max-width: 900px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Partidas section header ─────────────────────────────────────────────── */

.partidas-section-header {
  background: linear-gradient(135deg, #fffbf3 0%, #fdf1e0 100%);
  border-color: rgba(210, 160, 60, 0.28);
  padding: 18px 20px;
}

.partidas-section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.partidas-section-title h4 {
  margin: 4px 0 0;
  font-size: 22px;
}

.partidas-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.partidas-count-badge {
  font: 600 12px/1 "Avenir Next", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.06em;
  color: var(--amber);
  background: var(--amber-bg);
  padding: 6px 12px;
  border-radius: 999px;
}

.btn-add-partida {
  padding: 10px 18px;
  border: 1.5px solid var(--amber);
  border-radius: 12px;
  background: var(--amber-bg);
  color: var(--amber);
  font: 700 13px/1 "Avenir Next", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
}

.btn-add-partida:hover {
  background: #f5e19a;
  transform: translateY(-1px);
}

/* ── Partidas container wrapper ─────────────────────────────────────────── */

.partidas-container-wrapper {
  padding: 0;
  border: none;
  background: transparent;
}

.partidas-container {
  display: grid;
  gap: 20px;
}

/* ── Individual partida block ────────────────────────────────────────────── */

.partida-block {
  border: 1.5px solid rgba(159, 45, 49, 0.22);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fffdf9 0%, #fdf6ec 100%);
  overflow: hidden;
}

.partida-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(159, 45, 49, 0.07) 0%, transparent 60%);
  border-bottom: 1px solid rgba(159, 45, 49, 0.12);
}

.partida-block-title {
  font: 700 15px/1 "Avenir Next", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}

.partida-block-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.partida-monto-display {
  font: 700 18px/1 "Avenir Next Condensed", Arial Narrow, sans-serif;
  color: var(--green);
  min-width: 80px;
  text-align: right;
}

.partida-fields {
  padding: 16px;
  border-bottom: 1px solid rgba(159, 45, 49, 0.10);
}

.partida-fields .field-card {
  background: #ffffff;
}

/* ── Items container inside partida ─────────────────────────────────────── */

.items-container {
  display: grid;
  gap: 0;
}

.item-block {
  border-top: 1px solid rgba(159, 45, 49, 0.08);
  padding: 14px 16px 16px;
}

.item-block:first-child {
  border-top: none;
}

.item-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.item-block-title {
  font: 600 12px/1 "Avenir Next", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.items-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.items-fields .field-card {
  background: #ffffff;
  padding: 12px;
}

.items-fields .field-card label {
  font-size: 13px;
}

.items-fields .field-card input,
.items-fields .field-card select {
  padding: 9px 11px;
  font-size: 14px;
}

/* ── Subtotal display (read-only derived value) ─────────────────────────── */

.field-card-subtotal {
  border-color: rgba(138, 100, 19, 0.28);
  background: var(--green-bg) !important;
}

.item-subtotal-display {
  font: 700 22px/1 "Avenir Next Condensed", Arial Narrow, sans-serif;
  color: var(--green);
  margin-top: 8px;
}

.tag-derived {
  background: var(--green-bg);
  color: var(--green);
}

/* ── Partida footer (add item button) ───────────────────────────────────── */

.partida-block-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(159, 45, 49, 0.08);
  background: rgba(255, 255, 255, 0.6);
}

.btn-add-item {
  padding: 8px 16px;
  border: 1.5px dashed rgba(159, 45, 49, 0.35);
  border-radius: 10px;
  background: transparent;
  color: var(--blue);
  font: 600 12px/1 "Avenir Next", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.btn-add-item:hover {
  background: rgba(159, 45, 49, 0.06);
  border-color: var(--blue);
}

/* ── Remove buttons ─────────────────────────────────────────────────────── */

.btn-remove {
  padding: 6px 12px;
  border: 1px solid rgba(213, 48, 46, 0.30);
  border-radius: 8px;
  background: transparent;
  color: var(--red);
  font: 600 11px/1 "Avenir Next", "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: background 140ms ease;
}

.btn-remove:hover {
  background: var(--red-bg);
}

/* ── Wide attribute field inside items grid ─────────────────────────────── */

.items-fields .field-card-wide {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .items-fields {
    grid-template-columns: 1fr;
  }
  .partidas-section-title {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── Section header cards (Phase 3) ─────────────────────────────────────── */

.section-header-card {
  background: var(--surface-raised);
  border-left: 3px solid var(--accent);
  padding: 18px 20px 14px;
  margin-top: 8px;
}

.section-header-card:first-child {
  margin-top: 0;
}

.section-header-inner .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.section-header-inner h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.section-header-inner .panel-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Read-only derived field */
input[readonly] {
  background: var(--surface-raised);
  color: var(--text-muted);
  cursor: default;
  border-color: var(--border-subtle);
}

input[readonly]:focus {
  outline: none;
  border-color: var(--border-subtle);
  box-shadow: none;
}

/* ─── Phase 5: Document Checklist ─────────────────────────────────────────── */

.checklist-wrapper {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checklist-category-block {
  background: var(--surface-alt, #fbf5ee);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.checklist-category-header {
  padding: 10px 16px;
  background: var(--surface-alt, #fbf5ee);
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.checklist-category-count {
  font-weight: 400;
  font-size: 10px;
  opacity: 0.7;
}

.checklist-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}

.checklist-item:last-child {
  border-bottom: none;
}

.checklist-item.item-done {
  background: color-mix(in srgb, var(--green-bg) 40%, transparent);
}

.checklist-item.item-na {
  opacity: 0.5;
}

.checklist-item-label {
  font-size: 13px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.checklist-item-label .tag-required {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--red-bg);
  color: var(--red);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
}

.checklist-item-label .tag-conditional {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: 4px;
  padding: 1px 6px;
  text-transform: uppercase;
}

.checklist-file-ref {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  width: 140px;
  background: white;
}

.checklist-file-ref::placeholder {
  color: var(--muted);
  opacity: 0.6;
}

.checklist-status-select {
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 8px;
  background: white;
  color: var(--ink);
  min-width: 110px;
}

.checklist-status-select.status-pending {
  border-color: var(--line);
}

.checklist-status-select.status-present {
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green);
}

.checklist-status-select.status-na {
  border-color: var(--gray);
  background: var(--gray-bg);
  color: var(--gray);
}

.checklist-empty-state {
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.checklist-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 10px;
}

.checklist-progress-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.checklist-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}

.checklist-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.3s;
}

.checklist-progress-pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  min-width: 32px;
  text-align: right;
}