.page { padding-block: var(--space-7) var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); }

.back { font-family: var(--font-heading); font-weight: 600; text-decoration: none; font-size: var(--text-base); }
.back:hover { text-decoration: underline; }

.head { display: flex; flex-direction: column; gap: var(--space-2); }
.headRow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.reference { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-subtle); }
.title { font-size: var(--text-2xl); }

.payCard { border-color: var(--color-warning); display: flex; flex-direction: column; gap: var(--space-4); }
.payTitle { font-size: var(--text-lg); }
.payText { color: var(--color-text-muted); }
.payAmount {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  color: var(--color-text-subtle); font-size: var(--text-sm);
}
.payAmount strong {
  font-family: var(--font-heading); font-size: var(--text-xl);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}

.cardTitle { font-size: var(--text-md); margin-bottom: var(--space-4); }

.details { display: grid; gap: var(--space-3); margin: 0; }
.details > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-4); }
.details dt {
  font-family: var(--font-heading); font-weight: 600; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-subtle); padding-top: 2px;
}
.details dd { margin: 0; overflow-wrap: anywhere; }
.subtle { color: var(--color-text-subtle); }

.eventLink { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-base); }

.qrPlaceholder {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  letter-spacing: 0.06em;
  text-align: center;
  padding: var(--space-5);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}

.footerActions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 520px) {
  .details > div { grid-template-columns: 1fr; gap: 0; }
}