.home-main {
  gap: 20px;
}

.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.62fr);
  gap: 20px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(109, 76, 255, 0.2);
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(109, 76, 255, 0.18), transparent 30%),
    radial-gradient(circle at 92% 10%, rgba(43, 212, 255, 0.2), transparent 26%),
    linear-gradient(135deg, #ffffff, #f4f7ff);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.home-hero-copy h2 {
  max-width: 680px;
  margin-bottom: 10px;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1;
  letter-spacing: -0.06em;
}

.home-hero-copy p {
  max-width: 690px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.home-command-form {
  max-width: 820px;
}

.home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #eafff5;
  color: #087a5c;
  font-size: 12px;
  font-weight: 950;
}

.home-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
}

.home-task-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.secondary-action {
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: white;
  color: var(--ink);
  font-weight: 950;
}

.home-starter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}

.home-starter-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.home-starter-row button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  color: var(--navy);
  font-size: 12px;
  font-weight: 900;
}

.home-starter-row button:hover {
  border-color: rgba(109, 76, 255, 0.55);
  background: #f4f1ff;
}

.home-ready-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}

.ready-card-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
}

.ready-card-head > span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: #eaf2ff;
  font-size: 22px;
}

.ready-card-head b {
  display: block;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.ready-card-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.ready-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ready-stats article {
  min-height: 72px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7f9ff;
}

.ready-stats b,
.ready-stats span {
  display: block;
}

.ready-stats b {
  color: var(--purple);
  font-size: 24px;
  letter-spacing: -0.04em;
}

.ready-stats span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.next-suggestion {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--navy-2), var(--purple));
  color: white;
}

.next-suggestion span {
  color: #cfd8ff;
  font-size: 12px;
  font-weight: 900;
}

.next-suggestion strong {
  font-size: 14px;
  line-height: 1.35;
}

.home-context-details {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f7f9ff;
  padding: 12px;
}

.home-context-details summary {
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.home-context-details .profile-row {
  margin-top: 10px;
  margin-bottom: 0;
  background: white;
}

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

.quick-group {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 14px;
  min-width: 0;
  min-height: 178px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff, #f7f9ff);
}

.quick-group b,
.quick-group p {
  margin: 0;
}

.quick-group > div:first-child b {
  display: block;
  margin-bottom: 5px;
  font-size: 16px;
}

.quick-group > div:first-child p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.quick-group > div:last-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-width: 0;
}

.quick-group button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: white;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: left;
}

.quick-group button span {
  flex: 0 0 auto;
}

.quick-group button:hover {
  border-color: rgba(109, 76, 255, 0.55);
  background: #f4f1ff;
}

.processing-panel {
  background:
    radial-gradient(circle at 92% 0%, rgba(43, 212, 255, 0.12), transparent 28%),
    white;
}

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

.processing-steps article {
  display: grid;
  gap: 8px;
  min-height: 86px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.processing-steps span {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #dfe8f8;
}

.processing-steps .done span {
  background: var(--green);
}

.processing-steps .active span {
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(255, 157, 46, 0.14);
}

.processing-steps b {
  font-size: 12px;
  line-height: 1.35;
}

.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: 18px;
}

.focus-list,
.approval-list,
.workflow-run-list,
.home-agent-list {
  display: grid;
  gap: 10px;
}

.focus-item,
.approval-item,
.workflow-run-card,
.context-board-grid article,
.home-agent-list article {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  padding: 14px;
}

.focus-item,
.approval-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.focus-item div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 12px;
}

.focus-item span {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: #eaf2ff;
}

.focus-item b,
.approval-item b,
.workflow-run-card b,
.context-board-grid b,
.home-agent-list b {
  font-size: 14px;
}

.focus-item p,
.approval-item p,
.workflow-run-card p,
.context-board-grid p,
.home-agent-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}

.focus-item button,
.approval-item button,
.workflow-run-card button,
.home-agents > button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: white;
  font-weight: 900;
}

.approval-item small {
  display: inline-flex;
  width: max-content;
  margin-bottom: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff2df;
  color: #965100;
  font-size: 11px;
  font-weight: 950;
}

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

.home-flow-grid article {
  position: relative;
  min-height: 132px;
  padding: 14px;
  border: 1px solid rgba(109, 76, 255, 0.22);
  border-radius: 18px;
  background: #f6f3ff;
}

.home-flow-grid article:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: -16px;
  z-index: 2;
  color: #7b8bae;
  font-weight: 950;
}

.home-flow-grid small,
.home-flow-grid span,
.home-flow-grid b {
  display: block;
}

.home-flow-grid small {
  color: var(--green);
  font-weight: 950;
}

.home-flow-grid span {
  margin: 10px 0;
  font-size: 26px;
}

.home-flow-grid p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.workflow-run-card {
  display: grid;
  gap: 10px;
}

.workflow-run-card span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.mini-progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
}

.mini-progress i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: #dfe8f8;
}

.mini-progress i.done {
  background: linear-gradient(135deg, var(--green), var(--cyan));
}

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

.context-board-grid span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  border-radius: 16px;
  background: #eaf2ff;
  font-size: 22px;
}

.home-agents button {
  width: 100%;
  margin-top: 12px;
}

.home-agent-list article span {
  display: block;
  margin-top: 8px;
  color: #0c7e61;
  font-size: 11px;
  font-weight: 950;
}

.home-guide-steps {
  display: grid;
  gap: 10px;
}

.home-guide-steps article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}

.home-guide-steps b {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: white;
}

.home-guide-steps strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
}

.home-guide-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.rail-primary-action {
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--ink);
  color: white;
  font-weight: 900;
}

.results-board {
  min-height: 560px;
}

.result-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.result-summary-grid article {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px 12px;
  align-items: center;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

.result-summary-grid span {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: #eaf2ff;
}

.result-summary-grid b {
  color: var(--purple);
  font-size: 28px;
  line-height: 1;
}

.result-summary-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.result-list {
  gap: 12px;
}

@media (min-width: 1500px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  }

  .quick-group-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1240px) {
  .home-hero,
  .home-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .quick-group-grid,
  .processing-steps,
  .home-flow-grid,
  .context-board-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-group {
    grid-template-columns: 1fr;
  }

  .home-flow-grid article:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 680px) {
  .home-hero {
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
  }

  .home-hero-copy h2 {
    font-size: 34px;
    letter-spacing: -0.045em;
  }

  .home-hero-copy p {
    font-size: 14px;
  }

  .home-command-form textarea {
    min-height: 128px;
  }

  .home-ready-card {
    gap: 12px;
    padding: 16px;
  }

  .ready-stats article {
    min-height: 62px;
    padding: 10px;
  }

  .ready-stats b {
    font-size: 21px;
  }

  .quick-group {
    min-height: auto;
  }

  .quick-group-grid,
  .processing-steps,
  .result-summary-grid,
  .home-flow-grid,
  .context-board-grid,
  .home-task-actions,
  .focus-item,
  .approval-item {
    grid-template-columns: 1fr;
  }

  .home-starter-row span {
    width: 100%;
  }

  .home-starter-row button {
    flex: 1 1 calc(50% - 8px);
  }

  .focus-item button,
  .approval-item button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .home-hero {
    padding: 16px;
  }

  .home-hero-copy h2 {
    font-size: 31px;
  }

  .home-starter-row button {
    flex-basis: 100%;
  }
}