:root {
  --app-bg: #f5f7f2;
  --app-paper: #ffffff;
  --app-ink: #17201d;
  --app-muted: #61706a;
  --app-line: #dbe3dc;
  --app-accent: #176858;
  --app-good: #18724f;
  --app-warn: #9a6515;
  --app-bad: #a43b32;
}

* {
  box-sizing: border-box;
}

body.customer-app {
  margin: 0;
  min-height: 100vh;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  padding: 22px;
  border-right: 1px solid var(--app-line);
  background: #fbfcf7;
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-weight: 850;
  text-decoration: none;
}

.app-brand img {
  width: 34px;
  height: 34px;
}

.app-sidebar nav {
  display: grid;
  gap: 8px;
  margin-top: 34px;
}

.app-sidebar nav a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--app-muted);
  font-weight: 750;
  text-decoration: none;
}

.app-sidebar nav a:hover {
  background: #eef4ed;
  color: var(--app-ink);
}

.sidebar-note {
  margin-top: 34px;
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-paper);
}

.sidebar-note strong,
.sidebar-note span {
  display: block;
}

.sidebar-note span,
.muted-note {
  color: var(--app-muted);
}

.app-main {
  margin-left: 248px;
  padding: 28px clamp(18px, 4vw, 54px) 64px;
}

.app-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: stretch;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--app-accent);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.app-hero h1,
.section-title h2 {
  margin: 0;
  letter-spacing: 0;
}

.app-hero h1 {
  max-width: 920px;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
}

.app-hero p,
.section-title p {
  max-width: 760px;
  color: var(--app-muted);
}

.decision-card,
.app-card,
.deal-card,
.report-card-grid article {
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-paper);
  box-shadow: 0 18px 48px rgba(33, 45, 39, 0.08);
}

.decision-card {
  padding: 20px;
}

.decision-card span,
.decision-card p {
  color: var(--app-muted);
}

.decision-card strong {
  display: block;
  margin: 8px 0;
  font-size: 1.4rem;
}

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

.lesson-grid,
.task-grid,
.glossary-grid,
.artifact-grid,
.report-type-grid,
.metric-explainer-grid,
.proof-table,
.risk-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.education-card {
  grid-column: 1 / -1;
}

.app-card {
  padding: 18px;
}

.app-card h2,
.app-card h3 {
  margin: 0 0 12px;
}

.app-card button,
.form-actions button,
.report-card-grid button,
.app-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
  color: var(--app-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
}

.app-card button:hover,
.form-actions button:hover,
.report-card-grid button:hover,
.app-link-button:hover {
  border-color: var(--app-accent);
  background: #edf5ee;
}

.form-actions button:first-child {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
}

.app-link-button {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
}

.app-link-button.subtle {
  border-color: var(--app-line);
  background: #fff;
  color: var(--app-ink);
}

.danger-zone button {
  border-color: rgba(164, 59, 50, 0.35);
  color: var(--app-bad);
}

.deal-mini {
  padding: 12px 0;
  border-top: 1px solid var(--app-line);
}

.deal-mini:first-of-type {
  border-top: 0;
}

.deal-mini strong,
.deal-mini span {
  display: block;
}

.deal-mini span,
.tight-list,
.app-card p,
.deal-card p,
.report-card-grid span {
  color: var(--app-muted);
}

.deal-mini.danger strong {
  color: var(--app-bad);
}

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

.app-section {
  margin-top: 38px;
}

.section-title {
  margin-bottom: 16px;
}

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

.form-fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.form-fieldset legend {
  padding: 0 8px;
  color: var(--app-ink);
  font-weight: 900;
}

.form-grid label,
.app-card > label,
.form-fieldset label {
  display: grid;
  gap: 6px;
  color: var(--app-muted);
  font-weight: 750;
}

.form-fieldset small {
  color: var(--app-muted);
  font-weight: 500;
}

.form-grid input,
.form-grid select,
.form-grid textarea,
.app-card > label textarea,
.form-fieldset input,
.form-fieldset select,
.form-fieldset textarea {
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 10px;
  color: var(--app-ink);
  font: inherit;
}

.form-grid textarea,
.app-card > label textarea,
.form-fieldset textarea {
  min-height: 112px;
  resize: vertical;
}

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

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.roadmap-progress {
  height: 10px;
  margin: 12px 0 16px;
  overflow: hidden;
  border-radius: 999px;
  background: #e3ebe3;
}

.roadmap-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--app-accent);
}

