.roc-abrs-passport-preview {
  --roc-desk: #203042;
  --roc-desk-deep: #0f1821;
  --roc-paper: #fdfdfe;
  --roc-paper-soft: #f1f5fa;
  --roc-ink: #0c0c0e;
  --roc-ink-soft: #495769;
  --roc-meta: #6b6e78;
  --roc-line: rgba(74, 111, 165, 0.28);
  --roc-line-strong: rgba(42, 44, 51, 0.3);
  --roc-accent: #4a6fa5;
  --roc-accent-strong: #3f5f88;
  --roc-photo: #d7e2ee;
  --roc-watermark-image: url("../2x/1.png");
  --passport-cover-logo-scale: 0.8;
  --passport-cover-logo-filter: grayscale(1) sepia(0.18) saturate(1.1) hue-rotate(168deg) brightness(1.6) contrast(0.96);
}

.roc-abrs-passport-preview .passport-preview__caption,
.roc-abrs-passport-preview .passport-artifact__label {
  color: var(--roc-meta);
}

.roc-abrs-passport-preview .passport-cover {
  border-color: rgba(74, 111, 165, 0.46);
  background:
    radial-gradient(circle at 16% 12%, rgba(126, 160, 198, 0.18), transparent 24%),
    radial-gradient(circle at 84% 84%, rgba(126, 160, 198, 0.12), transparent 28%),
    linear-gradient(180deg, var(--roc-desk) 0%, var(--roc-desk-deep) 100%);
}

.roc-abrs-passport-preview .passport-cover::before {
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 0.7px, transparent 0.7px),
    linear-gradient(rgba(255, 255, 255, 0.05) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0.5px, transparent 0.5px);
  background-size: 4px 4px, 18px 18px, 18px 18px;
  mix-blend-mode: normal;
  opacity: 0.75;
}

.roc-abrs-passport-preview .passport-cover::after {
  border-color: rgba(219, 232, 246, 0.18);
}

.roc-abrs-passport-preview .passport-cover__surface {
  color: #dbe8f6;
}

.roc-abrs-passport-preview .passport-cover__emblem {
  filter: grayscale(0.18) brightness(1.08) contrast(1.02);
}

.roc-abrs-passport-preview .passport-cover__issuer,
.roc-abrs-passport-preview .passport-cover__title {
  color: #dbe8f6;
  text-shadow: none;
}

.roc-abrs-passport-preview .passport-cover__issuer-native,
.roc-abrs-passport-preview .passport-cover__title-native,
.roc-abrs-passport-preview .passport-identity__title-zh,
.roc-abrs-passport-preview .passport-data-value--native {
  font-family: "Noto Sans SC", "IBM Plex Sans", sans-serif;
}

.roc-abrs-passport-preview .passport-cover__issuer-en,
.roc-abrs-passport-preview .passport-cover__title-en,
.roc-abrs-passport-preview .passport-message__copy-en,
.roc-abrs-passport-preview .passport-mini-field__value,
.roc-abrs-passport-preview .passport-data-value,
.roc-abrs-passport-preview .passport-data-value--latin {
  font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif;
}

.roc-abrs-passport-preview .passport-cover__issuer-native,
.roc-abrs-passport-preview .passport-cover__title-native {
  letter-spacing: 0.12em;
}

.roc-abrs-passport-preview .passport-chip-mark--cover,
.roc-abrs-passport-preview .passport-chip-mark--header,
.roc-abrs-passport-preview .passport-chip-mark::before,
.roc-abrs-passport-preview .passport-chip-mark::after {
  border-color: rgba(219, 232, 246, 0.72);
}

.roc-abrs-passport-preview .passport-chip-mark--cover::after,
.roc-abrs-passport-preview .passport-chip-mark--header::after {
  background: rgba(219, 232, 246, 0.72);
}

.roc-abrs-passport-preview .passport-sheet {
  border-color: var(--roc-line-strong);
  background:
    radial-gradient(circle at 18% 12%, rgba(74, 111, 165, 0.06), transparent 24%),
    radial-gradient(circle at 82% 86%, rgba(74, 111, 165, 0.05), transparent 28%),
    linear-gradient(180deg, rgba(253, 253, 254, 0.98) 0%, rgba(241, 245, 250, 0.98) 100%);
}

.roc-abrs-passport-preview .passport-page--message {
  border-bottom-color: rgba(74, 111, 165, 0.24);
  background:
    radial-gradient(circle at 18% 40%, rgba(74, 111, 165, 0.1), transparent 30%),
    linear-gradient(rgba(42, 44, 51, 0.04) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(42, 44, 51, 0.04) 0.5px, transparent 0.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(241, 245, 250, 0.96)),
    var(--roc-paper);
  background-size: auto, 20px 20px, 20px 20px, auto, auto;
}

