:root {
  --bg: #f4f7fb;
  --text: #1a2230;
  --muted: #576173;
  --a: #0f5ae0;
  --b: #de6a00;
  --both: #0a8a59;
  --button-primary: #2049c7;
  --button-primary-hover: #17389c;
  --button-success: #1d9b52;
  --button-success-hover: #177a40;
  --button-danger: #cf3131;
  --button-danger-hover: #aa2424;
  --button-secondary: #eef2fa;
  --button-secondary-hover: #e2e9f8;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #f7f9fd 0%, var(--bg) 100%);
  min-height: 100vh;
}

.app {
  min-height: 100vh;
  padding: 0;
}

.card {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 16px 24px;
}

.landing-card {
  background: #ffffff;
  border-radius: 16px;
  margin-top: 24px;
  box-shadow: 0 8px 28px rgba(20, 35, 70, 0.08);
  padding: 20px 18px 24px;
}

.landing-subtitle {
  margin: 14px 0 8px;
  font-size: 1.1rem;
}

.landing-list {
  margin: 0 0 14px 18px;
  padding: 0;
  color: #2c3a52;
  line-height: 1.5;
}

.landing-list li {
  margin-bottom: 6px;
}

.status-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
  padding: 12px 12px 12px;
  margin: 0 -4px 14px;
  border-left: 6px solid var(--both);
  box-shadow: 0 4px 18px rgba(20, 35, 70, 0.08);
}

.status-a .status-header {
  border-left-color: var(--a);
}

.status-b .status-header {
  border-left-color: var(--b);
}

.status-both .status-header {
  border-left-color: var(--both);
}

.progress {
  font-size: 0.95rem;
  color: #364255;
  margin-bottom: 6px;
  font-weight: 700;
}

.phase {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.phase-chip {
  display: inline-block;
  font-size: 0.78rem;
  color: #3a4860;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e9eef8;
}

.phase-chip.done {
  background: #dcf3e8;
  color: #146645;
}

.phase-chip.active {
  background: #dce7ff;
  color: #173f9c;
  font-weight: 700;
}

.role {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  line-height: 1.25;
  white-space: pre-line;
  box-shadow: 0 4px 12px rgba(22, 38, 76, 0.14);
}

.role-a {
  background: var(--a);
}

.role-b {
  background: var(--b);
}

.role-both {
  background: var(--both);
}

.title {
  margin: 2px 0 12px;
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
}

.text {
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.65;
  white-space: pre-line;
  max-width: 64ch;
}

.help {
  margin: 0 0 20px;
  font-size: 0.95rem;
  color: var(--muted);
  white-space: pre-line;
}

.help a {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(29, 78, 216, 0.35);
  transition: color 120ms ease, border-color 120ms ease;
}

.help a:hover {
  color: #143ea8;
  border-bottom-color: rgba(20, 62, 168, 0.55);
}

.help a:focus-visible {
  outline: 2px solid #0b5fff;
  outline-offset: 2px;
  border-radius: 4px;
}

.help img {
  display: block;
  margin-top: 12px;
  border-radius: 10px;
  border: 1px solid #d5deef;
  width: min(100%, 220px);
}

.actions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.setup-form {
  display: grid;
  gap: 8px;
}

.setup-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.setup-form input {
  min-height: 44px;
  border: 1px solid #c7d3ea;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 1rem;
}

.setup-form label {
  font-size: 0.9rem;
  color: #4a5d7c;
}

.landing-link {
  display: inline-block;
  width: 100%;
  text-decoration: none;
  text-align: center;
  min-height: 52px;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--button-secondary);
  color: #243147;
}

.landing-link:hover {
  background: var(--button-secondary-hover);
}

.landing-link-primary {
  background: var(--button-primary);
  color: #ffffff;
}

.landing-link-primary:hover {
  background: var(--button-primary-hover);
}

.need-category {
  margin-top: 8px;
  margin-bottom: 2px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2c3a52;
  text-transform: capitalize;
}

button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--button-primary);
  color: #ffffff;
  transition: background 120ms ease;
  box-shadow: 0 3px 8px rgba(18, 31, 61, 0.12);
}

button:hover {
  background: var(--button-primary-hover);
}

button.button-secondary {
  background: var(--button-secondary);
  color: #243147;
}

button.button-secondary:hover {
  background: var(--button-secondary-hover);
}

button.button-success {
  background: var(--button-success);
  color: #ffffff;
}

button.button-success:hover {
  background: var(--button-success-hover);
}

button.button-danger {
  background: var(--button-danger);
  color: #ffffff;
}

button.button-danger:hover {
  background: var(--button-danger-hover);
}

button:focus-visible {
  outline: 3px solid #0b5fff;
  outline-offset: 2px;
}

button.button-primary-main {
  position: sticky;
  bottom: 10px;
  z-index: 4;
}

@media (min-width: 768px) {
  .card {
    padding: 20px 24px 30px;
  }

  button.button-primary-main {
    position: static;
  }
}