.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-glass);
  box-shadow: var(--shadow-soft);
  backdrop-filter: var(--blur-glass);
}

.panel-card {
  padding: var(--space-5);
}

.hero-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-xl);
  background: var(--gradient-focus);
  box-shadow: var(--shadow-card);
}

.hero-card::after {
  position: absolute;
  top: -5rem;
  right: -4rem;
  width: 11rem;
  height: 11rem;
  border-radius: var(--radius-full);
  background: rgba(79, 107, 255, 0.14);
  content: "";
}

.stack {
  display: grid;
  gap: var(--space-4);
}

.stack-sm {
  display: grid;
  gap: var(--space-2);
}

.tool-grid {
  display: grid;
  gap: var(--space-3);
}

.inline-list {
  display: grid;
  gap: var(--space-3);
}

.inline-list strong {
  display: block;
  margin-bottom: 0.125rem;
  font-size: var(--text-sm);
}

.inline-list p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tool-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  transition:
    transform var(--motion-base),
    box-shadow var(--motion-base),
    border-color var(--motion-base);
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(79, 107, 255, 0.24);
  box-shadow: var(--shadow-card);
}

.tool-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 1.25rem;
  background: var(--color-primary-soft);
}

.tool-icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.tool-card h2,
.tool-card h3 {
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: 800;
}

.tool-card p {
  margin-top: 0.125rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.status-pill,
.chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.status-pill.is-ready {
  background: var(--color-success-soft);
  color: #13883e;
}

.status-pill.is-planned {
  background: var(--color-warning-soft);
  color: #a25b00;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 var(--space-5);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-weight: 800;
  transition:
    transform var(--motion-base),
    box-shadow var(--motion-base),
    background var(--motion-base),
    color var(--motion-base);
}

.button:focus-visible,
.input:focus-visible,
.segmented-button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
}

.button-primary {
  color: var(--color-text-inverse);
  background: var(--gradient-primary);
  box-shadow: 0 12px 30px rgba(79, 107, 255, 0.28);
}

.button-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(79, 107, 255, 0.34);
}

.button-secondary {
  color: var(--color-text-soft);
  background: var(--color-surface-muted);
}

.button-ghost {
  min-height: var(--tap-size);
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  background: transparent;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.button-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: var(--tap-size);
  height: var(--tap-size);
  border-radius: 1rem;
  background: var(--color-surface-glass);
  color: var(--color-text-soft);
  box-shadow: inset 0 0 0 1px var(--color-border);
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field label {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
  font-weight: 800;
}

.input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  background: rgba(238, 242, 246, 0.72);
}

.segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-surface-muted);
}

.segmented-button {
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 800;
}

.segmented-button.is-active {
  color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.metric-card {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
}

.metric-card span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xl);
  line-height: var(--line-title);
}

.helper-banner {
  display: none;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  color: #8a5208;
  font-size: var(--text-sm);
}

.helper-banner.is-visible {
  display: flex;
}

.empty-state {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.display-time {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--line-tight);
}

.dot-row {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-full);
  background: rgba(18, 24, 38, 0.12);
  transition: background var(--motion-base), transform var(--motion-base);
}

.dot.is-complete {
  background: var(--color-primary);
  transform: scale(1.12);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(18, 24, 38, 0.42);
  backdrop-filter: blur(10px);
}

.modal.is-open {
  display: flex;
}

.modal-card {
  width: min(100%, 22rem);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.modal-card h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.modal-card p {
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
}