.roc-abrs-passport-preview .passport-page--message::before {
  background:
    linear-gradient(-45deg, rgba(74, 111, 165, 0.18) 25%, transparent 25%) 0 0 / 12px 10px,
    linear-gradient(45deg, rgba(74, 111, 165, 0.12) 25%, transparent 25%) 0 0 / 12px 10px;
}

.roc-abrs-passport-preview .passport-page--message::after {
  content: "";
  position: absolute;
  left: 4mm;
  bottom: 3mm;
  width: 46mm;
  height: 46mm;
  background: var(--roc-watermark-image) center / contain no-repeat;
  opacity: 0.09;
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}

.roc-abrs-passport-preview .passport-message__stars {
  opacity: 0.16;
  background:
    radial-gradient(circle at 35% 24%, rgba(74, 111, 165, 0.8) 0 6px, transparent 6px),
    radial-gradient(circle at 58% 18%, rgba(74, 111, 165, 0.68) 0 4px, transparent 4px),
    radial-gradient(circle at 69% 34%, rgba(74, 111, 165, 0.62) 0 3px, transparent 3px),
    radial-gradient(circle at 47% 38%, rgba(74, 111, 165, 0.62) 0 3px, transparent 3px),
    radial-gradient(circle at 27% 46%, rgba(74, 111, 165, 0.62) 0 3px, transparent 3px);
}

.roc-abrs-passport-preview .passport-message__copy,
.roc-abrs-passport-preview .passport-message__copy-zh,
.roc-abrs-passport-preview .passport-message__copy-en,
.roc-abrs-passport-preview .passport-message__side-code {
  color: var(--roc-ink-soft);
  z-index: 1;
}

.roc-abrs-passport-preview .passport-message__copy-zh {
  font-family: "Noto Sans SC", "IBM Plex Sans", sans-serif;
}

.roc-abrs-passport-preview .passport-page--identity {
  background:
    radial-gradient(circle at 74% 44%, rgba(74, 111, 165, 0.14), transparent 22%),
    linear-gradient(rgba(42, 44, 51, 0.04) 0.5px, transparent 0.5px),
    linear-gradient(90deg, rgba(42, 44, 51, 0.04) 0.5px, transparent 0.5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(241, 245, 250, 0.98)),
    var(--roc-paper);
  background-size: auto, 20px 20px, 20px 20px, auto, auto;
}

.roc-abrs-passport-preview .passport-page--identity::before {
  opacity: 0.22;
  background:
    radial-gradient(circle at 50% 50%, rgba(74, 111, 165, 0.26) 0 20%, transparent 20%),
    radial-gradient(circle at 20% 50%, rgba(74, 111, 165, 0.18) 0 20%, transparent 20%),
    radial-gradient(circle at 80% 50%, rgba(74, 111, 165, 0.18) 0 20%, transparent 20%),
    radial-gradient(circle at 50% 18%, rgba(74, 111, 165, 0.22) 0 18%, transparent 18%),
    radial-gradient(circle at 50% 82%, rgba(74, 111, 165, 0.22) 0 18%, transparent 18%);
}

.roc-abrs-passport-preview .passport-identity__header {
  border-bottom-color: var(--roc-line);
  background: rgba(255, 255, 255, 0.34);
}

.roc-abrs-passport-preview .passport-identity__title,
.roc-abrs-passport-preview .passport-mini-field__label,
.roc-abrs-passport-preview .passport-data-label,
.roc-abrs-passport-preview .passport-message__side-code,
.roc-abrs-passport-preview .passport-mrz__line {
  color: var(--roc-meta);
}

.roc-abrs-passport-preview .passport-mini-field__value,
.roc-abrs-passport-preview .passport-data-value,
.roc-abrs-passport-preview .passport-data-value--latin,
.roc-abrs-passport-preview .passport-mrz__char {
  color: var(--roc-ink);
}

.roc-abrs-passport-preview .passport-mini-field--passport .passport-mini-field__value {
  color: var(--roc-accent-strong);
}

.roc-abrs-passport-preview .passport-photo {
  border-color: rgba(74, 111, 165, 0.28);
  background: var(--roc-photo);
}

.roc-abrs-passport-preview .passport-ghost {
  filter: grayscale(0.1) saturate(0.78) hue-rotate(180deg);
  opacity: 0.16;
}

.roc-abrs-passport-preview .passport-field--authority .passport-data-value + .passport-data-value {
  color: var(--roc-ink-soft);
}

.roc-abrs-passport-preview .passport-mrz {
  border-top-color: var(--roc-line);
  background: linear-gradient(180deg, rgba(74, 111, 165, 0.03), rgba(74, 111, 165, 0.08));
}