/* AICenter 2.0 certificate + verification pages. The paper stays light in dark mode (it is a document). */
.v2 .cf { padding-block: var(--sp-4) var(--sp-8); }
.v2 .cf__crumbs { margin-block-end: var(--sp-4); }
.v2 .cf__intro { text-align: center; max-inline-size: 720px; margin: 0 auto var(--sp-5); }
.v2 .cf__h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); margin: 0 0 var(--sp-2); }
.v2 .cf__h2 { font-family: var(--font-display); font-size: var(--fs-5); margin: 0 0 var(--sp-2); }
.v2 .cf__verified { font-weight: 600; color: var(--positive); }
.v2 .cf__verified a { color: inherit; }
.v2 .cf__note { max-inline-size: 720px; margin: 0 auto var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface-2); text-align: center; }
.v2 .cf__note.is-ok { border-color: var(--positive); }
.v2 .cf__note.is-warn { border-color: var(--accent); }

.v2 .cf__stage { display: flex; justify-content: center; }
.cf__paper { position: relative; --cf-ink: #2B2622; --cf-soft: #6B645C; --cf-accent: #A34727; --cf-gold: #9A7B2F;
  inline-size: 100%; max-inline-size: 960px; aspect-ratio: 1.414; background: #FFFDF8; color: var(--cf-ink);
  border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 40px rgb(0 0 0 / .10); padding: 18px; box-sizing: border-box; container-type: inline-size; }
.cf__frame { block-size: 100%; box-sizing: border-box; border: 2px solid var(--cf-accent); outline: 1px solid var(--cf-accent); outline-offset: -8px;
  padding: 4.5cqi 6cqi 3.5cqi; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cf__paper.is-distinct .cf__frame { border-color: var(--cf-gold); outline-color: var(--cf-gold); }
.cf__paper p { margin: 0; }
.cf__brand { font-family: var(--font-display, 'Frank Ruhl Libre', Georgia, serif); font-weight: 700; font-size: 2.6cqi; letter-spacing: .02em; }
.cf__brand span { font-family: var(--font-ui, Heebo, sans-serif); font-weight: 400; font-size: 1.6cqi; color: var(--cf-soft); margin-inline-start: .6em; }
.cf__kind { font-family: var(--font-display, 'Frank Ruhl Libre', Georgia, serif); font-size: 5.4cqi; font-weight: 700; color: var(--cf-accent); margin-block: 2.2cqi 1.6cqi !important; }
.cf__paper.is-distinct .cf__kind { color: var(--cf-gold); }
.cf__ribbon { display: inline-block; font-family: var(--font-ui, Heebo, sans-serif); font-size: 1.8cqi; font-weight: 800; color: #fff; background: var(--cf-gold);
  padding: .35em .9em; border-radius: 99px; vertical-align: middle; margin-inline-start: .4em; }
.cf__lead { font-size: 1.8cqi; color: var(--cf-soft); }
.cf__name { font-family: var(--font-display, 'Frank Ruhl Libre', Georgia, serif); font-size: 5cqi; font-weight: 700; line-height: 1.2; margin-block: .6cqi 1.6cqi !important;
  border-block-end: 1px solid color-mix(in srgb, var(--cf-accent) 40%, transparent); padding-inline: 4cqi; padding-block-end: .6cqi; }
.cf__course { font-size: 3cqi; font-weight: 800; line-height: 1.3; margin-block-start: .6cqi !important; max-inline-size: 80%; }
.cf__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .4cqi 2.4cqi; font-size: 1.55cqi; color: var(--cf-soft); margin-block-start: 1.6cqi !important; }
.cf__facts span + span::before { content: "·"; margin-inline-end: 2.4cqi; color: var(--cf-accent); }
.cf__foot { margin-block-start: auto; inline-size: 100%; display: grid; grid-template-columns: 1fr auto auto; gap: 3cqi; align-items: end; text-align: start; }
.cf__sign-name { font-family: var(--font-display, 'Frank Ruhl Libre', Georgia, serif); font-size: 2.2cqi; font-weight: 700; border-block-start: 1px solid var(--cf-ink); padding-block-start: .5cqi; display: inline-block; min-inline-size: 60%; }
.cf__sign-title { font-size: 1.4cqi; color: var(--cf-soft); }
.cf__meta { font-size: 1.3cqi; color: var(--cf-soft); line-height: 1.6; }
.cf__qr { inline-size: 8.8cqi; block-size: 8.8cqi; }

.v2 .cf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: var(--sp-5) auto var(--sp-2); max-inline-size: 960px; }
.v2 .cf__status { flex-basis: 100%; text-align: center; min-block-size: 1.4em; margin: 0; }
.v2 .cf__tip { text-align: center; font-size: var(--fs-2); margin: 0 auto var(--sp-6); max-inline-size: 720px; }
.v2 .cf__cta { max-inline-size: 720px; margin: var(--sp-6) auto; }
.v2 .cf__about { max-inline-size: 720px; margin: var(--sp-6) auto 0; }
.v2 .cf__about ul { line-height: 1.8; padding-inline-start: var(--sp-5); }

/* verification */
.v2 .vf { max-inline-size: 680px; margin: 0 auto; padding-block: var(--sp-6) var(--sp-8); }
.v2 .vf__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-5); }
.v2 .vf__card.is-ok { border-color: var(--positive); box-shadow: inset 0 4px 0 var(--positive); }
.v2 .vf__card.is-bad { border-color: var(--negative); box-shadow: inset 0 4px 0 var(--negative); }
.v2 .vf__status { font-family: var(--font-display); font-size: var(--fs-6); margin: 0 0 var(--sp-3); }
.v2 .vf__card.is-ok .vf__status { color: var(--positive); }
.v2 .vf__card.is-bad .vf__status { color: var(--negative); }
.v2 .vf dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; }
.v2 .vf dt { color: var(--muted); }
.v2 .vf dd { margin: 0; font-weight: 600; }
.v2 .vf__form { display: flex; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.v2 .vf__form input { flex: 1; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: inherit; }

@media (max-width: 640px) {
  .cf__paper { aspect-ratio: auto; padding: 10px; }
  .cf__frame { padding: 22px 16px; }
  .cf__brand { font-size: 1rem; } .cf__brand span { font-size: .8rem; display: block; margin: 2px 0 0; }
  .cf__kind { font-size: 1.7rem; margin-block: 14px 8px !important; } .cf__ribbon { font-size: .75rem; }
  .cf__lead { font-size: .85rem; } .cf__name { font-size: 1.7rem; } .cf__course { font-size: 1.05rem; max-inline-size: 100%; }
  .cf__facts { font-size: .78rem; gap: 4px 12px; } .cf__facts span + span::before { margin-inline-end: 12px; }
  .cf__foot { grid-template-columns: 1fr auto; margin-block-start: 22px; gap: 14px; }
  .cf__sign { grid-column: 1 / -1; } .cf__sign-name { font-size: 1rem; } .cf__sign-title, .cf__meta { font-size: .72rem; }
  .cf__qr { inline-size: 64px; block-size: 64px; }
}

@media print {
  @page { size: A4 landscape; margin: 0; }
  body * { visibility: hidden !important; }
  #certificate-card, #certificate-card * { visibility: visible !important; }
  #certificate-card { position: fixed; inset: 0; max-inline-size: none; inline-size: 297mm; block-size: 210mm; aspect-ratio: auto; box-shadow: none; border-radius: 0; padding: 8mm;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.cf__watermark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-weight: 900; font-size: 14cqi; color: rgb(163 71 39 / .10); transform: rotate(-18deg); z-index: 1; }
