.f4-body {
  background: var(--bg);
  color: var(--fg);
}

.f4-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) clamp(14px, 4vw, 32px) 12px;
  background: color-mix(in srgb, var(--sheet-bg) 92%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
}

.f4-back {
  color: var(--accent);
  font-weight: 750;
  text-decoration: none;
  font-size: 14px;
}

.f4-toolbar-title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.f4-print {
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.f4-stage {
  display: grid;
  justify-items: center;
  padding: clamp(14px, 4vw, 40px) clamp(10px, 3vw, 28px) calc(40px + env(safe-area-inset-bottom, 0px));
}

.f4-loading {
  margin: 24px 0;
  color: var(--muted);
  text-align: center;
}

/* A4 sheet: 210 x 297 mm. */
.f4-sheet {
  width: 210mm;
  min-height: 297mm;
  box-sizing: border-box;
  padding: 16mm 14mm;
  display: grid;
  align-content: start;
  gap: 8mm;
  background: #fffdf8;
  color: #1d2525;
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.f4-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12mm;
  padding-bottom: 6mm;
  border-bottom: 2px solid #1d2525;
}

.f4-logo {
  width: min(58mm, 100%);
  height: auto;
  display: block;
}

.f4-caption {
  margin: 3mm 0 0;
  font-size: 12px;
  color: rgba(29, 37, 37, .66);
}

.f4-meta {
  text-align: right;
  font-size: 12px;
}

.f4-meta-row {
  margin: 0 0 2mm;
}

.f4-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}

.f4-key {
  display: block;
  margin-bottom: 1mm;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(29, 37, 37, .58);
}

.f4-h2 {
  margin: 0 0 3mm;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.f4-dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3mm 8mm;
  font-size: 13px;
}

.f4-dl dt {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(29, 37, 37, .58);
}

.f4-dl dd {
  margin: 1mm 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.f4-guest {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8mm;
  align-items: start;
}

.f4-qr {
  width: 46mm;
  text-align: center;
}

.f4-qr-img {
  display: block;
  width: 46mm;
  height: 46mm;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(29, 37, 37, .28);
  border-radius: 3mm;
  padding: 2mm;
  box-sizing: border-box;
}

.f4-note {
  margin: 2mm 0 0;
  font-size: 10px;
  color: rgba(29, 37, 37, .62);
}

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

.f4-table th,
.f4-table td {
  padding: 2mm 2mm;
  text-align: left;
  border-bottom: 1px solid rgba(29, 37, 37, .22);
  vertical-align: top;
}

.f4-table th {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(29, 37, 37, .6);
  border-bottom-width: 2px;
  border-bottom-color: rgba(29, 37, 37, .5);
}

.f4-table td[data-numeric],
.f4-table th[data-numeric] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.f4-table [data-status="completed"] { color: #1c7a3f; font-weight: 750; }
.f4-table [data-status="error"] { color: #a4262c; font-weight: 750; }
.f4-table [data-status="pending"],
.f4-table [data-status="processing"] { color: #8a6100; font-weight: 750; }

.f4-empty {
  margin: 3mm 0 0;
  font-size: 12px;
  color: rgba(29, 37, 37, .6);
}

.f4-total {
  margin: 4mm 0 0;
  text-align: right;
  font-size: 14px;
}

.f4-sign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10mm;
  margin-top: 4mm;
}

.f4-sign-line i {
  display: block;
  height: 12mm;
  border-bottom: 1px solid rgba(29, 37, 37, .5);
}

.f4-footer {
  margin: 0;
  padding-top: 4mm;
  border-top: 1px solid rgba(29, 37, 37, .22);
  font-size: 10px;
  color: rgba(29, 37, 37, .55);
  text-align: center;
}

@media (max-width: 820px) {
  .f4-sheet {
    width: 100%;
    min-height: 0;
    padding: 18px 16px;
    gap: 22px;
    border-radius: 4px;
  }

  .f4-head {
    flex-direction: column;
    gap: 14px;
    padding-bottom: 14px;
  }

  .f4-meta {
    text-align: left;
  }

  .f4-guest {
    grid-template-columns: minmax(0, 1fr);
  }

  .f4-qr {
    width: 100%;
  }

  .f4-qr-img {
    width: min(150mm, 62vw);
    height: min(150mm, 62vw);
    margin: 0 auto;
  }

  .f4-dl {
    grid-template-columns: minmax(0, 1fr);
  }

  .f4-table {
    font-size: 11px;
  }

  .f4-sign {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    background: #fff !important;
  }

  .f4-toolbar,
  .f4-loading {
    display: none !important;
  }

  .f4-stage {
    padding: 0;
  }

  .f4-sheet {
    width: 210mm;
    min-height: 297mm;
    box-shadow: none;
    border-radius: 0;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}