:root {
  color-scheme: light;
  --ink: #13221d;
  --muted: #607069;
  --surface: #ffffff;
  --line: #dfe7e3;
  --soft: #f1f6f3;
  --green: #1e6b4e;
  --green-dark: #154b38;
  --gold: #dfa72c;
  --danger: #a53b35;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 5%, rgba(223, 167, 44, 0.16), transparent 34rem),
    linear-gradient(145deg, #eef4f0 0%, #f8faf9 46%, #e8f0ec 100%);
}

button, input, select, textarea { font: inherit; }

.shell {
  width: min(900px, calc(100% - 32px));
  margin: 0 auto;
  padding: 56px 0 32px;
}

.topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1 { margin: 0; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; letter-spacing: -0.04em; }
.lede { margin: 12px 0 0; color: var(--muted); line-height: 1.55; }

.card {
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 60px rgba(28, 67, 50, 0.12);
}

.action-card { padding: clamp(22px, 5vw, 38px); }
.login-card { max-width: 480px; margin: 9vh auto 0; padding: 36px; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  border-radius: 14px;
  color: white;
  background: var(--green);
  font-weight: 900;
  letter-spacing: -0.04em;
}

.stack { display: grid; gap: 22px; margin-top: 30px; }
label, .field-block > label { display: grid; gap: 8px; font-weight: 750; }
.hint { margin: -2px 0 2px; color: var(--muted); font-size: 0.88rem; }

input, select, textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(30, 107, 78, 0.12); }

button {
  min-height: 50px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: var(--green);
  font-weight: 800;
  cursor: pointer;
}

button:hover { background: var(--green-dark); }
button:disabled { cursor: not-allowed; opacity: 0.5; }
.button-secondary { min-height: 42px; color: var(--green); background: transparent; border: 1px solid var(--line); }
.button-secondary:hover { background: var(--soft); }

.combobox-wrap { position: relative; }
.results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 310px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 35px rgba(24, 52, 40, 0.16);
}

.result-item {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 13px 15px;
  border-radius: 0;
  color: var(--ink);
  background: #fff;
  text-align: left;
  font-weight: 500;
}

.result-item:hover, .result-item:focus { background: var(--soft); }
.result-item strong, .result-item span { display: block; }
.result-item span { margin-top: 3px; color: var(--muted); font-size: 0.84rem; }

.selected-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--soft);
}

.selected-contact strong, .selected-contact span { display: block; }
.selected-contact > div > span { margin-top: 4px; color: var(--muted); font-size: 0.88rem; }
.stage-pill { flex: none; padding: 7px 10px; border-radius: 999px; color: var(--green-dark); background: #dcece4; font-size: 0.78rem; font-weight: 800; }
.pipeline-summary { display: grid; justify-items: end; gap: 6px; }
.amount-label { color: var(--muted); font-size: 0.88rem; font-weight: 750; }
.conditional-fields { display: grid; gap: 18px; }
.form-section { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fbfdfc; }
.form-section h2 { margin: 0 0 16px; font-size: 1.02rem; letter-spacing: -0.01em; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.full { grid-column: 1 / -1; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 8px; font-weight: 750; }
.choice-row, .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice, .check {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  font-weight: 650;
  cursor: pointer;
}
.choice input, .check input { width: 18px; min-height: 18px; margin: 0; accent-color: var(--green); }
.choice:has(input:checked), .check:has(input:checked) { border-color: var(--green); background: #edf7f1; }
.conditional-panel { padding: 16px; border-radius: 12px; background: #fff8e7; }
.warning { padding: 12px 14px; border-left: 4px solid var(--gold); border-radius: 8px; background: #fff8e7; color: #6a4b08; line-height: 1.45; }
.form-message { min-height: 1.4em; margin: 0; color: var(--green); font-weight: 700; }
.form-message.is-error, .error { color: var(--danger); }
.error { min-height: 1.3em; margin: 0; }

footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 4px 0; color: var(--muted); font-size: 0.88rem; }
.link-button { min-height: 0; padding: 0; color: var(--green); background: none; }
.link-button:hover { background: none; text-decoration: underline; }

[hidden] { display: none !important; }

@media (max-width: 560px) {
  .shell { padding-top: 28px; }
  .topbar { align-items: center; }
  .lede { max-width: 32rem; }
  .selected-contact { align-items: flex-start; flex-direction: column; }
  .pipeline-summary { justify-items: start; }
  .field-grid, .check-grid { grid-template-columns: 1fr; }
  .choice-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer { align-items: flex-start; flex-direction: column; }
}