.card {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: var(--space-4);
}

.surf {
  background: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
  padding: var(--space-3);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px var(--space-2);
  border-radius: 20px;
}

.p-coral {
  background: #faece7;
  color: #993c1d;
}

.p-teal {
  background: #e1f5ee;
  color: #085041;
}

.p-blue {
  background: #e6f1fb;
  color: #0c447c;
}

.p-purple {
  background: #eeedfe;
  color: #26215c;
}

.p-amber {
  background: #faeeda;
  color: #633806;
}

.p-gray {
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-tertiary);
}

.btn-p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #d85a30;
  color: #faece7;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--border-radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.12s;
}

.btn-p:hover {
  background: #c04f28;
}

.btn-g {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  border: 0.5px solid var(--color-border-tertiary);
  padding: var(--space-2) 14px;
  border-radius: var(--border-radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.12s, color 0.12s;
}

.btn-g:hover {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
}

.tbl th {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  padding: 7px var(--space-2);
  text-align: left;
  border-bottom: 0.5px solid var(--color-border-tertiary);
}

.tbl td {
  padding: 7px var(--space-2);
  border-bottom: 0.5px solid var(--color-border-tertiary);
  color: var(--color-text-primary);
  vertical-align: middle;
}

.tbl tr:last-child td {
  border-bottom: none;
}

.tbl tr:hover td {
  background: var(--color-background-secondary);
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: var(--border-radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 0.5px solid transparent;
  color: var(--color-text-secondary);
  background: transparent;
  font-family: var(--font-body);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.tab.on {
  background: #faece7;
  color: #993c1d;
  border-color: #f0997b;
}

.tab:hover:not(.on) {
  background: var(--color-background-secondary);
}

.tab-bar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

input[type='text'],
select,
textarea {
  font-size: 13px;
  border: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 7px 10px;
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  width: 100%;
  font-family: var(--font-body);
}

textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px;
  height: 72px;
}

.nb:focus-visible,
.btn-p:focus-visible,
.btn-g:focus-visible,
.tab:focus-visible,
.chip-btn:focus-visible,
.bsi:focus-visible,
.frow:focus-visible,
.chat-send:focus-visible {
  outline: 2px solid #d85a30;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .nb,
  .btn-p,
  .btn-g,
  .tab,
  .chip-btn {
    transition: none;
  }

  .hero-animate,
  .hero-highlights .hero-highlight,
  .hero-band-bg .lattice-node,
  .hero-band-bg .lattice-center {
    animation: none;
    opacity: 1;
    transform: none;
  }
}