.roadmap-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap-list li {
  display: grid;
  grid-template-columns: minmax(120px, 0.25fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.roadmap-list li.active {
  border-color: var(--app-accent);
  box-shadow: inset 3px 0 0 var(--app-accent);
}

.roadmap-list li.done strong::after {
  content: " saved";
  color: var(--app-good);
  font-size: 0.78rem;
  font-weight: 850;
}

.roadmap-list span,
.lesson-card span,
.task-grid span,
.glossary-grid span {
  color: var(--app-muted);
}

.warning-card {
  border-color: rgba(154, 101, 21, 0.38);
  background: #fffaf0;
}

.helper-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
}

.helper-grid {
  display: grid;
  gap: 10px;
}

.helper-output {
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.lesson-card,
.task-grid .app-card,
.glossary-grid div,
.metric-explainer-grid article,
.proof-table article,
.risk-list-grid article,
.artifact-grid article {
  min-height: 150px;
}

.lesson-card strong,
.task-grid strong {
  display: block;
  margin-top: 12px;
  color: var(--app-ink);
}

.glossary-drawer {
  margin-top: 16px;
}

.glossary-drawer summary {
  cursor: pointer;
  font-weight: 850;
}

.glossary-grid {
  margin-top: 14px;
}

.glossary-grid div,
.metric-explainer-grid article,
.proof-table article,
.risk-list-grid article,
.artifact-grid article {
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.glossary-grid strong,
.glossary-grid span,
.metric-explainer-grid span,
.metric-explainer-grid strong,
.proof-table strong,
.proof-table span,
.risk-list-grid strong,
.risk-list-grid span {
  display: block;
}

.deal-stage-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}

.deal-stage-tabs span {
  white-space: nowrap;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-paper);
  color: var(--app-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.compact-title {
  margin-top: 22px;
}

.output-note {
  margin-top: 16px;
}

.advanced-details {
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.advanced-details summary {
  cursor: pointer;
  color: var(--app-ink);
  font-weight: 850;
}

.advanced-details .source-fields {
  margin-top: 12px;
}

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr);
  gap: 16px;
}

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

.import-grid button {
  min-height: 44px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
  color: var(--app-ink);
  font: inherit;
  font-weight: 750;
}

.import-grid button:disabled {
  opacity: 0.55;
}

.attestation {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
  font-weight: 700;
}

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

.source-fields label {
  display: grid;
  gap: 6px;
  color: var(--app-muted);
  font-weight: 700;
}

.source-fields input,
.source-fields select,
.source-fields textarea {
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 10px;
  color: var(--app-ink);
  font: inherit;
}

.source-fields textarea {
  min-height: 84px;
  resize: vertical;
}

.source-fields label:nth-child(3) {
  grid-column: 1 / -1;
}

.source-fields.deal-entry-fields label:nth-child(3) {
  grid-column: auto;
}

.source-fields .wide {
  grid-column: 1 / -1;
}

.compliance-copy {
  margin-bottom: 0;
  color: var(--app-muted);
}

.progress-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--app-line);
}

.progress-list span {
  min-width: 74px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf4ed;
  color: var(--app-accent);
  font-size: 0.78rem;
  font-weight: 850;
  text-align: center;
}

