/* Preview card base — used for every card in preview/ */
@import url('../colors_and_type.css');

html, body {
  margin: 0;
  padding: 0;
  background: var(--void);
  color: var(--white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.card {
  box-sizing: border-box;
  width: 700px;
  min-height: 150px;
  padding: 28px 32px;
  background: var(--void);
  position: relative;
  overflow: hidden;
}

.card * { box-sizing: border-box; }

/* a subtle hairline at the bottom so adjacent cards read as separate */
.card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(0, 180, 255, 0.06);
}

/* common helpers */
.row { display: flex; align-items: center; gap: 16px; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.mono { font-family: var(--font-mono); }
.eyebrow { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(0,180,255,0.7); font-weight: 600; }
.label-mini { font-size: 11px; color: rgba(156,163,175,0.6); letter-spacing: 0.05em; }
.tick { color: var(--neon); }
.cross { color: var(--ember); }