body { background: var(--brk-paper); color: var(--brk-ink); }

.guest { gap: 16px; }
.muted { color: var(--brk-gray-dark); }

.pass {
  background: var(--brk-yellow);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: var(--shadow-md);
}

.pass-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.pass-logo { height: 44px; width: auto; display: block; }
.pass-balance { text-align: right; }
.pass-balance-value { font-weight: 700; font-size: 24px; line-height: 1.2; }

.pass-title { display: flex; flex-direction: column; gap: 4px; }
.pass-title h1 {
  margin: 0;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.stamps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.stamp {
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stamp.full { background: var(--brk-ink); }
.stamp.used { border: 1.5px dashed rgba(31, 32, 34, 0.4); }

.pass-meta { display: flex; justify-content: space-between; gap: 12px; }
.pass-meta .right { text-align: right; }
.pass-meta-value { font-size: 16px; font-weight: 600; }

.pass-qr {
  align-self: center;
  background: var(--brk-white);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.pass-qr .qr-box { width: 147px; height: 147px; }
.pass-qr-number {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--brk-gray-dark);
  min-height: 18px;
}

.pass.blocked .stamps,
.pass.blocked .pass-qr { opacity: 0.35; }

.hint {
  margin: 0;
  font-size: 14px;
  color: var(--brk-gray-dark);
  text-align: center;
  text-wrap: pretty;
}

.notice {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--brk-gray-tint);
  font-size: 14px;
  text-align: center;
  color: var(--brk-ink);
}
.notice.alert { background: var(--brk-ink); color: var(--brk-white); }

.install {
  background: var(--brk-white);
  border-radius: 16px;
  padding: 16px 24px;
  box-shadow: var(--shadow-sm);
}
.install h2 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.install p { margin: 0; font-size: 14px; color: var(--brk-graphite); }

.history { margin-top: 8px; }
.history h2 { margin: 0 0 8px; }
.history ul { list-style: none; margin: 0; padding: 0; }
.history li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #E4E4E5;
  font-size: 14px;
}
.history li span:first-child { color: var(--brk-gray-dark); font-variant-numeric: tabular-nums; }

.footer { margin-top: auto; padding-top: 16px; text-align: center; font-size: 14px; }
.footer a {
  color: var(--brk-gray-dark);
  text-decoration-color: var(--brk-yellow);
  text-underline-offset: 3px;
}