.stage-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.stage-row span {
  white-space: nowrap;
  padding: 8px 10px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-paper);
  color: var(--app-muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.deal-card-grid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.deal-card {
  padding: 18px;
}

.deal-card-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.decision {
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 850;
}

.decision.reprice {
  background: var(--app-warn);
}

.decision.worth-call {
  background: var(--app-good);
}

.decision.needs-proof {
  background: #2d5b89;
}

.decision.walk-away {
  background: var(--app-bad);
}

.hidden {
  display: none !important;
}

.analysis-panel {
  margin-top: 16px;
}

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

.analysis-header h2 {
  margin-bottom: 4px;
}

.analysis-header p {
  margin: 0;
}

.analysis-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.analysis-metrics div {
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.analysis-metrics span,
.analysis-metrics strong {
  display: block;
}

.analysis-metrics span {
  color: var(--app-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.analysis-metrics strong {
  margin-top: 6px;
  font-size: 1.25rem;
}

.analysis-explainer {
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #fbfcf7;
}

.analysis-explainer p:last-child {
  margin-bottom: 0;
}

.detail-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.detail-tabs button {
  border-color: var(--app-line);
  background: #f8faf6;
  color: var(--app-muted);
}

.detail-tabs button.active {
  border-color: var(--app-accent);
  background: var(--app-accent);
  color: #fff;
}

.detail-tab-panel {
  display: none;
}

.detail-tab-panel.active {
  display: block;
}

.do-not-panel,
.advisor-panel,
.formula-box,
.draft-box {
  padding: 14px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #fbfcf7;
}

.do-not-panel {
  border-color: rgba(154, 101, 21, 0.38);
  background: #fffaf0;
}

.advisor-panel {
  border-color: rgba(23, 104, 88, 0.28);
}

.formula-box {
  margin-top: 14px;
}

.formula-box summary {
  cursor: pointer;
  font-weight: 850;
}

.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.roadmap-layout,
.deal-room-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.roadmap-topline {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.roadmap-topline p {
  margin: 0;
  color: var(--app-muted);
}

.roadmap-topline strong,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid rgba(23, 104, 88, 0.24);
  border-radius: 999px;
  background: #edf5ee;
  color: var(--app-accent);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.task-list {
  display: grid;
  gap: 12px;
}

.recommended-task-stack,
.custom-task-stack {
  display: grid;
  gap: 10px;
}

.task-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.task-item.recommended {
  border-color: rgba(45, 91, 137, 0.24);
  background: #f3f7fb;
}

.task-item.done {
  opacity: 0.72;
}

.task-item.done strong {
  text-decoration: line-through;
}

.task-item label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.task-item span {
  color: var(--app-muted);
  font-size: 0.88rem;
}

.task-item button {
  width: max-content;
  min-height: 34px;
}

.mini-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.mini-form label {
  display: grid;
  gap: 6px;
  color: var(--app-muted);
  font-weight: 750;
}

.mini-form input,
.mini-form select,
.mini-form textarea {
  width: 100%;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 10px;
  color: var(--app-ink);
  font: inherit;
}

.mini-form textarea {
  min-height: 140px;
  resize: vertical;
}

.stress-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.stress-grid article {
  display: grid;
  gap: 6px;
  min-height: 140px;
  padding: 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #f8faf6;
}

.stress-grid article.stress-bad {
  border-color: rgba(164, 59, 50, 0.32);
  background: #fff4f2;
}

.stress-grid strong,
.stress-grid span {
  display: block;
}

.stress-grid span {
  color: var(--app-muted);
  font-size: 0.88rem;
}

.premium-report-grid {
  margin: 14px 0;
}

.proof-summary-card {
  grid-column: 1 / -1;
}

.compact-proof-table {
  margin-top: 14px;
}

.compact-proof-table article {
  min-height: auto;
}

.compact-proof-table label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.compact-proof-table small {
  color: var(--app-muted);
}

.proof-received {
  border-color: rgba(24, 114, 79, 0.3) !important;
  background: #f1f8f3 !important;
}

.deal-stats,
.score-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.deal-stats span,
.score-line span {
  padding: 7px 9px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: #f8faf6;
  color: var(--app-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

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

.report-card-grid article {
  padding: 16px;
  font-weight: 850;
}

.report-card-grid span {
  display: block;
  margin-top: 8px;
  font-weight: 500;
}

.report-card-grid button {
  width: 100%;
  margin-top: 12px;
}

.report-type-grid {
  margin-top: 16px;
}

.explainer-output {
  min-height: 260px;
}

.explainer-output h3 {
  margin-top: 0;
}

.app-footer {
  margin-top: 42px;
  padding: 18px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: #fbfcf7;
  color: var(--app-muted);
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .app-sidebar {
    position: static;
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--app-line);
  }

  .app-sidebar nav {
    display: flex;
    flex-wrap: wrap;
    margin-top: 18px;
  }

  .sidebar-note {
    margin-top: 18px;
  }

  .app-main {
    margin-left: 0;
  }

  .app-hero,
  .inbox-layout,
  .roadmap-layout,
  .deal-room-layout,
  .today-grid,
  .settings-grid,
  .report-card-grid,
  .lesson-grid,
  .task-grid,
  .glossary-grid,
  .artifact-grid,
  .report-type-grid,
  .metric-explainer-grid,
  .proof-table,
  .risk-list-grid,
  .helper-panel {
    grid-template-columns: 1fr;
  }

  .import-grid,
  .source-fields,
  .form-grid,
  .form-fieldset,
  .analysis-metrics,
  .two-col,
  .stress-grid,
  .roadmap-list li {
    grid-template-columns: 1fr;
  }
}