:root {
  --ink: #172126;
  --muted: #5f6b70;
  --line: #d8ddda;
  --paper: #f7f8f5;
  --white: #ffffff;
  --primary: #123b4a;
  --primary-bright: #176b73;
  --accent: #e9b949;
  --accent-dark: #a96f05;
  --success: #16704a;
  --danger: #b42336;
  --warning: #916100;
  --soft-blue: #e5f0f1;
  --soft-gold: #fff6d8;
  --soft-red: #fcebee;
  --serif: "Iowan Old Style", "Palatino Linotype", "Noto Serif TC", serif;
  --sans: "Aptos", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --mono: "Cascadia Mono", "IBM Plex Mono", monospace;
}

@font-face { font-family: "Signet Serif"; src: url("/fonts/SourceSerif4-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Signet Mono"; src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype"); font-display: swap; }

* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
html { min-height: 100%; font-size: 16px; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.55; }
body::before { position: fixed; inset: 0; z-index: -1; content: ""; opacity: .22; background-image: linear-gradient(#89929620 1px, transparent 1px), linear-gradient(90deg, #89929614 1px, transparent 1px); background-size: 32px 32px; }
a { color: var(--primary-bright); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary); }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.1; }
code { font-family: var(--mono); overflow-wrap: anywhere; }

.site-header { position: relative; z-index: 10; border-bottom: 1px solid var(--line); background: #ffffffec; backdrop-filter: blur(12px); }
.header-inner, .footer-inner { display: flex; width: min(1240px, calc(100% - 40px)); margin: 0 auto; align-items: center; }
.header-inner { min-height: 66px; gap: 34px; }
.wordmark { color: var(--ink); font-family: var(--serif); font-size: 22px; font-weight: 700; text-decoration: none; }
.wordmark::after { content: "."; color: var(--accent-dark); }
.primary-nav { display: flex; gap: 24px; align-items: center; margin-right: auto; }
.primary-nav a { color: var(--muted); font-size: 14px; text-decoration: none; }
.primary-nav a:hover { color: var(--ink); }
.account-actions { position: relative; min-width: 0; flex: 0 0 auto; }
.account-menu-trigger { display: inline-grid; height: 40px; max-width: 240px; grid-template-columns: 28px minmax(0, auto) 16px; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); cursor: pointer; }
.account-menu-trigger:hover, .account-menu-trigger[aria-expanded="true"] { border-color: var(--line); background: white; }
.account-menu-trigger:focus-visible { outline: 3px solid #176b7326; outline-offset: 2px; }
.account-avatar { display: grid; width: 28px; height: 28px; place-items: center; overflow: hidden; border: 1px solid #86a09a; border-radius: 50%; background: var(--primary); color: white; font-family: var(--serif); font-size: 13px; font-weight: 700; line-height: 1; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-name { max-width: 170px; overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 650; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-chevron { width: 16px; height: 16px; color: var(--muted); transition: transform .16s ease; }
.account-menu-trigger[aria-expanded="true"] .account-menu-chevron { transform: rotate(180deg); }
.account-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 190px; overflow: hidden; border: 1px solid #aeb9b6; border-radius: 4px; background: white; box-shadow: 0 14px 34px #18353d29; }
.account-menu-panel a, .account-menu-panel button { display: grid; width: 100%; min-height: 42px; grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 10px; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: white; color: var(--ink); cursor: pointer; font-size: 12px; line-height: 1; text-align: left; text-decoration: none; }
.account-menu-panel form:last-child button { border-bottom: 0; }
.account-menu-panel a:hover, .account-menu-panel button:hover, .account-menu-panel a:focus-visible, .account-menu-panel button:focus-visible { background: #edf4f1; color: var(--primary); outline: 0; }
.account-menu-panel svg { width: 18px; height: 18px; }
.account-menu-panel form { margin: 0; }
.page-frame { width: min(1240px, calc(100% - 40px)); min-height: calc(100vh - 160px); margin: 0 auto; padding: 48px 0 80px; }
.site-footer { border-top: 1px solid var(--line); background: var(--white); color: var(--muted); font-size: 12px; }
.footer-inner { min-height: 70px; justify-content: space-between; }
.footer-actions { display: flex; min-width: 0; align-items: center; gap: 20px; }
.footer-inner a { color: inherit; }
.footer-actions > a { display: inline-flex; height: 32px; flex: 0 0 auto; align-items: center; line-height: 1; white-space: nowrap; }
.footer-language-switcher { display: inline-flex; height: 32px; align-items: stretch; overflow: hidden; border: 1px solid #b8c2bf; border-radius: 3px; background: var(--white); }
.footer-language-switcher select { min-width: 124px; height: 30px; padding: 0 28px 0 9px; border: 0; background-color: var(--white); color: var(--ink); font: 600 11px/1 var(--sans); cursor: pointer; outline: 0; }
.footer-language-switcher button { min-width: 46px; height: 30px; padding: 0 9px; border: 0; border-left: 1px solid #b8c2bf; background: var(--primary); color: white; cursor: pointer; font: 700 10px/1 var(--sans); }
.footer-language-switcher:focus-within { border-color: var(--primary-bright); box-shadow: 0 0 0 3px #176b731c; }
.footer-language-switcher button:hover { background: var(--primary-bright); }

.button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 9px 16px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-weight: 650; text-decoration: none; transition: transform .16s ease, background .16s ease, border-color .16s ease; }
.button:hover { transform: translateY(-1px); text-decoration: none; }
.button.primary { background: var(--primary); color: white; }
.button.accent { background: var(--accent); color: #352500; }
.button.secondary { border-color: #aeb9b6; background: white; color: var(--ink); }
.button.danger { border-color: #d9a0a9; background: white; color: var(--danger); }
.button.small { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.text-button { padding: 0; border: 0; background: transparent; color: var(--primary-bright); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.eyebrow { margin-bottom: 14px; color: var(--accent-dark); font-family: var(--mono); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.lede { max-width: 660px; color: var(--muted); font-size: 18px; }

.flash { position: relative; z-index: 9; border-bottom: 1px solid; font-size: 14px; }
.flash span { display: block; width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding: 11px 0; }
.flash.success { border-color: #a8d2bd; background: #e6f5ed; color: #0f5739; }
.flash.error { border-color: #e5afb8; background: var(--soft-red); color: #842032; }

.verifier-stage { display: grid; min-height: 590px; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); align-items: center; gap: 70px; }
.verifier-copy h1 { margin-bottom: 22px; font-size: 64px; }
.verify-form { max-width: 700px; margin-top: 38px; }
.verify-form label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 650; }
.input-command { display: grid; grid-template-columns: 1fr auto; }
.input-command input { min-width: 0; height: 54px; padding: 0 16px; border: 1px solid #98a6a3; border-right: 0; border-radius: 4px 0 0 4px; background: white; outline: 0; }
.input-command input:focus { border-color: var(--primary-bright); box-shadow: inset 0 0 0 1px var(--primary-bright); }
.input-command .button { min-width: 100px; border-radius: 0 4px 4px 0; }
.verify-form.standalone { margin: 40px auto 0; }

.registry-specimen { position: relative; width: min(100%, 440px); aspect-ratio: 4 / 5; justify-self: end; overflow: hidden; border: 1px solid #315663; background: var(--primary); color: white; box-shadow: 18px 18px 0 var(--accent); }
.registry-specimen::before { position: absolute; inset: 18px; content: ""; border: 1px solid #ffffff3d; }
.specimen-index { position: absolute; top: 40px; left: 40px; font-family: var(--mono); font-size: 11px; color: #d0e1e1; }
.specimen-seal { position: absolute; top: 96px; right: 44px; display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid var(--accent); border-radius: 50%; }
.specimen-seal span { font-family: var(--serif); font-size: 38px; color: var(--accent); }
.specimen-lines { position: absolute; top: 190px; left: 42px; display: grid; width: 145px; gap: 10px; }
.specimen-lines span { height: 1px; background: #ffffff50; }
.specimen-lines span:nth-child(2) { width: 75%; }
.registry-specimen strong { position: absolute; bottom: 112px; left: 40px; font-family: var(--serif); font-size: 43px; line-height: .96; }
.specimen-status { position: absolute; right: 42px; bottom: 45px; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; }
.specimen-status i { width: 8px; height: 8px; border-radius: 50%; background: #55dc9d; }
.registry-band { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #ffffff80; }
.registry-band span { padding: 20px 12px; border-right: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 11px; text-align: center; text-transform: uppercase; }
.registry-band span:last-child { border-right: 0; }

.utility-heading { padding: 60px 0 20px; text-align: center; }
.utility-heading.narrow { max-width: 720px; margin: 0 auto; }
.utility-heading h1 { margin-bottom: 16px; font-size: 48px; }
.utility-heading p:last-child { color: var(--muted); }

.verification-banner { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 20px; margin: -16px 0 30px; padding: 12px 18px; border: 1px solid; background: white; font-size: 13px; }
.verification-banner div { display: flex; align-items: center; gap: 12px; }
.verification-banner div span:last-child { color: var(--muted); }
.verification-banner code { color: var(--muted); font-size: 11px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.verification-banner.valid { border-color: #85bca1; color: var(--success); }
.verification-banner.expired, .verification-banner.notyetvalid { border-color: #d4b865; color: var(--warning); }
.verification-banner.revoked { border-color: #d78c99; color: var(--danger); }
.verification-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr); gap: 56px; align-items: start; }
.credential-visual-column { position: sticky; top: 24px; }
.certificate-display { position: relative; display: flex; width: 100%; aspect-ratio: 1.414 / 1; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 12px solid white; outline: 2px solid var(--credential-primary); outline-offset: -22px; background: #fffefb; box-shadow: 0 18px 45px #22343a1c; text-align: center; }
.certificate-display::after { position: absolute; inset: 28px; content: ""; border: 1px solid var(--credential-accent); pointer-events: none; }
.certificate-display small { color: var(--credential-primary); font-family: var(--mono); font-size: 9px; }
.certificate-display p { margin: 8px 0; color: var(--muted); font-size: 11px; }
.certificate-display h2 { z-index: 1; max-width: 75%; margin: 3px 0 10px; color: var(--credential-primary); font-size: 36px; overflow-wrap: anywhere; }
.certificate-display h3 { z-index: 1; max-width: 80%; margin: 3px 0; color: var(--credential-primary); font-size: 22px; overflow-wrap: anywhere; }
.certificate-brand { position: absolute; top: 50px; right: 80px; left: 80px; z-index: 1; color: var(--credential-primary); font-size: 13px; font-weight: 700; }
.certificate-brand img { max-width: 100px; max-height: 42px; object-fit: contain; }
.certificate-foot { position: absolute; right: 55px; bottom: 48px; left: 55px; z-index: 1; color: var(--muted); font-family: var(--mono); font-size: 8px; }
.badge-display { display: grid; min-height: 560px; place-items: center; padding: 40px; border: 1px solid var(--line); background: #edf1ee; }
.badge-display img { width: min(100%, 480px); max-height: 520px; object-fit: contain; filter: drop-shadow(0 18px 20px #142b3230); }
.document-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.credential-record { padding: 12px 0; }
.credential-record h1 { margin-bottom: 18px; font-size: 44px; overflow-wrap: anywhere; }
.record-description { color: var(--muted); font-size: 17px; }
.record-facts { margin: 34px 0 0; border-top: 1px solid var(--line); }
.record-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.record-facts dt { color: var(--muted); font-size: 12px; }
.record-facts dd { margin: 0; font-weight: 600; }
.record-section { margin-top: 34px; }
.record-section h2 { margin-bottom: 10px; font-size: 20px; }
.record-section p { color: var(--muted); white-space: pre-line; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.skill-list li { padding: 5px 9px; border: 1px solid #b8c8c5; border-radius: 3px; background: white; font-size: 12px; }
.evidence-list { margin: 0; padding: 0; list-style: none; }
.evidence-list li { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--line); }
.evidence-list span { color: var(--muted); font-size: 12px; }
.revocation-notice { display: flex; flex-direction: column; gap: 5px; margin: 24px 0; padding: 15px; border-left: 4px solid var(--danger); background: var(--soft-red); color: #7d1d2d; }
.verification-proof { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.verification-proof img { width: 110px; background: white; }
.verification-proof div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 5px; }
.verification-proof code { width: 100%; color: var(--muted); font-size: 10px; }

.status-page { max-width: 720px; margin: 90px auto; text-align: center; }
.status-page h1 { font-size: 45px; }
.status-page p { margin-bottom: 28px; color: var(--muted); }

.auth-body { background: var(--primary); }
.auth-body::before { opacity: .12; background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); }
.auth-shell { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, .8fr) minmax(500px, 1.2fr); }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 70px max(50px, 8vw); background: var(--paper); }
.auth-wordmark { margin-bottom: 70px; align-self: flex-start; }
.auth-panel h1 { max-width: 520px; margin-bottom: 18px; font-size: 48px; }
.auth-actions { display: grid; max-width: 470px; gap: 10px; margin-top: 30px; }
.auth-provider { display: grid; width: 100%; min-height: 52px; grid-template-columns: 34px 1fr; align-items: center; padding: 8px 14px; border: 1px solid #9eaaa7; border-radius: 4px; background: white; color: var(--ink); cursor: pointer; text-align: left; }
.provider-mark { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-family: var(--serif); font-weight: 700; }
.auth-note { max-width: 470px; margin-top: 24px; color: var(--muted); font-size: 11px; }
.development-login { display: grid; max-width: 470px; gap: 8px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.development-login > span { color: var(--accent-dark); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.development-login small { color: var(--muted); font-size: 10px; }
.development-provider { border-color: #c6a54a; background: var(--soft-gold); }
.auth-scene { display: grid; place-items: center; padding: 70px; overflow: hidden; background: #0d2d37; }
.auth-certificate { position: relative; display: flex; width: min(660px, 100%); aspect-ratio: 1.414 / 1; flex-direction: column; justify-content: center; padding: 70px; border: 18px solid white; outline: 1px solid var(--accent); outline-offset: -34px; background: #fffef9; box-shadow: 38px 38px 0 #08232c; transform: rotate(-3deg); }
.auth-certificate::after { position: absolute; right: 55px; bottom: 45px; width: 70px; height: 70px; content: "S"; border: 1px solid var(--accent-dark); border-radius: 50%; color: var(--accent-dark); font-family: var(--serif); font-size: 38px; line-height: 70px; text-align: center; }
.certificate-kicker, .certificate-meta { color: var(--muted); font-family: var(--mono); font-size: 9px; }
.auth-certificate strong { margin: 22px 0; color: var(--primary); font-family: var(--serif); font-size: 45px; line-height: .98; }
.certificate-rule { width: 120px; height: 4px; margin-bottom: 34px; background: var(--accent); }
.empty-state.compact { max-width: 470px; margin-top: 28px; padding: 16px; border: 1px solid var(--line); background: white; }
.empty-state.compact span { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.alert { max-width: 470px; margin: 20px 0 0; padding: 12px; border: 1px solid #dda6af; background: var(--soft-red); color: #842032; }

@media (max-width: 980px) {
  .verifier-stage { grid-template-columns: 1fr; gap: 20px; padding: 60px 0; }
  .registry-specimen { width: 360px; justify-self: center; }
  .verification-layout { grid-template-columns: 1fr; }
  .credential-visual-column { position: static; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-scene { display: none; }
}

@media (max-width: 680px) {
  .header-inner, .footer-inner, .page-frame, .flash span { width: min(100% - 24px, 1240px); }
  .header-inner { min-height: 58px; gap: 14px; }
  .primary-nav { gap: 12px; overflow-x: auto; white-space: nowrap; }
  .primary-nav a { font-size: 12px; }
  .account-name { display: none; }
  .account-menu-trigger { max-width: none; grid-template-columns: 28px 16px; }
  .page-frame { padding: 28px 0 56px; }
  .verifier-stage { min-height: 0; padding: 34px 0 54px; }
  .verifier-copy h1 { font-size: 45px; }
  .lede { font-size: 16px; }
  .input-command { grid-template-columns: 1fr; gap: 8px; }
  .input-command input, .input-command .button { border: 1px solid #98a6a3; border-radius: 4px; }
  .registry-specimen { width: min(320px, calc(100% - 12px)); height: 250px; aspect-ratio: auto; box-shadow: 8px 8px 0 var(--accent); }
  .registry-specimen::before { inset: 12px; }
  .specimen-index { top: 24px; left: 26px; }
  .specimen-seal { top: 38px; right: 28px; width: 54px; height: 54px; }
  .specimen-seal span { font-size: 28px; }
  .specimen-lines { top: 88px; left: 27px; width: 110px; gap: 7px; }
  .registry-specimen strong { bottom: 48px; left: 27px; font-size: 29px; }
  .specimen-status { right: 27px; bottom: 22px; }
  .registry-band { grid-template-columns: 1fr 1fr; }
  .registry-band span { border-bottom: 1px solid var(--line); }
  .registry-band span:last-child { grid-column: 1 / -1; }
  .verification-banner { align-items: flex-start; flex-direction: column; }
  .verification-banner div { align-items: flex-start; flex-wrap: wrap; }
  .certificate-display h2 { font-size: 25px; }
  .certificate-display h3 { font-size: 16px; }
  .certificate-brand { top: 38px; }
  .badge-display { min-height: 380px; padding: 20px; }
  .credential-record h1 { font-size: 36px; }
  .record-facts div { grid-template-columns: 95px 1fr; }
  .verification-proof { grid-template-columns: 80px minmax(0, 1fr); }
  .verification-proof img { width: 80px; }
  .auth-panel { min-height: 100vh; padding: 40px 24px; }
  .auth-wordmark { margin-bottom: 55px; }
  .auth-panel h1 { font-size: 39px; }
  .status-page h1 { font-size: 36px; }
}

@media print {
  .site-header, .site-footer, .document-actions, .verification-banner { display: none; }
  .page-frame { width: 100%; padding: 0; }
  body::before { display: none; }
}

/* Workspace */
.workspace-heading { display: flex; min-height: 98px; align-items: center; justify-content: space-between; gap: 28px; }
.workspace-heading > div:first-child { min-width: 0; flex: 1 1 auto; }
.workspace-heading h1 { margin: 0; font-size: 42px; overflow-wrap: anywhere; }
.heading-actions { --workspace-control-height: 44px; display: flex; min-width: 0; flex: 0 0 auto; align-items: flex-end; justify-content: flex-end; flex-wrap: nowrap; gap: 12px; }
.heading-actions > .button { height: var(--workspace-control-height); min-height: var(--workspace-control-height); padding-block: 0; line-height: 1; }
.heading-actions > .button:hover { transform: none; }
.organization-switcher { display: grid; min-width: 0; grid-template-columns: minmax(220px, 310px) 44px; align-items: end; gap: 8px; }
.organization-switcher-field { display: grid; min-width: 0; gap: 5px; }
.organization-switcher label { color: var(--muted); font-size: 10px; font-weight: 700; line-height: 1; }
.organization-switcher select { width: 100%; height: var(--workspace-control-height); min-width: 0; padding: 0 38px 0 13px; overflow: hidden; border: 1px solid #9daba7; border-radius: 4px; background-color: white; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 5px 16px #2448420d, inset 0 1px #ffffff; outline: 0; }
.organization-switcher select:hover { border-color: #718984; }
.organization-switcher select:focus { border-color: var(--primary-bright); box-shadow: 0 0 0 3px #176b731c; }
.organization-switcher-submit { display: grid; width: var(--workspace-control-height); height: var(--workspace-control-height); place-items: center; padding: 0; border: 1px solid var(--primary); border-radius: 4px; background: var(--primary); color: white; cursor: pointer; box-shadow: 0 6px 16px #123b4a29; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.organization-switcher-icon { display: block; width: 19px; height: 19px; }
.organization-switcher-submit:hover { border-color: var(--primary-bright); background: var(--primary-bright); }
.organization-switcher-submit:focus-visible { outline: 3px solid #176b7330; outline-offset: 2px; }
.workspace-nav { display: flex; gap: 4px; overflow-x: auto; margin: 16px 0 34px; padding-bottom: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.workspace-nav a { padding: 8px 12px; color: var(--muted); font-size: 13px; text-decoration: none; }
.workspace-nav a:hover { background: white; color: var(--ink); }
.metric-strip { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); background: white; }
.metric-strip div { display: flex; min-height: 116px; flex-direction: column; justify-content: space-between; padding: 18px; border-right: 1px solid var(--line); }
.metric-strip div:last-child { border-right: 0; }
.metric-strip span { color: var(--muted); font-size: 12px; }
.metric-strip strong { font-family: var(--serif); font-size: 35px; font-weight: 500; }
.data-section { margin-top: 42px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.section-heading h2 { margin-bottom: 4px; font-size: 24px; }
.section-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.table-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line); background: white; }
.data-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13px; }
.data-table th { padding: 11px 14px; border-bottom: 1px solid var(--line); background: #edf1ee; color: var(--muted); font-size: 11px; font-weight: 650; text-align: left; text-transform: uppercase; }
.data-table td { padding: 13px 14px; border-bottom: 1px solid #e8ebe9; vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: #f8faf8; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { max-width: 260px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; }
.state-label, .role-label { display: inline-block; padding: 3px 7px; border: 1px solid var(--line); border-radius: 3px; background: #f5f7f5; font-size: 10px; text-transform: uppercase; }
.state-label.active { border-color: #a4cbb7; background: #eaf6ef; color: var(--success); }
.state-label.revoked { border-color: #deb0b8; background: var(--soft-red); color: var(--danger); }
.empty-state { display: flex; min-height: 130px; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #aeb9b6; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); font-family: var(--serif); font-size: 20px; }
.empty-workspace { display: grid; min-height: 560px; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: 80px; }
.empty-workspace h1 { margin-bottom: 20px; font-size: 55px; }
.empty-workspace p:not(.eyebrow) { max-width: 580px; margin-bottom: 28px; color: var(--muted); }
.empty-workspace-index { display: flex; min-height: 240px; flex-direction: column; justify-content: center; padding: 32px; border-left: 5px solid var(--accent); background: var(--primary); color: white; }
.empty-workspace-index strong { font-family: var(--serif); font-size: 60px; }
.empty-workspace-index span { color: #c3d5d9; }
.empty-workspace-index a { margin-top: 24px; color: var(--accent); }
.empty-workspace.regular-user .empty-workspace-index { border-left-color: #69b6a0; background: #275661; }
.protected-role { display: block; margin-top: 5px; color: var(--accent-dark); font-size: 9px; }

.form-heading { max-width: 740px; margin: 30px auto 32px; }
.form-heading h1 { margin-bottom: 14px; font-size: 45px; }
.form-heading p:last-child { color: var(--muted); }
.form-surface { padding: 32px; border: 1px solid var(--line); background: white; }
.narrow-form { max-width: 740px; margin: 0 auto; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.span-all { grid-column: 1 / -1; }
.field { min-width: 0; }
.field > label { display: block; margin-bottom: 6px; color: #3f4c51; font-size: 12px; font-weight: 650; }
.field input:not([type="checkbox"]):not([type="color"]), .field select, .field textarea, .inline-form select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #aab5b2; border-radius: 3px; background: white; color: var(--ink); outline: 0; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary-bright); box-shadow: 0 0 0 2px #176b7320; }
.field > span { display: block; margin-top: 4px; color: var(--danger); font-size: 11px; }
.field > small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.color-field > div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; }
.color-field input[type="color"] { width: 48px; height: 42px; padding: 3px; border: 1px solid #aab5b2; background: white; }
.upload-row { display: flex; align-items: center; gap: 18px; }
.upload-row img { width: 100px; height: 64px; padding: 5px; border: 1px solid var(--line); object-fit: contain; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.validation-summary { color: var(--danger); font-size: 12px; }
.validation-summary ul { margin: 0 0 12px; }
.input-validation-error { border-color: var(--danger) !important; }
.split-heading { display: grid; grid-template-columns: 1fr; }
.invite-form { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; align-items: end; gap: 10px; margin-bottom: 22px; padding: 18px; border: 1px solid var(--line); background: white; }
.inline-form { display: flex; align-items: center; gap: 8px; }
.inline-form select { width: 150px; min-height: 34px; padding: 4px 7px; }
.danger-text { color: var(--danger); }

@media (max-width: 820px) {
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .organization-switcher { width: 100%; grid-template-columns: minmax(0, 1fr) 44px; }
  .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-strip div { min-height: 95px; border-bottom: 1px solid var(--line); }
  .metric-strip div:nth-child(2n) { border-right: 0; }
  .metric-strip div:last-child { grid-column: 1 / -1; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-grid .span-all { grid-column: 1; }
  .invite-form { grid-template-columns: 1fr; }
  .empty-workspace { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 520px) {
  .workspace-heading h1, .form-heading h1 { font-size: 36px; }
  .form-surface { padding: 20px 16px; }
  .metric-strip strong { font-size: 28px; }
  .upload-row { align-items: flex-start; flex-direction: column; }
}

/* Templates */
.empty-state.tall { min-height: 300px; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.template-card { display: grid; min-width: 0; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: white; }
.template-card.archived { opacity: .66; }
.template-preview { display: grid; height: 235px; place-items: center; overflow: hidden; background: #e9eeeb; }
.template-preview > img { width: 100%; height: 100%; padding: 24px; object-fit: contain; }
.generated-badge { display: grid; width: 150px; height: 170px; place-items: center; clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); background: var(--template-primary); color: var(--template-accent); font-family: var(--serif); font-size: 56px; }
.mini-certificate { position: relative; display: flex; width: 82%; aspect-ratio: 1.414 / 1; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border: 8px solid white; outline: 2px solid var(--template-primary); outline-offset: -14px; background: #fffef9; color: var(--template-primary); text-align: center; }
.mini-certificate small { font-family: var(--mono); font-size: 7px; }
.mini-certificate strong { max-width: 80%; margin: 17px 0; overflow: hidden; font-family: var(--serif); font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.mini-certificate i { width: 70px; height: 3px; background: var(--template-accent); }
.template-card-body { padding: 18px; }
.template-meta, .template-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; }
.template-meta { font-family: var(--mono); }
.template-card h2 { margin: 14px 0 5px; font-family: var(--sans); font-size: 17px; overflow-wrap: anywhere; }
.template-card-body > p { min-height: 42px; color: var(--muted); font-size: 13px; }
.template-actions { display: flex; flex-wrap: wrap; gap: 13px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 12px; }
.template-actions form { margin: 0; }
.wide-heading { max-width: 1100px; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; align-items: start; gap: 34px; max-width: 1100px; margin: 0 auto; }
.template-form { display: grid; gap: 0; }
.form-section { display: grid; gap: 18px; padding: 0 0 28px; }
.form-section + .form-section { padding-top: 28px; border-top: 1px solid var(--line); }
.form-section h2 { margin: 0; font-size: 20px; }
.color-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.certificate-layout-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.certificate-field-editor, .badge-field-editor { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.certificate-field-row, .badge-field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr); align-items: end; gap: 16px; }
.certificate-field-row .field, .badge-field-row .field { margin: 0; }
.badge-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.badge-star-rank-control { display: grid; min-width: 0; gap: 8px; margin: 0; padding: 0; border: 0; }
.badge-star-rank-control legend { margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.badge-star-rank-segments { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--line); border-radius: 3px; }
.badge-star-rank-segments label { position: relative; min-width: 0; cursor: pointer; }
.badge-star-rank-segments label + label { border-left: 1px solid var(--line); }
.badge-star-rank-segments input { position: absolute; opacity: 0; pointer-events: none; }
.badge-star-rank-segments span { display: grid; min-height: 38px; place-items: center; padding: 6px 8px; background: #fbfcfa; color: var(--muted); font-size: 12px; font-weight: 700; }
.badge-star-rank-segments input:checked + span { background: var(--soft-blue); color: var(--primary); box-shadow: inset 0 -3px var(--primary-bright); }
.badge-star-rank-segments input:focus-visible + span { outline: 2px solid var(--primary-bright); outline-offset: -3px; }
.issuer-field-row { padding-top: 3px; }
.issuer-options { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.range-control.compact { align-self: end; padding-bottom: 3px; }
.layout-control-heading { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 16px; }
.layout-control-heading h3 { margin: 0; font-family: var(--sans); font-size: 14px; }
.range-control { display: grid; gap: 8px; min-width: 0; }
.range-control > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; }
.range-control output { min-width: 44px; color: var(--primary); font-family: var(--mono); text-align: right; }
.range-control input[type="range"] { width: 100%; accent-color: var(--primary); }
.current-badge { display: block; width: 110px; height: 110px; margin-bottom: 12px; object-fit: contain; }
.template-live-preview { position: sticky; top: 24px; }
.template-live-preview > p { margin-top: 14px; color: var(--muted); font-size: 11px; }
.large-generated-badge { display: grid; min-height: 500px; place-items: center; background: #e9eeeb; }
.large-generated-badge span { display: grid; width: 260px; height: 295px; place-items: center; clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%); background: var(--template-primary); color: var(--template-accent); font-family: var(--serif); font-size: 96px; }
.large-generated-badge img { width: 85%; max-height: 470px; object-fit: contain; }

@media (max-width: 1040px) {
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-layout { grid-template-columns: 1fr; }
  .template-live-preview { position: static; order: -1; max-width: 600px; }
}

@media (max-width: 620px) {
  .template-grid { grid-template-columns: 1fr; }
  .template-preview { height: 215px; }
  .color-pair { grid-template-columns: 1fr; }
  .large-generated-badge { min-height: 360px; }
  .large-generated-badge span { width: 190px; height: 215px; font-size: 70px; }
}

/* Credential administration */
.filter-bar { display: grid; grid-template-columns: minmax(260px, 1fr) 180px auto; align-items: end; gap: 10px; margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); background: white; }
.credential-table code { font-size: 10px; }
.result-note { margin-top: 8px; color: var(--muted); font-size: 10px; text-align: right; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.narrow-form > .field + .field, .narrow-form > .field + .form-row, .narrow-form > .form-row + .field { margin-top: 20px; }
.issuance-notice { display: flex; flex-direction: column; gap: 3px; margin-top: 24px; padding: 14px; border-left: 4px solid var(--accent); background: var(--soft-gold); }
.issuance-notice span { color: #6d581e; font-size: 11px; }
.admin-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; align-items: start; gap: 32px; }
.credential-admin-record { padding: 28px; border: 1px solid var(--line); background: white; }
.record-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.record-title-row h2 { margin: 14px 0 8px; font-size: 29px; }
.record-title-row p { margin: 0; color: var(--muted); }
.record-title-row code { max-width: 180px; padding: 8px; background: #edf1ee; color: var(--muted); font-size: 10px; }
.admin-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.admin-facts div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.admin-facts div:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.admin-facts div:nth-child(even) { padding-left: 18px; }
.admin-facts dt { color: var(--muted); font-size: 10px; }
.admin-facts dd { margin: 4px 0 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.admin-side-panel { display: grid; gap: 18px; }
.admin-side-panel > section { padding: 20px; border: 1px solid var(--line); background: white; }
.admin-side-panel h2 { margin-bottom: 16px; font-size: 19px; }
.muted-copy { color: var(--muted); font-size: 12px; }
.admin-evidence { margin: 0 0 18px; padding: 0; list-style: none; }
.admin-evidence li { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.admin-evidence li div { display: flex; min-width: 0; flex-direction: column; }
.admin-evidence span { color: var(--muted); font-size: 10px; }
.compact-form { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.compact-form .field input { min-height: 36px; }
.event-timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.event-timeline li { display: grid; grid-template-columns: 14px 1fr; gap: 8px; min-height: 48px; }
.event-timeline i { position: relative; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: var(--primary-bright); }
.event-timeline i::after { position: absolute; top: 9px; bottom: -38px; left: 3px; width: 1px; content: ""; background: var(--line); }
.event-timeline li:last-child i::after { display: none; }
.event-timeline div { display: flex; flex-direction: column; }
.event-timeline strong { font-size: 12px; }
.event-timeline span { color: var(--muted); font-size: 9px; }
.danger-panel { border-color: #e1aab3 !important; background: var(--soft-red) !important; }
.danger-panel p { color: #7b3541; font-size: 11px; }
.organization-delete-panel { display: grid; gap: 13px; margin-top: 24px; padding: 22px; border: 1px solid #e1aab3; }
.organization-delete-panel h2, .organization-delete-panel p { margin: 0; }
.organization-delete-panel h2 { font-size: 21px; line-height: 1.4; }
.platform-organizations { margin-top: 46px; }
.platform-organizations .section-heading { margin-bottom: 15px; }
.organization-manager-list { display: grid; gap: 8px; min-width: 230px; }
.organization-manager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.organization-manager:last-child { padding-bottom: 0; border-bottom: 0; }
.organization-manager span { display: flex; min-width: 0; flex-direction: column; }
.organization-manager small { color: var(--muted); overflow-wrap: anywhere; }
.manager-assignment-form { display: grid; min-width: 250px; grid-template-columns: minmax(145px, 1fr) auto auto; gap: 7px; align-items: center; }
.manager-assignment-form select { min-width: 0; }
.manager-assignment-form select[name="role"] { min-width: 110px; }
.organization-usage, .organization-delete-action { min-width: 78px; }

@media (max-width: 960px) {
  .admin-detail-layout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .filter-bar { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .admin-facts { grid-template-columns: 1fr; }
  .admin-facts div:nth-child(n) { padding: 14px 0; border-right: 0; }
  .record-title-row { flex-direction: column; }
}

/* Batch, wallet, and integrations */
.batch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 24px; max-width: 940px; margin: 0 auto; }
.batch-layout .form-surface { display: grid; gap: 22px; }
.batch-upload { padding: 28px; border: 1px dashed #9fadaa; background: #f8faf8; }
.format-reference { padding: 24px; border-left: 5px solid var(--accent); background: var(--primary); color: white; }
.format-reference h2 { font-size: 23px; }
.format-reference .eyebrow { color: var(--accent); }
.format-reference dl { margin: 20px 0; }
.format-reference dl div { padding: 10px 0; border-bottom: 1px solid #ffffff26; }
.format-reference dt { font-family: var(--mono); font-size: 11px; }
.format-reference dd { margin: 2px 0 0; color: #c8d7da; font-size: 11px; }
.batch-summary { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border: 1px solid var(--line); background: white; }
.batch-summary div { display: flex; min-height: 120px; flex-direction: column; justify-content: space-between; padding: 18px; border-right: 1px solid var(--line); }
.batch-summary div:last-child { border-right: 0; }
.batch-summary span { color: var(--muted); font-size: 11px; }
.batch-summary strong { font-family: var(--serif); font-size: 36px; }
.batch-summary .success strong { color: var(--success); }
.batch-summary .failure strong { color: var(--danger); }
.batch-summary .status-text { font-family: var(--sans); font-size: 18px; overflow-wrap: anywhere; }
.wallet-showcase-heading { align-items: end; }
.wallet-showcase-tools { display: grid; min-width: min(100%, 330px); gap: 12px; }
.wallet-collection-counts { display: grid; min-width: min(100%, 330px); grid-template-columns: repeat(3, 1fr); margin: 0; border-block: 1px solid var(--line); }
.wallet-collection-counts div { display: flex; min-width: 0; flex-direction: column; padding: 10px 16px; border-right: 1px solid var(--line); }
.wallet-collection-counts div:last-child { border-right: 0; }
.wallet-collection-counts dt { color: var(--muted); font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
.wallet-collection-counts dd { margin: 2px 0 0; font-family: var(--serif); font-size: 24px; line-height: 1; }
.wallet-motion-control { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-motion-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.wallet-motion-options { display: grid; grid-template-columns: repeat(2, 1fr); padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: #e9efec; }
.wallet-motion-options button { min-width: 55px; min-height: 30px; padding: 4px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; font: 700 10px/1 var(--sans); }
.wallet-motion-options button:hover { color: var(--primary); }
.wallet-motion-options button:focus-visible { outline: 2px solid var(--primary-bright); outline-offset: 1px; }
.wallet-motion-options button[aria-pressed="true"] { background: white; color: var(--primary); box-shadow: 0 1px 5px #153a401f; }
.wallet-management-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 14px 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wallet-view-tabs { display: flex; gap: 4px; }
.wallet-view-tabs a { padding: 7px 10px; color: var(--muted); font-size: 12px; text-decoration: none; }
.wallet-view-tabs a.active { background: white; color: var(--ink); box-shadow: inset 0 -2px var(--primary-bright); }
.wallet-view-tabs span { margin-left: 3px; font-family: var(--mono); font-size: 9px; }
.wallet-sort-form { display: flex; align-items: center; gap: 8px; }
.wallet-management-actions { display: flex; align-items: center; gap: 12px; }
.wallet-sort-form label { color: var(--muted); font-size: 10px; font-weight: 700; }
.wallet-sort-form select { min-height: 34px; padding: 5px 28px 5px 9px; border: 1px solid #aab5b2; border-radius: 3px; background: white; color: var(--ink); font-size: 12px; }
.imported-badge-form { display: grid; gap: 22px; }
.import-trust-note { padding: 16px; border-left: 4px solid var(--accent-dark); background: var(--soft-gold); }
.import-trust-note p { margin: 5px 0 0; color: #66552e; font-size: 11px; }
.external-badge-section { margin-top: 46px; }
.external-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.external-badge-card { display: grid; min-width: 0; grid-template-rows: 190px 1fr auto; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: white; box-shadow: 0 10px 24px #29484214; }
.external-badge-art { display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(145deg, #e4efec, #fff6d8); }
.external-badge-art img { width: 78%; height: 78%; object-fit: contain; }
.external-badge-art > span { display: grid; width: 92px; height: 92px; place-items: center; border: 2px solid var(--primary); border-radius: 50%; color: var(--primary); font-family: var(--serif); font-size: 30px; }
.external-badge-body { padding: 17px; }
.external-badge-body h3 { margin: 12px 0 7px; font-family: var(--sans); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.external-badge-body > p { color: var(--muted); font-size: 11px; }
.external-trust-label { color: var(--warning); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.external-badge-actions { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 17px; border-top: 1px solid var(--line); font-size: 11px; }
.credential-showcase { position: relative; isolation: isolate; overflow: hidden; padding: 28px; border: 1px solid #9db2ae; border-radius: 6px; background: linear-gradient(145deg, #d7e5e3 0%, #f4f6f1 48%, #eadfce 100%); box-shadow: 0 24px 58px #25494a24, inset 0 1px #ffffff, inset 0 -1px #718d8970; }
.credential-showcase::before { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(112deg, transparent 0 11%, #ffffffa3 11.4% 15.5%, transparent 15.9% 56%, #ffffff52 56.4% 58.2%, transparent 58.6%), repeating-linear-gradient(90deg, transparent 0 119px, #6f8e8912 120px); pointer-events: none; }
.credential-showcase::after { position: absolute; top: 11px; right: 14px; left: 14px; height: 8px; content: ""; border: 1px solid #fff9; border-radius: 2px; background: linear-gradient(180deg, #fffdf3, #cbbd9d 45%, #9b8f76 52%, #eee4cb); box-shadow: 0 4px 10px #435c5824; pointer-events: none; }
.credential-showcase-cabinet { position: relative; z-index: 1; padding: 24px 20px 22px; border: solid #b7a983; border-width: 8px 7px 13px; border-radius: 3px; background: linear-gradient(135deg, #ffffff63, #dbeae773 52%, #fffaf080); box-shadow: inset 0 0 0 1px #ffffffd6, inset 0 0 42px #4f73721c, 0 15px 32px #35515028; backdrop-filter: blur(14px) saturate(115%); }
.credential-showcase-cabinet::before { position: absolute; inset: 4px; z-index: 2; content: ""; border: 1px solid #ffffff8f; background: linear-gradient(116deg, transparent 0 9%, #ffffff4f 9.4% 13%, transparent 13.4% 71%, #ffffff26 71.4% 73%, transparent 73.4%); pointer-events: none; }
.credential-showcase-cabinet::after { position: absolute; right: -9px; bottom: -16px; left: -9px; height: 14px; content: ""; border: 1px solid #9f9273; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, #f3ead4, #b9aa86 48%, #8e836c 52%, #d8caa9); box-shadow: 0 9px 16px #34514d30; pointer-events: none; }
.wallet-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 941px) {
  .wallet-grid:has(> .wallet-item:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .wallet-grid:has(> .wallet-item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 18px; }
}
.wallet-item { position: relative; display: grid; min-width: 0; grid-template-rows: 280px 1fr auto; isolation: isolate; overflow: hidden; border: 1px solid #ffffffd9; border-radius: 4px; background: linear-gradient(160deg, #ffffffc9, #eaf2efb8); box-shadow: 0 14px 30px #31504e24, inset 0 0 0 1px #75948c1c; backdrop-filter: blur(9px) saturate(112%); animation: wallet-case-arrive .55s ease both; animation-delay: calc(var(--showcase-order) * 70ms); }
.wallet-item.is-dragging { opacity: .58; outline: 2px solid var(--primary-bright); outline-offset: 2px; }
.wallet-item-controls { position: absolute; top: 8px; right: 8px; left: 8px; z-index: 8; display: flex; min-height: 32px; justify-content: flex-end; gap: 5px; pointer-events: none; }
.wallet-item-controls > * { pointer-events: auto; }
.wallet-item-controls form { display: flex; margin: 0; }
.wallet-icon-control, .wallet-item-menu > summary { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid #9eb0ac; border-radius: 3px; background: #ffffffdf; color: var(--ink); cursor: pointer; font: 700 15px/1 var(--sans); box-shadow: 0 3px 8px #29443f1f; backdrop-filter: blur(6px); }
.wallet-icon-control:hover, .wallet-icon-control.active, .wallet-item-menu > summary:hover { border-color: var(--primary-bright); color: var(--primary-bright); }
.wallet-drag-handle { cursor: grab; }
.wallet-drag-handle:active { cursor: grabbing; }
.wallet-item-menu { position: relative; }
.wallet-item-menu > summary { list-style: none; }
.wallet-item-menu > summary::-webkit-details-marker { display: none; }
.wallet-item-menu > div { position: absolute; top: 37px; right: 0; display: grid; width: 130px; overflow: hidden; border: 1px solid #aab5b2; border-radius: 3px; background: white; box-shadow: 0 12px 28px #18353d2b; }
.wallet-item-menu button { width: 100%; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: white; color: var(--ink); cursor: pointer; font-size: 11px; text-align: left; }
.wallet-item-menu form:last-child button { border-bottom: 0; }
.wallet-item-menu button:hover { background: #f2f6f3; }
.wallet-item::before { position: absolute; top: 0; left: -46%; z-index: 4; width: 32%; height: 280px; content: ""; background: linear-gradient(105deg, transparent, #ffffffb8 48%, #ffffff24 66%, transparent); opacity: 0; transform: skewX(-13deg); pointer-events: none; animation: wallet-glass-glint 11.8s ease-in-out infinite; animation-delay: calc(var(--float-delay) - 2s); }
.wallet-art { position: relative; display: grid; min-width: 0; place-items: center; overflow: hidden; border-bottom: 1px solid #95aaa36b; background: linear-gradient(118deg, #ffffff91 0 17%, transparent 17.5% 45%), linear-gradient(155deg, color-mix(in srgb, var(--credential-accent), #edf4f1 91%), #e6efec 57%, color-mix(in srgb, var(--credential-primary), #f6efe3 91%)); perspective: 900px; }
.wallet-art::before { position: absolute; top: 3%; bottom: 14%; left: 50%; width: 76%; clip-path: polygon(37% 0, 63% 0, 100% 100%, 0 100%); content: ""; background: linear-gradient(180deg, #ffffffdf, color-mix(in srgb, var(--credential-accent), transparent 64%) 55%, color-mix(in srgb, var(--credential-primary), transparent 78%)); filter: blur(18px); opacity: .8; transform: translateX(-50%); animation: wallet-object-glow 6.8s ease-in-out infinite alternate; }
.wallet-art::after { position: absolute; right: 7%; bottom: 21px; left: 7%; height: 9px; content: ""; border: 1px solid #ffffffd1; border-radius: 50%; background: linear-gradient(180deg, #fbfffdeb, #93aaa2b8); box-shadow: 0 -15px 34px color-mix(in srgb, var(--credential-accent), transparent 38%), 0 8px 14px #526d672e; }
.showcase-object { position: relative; z-index: 2; display: grid; width: 88%; height: 82%; place-items: center; animation: wallet-object-float 9.8s cubic-bezier(.45, 0, .55, 1) infinite; animation-delay: var(--float-delay); will-change: transform; }
.wallet-art.badge .showcase-object { width: 72%; height: 76%; }
.showcase-object > img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 11px #304b4742) drop-shadow(0 0 18px color-mix(in srgb, var(--credential-accent), transparent 36%)); }
.wallet-art.badge .showcase-object > img { width: auto; min-width: 0; height: 100%; min-height: 0; max-width: 100%; max-height: 100%; }
.wallet-art.certificate .showcase-object { width: 94%; height: auto; aspect-ratio: 1.414 / 1; }
.wallet-art.certificate .preset-certificate-live { width: 100%; max-width: none; box-shadow: 0 10px 16px #304b4747, 0 0 22px color-mix(in srgb, var(--credential-accent), transparent 40%); }
.showcase-plaque { position: absolute; right: 12px; bottom: 9px; z-index: 3; padding: 2px 5px; border: 1px solid #ffffffad; border-radius: 2px; background: #f9fcf7a8; color: #506a65; font-family: var(--mono); font-size: 7px; box-shadow: 0 2px 8px #425c5721; backdrop-filter: blur(5px); }
.wallet-body { position: relative; z-index: 1; padding: 18px; background: #fcfefbb8; }
.wallet-body h2 { margin: 13px 0 4px; font-family: var(--sans); font-size: 17px; line-height: 1.28; overflow-wrap: anywhere; }
.wallet-body > p { color: var(--muted); font-size: 12px; }
.wallet-actions { position: relative; z-index: 1; display: flex; gap: 15px; padding: 12px 18px; border-top: 1px solid #8fa69f52; background: #e5efeb8f; font-size: 12px; }
.credential-display-case:is(.is-revoked,.is-expired) .showcase-object { opacity: .58; filter: grayscale(.65); }
.credential-display-case:hover .showcase-object, .credential-display-case:focus-within .showcase-object { animation-play-state: paused; }
@keyframes wallet-object-float { 0%,100% { transform: translate3d(0, calc(var(--float-distance) * -.3), 0) rotateZ(-.22deg); } 50% { transform: translate3d(0, var(--float-distance), 16px) rotateZ(.22deg); } }
@keyframes wallet-object-glow { from { opacity: .55; filter: blur(20px) saturate(.95); } to { opacity: .9; filter: blur(15px) saturate(1.25); } }
@keyframes wallet-glass-glint { 0%,58%,100% { left: -46%; opacity: 0; } 64% { opacity: .55; } 78% { left: 122%; opacity: 0; } }
@keyframes wallet-case-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.claim-page { max-width: 620px; margin: 70px auto; text-align: center; }
.account-settings-page { max-width: 700px; margin: 0 auto; }
.account-settings-page h1 { line-height: 1.25; }
.account-settings-page .form-surface { margin-top: 28px; }
.account-settings-form { display: grid; gap: 22px; }
.account-settings-page .form-actions { flex-wrap: wrap; }
.account-onboarding-heading { position: relative; align-items: flex-start; padding: 8px 58px 0 0; }
.account-onboarding-heading .muted-copy { max-width: 590px; margin: 14px 0 0; color: var(--muted); }
.account-onboarding-close { position: absolute; top: 0; right: 0; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--muted); font-size: 25px; line-height: 1; text-decoration: none; }
.account-onboarding-close:hover { border-color: #aab5b2; color: var(--ink); text-decoration: none; }
.account-email { padding: 14px 16px; border-left: 4px solid var(--primary-bright); background: var(--soft-blue); }
.account-email span { display: block; color: var(--muted); font-size: 10px; }
.account-email strong { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.account-email-management { display: grid; gap: 12px; }
.account-email-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.account-email-row.primary { padding-top: 0; }
.account-email-row > span:first-child { min-width: 0; }
.account-email-row strong, .account-email-row small { display: block; overflow-wrap: anywhere; }
.account-email-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.secondary-email-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; padding-top: 8px; }
.account-settings-section { display: grid; gap: 20px; margin-top: 8px; padding-top: 30px; border-top: 1px solid var(--line); }
.account-settings-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.account-settings-section-heading h2 { margin: 0; font-size: 25px; }
.profile-public-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-left: 4px solid var(--accent-dark); background: var(--soft-gold); cursor: pointer; }
.profile-public-toggle input { margin-top: 4px; }
.profile-public-toggle span, .profile-public-toggle small { display: block; }
.profile-public-toggle strong { font-size: 13px; }
.profile-public-toggle small { margin-top: 4px; color: #66552e; font-size: 10px; }
.profile-avatar-editor { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 18px; }
.profile-avatar-preview { display: grid; width: 92px; height: 92px; place-items: center; overflow: hidden; border: 1px solid #91a5a0; border-radius: 50%; background: var(--primary); color: white; font-family: var(--serif); font-size: 38px; }
.profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.inline-checkbox { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--muted); font-size: 11px; }
.profile-slug-input { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.profile-slug-input > span { display: flex; min-height: 42px; align-items: center; padding: 0 10px; border: 1px solid #aab5b2; border-right: 0; border-radius: 3px 0 0 3px; background: #edf1ee; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.profile-slug-input input { border-radius: 0 3px 3px 0 !important; }
.public-profile-page { max-width: 1040px; margin: 0 auto; }
.public-profile-hero { display: grid; min-height: 310px; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 34px; padding: 42px; border-top: 6px solid var(--accent); background: var(--primary); color: white; box-shadow: 0 20px 50px #17394126; }
.public-profile-avatar { display: grid; width: 150px; height: 150px; place-items: center; overflow: hidden; border: 1px solid #ffffff87; border-radius: 50%; background: #e4eeeb; color: var(--primary); font-family: var(--serif); font-size: 64px; box-shadow: 0 0 0 9px #ffffff14; }
.public-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.public-profile-identity .eyebrow { color: var(--accent); }
.public-profile-identity h1 { margin-bottom: 10px; font-size: 52px; overflow-wrap: anywhere; }
.public-profile-headline { margin-bottom: 17px; color: #d7e5e5; font-size: 18px; }
.public-profile-bio { max-width: 620px; margin: 0; color: #bdced1; white-space: pre-line; }
.public-profile-hero > .button { align-self: start; border-color: #ffffff75; background: transparent; color: white; }
.public-profile-goal { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 34px; padding: 28px 42px; border-bottom: 1px solid #d7c99f; background: var(--soft-gold); }
.public-profile-goal h2 { margin: 0; font-size: 21px; }
.public-profile-goal p { margin: 0; color: #66552e; white-space: pre-line; }
.public-profile-section { margin-top: 50px; }
.public-profile-count { font-family: var(--serif); font-size: 34px; font-weight: 500; }
.public-skill-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 1px; list-style: none; background: var(--line); }
.public-skill-list li { display: flex; min-height: 68px; flex-direction: column; justify-content: space-between; padding: 13px 15px; background: white; }
.public-skill-list span { font-weight: 650; overflow-wrap: anywhere; }
.public-skill-list small { color: var(--muted); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.public-credential-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.public-credential-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: white; box-shadow: 0 10px 24px #29484214; }
.public-credential-art { display: grid; height: 210px; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: linear-gradient(155deg, color-mix(in srgb, var(--credential-accent), white 91%), color-mix(in srgb, var(--credential-primary), white 93%)); }
.public-credential-art.badge img { width: 72%; height: 78%; object-fit: contain; filter: drop-shadow(0 8px 10px #29494235); }
.public-credential-art.certificate .preset-certificate-live { width: 93%; max-width: none; box-shadow: 0 7px 14px #29494228; }
.public-credential-body { padding: 17px; }
.public-credential-body h3 { margin: 12px 0 16px; font-family: var(--sans); font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
.public-credential-body h3 a { color: var(--ink); text-decoration: none; }
.public-credential-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.profile-featured-label { color: var(--accent-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
.claim-page h1 { font-size: 45px; }
.claim-page > p:not(.eyebrow) { margin-bottom: 28px; color: var(--muted); }
.claim-mark { display: grid; width: 90px; height: 90px; margin: 0 auto 30px; place-items: center; border: 2px solid var(--accent-dark); border-radius: 50%; color: var(--primary); font-family: var(--serif); font-size: 47px; }
.scope-selector { display: grid; gap: 9px; margin: 24px 0 0; padding: 18px; border: 1px solid var(--line); }
.scope-selector legend { padding: 0 7px; font-size: 12px; font-weight: 650; }
.scope-selector label { display: flex; gap: 10px; align-items: flex-start; }
.scope-selector label span { display: flex; flex-direction: column; font-size: 12px; }
.scope-selector p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.secret-page { max-width: 820px; margin: 50px auto; }
.secret-page h1 { font-size: 45px; }
.secret-page > p:not(.eyebrow) { color: var(--muted); }
.secret-value { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin: 30px 0; padding: 18px; border: 1px solid #bba45e; background: var(--soft-gold); }
.secret-value code { align-self: center; font-size: 12px; overflow-wrap: anywhere; }
.prose-page { max-width: 760px; margin: 40px auto; }
.prose-page h1 { margin-bottom: 30px; font-size: 48px; }
.prose-page h2 { margin-top: 34px; font-size: 22px; }
.prose-page p { color: var(--muted); }

/* About SIGNET */
.about-page-body .page-frame { width: 100%; padding: 0; }
.about-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.about-hero { overflow: hidden; background: var(--primary); color: white; }
.about-hero-inner { display: grid; min-height: 600px; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); align-items: center; gap: 80px; padding: 70px 0 78px; }
.about-hero-copy { min-width: 0; }
.about-hero-copy .eyebrow { color: var(--accent); }
.about-hero-copy h1 { max-width: 720px; margin-bottom: 24px; font-size: 60px; overflow-wrap: anywhere; }
.about-hero-copy .lede { max-width: 690px; color: #c8dadd; font-size: 19px; }
.about-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 38px; }
.about-text-link { color: white; font-size: 13px; font-weight: 650; text-decoration: none; }
.about-text-link:hover { color: var(--accent); }
.about-text-link span { margin-left: 6px; color: var(--accent); }
.about-record-visual { position: relative; width: min(100%, 390px); aspect-ratio: 4 / 5; justify-self: end; padding: 38px; border: 1px solid #d4c58c; outline: 1px solid #b58b2d; outline-offset: -18px; background: #fffef8; color: var(--ink); box-shadow: 20px 20px 0 var(--accent); transform: rotate(1.5deg); }
.about-record-index { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.about-record-seal { display: grid; width: 72px; height: 72px; place-items: center; margin: 70px 0 32px; border: 1px solid var(--accent-dark); border-radius: 50%; color: var(--accent-dark); font-family: var(--serif); font-size: 38px; }
.about-record-rule { width: 70px; height: 4px; margin-bottom: 20px; background: var(--primary-bright); }
.about-record-visual > strong { display: block; max-width: 240px; color: var(--primary); font-family: var(--serif); font-size: 40px; line-height: 1.05; overflow-wrap: anywhere; }
.about-record-lines { display: grid; width: 58%; gap: 9px; margin-top: 24px; }
.about-record-lines span { height: 1px; background: #b7c1bd; }
.about-record-lines span:nth-child(2) { width: 78%; }
.about-record-lines span:nth-child(3) { width: 48%; }
.about-record-status { position: absolute; right: 38px; bottom: 38px; display: flex; align-items: center; gap: 8px; color: var(--success); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.about-record-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.about-flow { border-bottom: 1px solid var(--line); background: white; }
.about-flow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; padding: 0; list-style: none; }
.about-flow li { display: grid; min-height: 142px; grid-template-columns: 34px minmax(0, 1fr); align-content: center; gap: 5px 12px; padding: 24px 26px; border-right: 1px solid var(--line); }
.about-flow li:first-child { border-left: 1px solid var(--line); }
.about-flow li > span { grid-row: 1 / 3; color: var(--accent-dark); font-family: var(--mono); font-size: 10px; }
.about-flow strong { font-family: var(--serif); font-size: 22px; }
.about-flow small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.about-origin { background: var(--paper); }
.about-origin-inner { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 100px; padding: 112px 0; border-bottom: 1px solid var(--line); }
.about-origin h2 { max-width: 420px; margin: 0; font-size: 44px; }
.about-origin-copy { max-width: 650px; }
.about-origin-copy p { color: var(--muted); font-size: 17px; }
.about-origin-copy p:last-child { margin-bottom: 0; }
.about-principles { padding: 110px 0 120px; background: var(--paper); }
.about-section-heading { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr); align-items: end; gap: 40px; margin-bottom: 46px; }
.about-section-heading p { margin: 0; }
.about-section-heading h2 { max-width: 700px; margin: 0; font-size: 44px; }
.about-principle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.about-principle { min-width: 0; min-height: 310px; padding: 30px 34px 38px; border-right: 1px solid var(--line); }
.about-principle:last-child { border-right: 0; }
.about-principle > span { color: var(--accent-dark); font-family: var(--mono); font-size: 10px; }
.about-principle h3 { margin: 48px 0 18px; font-size: 25px; }
.about-principle p { margin: 0; color: var(--muted); font-size: 14px; }
.about-belief { background: var(--soft-gold); }
.about-belief-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 70px; padding: 96px 0 104px; }
.about-belief-mark { color: var(--primary); font-family: var(--serif); font-size: 104px; font-weight: 700; line-height: .8; }
.about-belief .eyebrow { margin-bottom: 16px; }
.about-belief h2 { max-width: 790px; margin-bottom: 22px; font-size: 45px; }
.about-belief p:not(.eyebrow) { max-width: 780px; color: #655d46; font-size: 16px; }
.about-belief .button { margin-top: 18px; }

@media (max-width: 900px) {
  .about-hero-inner { min-height: 0; grid-template-columns: 1fr; gap: 62px; padding: 76px 0 88px; }
  .about-record-visual { width: 340px; justify-self: center; }
  .about-flow ol { grid-template-columns: 1fr 1fr; }
  .about-flow li:nth-child(2) { border-right: 1px solid var(--line); }
  .about-flow li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .about-origin-inner { gap: 54px; }
  .about-principle-grid { grid-template-columns: 1fr; }
  .about-principle { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .about-principle:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  .about-shell { width: min(100% - 28px, 1120px); }
  .about-hero-inner { gap: 52px; padding: 56px 0 66px; }
  .about-hero-copy h1 { font-size: 42px; }
  .about-hero-copy .lede { font-size: 16px; }
  .about-actions { align-items: stretch; flex-direction: column; }
  .about-actions .button { width: 100%; }
  .about-record-visual { width: min(300px, calc(100% - 18px)); padding: 31px; box-shadow: 10px 10px 0 var(--accent); }
  .about-record-seal { width: 58px; height: 58px; margin: 48px 0 26px; font-size: 30px; }
  .about-record-visual > strong { font-size: 31px; }
  .about-record-status { right: 30px; bottom: 30px; }
  .about-flow ol { grid-template-columns: 1fr; }
  .about-flow li, .about-flow li:first-child { min-height: 112px; border-right: 1px solid var(--line); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .about-flow li:first-child { border-top: 0; }
  .about-origin-inner { grid-template-columns: 1fr; gap: 34px; padding: 76px 0; }
  .about-origin h2, .about-section-heading h2, .about-belief h2 { font-size: 35px; }
  .about-origin-copy p { font-size: 15px; }
  .about-principles { padding: 74px 0 82px; }
  .about-section-heading { grid-template-columns: 1fr; gap: 12px; }
  .about-principle { padding: 28px 20px 32px; }
  .about-principle h3 { margin-top: 30px; }
  .about-belief-inner { grid-template-columns: 1fr; gap: 32px; padding: 72px 0 80px; }
  .about-belief-mark { font-size: 76px; }
}

@media (max-width: 940px) {
  .wallet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .external-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-credential-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-profile-hero { grid-template-columns: 120px minmax(0, 1fr); }
  .public-profile-avatar { width: 120px; height: 120px; }
  .public-profile-hero > .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .batch-layout { grid-template-columns: 1fr; }
  .batch-summary { grid-template-columns: 1fr 1fr; }
  .batch-summary div:nth-child(2n) { border-right: 0; }
  .batch-summary div { border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 12px; padding: 18px 0; }
  .footer-actions { display: grid; width: 100%; grid-template-columns: repeat(3, max-content); align-items: center; gap: 10px 16px; }
  .footer-language-switcher { max-width: 100%; grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  .wallet-grid { grid-template-columns: 1fr; }
  .header-inner { min-height: 58px; flex-wrap: wrap; gap: 8px 14px; padding: 9px 0; }
  .primary-nav { order: 3; width: 100%; gap: 12px; margin-right: 0; overflow-x: auto; white-space: nowrap; }
  .wallet-collection-counts { width: 100%; }
  .wallet-management-bar { align-items: stretch; flex-direction: column; }
  .wallet-view-tabs, .wallet-sort-form { justify-content: space-between; }
  .wallet-management-actions { align-items: stretch; flex-direction: column; }
  .wallet-view-tabs a { flex: 1; text-align: center; }
  .account-actions { flex: 0 0 auto; margin-left: auto; }
  .wallet-motion-control { align-items: stretch; flex-direction: column; gap: 7px; }
  .wallet-motion-options button { width: 100%; }
  .credential-showcase { padding: 18px 10px 16px; }
  .credential-showcase-cabinet { padding: 12px 8px 14px; border-width: 6px 5px 10px; }
  .wallet-item { grid-template-rows: 260px 1fr auto; }
  .wallet-item::before { height: 260px; }
  .secret-value { grid-template-columns: 1fr; }
  .claim-page h1, .secret-page h1, .prose-page h1 { font-size: 36px; }
  .account-settings-page .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .account-settings-page .form-actions .button { width: 100%; }
  .account-email-row { grid-template-columns: minmax(0, 1fr) auto; }
  .account-email-row form { grid-column: 1 / -1; }
  .secondary-email-form { grid-template-columns: 1fr; }
  .account-settings-section-heading { align-items: stretch; flex-direction: column; }
  .profile-avatar-editor { grid-template-columns: 72px minmax(0, 1fr); }
  .profile-avatar-preview { width: 72px; height: 72px; font-size: 30px; }
  .public-profile-hero { min-height: 0; grid-template-columns: 1fr; justify-items: start; gap: 24px; padding: 28px 22px; }
  .public-profile-avatar { width: 104px; height: 104px; }
  .public-profile-identity h1 { font-size: 38px; }
  .public-profile-hero > .button { grid-column: 1; }
  .public-profile-goal { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
  .public-skill-list, .public-credential-grid { grid-template-columns: 1fr; }
  .external-badge-grid { grid-template-columns: 1fr; }
}

html[data-motion="off"] .wallet-item,
html[data-motion="off"] .showcase-object,
html[data-motion="off"] .wallet-art::before,
html[data-motion="off"] .wallet-item::before { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .wallet-item,
  html:not([data-motion="on"]) .showcase-object,
  html:not([data-motion="on"]) .wallet-art::before,
  html:not([data-motion="on"]) .wallet-item::before { animation: none !important; }
}

/* Design preset library and live template preview */
.editor-layout { grid-template-columns: minmax(0, 1fr) 480px; max-width: 1340px; }
.form-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.form-section-heading h2 { margin-bottom: 3px; }
.form-section-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.design-type-tabs { display: inline-grid; flex: 0 0 auto; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--line); border-radius: 4px; background: #edf1ee; }
.design-type-tabs button { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 3px; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; font-weight: 700; }
.design-type-tabs button[aria-selected="true"] { background: white; color: var(--primary); box-shadow: 0 1px 4px #152b331a; }
.preset-palette-controls { display: grid; grid-template-columns: auto auto minmax(120px, 1fr); align-items: center; gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent-dark); background: #fffdf5; }
.palette-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 11px; font-weight: 650; }
.palette-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-bright); }
.palette-status { overflow: hidden; color: var(--muted); font-size: 9px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.design-preset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 590px; overflow-y: auto; padding: 2px 4px 2px 2px; scrollbar-color: #9aa8a4 transparent; scrollbar-width: thin; }
.design-preset-option { display: grid; min-width: 0; min-height: 152px; grid-template-rows: 86px auto; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 4px; background: #fbfcfa; color: var(--ink); cursor: pointer; text-align: left; }
.design-preset-option[hidden] { display: none; }
.design-preset-option:hover { border-color: #8fa29d; background: white; }
.design-preset-option[aria-pressed="true"] { border-color: var(--primary-bright); box-shadow: inset 0 0 0 2px var(--primary-bright); background: var(--soft-blue); }
.preset-option-copy { display: block; min-width: 0; }
.preset-name-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 5px; }
.preset-option-copy strong, .preset-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; }
.preset-option-copy strong { font-size: 11px; white-space: nowrap; }
.preset-option-copy small { height: 30px; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.preset-swatches { display: inline-flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #ffffff; border-radius: 2px; box-shadow: 0 0 0 1px #b7c0bd; }
.preset-swatches i { display: block; width: 10px; height: 10px; }
.preset-certificate-thumb { position: relative; display: grid; width: 100%; height: 72px; place-items: center; overflow: hidden; border: 5px solid white; outline: 2px solid var(--preset-primary); outline-offset: -9px; background: #fffef9; color: var(--preset-primary); }
.preset-certificate-thumb::after { position: absolute; inset: 9px; content: ""; border: 1px solid var(--preset-accent); }
.preset-certificate-thumb i { width: 42%; height: 3px; background: var(--preset-accent); }
.preset-certificate-thumb b { position: absolute; right: 12px; bottom: 9px; font-family: var(--mono); font-size: 7px; }
.preset-badge-thumb { --template-primary: var(--preset-primary); --template-accent: var(--preset-accent); position: relative; display: grid; width: 72px; height: 72px; place-self: center; place-items: center; overflow: hidden; background: var(--preset-primary); color: var(--preset-accent); filter: drop-shadow(0 7px 6px #10232d38) drop-shadow(0 2px 1px #ffffff45); }
.preset-badge-render-thumb { display: grid; width: 76px; height: 76px; place-self: center; place-items: center; }
.preset-badge-render-thumb img { display: block; width: 76px; height: 76px; object-fit: contain; }
.preset-certificate-render-thumb { display: grid; width: 100%; height: 86px; place-items: center; overflow: hidden; background: #e9eeeb; }
.preset-certificate-render-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.preset-badge-thumb::before { position: absolute; inset: 0; z-index: 0; content: ""; background: radial-gradient(circle at 28% 16%, #ffffff8c 0 4%, #ffffff3d 18%, transparent 43%), linear-gradient(145deg, #ffffff40 0 12%, transparent 35% 62%, #06151d78 100%); box-shadow: inset 2px 3px 4px #ffffff52, inset -4px -6px 8px #07192380; pointer-events: none; }
.preset-badge-thumb::after { position: absolute; inset: 0; z-index: 1; content: ""; clip-path: inherit; background: linear-gradient(145deg, #ffffff38 0 9%, transparent 29% 68%, #06151d4d 100%); box-shadow: inset 2px 3px 3px #ffffff47, inset -4px -5px 6px #07192370; opacity: .82; }
.preset-badge-thumb b { z-index: 2; font-family: var(--serif); font-size: 22px; text-shadow: 0 1px 0 #ffffff78, 0 2px 3px #0719238c; }
.template-card-preset-certificate { width: 82%; height: auto; aspect-ratio: 1.414 / 1; }
.template-card-preset-certificate small { position: absolute; top: 25%; color: var(--preset-primary); font-family: var(--mono); font-size: 7px; }
.template-card-preset-certificate strong { z-index: 1; max-width: 72%; overflow: hidden; color: var(--preset-primary); font-family: var(--serif); font-size: 16px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.template-card-preset-certificate i { position: absolute; bottom: 24%; }
.template-preview.certificate > .template-card-certificate-render { display: block; width: calc(100% - 36px); height: calc(100% - 36px); min-width: 0; min-height: 0; padding: 0; object-fit: contain; }

.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.preview-toolbar strong { max-width: 260px; overflow: hidden; color: var(--primary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live { container-type: inline-size; isolation: isolate; padding: 0; box-shadow: 0 16px 35px #22343a18; }
.preset-certificate-live > :not(.preset-certificate-decoration) { z-index: 2; }
.preset-certificate-live > .certificate-brand, .preset-certificate-live > .certificate-foot { position: absolute; z-index: 3; }
.preset-certificate-live::after { display: none; }
.preset-certificate-decoration { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.preset-certificate-decoration::before, .preset-certificate-decoration::after { position: absolute; content: ""; }
.certificate-engraved-frame, .certificate-watermark, .certificate-achievement-assembly, .certificate-verification-rail, .certificate-brand-subtitle, .certificate-modern-grid-system { display: none; }
.preset-certificate-live > .certificate-content { position: absolute; inset: 19% 10%; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; transform: translateY(var(--certificate-content-offset-y, 0%)) scale(var(--certificate-content-scale, 1)); transform-origin: center; }
.preset-certificate-live > .certificate-content > * { flex-shrink: 0; }
.preset-certificate-live > .certificate-qr { position: absolute; right: 6%; bottom: 8%; z-index: 3; width: 8.1%; aspect-ratio: 1; background: white; object-fit: contain; }
.certificate-qr-placeholder { background: repeating-conic-gradient(#172126 0 25%, white 0 50%) 50% / 6px 6px !important; box-shadow: inset 0 0 0 3px white, 0 0 0 1px #172126; }
.preset-certificate-live .certificate-content small { font-size: calc(clamp(5.5px, 1.7cqi, 9px) * var(--certificate-header-scale, 1)); }
.preset-certificate-live .certificate-content p { margin: clamp(1px, .8cqi, 6px) 0; font-size: clamp(6px, 2cqi, 11px); }
.preset-certificate-live .certificate-intro { font-size: calc(clamp(6px, 2cqi, 11px) * var(--certificate-intro-scale, 1)); }
.preset-certificate-live .certificate-award { font-size: calc(clamp(6px, 2cqi, 11px) * var(--certificate-award-scale, 1)); }
.preset-certificate-live .preview-description { display: -webkit-box; max-width: 75%; max-height: 31px; margin-top: clamp(1.5px, .8cqi, 5px); overflow: hidden; color: var(--muted); font-size: clamp(5.5px, 1.6cqi, 9px); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.preset-certificate-live h2, .preset-certificate-live h3 { font-family: var(--sans); font-weight: 700; }
.preset-certificate-live h2 { display: -webkit-box; max-width: 80%; max-height: 84px; margin: clamp(1px, .6cqi, 3px) 0 clamp(2px, 1.2cqi, 8px); overflow: hidden; font-size: clamp(13px, 5.6cqi, 36px); line-height: 1.12; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.preset-certificate-live h3 { display: -webkit-box; max-height: 52px; margin: clamp(1px, .6cqi, 3px) 0; overflow: hidden; font-size: clamp(8px, 3cqi, 22px); line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.preset-certificate-live > .certificate-brand { top: 8%; right: 10%; left: 10%; font-size: calc(clamp(6px, 2cqi, 13px) * var(--certificate-issuer-scale, 1)); }
.preset-certificate-live > .certificate-brand img { max-width: calc(clamp(50px, 16cqi, 100px) * var(--certificate-issuer-scale, 1)); max-height: calc(clamp(18px, 7cqi, 42px) * var(--certificate-issuer-scale, 1)); }
.preset-certificate-live > .certificate-brand span { display: -webkit-box; max-height: 2.5em; overflow: hidden; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.preset-certificate-live[data-issuer-font="sans"] > .certificate-brand { font-family: var(--sans); }
.preset-certificate-live[data-issuer-font="serif"] > .certificate-brand { font-family: "Signet Serif", "Noto Serif TC", serif; }
.preset-certificate-live[data-issuer-font="mono"] > .certificate-brand { font-family: "Signet Mono", var(--mono); }
.preset-certificate-live > .certificate-foot { right: 10%; bottom: 6%; left: 10%; font-size: clamp(5px, 1.6cqi, 8px); }

@container (max-width: 400px) {
  .preset-certificate-live > .certificate-content { inset-block: 15%; }
  .preset-certificate-live > .certificate-brand { top: 5%; }
  .preset-certificate-live > .certificate-foot { bottom: 3%; }
  .preset-certificate-live > .certificate-qr { right: 4%; bottom: 4%; width: 7%; }
}

@container (max-width: 320px) {
  .preset-certificate-live > .certificate-content { inset-block: 12%; transform: translateY(clamp(-2%, var(--certificate-content-offset-y, 0%), 2%)) scale(min(var(--certificate-content-scale, 1), .95)); }
  .preset-certificate-live > .certificate-brand { top: 3%; }
  .preset-certificate-live > .certificate-foot { bottom: 2%; }
  .preset-certificate-live > .certificate-qr { right: 3%; bottom: 3%; width: 6.5%; }
  .preset-certificate-live .certificate-header { font-size: clamp(5.5px, 1.7cqi, 9px); }
  .preset-certificate-live .certificate-intro, .preset-certificate-live .certificate-award { font-size: clamp(6px, 2cqi, 11px); }
  .preset-certificate-live > .certificate-brand { font-size: clamp(6px, 2cqi, 13px); }
  .preset-certificate-live > .certificate-brand img { max-width: clamp(50px, 16cqi, 100px); max-height: clamp(18px, 7cqi, 42px); }
}

.preset-certificate-live[data-variant="1"] { --archival-laurel-vellum: #f8f5eb; border: 0; outline: 0; background: linear-gradient(145deg, #fffefa 0%, var(--archival-laurel-vellum) 48%, #f1ecde 100%); box-shadow: 0 16px 35px #22343a24, inset 0 0 0 6px var(--template-primary), inset 0 0 0 7px var(--template-accent), inset 0 0 0 12px var(--template-primary), inset 0 0 0 13px #b68b3199; color: var(--template-primary); }
.preset-certificate-live[data-variant="1"] .preset-certificate-decoration { inset: 17px; border: 1px solid #123b4a52; background: repeating-linear-gradient(18deg, transparent 0 23px, #8b7b5d0a 24px 24.5px, transparent 25px 43px), repeating-linear-gradient(90deg, transparent 0 34px, #c2ae8210 35px 35.5px, transparent 36px 70px); }
.preset-certificate-live[data-variant="1"] .certificate-engraved-frame { position: absolute; inset: 22px; z-index: 1; display: block; border: 7px double var(--template-accent); box-shadow: inset 0 0 0 1px #123b4a66, 0 0 0 1px #123b4a8c; pointer-events: none; }
.preset-certificate-live[data-variant="1"] .certificate-engraved-frame::before, .preset-certificate-live[data-variant="1"] .certificate-engraved-frame::after { position: absolute; width: 18px; height: 18px; content: ""; border: 2px solid var(--template-accent); background: var(--template-primary); transform: rotate(45deg); box-shadow: 0 0 0 3px var(--archival-laurel-vellum), 0 0 0 4px var(--template-primary); }
.preset-certificate-live[data-variant="1"] .certificate-engraved-frame::before { top: -8px; left: -8px; }
.preset-certificate-live[data-variant="1"] .certificate-engraved-frame::after { right: -8px; bottom: -8px; }
.preset-certificate-live[data-variant="1"] .certificate-watermark { position: absolute; top: 27%; left: 50%; z-index: 0; display: block; width: 29%; aspect-ratio: 1; border: 2px solid var(--template-primary); border-radius: 50%; opacity: .045; transform: translateX(-50%); box-shadow: inset 0 0 0 7px var(--archival-laurel-vellum), inset 0 0 0 8px var(--template-accent); pointer-events: none; }
.preset-certificate-live[data-variant="1"] .certificate-watermark::before, .preset-certificate-live[data-variant="1"] .certificate-watermark::after { position: absolute; top: 19%; bottom: 14%; width: 32%; content: ""; border: solid var(--template-primary); border-width: 0 3px 3px; border-radius: 0 0 60% 60%; }
.preset-certificate-live[data-variant="1"] .certificate-watermark::before { left: 8%; transform: rotate(23deg); }
.preset-certificate-live[data-variant="1"] .certificate-watermark::after { right: 8%; transform: rotate(-23deg); }
.preset-certificate-live[data-variant="1"] > .certificate-brand { top: 6%; font-family: "Signet Serif", "Noto Serif TC", serif; font-size: calc(clamp(7px, 2cqi, 14px) * var(--certificate-issuer-scale, 1)); font-weight: 700; letter-spacing: .08em; }
.preset-certificate-live[data-variant="1"] .certificate-brand-subtitle { display: block; margin-top: clamp(2px, .65cqi, 5px); color: #7a6c51; font-family: var(--sans); font-size: clamp(4.5px, 1cqi, 8px); font-weight: 600; letter-spacing: .16em; }
.preset-certificate-live[data-variant="1"] > .certificate-content { inset: 14% 12% 36%; font-family: "Signet Serif", "Noto Serif TC", serif; }
.preset-certificate-live[data-variant="1"] > .certificate-brand span { max-height: none; overflow: visible; }
.preset-certificate-live[data-variant="1"] .certificate-header { color: var(--template-primary); font-family: var(--sans); font-weight: 700; letter-spacing: .25em; }
.preset-certificate-live[data-variant="1"] .certificate-intro, .preset-certificate-live[data-variant="1"] .certificate-award { color: #746a59; font-family: "Signet Serif", "Noto Serif TC", serif; letter-spacing: .06em; }
.preset-certificate-live[data-variant="1"] h2 { color: var(--template-primary); font-family: "Signet Serif", "Noto Serif TC", serif; letter-spacing: .03em; }
.preset-certificate-live[data-variant="1"] h3 { color: var(--template-primary); font-family: "Signet Serif", "Noto Serif TC", serif; }
.preset-certificate-live[data-variant="1"] h2, .preset-certificate-live[data-variant="1"] h3 { overflow: visible; }
.preset-certificate-live[data-variant="1"] .preview-description { color: #6f685c; }
.preset-certificate-live[data-variant="1"] .certificate-achievement-assembly { position: absolute; bottom: 23.5%; left: 50%; z-index: 3; display: flex; width: 29%; height: 13%; align-items: center; justify-content: center; transform: translateX(-50%); pointer-events: none; }
.preset-certificate-live[data-variant="1"] .certificate-achievement-seal { position: relative; z-index: 2; display: grid; width: clamp(34px, 9cqi, 62px); aspect-ratio: 1; place-items: center; border: 2px solid #8f681c; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #fce69a 0 20%, var(--template-accent) 54%, #9a6d18 100%); box-shadow: inset 0 0 0 5px var(--template-accent), inset 0 0 0 6px #fff1b2, 0 2px 4px #5d43124d; }
.preset-certificate-live[data-variant="1"] .certificate-achievement-seal::before { position: absolute; inset: 19%; content: ""; border-radius: 50%; background: var(--template-primary); }
.preset-certificate-live[data-variant="1"] .certificate-achievement-seal b { z-index: 1; color: var(--template-accent); font-family: var(--serif); font-size: clamp(12px, 3cqi, 22px); line-height: 1; }
.preset-certificate-live[data-variant="1"] .certificate-achievement-seal small { position: absolute; bottom: 15%; z-index: 1; color: #fbe7a0; font-family: var(--serif); font-size: clamp(4px, .95cqi, 7px); font-weight: 700; letter-spacing: .1em; }
.preset-certificate-live[data-variant="1"] .certificate-laurel { position: relative; display: block; width: 34%; height: 80%; border-bottom: 2px solid #a9802b; border-radius: 0 0 75% 75%; }
.preset-certificate-live[data-variant="1"] .certificate-laurel-left { margin-right: -3%; transform: rotate(20deg); }
.preset-certificate-live[data-variant="1"] .certificate-laurel-right { margin-left: -3%; transform: scaleX(-1) rotate(20deg); }
.preset-certificate-live[data-variant="1"] .certificate-laurel i { position: absolute; width: 24%; height: 22%; border: 1px solid #8f681c; border-radius: 75% 10% 75% 10%; background: linear-gradient(145deg, #fff1b2, var(--template-accent) 58%, #9d7422); transform: rotate(-25deg); }
.preset-certificate-live[data-variant="1"] .certificate-laurel i:nth-child(1) { right: 7%; bottom: 4%; }
.preset-certificate-live[data-variant="1"] .certificate-laurel i:nth-child(2) { right: 20%; bottom: 19%; }
.preset-certificate-live[data-variant="1"] .certificate-laurel i:nth-child(3) { right: 34%; bottom: 35%; }
.preset-certificate-live[data-variant="1"] .certificate-laurel i:nth-child(4) { right: 48%; bottom: 52%; }
.preset-certificate-live[data-variant="1"] .certificate-laurel i:nth-child(5) { right: 61%; bottom: 69%; }
.preset-certificate-live[data-variant="1"] .certificate-verification-rail { position: absolute; right: 10%; bottom: 7.5%; left: 10%; z-index: 4; display: grid; min-width: 0; grid-template-columns: 1.35fr .85fr 1.15fr auto .9fr; align-items: center; gap: clamp(4px, 1.5cqi, 12px); padding-top: clamp(7px, 1.8cqi, 13px); border-top: 2px solid var(--template-primary); box-shadow: inset 0 1px var(--template-accent); text-align: left; }
.preset-certificate-live[data-variant="1"] .certificate-verification-rail > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.preset-certificate-live[data-variant="1"] .certificate-verification-rail small { overflow: hidden; color: #8a7c60; font-family: var(--sans); font-size: clamp(5px, 1.25cqi, 9px); font-weight: 700; letter-spacing: .09em; text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live[data-variant="1"] .certificate-verification-rail strong { overflow: hidden; color: var(--template-primary); font-family: var(--sans); font-size: clamp(6px, 1.55cqi, 11px); text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live[data-variant="1"] .certificate-verification-rail .certificate-id { font-family: var(--mono); font-size: clamp(5px, 1.05cqi, 8px); }
.preset-certificate-live[data-variant="1"] .certificate-verification-qr { width: clamp(38px, 9cqi, 64px); aspect-ratio: 1; background: transparent; }
.preset-certificate-live[data-variant="1"] .certificate-verification-qr img { display: block; width: 100%; height: 100%; background: transparent; object-fit: contain; }
.preset-certificate-live[data-variant="1"] .certificate-verification-qr i { display: block; width: 100%; height: 100%; background: repeating-conic-gradient(from 90deg, var(--template-primary) 0 25%, transparent 0 50%) 0 0 / 8px 8px; clip-path: inset(8%); }
.preset-certificate-live[data-variant="1"] .certificate-registry { text-align: center; }
.preset-certificate-live[data-variant="1"] > .certificate-qr, .preset-certificate-live[data-variant="1"] > .certificate-foot { display: none; }

@container (max-width: 700px) {
  .preset-certificate-live[data-variant="1"] .certificate-verification-qr { width: 45px; }
}
.preset-certificate-live[data-variant="2"] { --precision-modular-paper: #f4f8f6; border: 0; outline: 0; background: linear-gradient(145deg, #fcfefd, var(--precision-modular-paper) 58%, #eaf2ee); box-shadow: 0 16px 35px #0d365529, inset 0 0 0 2px var(--template-primary), inset 0 0 0 4px #ffffff; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="2"] .preset-certificate-decoration { inset: 0 0 24% 16.8%; background-image: linear-gradient(#184e7713 1px, transparent 1px), linear-gradient(90deg, #184e7713 1px, transparent 1px); background-size: 24px 24px; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-system { position: absolute; inset: 0; z-index: 2; display: block; pointer-events: none; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index { position: absolute; top: 7%; bottom: 4%; left: 2.9%; display: flex; width: 14%; flex-direction: column; padding: clamp(10px, 2.3cqi, 20px) clamp(7px, 1.7cqi, 15px); background: linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 10%), var(--template-primary) 52%, color-mix(in srgb, var(--template-primary), black 28%)); box-shadow: inset -7px 0 var(--template-accent); color: #fff; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index::after { position: absolute; inset: 0; content: ""; background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px); background-size: 8px 8px; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index > * { position: relative; z-index: 1; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index > small { font-family: var(--mono); font-size: clamp(4.5px, 1.1cqi, 8px); font-weight: 700; letter-spacing: .05em; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index > strong { margin-top: clamp(8px, 1.8cqi, 15px); font-family: var(--sans); font-size: clamp(10px, 2.8cqi, 21px); line-height: 1.08; }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index > i { width: 68%; height: 3px; margin: clamp(8px, 2cqi, 17px) 0; background: var(--template-accent); }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index > span { display: flex; flex-direction: column; margin-top: clamp(6px, 1.35cqi, 12px); color: #ffffffa8; font-family: var(--mono); font-size: clamp(4.5px, 1.05cqi, 7.5px); }
.preset-certificate-live[data-variant="2"] .certificate-modern-grid-index > span b { margin-top: 2px; color: #fff; font-size: 1.08em; }
.preset-certificate-live[data-variant="2"] > .certificate-brand { top: 7.3%; right: 31%; left: 20.4%; color: var(--template-primary); font-family: var(--mono); font-size: calc(clamp(6px, 1.4cqi, 10px) * var(--certificate-issuer-scale, 1)); font-weight: 700; text-align: left; }
.preset-certificate-live[data-variant="2"] > .certificate-brand .certificate-brand-subtitle { display: block; margin-top: 3px; color: #668075; font-family: var(--mono); font-size: clamp(4.5px, .95cqi, 7px); letter-spacing: .08em; }
.preset-certificate-live[data-variant="2"] > .certificate-content { inset: 15% 31% 42% 20.4%; align-items: flex-start; justify-content: center; overflow: visible; text-align: left; transform: translateY(var(--certificate-content-offset-y, 0%)) scale(var(--certificate-content-scale, 1)); transform-origin: left center; }
.preset-certificate-live[data-variant="2"] .certificate-header { color: var(--template-primary); font-family: var(--mono); font-weight: 700; letter-spacing: .08em; }
.preset-certificate-live[data-variant="2"] .certificate-intro, .preset-certificate-live[data-variant="2"] .certificate-award { color: #698077; }
.preset-certificate-live[data-variant="2"] h2, .preset-certificate-live[data-variant="2"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); font-family: var(--sans); text-align: left; }
.preset-certificate-live[data-variant="2"] h2 { margin-block: clamp(3px, 1.2cqi, 10px); font-size: clamp(14px, 5cqi, 34px); }
.preset-certificate-live[data-variant="2"] h3 { font-size: clamp(9px, 2.7cqi, 20px); }
.preset-certificate-live[data-variant="2"] .preview-description { max-width: 100%; color: #5b7068; }
.preset-certificate-live[data-variant="2"] .certificate-capability-matrix { position: absolute; top: 12%; right: 5.4%; display: flex; width: 21%; flex-direction: column; gap: clamp(6px, 1.5cqi, 13px); color: var(--template-primary); font-family: var(--mono); }
.preset-certificate-live[data-variant="2"] .certificate-capability-matrix > strong { padding-bottom: 6px; border-bottom: 1px solid var(--template-primary); font-size: clamp(5px, 1.15cqi, 8px); letter-spacing: .04em; }
.preset-certificate-live[data-variant="2"] .certificate-capability-matrix > span { display: grid; grid-template-columns: 42% 1fr; align-items: center; gap: 5px; }
.preset-certificate-live[data-variant="2"] .certificate-capability-matrix small { font-size: clamp(4.5px, 1.05cqi, 8px); }
.preset-certificate-live[data-variant="2"] .certificate-capability-matrix i { height: clamp(5px, 1.4cqi, 11px); background: repeating-linear-gradient(90deg, var(--template-accent) 0 18%, transparent 18% 22%), #dbe8e2; }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path { position: absolute; right: 31%; bottom: 24.5%; left: 20.4%; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--template-primary); font-family: var(--sans); }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path::before { position: absolute; top: 49%; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, var(--template-primary), var(--template-accent), var(--template-primary)); }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path > strong { grid-column: 1 / -1; margin-bottom: clamp(8px, 1.8cqi, 15px); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path > span { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path span > i { width: clamp(7px, 1.7cqi, 12px); aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%; background: var(--template-primary); box-shadow: 0 0 0 1px var(--template-primary); }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path [data-certificate-stage="apply"] > i { background: var(--template-accent); }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path b { margin-top: 4px; font-size: clamp(5px, 1.2cqi, 9px); }
.preset-certificate-live[data-variant="2"] .certificate-delivery-path small { color: #698077; font-size: clamp(4.5px, 1cqi, 7px); }
.preset-certificate-live[data-variant="2"] .certificate-verification-rail { position: absolute; right: 5.4%; bottom: 7%; left: 20.4%; z-index: 4; display: grid; min-width: 0; grid-template-columns: 1.35fr .85fr 1fr auto .85fr; align-items: center; gap: clamp(4px, 1.3cqi, 10px); padding-top: clamp(7px, 1.6cqi, 12px); border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); text-align: left; }
.preset-certificate-live[data-variant="2"] .certificate-verification-rail > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.preset-certificate-live[data-variant="2"] .certificate-verification-rail small { overflow: hidden; color: #698077; font-family: var(--sans); font-size: clamp(5px, 1.15cqi, 8px); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live[data-variant="2"] .certificate-verification-rail strong { overflow: hidden; color: var(--template-primary); font-family: var(--sans); font-size: clamp(5.5px, 1.35cqi, 10px); text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live[data-variant="2"] .certificate-verification-rail .certificate-id { font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7.5px); }
.preset-certificate-live[data-variant="2"] .certificate-verification-qr { width: clamp(38px, 8cqi, 58px); aspect-ratio: 1; background: transparent; }
.preset-certificate-live[data-variant="2"] .certificate-verification-qr img { display: block; width: 100%; height: 100%; background: transparent; object-fit: contain; }
.preset-certificate-live[data-variant="2"] .certificate-verification-qr i { display: block; width: 100%; height: 100%; background: repeating-conic-gradient(from 90deg, var(--template-primary) 0 25%, transparent 0 50%) 0 0 / 8px 8px; clip-path: inset(8%); }
.preset-certificate-live[data-variant="2"] .certificate-registry { text-align: center; }
.preset-certificate-live[data-variant="2"] > .certificate-qr, .preset-certificate-live[data-variant="2"] > .certificate-foot { display: none; }

.certificate-design-layers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.certificate-design-layer { display: none; }

/* Shared production infrastructure for redesigned certificates 03-20. */
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-rail { position: absolute; z-index: 5; display: grid; min-width: 0; align-items: center; gap: clamp(4px, 1.25cqi, 10px); padding-top: clamp(6px, 1.5cqi, 11px); text-align: left; }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-rail > span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-rail small { overflow: hidden; font-family: var(--sans); font-size: clamp(5px, 1.15cqi, 8px); font-weight: 700; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-rail strong { overflow: hidden; font-family: var(--sans); font-size: clamp(5.5px, 1.35cqi, 10px); text-overflow: ellipsis; white-space: nowrap; }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-id { font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7.5px); }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-qr { width: clamp(42px, 9.8cqi, 64px); aspect-ratio: 1; background: transparent; }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-qr img { display: block; width: 100%; height: 100%; background: transparent; object-fit: contain; }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) .certificate-verification-qr i { display: block; width: 100%; height: 100%; background: repeating-conic-gradient(from 90deg, var(--template-primary) 0 25%, transparent 0 50%) 0 0 / 8px 8px; clip-path: inset(8%); }
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) > .certificate-qr,
.preset-certificate-live:is([data-variant="3"],[data-variant="4"],[data-variant="5"],[data-variant="6"],[data-variant="7"],[data-variant="8"],[data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"],[data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) > .certificate-foot { display: none; }

/* 03 Executive Navy — authority mast and governance docket. */
.preset-certificate-live[data-variant="3"] { border: 0; outline: 0; background: linear-gradient(135deg, #fff 0%, #f5f7f8 100%); box-shadow: 0 16px 35px #14213d24, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="3"] .certificate-executive-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="3"] .certificate-authority-mast { position: absolute; inset: 0 auto 0 0; display: flex; width: 17%; flex-direction: column; align-items: center; justify-content: center; gap: clamp(9px, 2.3cqi, 19px); background: var(--template-primary); color: #fff; }
.preset-certificate-live[data-variant="3"] .certificate-authority-mast > strong { font-family: var(--mono); font-size: clamp(5px, 1.2cqi, 9px); letter-spacing: .14em; writing-mode: vertical-rl; }
.preset-certificate-live[data-variant="3"] .certificate-authority-mast > i { width: 2px; height: 14%; background: var(--template-accent); }
.preset-certificate-live[data-variant="3"] .certificate-authority-mast > span { position: relative; padding-left: 14px; font-family: var(--sans); font-size: clamp(5px, 1.15cqi, 8px); font-weight: 700; }
.preset-certificate-live[data-variant="3"] .certificate-authority-mast > span::before { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; content: ""; border: 2px solid #fff; border-radius: 50%; background: var(--template-accent); transform: translateY(-50%); }
.preset-certificate-live[data-variant="3"] .certificate-executive-docket { position: absolute; top: 8%; right: 4%; bottom: 8%; width: 19%; padding: clamp(10px, 2cqi, 17px); border-left: 3px solid var(--template-accent); background: color-mix(in srgb, var(--template-primary), white 94%); color: var(--template-primary); }
.preset-certificate-live[data-variant="3"] .certificate-executive-docket small { font-family: var(--mono); font-size: clamp(5px, 1.05cqi, 8px); }
.preset-certificate-live[data-variant="3"] .certificate-executive-docket strong { display: block; margin-top: 15%; font-family: var(--serif); font-size: clamp(8px, 1.65cqi, 12px); line-height: 1.2; }
.preset-certificate-live[data-variant="3"] .certificate-executive-docket i { display: block; width: 36%; height: 3px; margin-top: 18%; background: var(--template-accent); }
.preset-certificate-live[data-variant="3"] > .certificate-brand { top: 8%; right: 27%; left: 22%; color: var(--template-primary); font-family: var(--serif); text-align: left; }
.preset-certificate-live[data-variant="3"] > .certificate-content { inset: 20% 28% 26% 22%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="3"] h2, .preset-certificate-live[data-variant="3"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); font-family: var(--serif); text-align: left; }
.preset-certificate-live[data-variant="3"] .certificate-verification-rail { top: 39%; right: 5.5%; bottom: 11%; left: 79.5%; grid-template-columns: 1fr; align-content: end; border-top: 1px solid var(--template-primary); }
.preset-certificate-live[data-variant="3"] .certificate-verification-rail small { color: #5e6878; }
.preset-certificate-live[data-variant="3"] .certificate-verification-rail strong { color: var(--template-primary); }
.preset-certificate-live[data-variant="3"] .certificate-verification-qr { order: -1; margin-bottom: 6px; }

/* 04 Academic Seal — registrar paper and scholarly seal. */
.preset-certificate-live[data-variant="4"] { border: 0; outline: 0; background: repeating-linear-gradient(90deg, transparent 0 17px, #6a1b2d08 18px, transparent 19px 36px), #fffaf0; box-shadow: 0 16px 35px #6a1b2d1f, inset 0 0 0 3px var(--template-primary), inset 0 0 0 7px #fffaf0, inset 0 0 0 8px var(--template-accent); }
.preset-certificate-live[data-variant="4"] .certificate-academic-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="4"] .certificate-scholarly-seal { position: absolute; top: 12%; left: 50%; display: grid; width: clamp(62px, 13cqi, 100px); aspect-ratio: 1; place-items: center; border: 4px double var(--template-accent); border-radius: 50%; background: var(--template-primary); color: #fff; transform: translateX(-50%); }
.preset-certificate-live[data-variant="4"] [data-open-book-aperture] { display: flex; width: 46%; height: 28%; }
.preset-certificate-live[data-variant="4"] [data-open-book-aperture] i { width: 50%; border: 2px solid var(--template-accent); background: #fffaf0; }
.preset-certificate-live[data-variant="4"] [data-open-book-aperture] i:first-child { transform: skewY(10deg); }
.preset-certificate-live[data-variant="4"] [data-open-book-aperture] i:last-child { transform: skewY(-10deg); }
.preset-certificate-live[data-variant="4"] .certificate-scholarly-seal > b { position: absolute; font-family: var(--mono); font-size: clamp(4px, .8cqi, 6px); }
.preset-certificate-live[data-variant="4"] [data-scholarship-domain="teaching"] { top: 9%; }
.preset-certificate-live[data-variant="4"] [data-scholarship-domain="inquiry"] { right: 4%; bottom: 21%; transform: rotate(60deg); }
.preset-certificate-live[data-variant="4"] [data-scholarship-domain="publication"] { bottom: 7%; left: 4%; transform: rotate(-55deg); }
.preset-certificate-live[data-variant="4"] .certificate-registrar-ledger { position: absolute; right: 10%; bottom: 24%; left: 10%; display: grid; grid-template-columns: 1fr repeat(3, 24%); border-top: 2px solid var(--template-primary); color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="4"] .certificate-registrar-ledger > * { min-height: 18px; border-right: 1px solid #6a1b2d55; }
.preset-certificate-live[data-variant="4"] > .certificate-brand { top: 7%; font-family: var(--serif); }
.preset-certificate-live[data-variant="4"] > .certificate-content { inset: 30% 16% 25%; }
.preset-certificate-live[data-variant="4"] h2, .preset-certificate-live[data-variant="4"] h3 { color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="4"] .certificate-verification-rail { right: 10%; bottom: 5.5%; left: 10%; grid-template-columns: 1.2fr .8fr 1fr auto .8fr; border-top: 1px solid var(--template-primary); }
.preset-certificate-live[data-variant="4"] .certificate-verification-rail small { color: #7d6267; }
.preset-certificate-live[data-variant="4"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 05 Minimal Line — editorial whitespace and one competency baseline. */
.preset-certificate-live[data-variant="5"] { border: 0; outline: 0; background: #fff; box-shadow: 0 16px 35px #26323814; text-align: left; }
.preset-certificate-live[data-variant="5"] .certificate-minimal-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="5"] .certificate-competency-baseline { position: absolute; right: 18%; bottom: 18%; left: 10%; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--template-primary); }
.preset-certificate-live[data-variant="5"] .certificate-competency-baseline > span { position: relative; padding-top: 12px; color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="5"] .certificate-competency-baseline i { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--template-primary); }
.preset-certificate-live[data-variant="5"] .certificate-competency-baseline [data-learning-stage="verify"] i { background: var(--template-accent); }
.preset-certificate-live[data-variant="5"] .certificate-verification-terminal { position: absolute; right: 9%; bottom: 16%; width: 7%; height: 4px; background: var(--template-accent); }
.preset-certificate-live[data-variant="5"] > .certificate-brand { top: 8%; right: 42%; left: 10%; font-family: var(--sans); text-align: left; }
.preset-certificate-live[data-variant="5"] > .certificate-content { inset: 20% 25% 32% 10%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="5"] h2, .preset-certificate-live[data-variant="5"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); font-family: var(--sans); text-align: left; }
.preset-certificate-live[data-variant="5"] .certificate-verification-rail { right: 8%; bottom: 6%; left: 10%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 1px solid #26323866; }
.preset-certificate-live[data-variant="5"] .certificate-verification-rail small { color: #69757a; }
.preset-certificate-live[data-variant="5"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 06 Digital Circuit — signed attestation trace and right verification terminal. */
.preset-certificate-live[data-variant="6"] { border: 0; outline: 0; background: linear-gradient(145deg, #faffff, #edf8f6); box-shadow: 0 16px 35px #073b4c22, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="6"] .certificate-circuit-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="6"] .certificate-trust-trace { position: absolute; top: 11%; right: 27%; bottom: 12%; left: 5%; border: solid #073b4c4f; border-width: 2px 0 0 2px; }
.preset-certificate-live[data-variant="6"] .certificate-trust-trace > span { position: absolute; display: flex; align-items: center; gap: 5px; color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); }
.preset-certificate-live[data-variant="6"] .certificate-trust-trace > span::after { position: absolute; z-index: -1; content: ""; background: var(--template-accent); opacity: .55; }
.preset-certificate-live[data-variant="6"] [data-attestation-node="source"] { top: -5px; left: 3%; }
.preset-certificate-live[data-variant="6"] [data-attestation-node="build"] { top: 25%; right: 2%; }
.preset-certificate-live[data-variant="6"] [data-attestation-node="sign"] { right: 15%; bottom: 15%; }
.preset-certificate-live[data-variant="6"] [data-attestation-node="verify"] { bottom: 0; left: 8%; }
.preset-certificate-live[data-variant="6"] .certificate-trust-trace i { width: 9px; height: 9px; border: 2px solid var(--template-primary); border-radius: 50%; background: var(--template-accent); }
.preset-certificate-live[data-variant="6"] .certificate-circuit-verification-port { position: absolute; top: 13%; right: 5%; bottom: 8%; width: 20%; border: 2px solid var(--template-primary); background: linear-gradient(90deg, transparent 48%, #06d6a015 49% 51%, transparent 52%); }
.preset-certificate-live[data-variant="6"] > .certificate-brand { top: 8%; right: 31%; left: 8%; font-family: var(--mono); text-align: left; }
.preset-certificate-live[data-variant="6"] > .certificate-content { inset: 21% 32% 24% 8%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="6"] h2, .preset-certificate-live[data-variant="6"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="6"] .certificate-verification-rail { top: 35%; right: 6.5%; bottom: 11%; left: 76%; grid-template-columns: 1fr; align-content: end; border-top: 2px solid var(--template-accent); }
.preset-certificate-live[data-variant="6"] .certificate-verification-rail small { color: #557178; }
.preset-certificate-live[data-variant="6"] .certificate-verification-rail strong { color: var(--template-primary); }
.preset-certificate-live[data-variant="6"] .certificate-verification-qr { order: -1; }

/* 07 Heritage Corner — mould-made stock and lineage joints. */
.preset-certificate-live[data-variant="7"] { border: 0; outline: 0; background: repeating-linear-gradient(12deg, transparent 0 31px, #5c403308 32px, transparent 33px 58px), #fff9ed; box-shadow: 0 16px 35px #5c403323, inset 0 0 0 2px var(--template-primary), inset 0 0 0 7px #fff9ed, inset 0 0 0 8px var(--template-accent); }
.preset-certificate-live[data-variant="7"] .certificate-heritage-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="7"] .certificate-lineage-frame { position: absolute; inset: 6%; border: 2px solid var(--template-primary); }
.preset-certificate-live[data-variant="7"] [data-lineage-joint] { position: absolute; width: 10%; aspect-ratio: 1; border: solid var(--template-accent); }
.preset-certificate-live[data-variant="7"] [data-lineage-joint="origin"] { top: -2px; left: -2px; border-width: 8px 0 0 8px; }
.preset-certificate-live[data-variant="7"] [data-lineage-joint="practice"] { top: -2px; right: -2px; border-width: 8px 8px 0 0; }
.preset-certificate-live[data-variant="7"] [data-lineage-joint="mastery"] { right: -2px; bottom: -2px; border-width: 0 8px 8px 0; }
.preset-certificate-live[data-variant="7"] [data-lineage-joint="transmission"] { bottom: -2px; left: -2px; border-width: 0 0 8px 8px; }
.preset-certificate-live[data-variant="7"] .certificate-maker-provenance { position: absolute; bottom: 15%; left: 8%; display: flex; gap: 10px; color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); writing-mode: vertical-rl; }
.preset-certificate-live[data-variant="7"] > .certificate-brand { top: 8%; font-family: var(--serif); }
.preset-certificate-live[data-variant="7"] > .certificate-content { inset: 20% 16% 27%; }
.preset-certificate-live[data-variant="7"] h2, .preset-certificate-live[data-variant="7"] h3 { color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="7"] .certificate-verification-rail { right: 10%; bottom: 6%; left: 11%; grid-template-columns: 1.3fr .8fr 1fr auto .8fr; border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); }
.preset-certificate-live[data-variant="7"] .certificate-verification-rail small { color: #806d58; }
.preset-certificate-live[data-variant="7"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 08 Emerald Arc — conformance arc and assurance register. */
.preset-certificate-live[data-variant="8"] { overflow: hidden; border: 0; outline: 0; background: #fbfdfc; box-shadow: 0 16px 35px #0b6e4f1d, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="8"] .certificate-assurance-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="8"] .certificate-conformance-arc { position: absolute; top: 9%; right: -8%; width: 42%; aspect-ratio: 1; border: 4px solid var(--template-primary); border-left-color: transparent; border-radius: 50%; box-shadow: inset 0 0 0 12px #fbfdfc, inset 0 0 0 14px color-mix(in srgb, var(--template-accent), transparent 35%); }
.preset-certificate-live[data-variant="8"] .certificate-conformance-arc > span { position: absolute; display: flex; align-items: center; gap: 5px; color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1.05cqi, 7.5px); }
.preset-certificate-live[data-variant="8"] [data-assurance-stage="evidence"] { top: 10%; left: 8%; }
.preset-certificate-live[data-variant="8"] [data-assurance-stage="control"] { top: 46%; left: -2%; }
.preset-certificate-live[data-variant="8"] [data-assurance-stage="attestation"] { bottom: 8%; left: 13%; }
.preset-certificate-live[data-variant="8"] .certificate-conformance-arc i { width: 9px; height: 9px; border-radius: 50%; background: var(--template-accent); box-shadow: 0 0 0 2px var(--template-primary); }
.preset-certificate-live[data-variant="8"] .certificate-attestation-endpoint { position: absolute; right: 9%; bottom: 18%; width: 10px; height: 10px; border-radius: 50%; background: var(--template-primary); box-shadow: 0 0 0 4px var(--template-accent); }
.preset-certificate-live[data-variant="8"] .certificate-assurance-register { position: absolute; right: 11%; bottom: 25%; color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="8"] > .certificate-brand { top: 8%; right: 38%; left: 8%; font-family: var(--sans); text-align: left; }
.preset-certificate-live[data-variant="8"] > .certificate-content { inset: 20% 39% 25% 8%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="8"] h2, .preset-certificate-live[data-variant="8"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="8"] .certificate-verification-rail { right: 7%; bottom: 5.5%; left: 8%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); }
.preset-certificate-live[data-variant="8"] .certificate-verification-rail small { color: #5c756c; }
.preset-certificate-live[data-variant="8"] .certificate-verification-rail strong { color: var(--template-primary); }
/* 09 Blueprint Engineering — orthographic views and revision block. */
.preset-certificate-live:is([data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"]) h3 { max-height: 54px; line-height: 1.15; }
.preset-certificate-live[data-variant="9"] { overflow: hidden; border: 0; outline: 0; background-color: #f6fbff; background-image: linear-gradient(#0a4d8c12 1px, transparent 1px), linear-gradient(90deg, #0a4d8c12 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 16px 35px #0a4d8c24, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="9"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="9"] .certificate-blueprint-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="9"] .certificate-orthographic-views { position: absolute; top: 15%; right: 28%; display: grid; width: 23%; grid-template-columns: repeat(3, 1fr); gap: 3px; color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, .95cqi, 7px); text-align: center; }
.preset-certificate-live[data-variant="9"] .certificate-orthographic-views > span { padding: 4px 2px; border: 1px solid color-mix(in srgb, var(--template-primary), transparent 45%); background: #f6fbffdb; }
.preset-certificate-live[data-variant="9"] .certificate-dimension-chain { position: absolute; right: 38%; bottom: 21%; left: 8%; height: 18px; border-top: 1px solid var(--template-primary); }
.preset-certificate-live[data-variant="9"] .certificate-dimension-chain::before, .preset-certificate-live[data-variant="9"] .certificate-dimension-chain::after { position: absolute; top: -5px; width: 1px; height: 10px; content: ""; background: var(--template-primary); }
.preset-certificate-live[data-variant="9"] .certificate-dimension-chain::before { left: 0; }
.preset-certificate-live[data-variant="9"] .certificate-dimension-chain::after { right: 0; }
.preset-certificate-live[data-variant="9"] .certificate-dimension-chain i { position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--template-accent); }
.preset-certificate-live[data-variant="9"] .certificate-dimension-chain i:nth-child(1) { left: 0; }.preset-certificate-live[data-variant="9"] .certificate-dimension-chain i:nth-child(2) { left: 33%; }.preset-certificate-live[data-variant="9"] .certificate-dimension-chain i:nth-child(3) { left: 66%; }.preset-certificate-live[data-variant="9"] .certificate-dimension-chain i:nth-child(4) { right: 0; }
.preset-certificate-live[data-variant="9"] .certificate-revision-block { position: absolute; top: 10%; right: 5%; bottom: 9%; width: 22%; padding: clamp(10px, 2cqi, 16px); border: 2px solid var(--template-primary); color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="9"] > .certificate-brand { top: 7%; right: 36%; left: 8%; color: var(--template-primary); font-family: var(--mono); text-align: left; }
.preset-certificate-live[data-variant="9"] > .certificate-content { inset: 20% 37% 28% 8%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="9"] h2, .preset-certificate-live[data-variant="9"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="9"] .certificate-verification-rail { top: 38%; right: 6%; bottom: 10%; left: 74%; grid-template-columns: 1fr; align-content: end; border-top: 2px solid var(--template-accent); }
.preset-certificate-live[data-variant="9"] .certificate-verification-rail small { color: #526f88; }.preset-certificate-live[data-variant="9"] .certificate-verification-rail strong { color: var(--template-primary); }.preset-certificate-live[data-variant="9"] .certificate-verification-qr { order: -1; }

/* 10 Sunrise Achievement — horizon and growth stages. */
.preset-certificate-live[data-variant="10"] { overflow: hidden; border: 0; outline: 0; background: #fffaf4; box-shadow: 0 16px 35px #8c2f3921, inset 0 0 0 2px var(--template-primary); }
.preset-certificate-live[data-variant="10"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="10"] .certificate-sunrise-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="10"] .certificate-sunrise-horizon { position: absolute; right: 9%; bottom: 20%; left: 9%; height: 20%; overflow: hidden; border-bottom: 2px solid var(--template-primary); }
.preset-certificate-live[data-variant="10"] .certificate-rising-disc { position: absolute; bottom: -45%; left: 50%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--template-accent); transform: translateX(-50%); }
.preset-certificate-live[data-variant="10"] .certificate-sunrise-horizon > i { position: absolute; bottom: 0; left: 50%; width: 1px; height: 86%; background: color-mix(in srgb, var(--template-accent), transparent 15%); transform-origin: bottom; }
.preset-certificate-live[data-variant="10"] .certificate-sunrise-horizon > i:nth-of-type(1) { transform: rotate(-34deg); }.preset-certificate-live[data-variant="10"] .certificate-sunrise-horizon > i:nth-of-type(2) { transform: rotate(0); }.preset-certificate-live[data-variant="10"] .certificate-sunrise-horizon > i:nth-of-type(3) { transform: rotate(34deg); }
.preset-certificate-live[data-variant="10"] .certificate-growth-stages { position: absolute; right: 23%; bottom: 21%; left: 23%; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); text-align: center; }
.preset-certificate-live[data-variant="10"] > .certificate-brand { top: 8%; font-family: var(--serif); }
.preset-certificate-live[data-variant="10"] > .certificate-content { inset: 22% 17% 36%; }
.preset-certificate-live[data-variant="10"] h2, .preset-certificate-live[data-variant="10"] h3 { color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="10"] .certificate-verification-rail { right: 9%; bottom: 5.5%; left: 9%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); }
.preset-certificate-live[data-variant="10"] .certificate-verification-rail small { color: #875b52; }.preset-certificate-live[data-variant="10"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 11 Monochrome Archive — accession spine and colophon. */
.preset-certificate-live[data-variant="11"] { overflow: hidden; border: 0; outline: 0; background: #fcfcfa; box-shadow: 0 16px 35px #1f1f1f1f, inset 0 0 0 5px var(--template-primary), inset 0 0 0 7px #fcfcfa, inset 0 0 0 8px var(--template-accent); filter: none; }
.preset-certificate-live[data-variant="11"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="11"] .certificate-archive-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="11"] .certificate-accession-spine { position: absolute; top: 7%; bottom: 24%; left: 5%; display: flex; width: 9%; flex-direction: column; align-items: center; justify-content: space-around; background: var(--template-primary); color: #fff; font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); writing-mode: vertical-rl; }
.preset-certificate-live[data-variant="11"] .certificate-colophon { position: absolute; right: 17%; bottom: 22%; left: 17%; padding-top: 6px; border-top: 1px solid var(--template-primary); color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="11"] > .certificate-brand { top: 8%; right: 17%; left: 17%; color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="11"] > .certificate-content { inset: 20% 17% 31%; }
.preset-certificate-live[data-variant="11"] h2, .preset-certificate-live[data-variant="11"] h3 { color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="11"] .certificate-verification-rail { right: 10%; bottom: 5.5%; left: 15%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); }
.preset-certificate-live[data-variant="11"] .certificate-verification-rail small { color: #686868; }.preset-certificate-live[data-variant="11"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 12 Art Deco — axial fan, pylons, and verification plinth. */
.preset-certificate-live[data-variant="12"] { overflow: hidden; border: 0; outline: 0; background: #fcf9fd; box-shadow: 0 16px 35px #2b193d24, inset 0 0 0 3px var(--template-primary), inset 0 0 0 7px #fcf9fd, inset 0 0 0 8px var(--template-accent); }
.preset-certificate-live[data-variant="12"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="12"] .certificate-deco-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="12"] .certificate-deco-pylon { position: absolute; top: 9%; bottom: 9%; width: 5%; border: solid var(--template-primary); }
.preset-certificate-live[data-variant="12"] .certificate-deco-pylon-left { left: 4%; border-width: 3px 0 3px 3px; }.preset-certificate-live[data-variant="12"] .certificate-deco-pylon-right { right: 4%; border-width: 3px 3px 3px 0; }
.preset-certificate-live[data-variant="12"] .certificate-deco-fan { position: absolute; top: 13%; left: 50%; width: 20%; height: 8%; transform: translateX(-50%); }
.preset-certificate-live[data-variant="12"] .certificate-deco-fan i { position: absolute; bottom: 0; left: 50%; width: 2px; height: 100%; background: var(--template-accent); transform-origin: bottom; }
.preset-certificate-live[data-variant="12"] .certificate-deco-fan i:nth-child(1) { transform: rotate(-54deg); }.preset-certificate-live[data-variant="12"] .certificate-deco-fan i:nth-child(2) { transform: rotate(-36deg); }.preset-certificate-live[data-variant="12"] .certificate-deco-fan i:nth-child(3) { transform: rotate(-18deg); }.preset-certificate-live[data-variant="12"] .certificate-deco-fan i:nth-child(5) { transform: rotate(18deg); }.preset-certificate-live[data-variant="12"] .certificate-deco-fan i:nth-child(6) { transform: rotate(36deg); }.preset-certificate-live[data-variant="12"] .certificate-deco-fan i:nth-child(7) { transform: rotate(54deg); }
.preset-certificate-live[data-variant="12"] .certificate-verification-plinth { position: absolute; right: 10%; bottom: 22%; left: 10%; display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: end; gap: 5px; }
.preset-certificate-live[data-variant="12"] .certificate-verification-plinth i { height: 2px; background: var(--template-primary); }.preset-certificate-live[data-variant="12"] .certificate-verification-plinth i:nth-child(2) { height: 5px; background: var(--template-accent); }
.preset-certificate-live[data-variant="12"] > .certificate-brand { top: 8%; font-family: var(--serif); }
.preset-certificate-live[data-variant="12"] > .certificate-content { inset: 24% 17% 32%; }
.preset-certificate-live[data-variant="12"] h2, .preset-certificate-live[data-variant="12"] h3 { color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="12"] .certificate-verification-rail { right: 10%; bottom: 5.5%; left: 10%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); }
.preset-certificate-live[data-variant="12"] .certificate-verification-rail small { color: #665a70; }.preset-certificate-live[data-variant="12"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 13 Civic Service — commons network and public record. */
.preset-certificate-live[data-variant="13"] { overflow: hidden; border: 0; outline: 0; background: #fafcfe; box-shadow: 0 16px 35px #274c7721, inset 0 28px var(--template-primary), inset 0 34px var(--template-accent), inset 0 -24px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="13"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="13"] .certificate-civic-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="13"] .certificate-commons-network { position: absolute; top: 15%; right: 7%; width: 25%; aspect-ratio: 1.35; color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); }
.preset-certificate-live[data-variant="13"] .certificate-commons-network::before { position: absolute; inset: 12%; content: ""; background: linear-gradient(32deg, transparent 49%, color-mix(in srgb, var(--template-primary), transparent 48%) 49.5% 50.5%, transparent 51%), linear-gradient(-32deg, transparent 49%, color-mix(in srgb, var(--template-primary), transparent 48%) 49.5% 50.5%, transparent 51%); }
.preset-certificate-live[data-variant="13"] .certificate-commons-network > i { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--template-primary); transform: translate(-50%,-50%); }
.preset-certificate-live[data-variant="13"] .certificate-commons-network > span { position: absolute; padding-left: 14px; }.preset-certificate-live[data-variant="13"] .certificate-commons-network > span::before { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; content: ""; border-radius: 50%; background: color-mix(in srgb, var(--template-primary), white 58%); transform: translateY(-50%); }
.preset-certificate-live[data-variant="13"] [data-civic-node="community"] { top: 4%; left: 4%; }.preset-certificate-live[data-variant="13"] [data-civic-node="service"] { top: 14%; right: 0; }.preset-certificate-live[data-variant="13"] [data-civic-node="accountability"] { right: 4%; bottom: 4%; }
.preset-certificate-live[data-variant="13"] .certificate-public-record { position: absolute; right: 8%; bottom: 22%; color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="13"] > .certificate-brand { top: 7%; right: 36%; left: 8%; color: var(--template-primary); font-family: var(--sans); text-align: left; }
.preset-certificate-live[data-variant="13"] > .certificate-content { inset: 21% 37% 29% 8%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="13"] h2, .preset-certificate-live[data-variant="13"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="13"] .certificate-verification-rail { right: 8%; bottom: 6%; left: 8%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); }
.preset-certificate-live[data-variant="13"] .certificate-verification-rail small { color: #5a7188; }.preset-certificate-live[data-variant="13"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 14 Healthcare Professional — clinical trace and safety pathway. */
.preset-certificate-live[data-variant="14"] { overflow: hidden; border: 0; outline: 0; background: #f8fcfc; box-shadow: 0 16px 35px #006d7721, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="14"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="14"] .certificate-healthcare-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="14"] .certificate-clinical-trace-panel { position: absolute; top: 11%; right: 6%; bottom: 9%; width: 22%; border: 2px solid var(--template-primary); background: linear-gradient(transparent 49%, color-mix(in srgb, var(--template-accent), transparent 18%) 49% 51%, transparent 51%) center 30% / 84% 42% no-repeat, color-mix(in srgb, var(--template-primary), white 94%); }
.preset-certificate-live[data-variant="14"] .certificate-clinical-trace-panel::before { position: absolute; top: 19%; right: 8%; left: 8%; height: 30%; content: ""; background: var(--template-accent); clip-path: polygon(0 48%,18% 48%,23% 26%,28% 76%,35% 41%,43% 48%,100% 48%,100% 53%,43% 53%,35% 47%,28% 84%,23% 34%,18% 53%,0 53%); }
.preset-certificate-live[data-variant="14"] .certificate-care-pathway { position: absolute; right: 31%; bottom: 22%; left: 9%; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--template-primary); color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); text-align: center; }
.preset-certificate-live[data-variant="14"] .certificate-care-pathway span { position: relative; padding-top: 9px; }.preset-certificate-live[data-variant="14"] .certificate-care-pathway span::before { position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; content: ""; border-radius: 50%; background: var(--template-accent); box-shadow: 0 0 0 2px var(--template-primary); transform: translateX(-50%); }
.preset-certificate-live[data-variant="14"] > .certificate-brand { top: 8%; right: 36%; left: 9%; color: var(--template-primary); font-family: var(--sans); text-align: left; }
.preset-certificate-live[data-variant="14"] > .certificate-content { inset: 21% 37% 28% 9%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="14"] h2, .preset-certificate-live[data-variant="14"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="14"] .certificate-verification-rail { top: 38%; right: 7%; bottom: 10%; left: 73%; grid-template-columns: 1fr; align-content: end; border-top: 2px solid var(--template-accent); }
.preset-certificate-live[data-variant="14"] .certificate-verification-rail small { color: #507478; }.preset-certificate-live[data-variant="14"] .certificate-verification-rail strong { color: var(--template-primary); }.preset-certificate-live[data-variant="14"] .certificate-verification-qr { order: -1; }
/* 15 Creative Blocks — production sequence and vertical folio. */
.preset-certificate-live:is([data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) h3 { max-height: 56px; line-height: 1.15; }
.preset-certificate-live[data-variant="15"] { overflow: hidden; border: 0; outline: 0; background: #fcf9ff; box-shadow: 0 16px 35px #7b2cbf20, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="15"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="15"] .certificate-creative-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="15"] .certificate-creative-sequence { position: absolute; top: 15%; right: 31%; display: grid; width: 26%; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 5px; }
.preset-certificate-live[data-variant="15"] .certificate-creative-sequence i { display: block; background: var(--template-primary); }.preset-certificate-live[data-variant="15"] .certificate-creative-sequence i:nth-child(1) { height: 18px; }.preset-certificate-live[data-variant="15"] .certificate-creative-sequence i:nth-child(2) { height: 34px; background: var(--template-accent); }.preset-certificate-live[data-variant="15"] .certificate-creative-sequence i:nth-child(3) { height: 25px; background: color-mix(in srgb, var(--template-primary), white 42%); }
.preset-certificate-live[data-variant="15"] .certificate-vertical-folio { position: absolute; top: 11%; right: 6%; bottom: 9%; width: 22%; padding: 12px; border: 2px solid var(--template-primary); background: color-mix(in srgb, var(--template-primary), white 94%); color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="15"] > .certificate-brand { top: 8%; right: 36%; left: 9%; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="15"] > .certificate-content { inset: 21% 37% 28% 9%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }
.preset-certificate-live[data-variant="15"] h2, .preset-certificate-live[data-variant="15"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="15"] .certificate-verification-rail { top: 38%; right: 7%; bottom: 10%; left: 73%; grid-template-columns: 1fr; align-content: end; border-top: 2px solid var(--template-accent); }.preset-certificate-live[data-variant="15"] .certificate-verification-qr { order: -1; }.preset-certificate-live[data-variant="15"] .certificate-verification-rail small { color: #6b507d; }.preset-certificate-live[data-variant="15"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 16 Sustainable Veins — regenerative branches and impact ledger. */
.preset-certificate-live[data-variant="16"] { overflow: hidden; border: 0; outline: 0; background: #f9fcf7; box-shadow: 0 16px 35px #3866411f, inset 0 0 0 2px var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="16"] .preset-certificate-decoration { display: none; }
.preset-certificate-live[data-variant="16"] .certificate-sustainable-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="16"] .certificate-regenerative-vein { position: absolute; top: 13%; right: 7%; width: 24%; height: 48%; color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); }
.preset-certificate-live[data-variant="16"] .certificate-regenerative-vein > i { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: var(--template-primary); }
.preset-certificate-live[data-variant="16"] .certificate-regenerative-vein > span { position: absolute; padding-left: 13px; }.preset-certificate-live[data-variant="16"] .certificate-regenerative-vein > span::before { position: absolute; top: 50%; left: 0; width: 9px; height: 6px; content: ""; border-radius: 80% 10%; background: var(--template-accent); transform: translateY(-50%) rotate(-18deg); }
.preset-certificate-live[data-variant="16"] [data-impact-branch="planet"] { top: 13%; left: 3%; }.preset-certificate-live[data-variant="16"] [data-impact-branch="people"] { top: 44%; right: 0; }.preset-certificate-live[data-variant="16"] [data-impact-branch="governance"] { bottom: 8%; left: 3%; }
.preset-certificate-live[data-variant="16"] .certificate-impact-ledger { position: absolute; right: 8%; bottom: 24%; color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="16"] > .certificate-brand { top: 8%; right: 36%; left: 9%; color: var(--template-primary); text-align: left; }.preset-certificate-live[data-variant="16"] > .certificate-content { inset: 21% 37% 29% 9%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }.preset-certificate-live[data-variant="16"] h2, .preset-certificate-live[data-variant="16"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="16"] .certificate-verification-rail { right: 9%; bottom: 5.5%; left: 9%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); }.preset-certificate-live[data-variant="16"] .certificate-verification-rail small { color: #58704f; }.preset-certificate-live[data-variant="16"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 17 Financial Order — reconciliation columns and audit register. */
.preset-certificate-live[data-variant="17"] { overflow: hidden; border: 0; outline: 0; background: #f9fbfc; box-shadow: 0 16px 35px #00304920, inset 0 0 0 3px var(--template-primary); }
.preset-certificate-live[data-variant="17"] .preset-certificate-decoration { display: none; }.preset-certificate-live[data-variant="17"] .certificate-financial-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="17"] .certificate-reconciliation-column { position: absolute; top: 9%; bottom: 9%; width: 6%; background: repeating-linear-gradient(0deg, var(--template-primary) 0 5px, transparent 5px 14px); }.preset-certificate-live[data-variant="17"] .certificate-reconciliation-control { left: 3%; }.preset-certificate-live[data-variant="17"] .certificate-reconciliation-assurance { right: 3%; background-image: repeating-linear-gradient(0deg, var(--template-accent) 0 5px, transparent 5px 14px); }
.preset-certificate-live[data-variant="17"] .certificate-balance-rule { position: absolute; right: 17%; bottom: 23%; left: 17%; height: 3px; background: var(--template-primary); box-shadow: 0 6px var(--template-accent); }
.preset-certificate-live[data-variant="17"] .certificate-audit-register { position: absolute; right: 18%; bottom: 24%; left: 18%; display: grid; grid-template-columns: repeat(3, 1fr); color: var(--template-primary); font-family: var(--mono); font-size: clamp(4.5px, 1cqi, 7px); text-align: center; }
.preset-certificate-live[data-variant="17"] > .certificate-brand { top: 8%; right: 17%; left: 17%; color: var(--template-primary); }.preset-certificate-live[data-variant="17"] > .certificate-content { inset: 21% 17% 31%; }.preset-certificate-live[data-variant="17"] h2, .preset-certificate-live[data-variant="17"] h3 { color: var(--template-primary); }
.preset-certificate-live[data-variant="17"] .certificate-verification-rail { right: 11%; bottom: 5.5%; left: 11%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); }.preset-certificate-live[data-variant="17"] .certificate-verification-rail small { color: #4a5e69; }.preset-certificate-live[data-variant="17"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 18 Global Vision — azimuthal routes and manifest. */
.preset-certificate-live[data-variant="18"] { overflow: hidden; border: 0; outline: 0; background: #f9fbfe; box-shadow: 0 16px 35px #1d355721, inset 0 0 0 2px var(--template-primary); text-align: left; }.preset-certificate-live[data-variant="18"] .preset-certificate-decoration { display: none; }.preset-certificate-live[data-variant="18"] .certificate-global-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="18"] .certificate-azimuthal-grid { position: absolute; top: 12%; right: 6%; width: 26%; aspect-ratio: 1; border: 2px solid var(--template-primary); border-radius: 50%; }.preset-certificate-live[data-variant="18"] .certificate-azimuthal-grid::before, .preset-certificate-live[data-variant="18"] .certificate-azimuthal-grid::after { position: absolute; content: ""; border: 1px solid color-mix(in srgb, var(--template-primary), transparent 48%); border-radius: 50%; }.preset-certificate-live[data-variant="18"] .certificate-azimuthal-grid::before { inset: 18% 0; }.preset-certificate-live[data-variant="18"] .certificate-azimuthal-grid::after { inset: 0 28%; }
.preset-certificate-live[data-variant="18"] .certificate-global-routes { position: absolute; top: 18%; right: 10%; width: 18%; height: 28%; border: solid var(--template-accent); border-width: 2px 0 0; transform: rotate(-18deg); }.preset-certificate-live[data-variant="18"] .certificate-global-routes span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--template-accent); }.preset-certificate-live[data-variant="18"] [data-global-route="origin"] { top: -5px; left: 0; }.preset-certificate-live[data-variant="18"] [data-global-route="exchange"] { top: 42%; left: 48%; }.preset-certificate-live[data-variant="18"] [data-global-route="destination"] { right: 0; bottom: 0; }
.preset-certificate-live[data-variant="18"] .certificate-route-node { position: absolute; top: 31%; right: 17%; width: 13px; height: 13px; border-radius: 50%; background: var(--template-primary); }.preset-certificate-live[data-variant="18"] .certificate-verification-manifest { position: absolute; right: 8%; bottom: 24%; color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); }
.preset-certificate-live[data-variant="18"] > .certificate-brand { top: 8%; right: 36%; left: 9%; color: var(--template-primary); text-align: left; }.preset-certificate-live[data-variant="18"] > .certificate-content { inset: 21% 37% 29% 9%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }.preset-certificate-live[data-variant="18"] h2, .preset-certificate-live[data-variant="18"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="18"] .certificate-verification-rail { right: 9%; bottom: 5.5%; left: 9%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); }.preset-certificate-live[data-variant="18"] .certificate-verification-rail small { color: #55677f; }.preset-certificate-live[data-variant="18"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 19 Achievement Ribbon — medallion, ribbon, and podium. */
.preset-certificate-live[data-variant="19"] { overflow: hidden; border: 0; outline: 0; background: #fffaf7; box-shadow: 0 16px 35px #78000021, inset 0 0 0 2px var(--template-primary); text-align: left; }.preset-certificate-live[data-variant="19"] .preset-certificate-decoration { display: none; }.preset-certificate-live[data-variant="19"] .certificate-ribbon-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="19"] .certificate-award-ribbon { position: absolute; top: 10%; right: 12%; width: 13%; height: 39%; background: var(--template-primary); clip-path: polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); }.preset-certificate-live[data-variant="19"] .certificate-award-ribbon i { position: absolute; inset: 12%; border: 1px solid var(--template-accent); }
.preset-certificate-live[data-variant="19"] .certificate-achievement-medallion { position: absolute; top: 20%; right: 8%; width: 21%; aspect-ratio: 1; border: 3px solid var(--template-primary); border-radius: 50%; background: var(--template-accent); box-shadow: inset 0 0 0 7px var(--template-accent), inset 0 0 0 9px #fffaf7; }.preset-certificate-live[data-variant="19"] .certificate-achievement-medallion i { position: absolute; top: 50%; right: 20%; left: 20%; height: 4px; background: var(--template-primary); }
.preset-certificate-live[data-variant="19"] .certificate-verification-podium { position: absolute; right: 8%; bottom: 24%; width: 22%; height: 7px; background: var(--template-primary); box-shadow: 0 7px var(--template-accent); }
.preset-certificate-live[data-variant="19"] > .certificate-brand { top: 8%; right: 36%; left: 9%; color: var(--template-primary); text-align: left; }.preset-certificate-live[data-variant="19"] > .certificate-content { inset: 21% 37% 29% 9%; align-items: flex-start; overflow: visible; text-align: left; transform-origin: left center; }.preset-certificate-live[data-variant="19"] h2, .preset-certificate-live[data-variant="19"] h3 { max-width: 100%; overflow: visible; color: var(--template-primary); text-align: left; }
.preset-certificate-live[data-variant="19"] .certificate-verification-rail { right: 9%; bottom: 5.5%; left: 9%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); }.preset-certificate-live[data-variant="19"] .certificate-verification-rail small { color: #805252; }.preset-certificate-live[data-variant="19"] .certificate-verification-rail strong { color: var(--template-primary); }

/* 20 Luxury Gold — assay frame and provenance register. */
.preset-certificate-live[data-variant="20"] { overflow: hidden; border: 0; outline: 0; background: #faf9f6; box-shadow: 0 16px 35px #11111125, inset 0 0 0 6px var(--template-accent), inset 0 0 0 8px #faf9f6, inset 0 0 0 10px var(--template-primary); }.preset-certificate-live[data-variant="20"] .preset-certificate-decoration { display: none; }.preset-certificate-live[data-variant="20"] .certificate-luxury-system { position: absolute; inset: 0; display: block; }
.preset-certificate-live[data-variant="20"] .certificate-assay-frame { position: absolute; inset: 5%; border: 1px solid var(--template-primary); box-shadow: inset 0 0 0 7px #faf9f6, inset 0 0 0 8px var(--template-accent); }.preset-certificate-live[data-variant="20"] [data-assay-mark] { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--template-accent); }.preset-certificate-live[data-variant="20"] [data-assay-mark="north"] { top: -5px; left: calc(50% - 5px); }.preset-certificate-live[data-variant="20"] [data-assay-mark="east"] { top: calc(50% - 5px); right: -5px; }.preset-certificate-live[data-variant="20"] [data-assay-mark="south"] { bottom: -5px; left: calc(50% - 5px); }.preset-certificate-live[data-variant="20"] [data-assay-mark="west"] { top: calc(50% - 5px); left: -5px; }
.preset-certificate-live[data-variant="20"] [data-print-layer] { position: absolute; top: 14%; left: 50%; width: 2px; height: 11%; transform-origin: bottom; }.preset-certificate-live[data-variant="20"] [data-print-layer="black"] { background: var(--template-primary); transform: rotate(0); }.preset-certificate-live[data-variant="20"] [data-print-layer="foil-gold"] { background: var(--template-accent); transform: rotate(45deg); }.preset-certificate-live[data-variant="20"] [data-print-layer="blind-deboss"] { background: #b8b5ad; transform: rotate(-45deg); }
.preset-certificate-live[data-variant="20"] .certificate-provenance-register { position: absolute; right: 17%; bottom: 24%; left: 17%; padding-top: 5px; border-top: 2px solid var(--template-primary); color: var(--template-primary); font-family: var(--mono); font-size: clamp(5px, 1.1cqi, 8px); text-align: center; }
.preset-certificate-live[data-variant="20"] > .certificate-brand { top: 8%; right: 17%; left: 17%; color: var(--template-primary); font-family: var(--serif); }.preset-certificate-live[data-variant="20"] > .certificate-content { inset: 22% 17% 31%; }.preset-certificate-live[data-variant="20"] h2, .preset-certificate-live[data-variant="20"] h3 { color: var(--template-primary); font-family: var(--serif); }
.preset-certificate-live[data-variant="20"] .certificate-verification-rail { right: 11%; bottom: 5.5%; left: 11%; grid-template-columns: 1.25fr .8fr 1fr auto .75fr; border-top: 2px solid var(--template-primary); box-shadow: inset 0 2px var(--template-accent); }.preset-certificate-live[data-variant="20"] .certificate-verification-rail small { color: #695e4c; }.preset-certificate-live[data-variant="20"] .certificate-verification-rail strong { color: var(--template-primary); }

.preset-certificate-thumb[data-variant="2"] { border-top: 16px solid var(--preset-primary); outline: 0; box-shadow: inset 0 3px var(--preset-accent); }
.preset-certificate-thumb[data-variant="3"] { border-left: 18px solid var(--preset-primary); outline: 0; box-shadow: inset 4px 0 var(--preset-accent); }
.preset-certificate-thumb[data-variant="4"]::after { border: 3px double var(--preset-accent); }
.preset-certificate-thumb[data-variant="5"] { outline: 0; border-top: 2px solid var(--preset-primary); border-bottom: 2px solid var(--preset-primary); }
.preset-certificate-thumb[data-variant="6"] { background-image: linear-gradient(#073b4c24 1px, transparent 1px), linear-gradient(90deg, #06d6a024 1px, transparent 1px); background-size: 17px 17px; }
.preset-certificate-thumb[data-variant="7"]::after { border-width: 5px 0 0 5px; }
.preset-certificate-thumb[data-variant="8"] { background: radial-gradient(circle at 0 0, transparent 0 18px, var(--preset-accent) 19px 23px, transparent 24px), #fff; }
.preset-certificate-thumb[data-variant="9"] { border: 12px solid var(--preset-primary); outline: 0; }
.preset-certificate-thumb[data-variant="10"] { background: repeating-conic-gradient(from 255deg at 50% 0, #f4a26135 0deg 8deg, transparent 8deg 17deg), #fff; }
.preset-certificate-thumb[data-variant="11"] { filter: grayscale(1); outline-width: 5px; }
.preset-certificate-thumb[data-variant="12"] { outline: 5px double var(--preset-primary); outline-offset: -10px; }
.preset-certificate-thumb[data-variant="13"] { border-top: 12px solid var(--preset-primary); border-bottom: 10px solid var(--preset-primary); outline: 0; }
.preset-certificate-thumb[data-variant="14"] { background: linear-gradient(90deg, transparent 42%, var(--preset-accent) 42% 58%, transparent 58%), linear-gradient(transparent 37%, var(--preset-accent) 37% 63%, transparent 63%), #fff; background-size: 26px 26px; background-position: 6px 6px; background-repeat: no-repeat; }
.preset-certificate-thumb[data-variant="15"] { background: linear-gradient(90deg, var(--preset-primary) 0 32%, transparent 32%) top / 100% 12px no-repeat, linear-gradient(270deg, var(--preset-accent) 0 30%, transparent 30%) bottom / 100% 12px no-repeat, #fff; }
.preset-certificate-thumb[data-variant="16"] { background: repeating-radial-gradient(ellipse at 0 50%, #a7c95742 0 5px, transparent 6px 15px), #fff; }
.preset-certificate-thumb[data-variant="17"] { border-right: 10px double var(--preset-accent); border-left: 10px double var(--preset-primary); outline: 0; }
.preset-certificate-thumb[data-variant="18"] { background: radial-gradient(circle at 0 50%, transparent 0 18px, var(--preset-primary) 19px 23px, transparent 24px), radial-gradient(circle at 100% 50%, transparent 0 18px, var(--preset-accent) 19px 23px, transparent 24px), #fff; }
.preset-certificate-thumb[data-variant="19"] { border-bottom: 18px solid var(--preset-primary); }
.preset-certificate-thumb[data-variant="20"] { outline: 6px double var(--preset-accent); outline-offset: -10px; }

.badge-live-stage { display: grid; min-height: 500px; place-items: center; overflow: hidden; border: 1px solid var(--line); background: #e9eeeb; }
.custom-badge-live { width: 86%; max-height: 460px; object-fit: contain; filter: drop-shadow(0 18px 22px #142b3230); }
.generated-badge-live { display: block; width: min(94%, 460px); height: auto; max-height: 470px; object-fit: contain; }
.live-badge-shell { position: relative; display: flex; width: 380px; height: 380px; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 58px 52px 43px; background-color: var(--template-primary); color: white; filter: drop-shadow(0 24px 20px #10232d3d) drop-shadow(0 8px 7px #10232d38) drop-shadow(0 2px 1px #ffffff4d); text-align: center; }
.live-badge-shell::before { position: absolute; inset: 0; z-index: 0; content: ""; background: radial-gradient(ellipse at 27% 13%, #ffffffa3 0 2%, #ffffff52 15%, #ffffff1f 28%, transparent 46%), linear-gradient(145deg, #ffffff3d 0 10%, transparent 33% 60%, #04131c73 100%); box-shadow: inset 8px 10px 16px #ffffff42, inset -16px -22px 28px #0518218f; pointer-events: none; }
.live-badge-shell::after { position: absolute; inset: 0; z-index: 1; content: ""; clip-path: inherit; background: linear-gradient(145deg, #ffffff33 0 8%, transparent 27% 66%, #04131c52 100%); box-shadow: inset 7px 9px 11px #ffffff38, inset -13px -17px 18px #05182180; opacity: .88; }
.live-badge-shell > * { position: relative; z-index: 2; }
.preset-badge-thumb > .badge-motif, .live-badge-shell > .badge-motif { position: absolute; z-index: 1; pointer-events: none; }
.preset-badge-thumb > .badge-motif { inset: 10%; opacity: .58; }
.live-badge-shell > .badge-motif { inset: 9%; opacity: .62; }
.live-badge-shell small { margin-bottom: 15px; color: var(--template-accent); font-size: 9px; }
.live-badge-shell strong { display: -webkit-box; max-width: 245px; max-height: 72px; overflow: hidden; font-family: var(--sans); font-size: 23px; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.live-badge-shell i { width: 92px; height: 4px; margin: 18px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--template-accent), white 28%), var(--template-accent) 48%, color-mix(in srgb, var(--template-accent), black 22%)); box-shadow: 0 2px 3px #07192378, 0 -1px 0 #ffffff75; }
.live-badge-shell p { margin: 0; font-size: 14px; }
.live-badge-shell em { margin-top: 13px; font-family: var(--mono); font-size: 9px; font-style: normal; opacity: .72; }
.live-badge-mark { position: absolute; top: 44px; color: var(--template-accent); font-family: var(--serif); font-size: 38px; font-weight: 700; text-shadow: 0 1px 0 #ffffff8f, 0 4px 6px #07192394; }
.live-badge-shell[data-variant="1"], .preset-badge-thumb[data-variant="1"] { clip-path: polygon(50% 0, 94% 24%, 94% 74%, 50% 100%, 6% 74%, 6% 24%); }
.live-badge-shell[data-variant="2"], .preset-badge-thumb[data-variant="2"] { border-radius: 50%; }
.live-badge-shell[data-variant="3"], .preset-badge-thumb[data-variant="3"] { clip-path: polygon(50% 0, 94% 16%, 88% 70%, 50% 100%, 12% 70%, 6% 16%); }
.live-badge-shell[data-variant="4"], .preset-badge-thumb[data-variant="4"] { clip-path: polygon(50% 0, 62% 27%, 91% 18%, 74% 45%, 100% 60%, 68% 64%, 72% 96%, 50% 78%, 28% 96%, 32% 64%, 0 60%, 26% 45%, 9% 18%, 38% 27%); }
.live-badge-shell[data-variant="5"], .preset-badge-thumb[data-variant="5"] { clip-path: polygon(18% 0, 82% 0, 96% 55%, 74% 78%, 68% 100%, 50% 86%, 32% 100%, 26% 78%, 4% 55%); }
.live-badge-shell[data-variant="6"], .preset-badge-thumb[data-variant="6"] { border-radius: 50%; box-shadow: inset 0 0 0 15px var(--template-accent); }
.live-badge-shell[data-variant="7"], .preset-badge-thumb[data-variant="7"] { clip-path: polygon(50% 0, 100% 48%, 50% 100%, 0 48%); }
.live-badge-shell[data-variant="8"], .preset-badge-thumb[data-variant="8"] { clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%); }
.live-badge-shell[data-variant="9"], .preset-badge-thumb[data-variant="9"] { border-radius: 14%; background-image: linear-gradient(#00b4d826 1px, transparent 1px), linear-gradient(90deg, #00b4d826 1px, transparent 1px); background-size: 32px 32px; }
.live-badge-shell[data-variant="10"], .preset-badge-thumb[data-variant="10"] { clip-path: circle(49%); box-shadow: inset 0 0 0 20px var(--template-accent); }
.live-badge-shell[data-variant="11"], .preset-badge-thumb[data-variant="11"] { clip-path: polygon(50% 0, 97% 70%, 50% 100%, 3% 70%); }
.live-badge-shell[data-variant="12"], .preset-badge-thumb[data-variant="12"] { border-radius: 48% 48% 50% 50% / 58% 58% 42% 42%; clip-path: polygon(50% 0, 86% 24%, 100% 65%, 75% 100%, 25% 100%, 0 65%, 14% 24%); }
.live-badge-shell[data-variant="13"], .preset-badge-thumb[data-variant="13"] { border-radius: 50%; background-image: radial-gradient(circle at 72% 24%, var(--template-accent) 0 8px, transparent 9px), radial-gradient(ellipse, transparent 0 45%, var(--template-accent) 46% 48%, transparent 49%); }
.live-badge-shell[data-variant="14"], .preset-badge-thumb[data-variant="14"] { clip-path: polygon(8% 14%, 28% 14%, 35% 0, 50% 16%, 65% 0, 72% 14%, 92% 14%, 98% 100%, 2% 100%); }
.live-badge-shell[data-variant="15"], .preset-badge-thumb[data-variant="15"] { clip-path: polygon(50% 0, 62% 22%, 85% 15%, 78% 38%, 100% 50%, 78% 62%, 85% 85%, 62% 78%, 50% 100%, 38% 78%, 15% 85%, 22% 62%, 0 50%, 22% 38%, 15% 15%, 38% 22%); }
.live-badge-shell[data-variant="16"], .preset-badge-thumb[data-variant="16"] { border-radius: 50% 8% 50% 8%; transform: rotate(0deg); }
.live-badge-shell[data-variant="17"], .preset-badge-thumb[data-variant="17"] { border-radius: 50%; background-image: repeating-radial-gradient(ellipse at 0 65%, transparent 0 31px, #90e0ef47 32px 41px, transparent 42px 65px); }
.live-badge-shell[data-variant="18"], .preset-badge-thumb[data-variant="18"] { clip-path: polygon(22% 0, 78% 0, 94% 16%, 94% 100%, 6% 100%, 6% 16%); }
.live-badge-shell[data-variant="19"], .preset-badge-thumb[data-variant="19"] { clip-path: polygon(50% 0, 62% 28%, 86% 8%, 78% 38%, 100% 50%, 72% 62%, 92% 88%, 62% 76%, 50% 100%, 38% 76%, 8% 88%, 28% 62%, 0 50%, 22% 38%, 14% 8%, 38% 28%); }
.live-badge-shell[data-variant="20"], .preset-badge-thumb[data-variant="20"] { clip-path: polygon(50% 0, 94% 24%, 94% 74%, 50% 100%, 6% 74%, 6% 24%); background-image: radial-gradient(circle, transparent 0 34%, #ffc30048 35% 37%, transparent 38%), linear-gradient(90deg, transparent 49%, #ffc30042 50% 51%, transparent 52%); }
.live-badge-shell[data-variant="21"], .preset-badge-thumb[data-variant="21"] { clip-path: polygon(50% 1%, 59% 5%, 69% 5%, 76% 12%, 85% 15%, 88% 24%, 95% 31%, 95% 41%, 99% 50%, 95% 59%, 95% 69%, 88% 76%, 85% 85%, 76% 88%, 69% 95%, 59% 95%, 50% 99%, 41% 95%, 31% 95%, 24% 88%, 15% 85%, 12% 76%, 5% 69%, 5% 59%, 1% 50%, 5% 41%, 5% 31%, 12% 24%, 15% 15%, 24% 12%, 31% 5%, 41% 5%); }
.live-badge-shell[data-variant="22"], .preset-badge-thumb[data-variant="22"], .live-badge-shell[data-variant="23"], .preset-badge-thumb[data-variant="23"], .live-badge-shell[data-variant="24"], .preset-badge-thumb[data-variant="24"] { border-radius: 50%; }
.live-badge-shell[data-variant="25"], .preset-badge-thumb[data-variant="25"], .live-badge-shell[data-variant="26"], .preset-badge-thumb[data-variant="26"], .live-badge-shell[data-variant="27"], .preset-badge-thumb[data-variant="27"] { clip-path: polygon(25% 0, 75% 0, 85% 10%, 85% 90%, 75% 100%, 25% 100%, 15% 90%, 15% 10%); }
.live-badge-shell[data-variant="28"], .preset-badge-thumb[data-variant="28"], .live-badge-shell[data-variant="29"], .preset-badge-thumb[data-variant="29"], .live-badge-shell[data-variant="30"], .preset-badge-thumb[data-variant="30"] { clip-path: ellipse(44% 49% at 50% 50%); }
.live-badge-shell[data-variant="31"], .preset-badge-thumb[data-variant="31"], .live-badge-shell[data-variant="32"], .preset-badge-thumb[data-variant="32"], .live-badge-shell[data-variant="33"], .preset-badge-thumb[data-variant="33"] { clip-path: polygon(24% 0, 76% 0, 94% 18%, 94% 82%, 76% 100%, 24% 100%, 6% 82%, 6% 18%); }
.live-badge-shell[data-variant="34"], .preset-badge-thumb[data-variant="34"], .live-badge-shell[data-variant="35"], .preset-badge-thumb[data-variant="35"], .live-badge-shell[data-variant="36"], .preset-badge-thumb[data-variant="36"] { clip-path: polygon(50% 0, 78% 10%, 100% 35%, 92% 72%, 68% 100%, 32% 100%, 8% 72%, 0 35%, 22% 10%); }

/* Material-specific light response and motifs */
.live-badge-shell[data-variant="1"], .preset-badge-thumb[data-variant="1"] { background-image: linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 17%), var(--template-primary) 42%, color-mix(in srgb, var(--template-primary), black 30%)); }
.live-badge-shell[data-variant="1"] > .badge-motif, .preset-badge-thumb[data-variant="1"] > .badge-motif { background: radial-gradient(circle at 16% 25%, var(--template-accent) 0 1.2%, transparent 1.8%), radial-gradient(circle at 84% 25%, var(--template-accent) 0 1.2%, transparent 1.8%), radial-gradient(circle at 16% 74%, var(--template-accent) 0 1.2%, transparent 1.8%), radial-gradient(circle at 84% 74%, var(--template-accent) 0 1.2%, transparent 1.8%), linear-gradient(90deg, transparent 16%, color-mix(in srgb, var(--template-accent), transparent 72%) 16% 17%, transparent 17% 83%, color-mix(in srgb, var(--template-accent), transparent 72%) 83% 84%, transparent 84%); }
.live-badge-shell[data-variant="2"], .preset-badge-thumb[data-variant="2"] { background-image: radial-gradient(circle at 34% 24%, color-mix(in srgb, var(--template-primary), white 24%), var(--template-primary) 34%, color-mix(in srgb, var(--template-primary), black 26%) 78%); }
.live-badge-shell[data-variant="2"] > .badge-motif, .preset-badge-thumb[data-variant="2"] > .badge-motif { border-radius: 50%; background: repeating-conic-gradient(from -3deg, color-mix(in srgb, var(--template-accent), white 18%) 0 1deg, transparent 1deg 7deg), radial-gradient(circle, transparent 0 61%, color-mix(in srgb, var(--template-accent), transparent 48%) 62% 66%, transparent 67%); }
.live-badge-shell[data-variant="3"], .preset-badge-thumb[data-variant="3"] { background-image: linear-gradient(100deg, color-mix(in srgb, var(--template-primary), white 14%), var(--template-primary) 38% 66%, color-mix(in srgb, var(--template-primary), black 34%)); }
.live-badge-shell[data-variant="3"] > .badge-motif, .preset-badge-thumb[data-variant="3"] > .badge-motif { background: radial-gradient(circle at 20% 22%, var(--template-accent) 0 1.4%, transparent 2%), radial-gradient(circle at 80% 22%, var(--template-accent) 0 1.4%, transparent 2%), linear-gradient(135deg, transparent 43%, color-mix(in srgb, var(--template-accent), transparent 55%) 44% 47%, transparent 48%) center 12% / 46% 46% no-repeat; }
.live-badge-shell[data-variant="4"], .preset-badge-thumb[data-variant="4"] { background-image: conic-gradient(from -18deg, color-mix(in srgb, var(--template-primary), white 24%), var(--template-primary) 9%, color-mix(in srgb, var(--template-primary), black 23%) 18%, var(--template-primary) 28%, color-mix(in srgb, var(--template-primary), white 13%) 38%, var(--template-primary) 50%, color-mix(in srgb, var(--template-primary), black 28%) 64%, var(--template-primary) 78%, color-mix(in srgb, var(--template-primary), white 20%)); }
.live-badge-shell[data-variant="4"] > .badge-motif, .preset-badge-thumb[data-variant="4"] > .badge-motif { background: repeating-conic-gradient(from 0deg, transparent 0 17deg, color-mix(in srgb, var(--template-accent), transparent 58%) 18deg 19deg, transparent 20deg 36deg); clip-path: circle(39%); }
.live-badge-shell[data-variant="5"], .preset-badge-thumb[data-variant="5"] { background-image: repeating-linear-gradient(96deg, #ffffff0b 0 1px, #0000000d 1px 3px), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 12%), var(--template-primary) 52%, color-mix(in srgb, var(--template-primary), black 31%)); }
.live-badge-shell[data-variant="5"] > .badge-motif, .preset-badge-thumb[data-variant="5"] > .badge-motif { background: radial-gradient(circle at 50% 36%, transparent 0 28%, color-mix(in srgb, var(--template-accent), white 18%) 29% 33%, color-mix(in srgb, var(--template-accent), black 18%) 34% 38%, transparent 39%), linear-gradient(155deg, transparent 63%, #00000038 64% 68%, transparent 69%); }
.live-badge-shell[data-variant="6"], .preset-badge-thumb[data-variant="6"] { background-image: repeating-conic-gradient(from 15deg, #ffffff13 0 .8deg, #00000010 .8deg 1.6deg), radial-gradient(circle at 36% 27%, color-mix(in srgb, var(--template-primary), white 20%), var(--template-primary) 42%, color-mix(in srgb, var(--template-primary), black 32%) 88%); }
.live-badge-shell[data-variant="6"] > .badge-motif, .preset-badge-thumb[data-variant="6"] > .badge-motif { border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb, var(--template-accent), transparent 50%) 0 1deg, transparent 1deg 8deg), radial-gradient(circle, transparent 0 54%, color-mix(in srgb, var(--template-accent), transparent 46%) 55% 58%, transparent 59% 67%, #ffffff1c 68% 69%, transparent 70%); }
.live-badge-shell[data-variant="7"], .preset-badge-thumb[data-variant="7"] { background-image: conic-gradient(from 45deg, color-mix(in srgb, var(--template-primary), white 34%), var(--template-primary) 12.5%, color-mix(in srgb, var(--template-primary), black 23%) 25%, color-mix(in srgb, var(--template-primary), white 18%) 37.5%, var(--template-primary) 50%, color-mix(in srgb, var(--template-primary), black 31%) 62.5%, var(--template-primary) 75%, color-mix(in srgb, var(--template-primary), white 28%) 87.5%); }
.live-badge-shell[data-variant="7"] > .badge-motif, .preset-badge-thumb[data-variant="7"] > .badge-motif { background: linear-gradient(45deg, transparent 49%, #ffffff4d 49.5% 50.5%, transparent 51%), linear-gradient(-45deg, transparent 49%, #00000038 49.5% 50.5%, transparent 51%); }
.live-badge-shell[data-variant="8"], .preset-badge-thumb[data-variant="8"] { background-image: linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 12%), var(--template-primary) 44%, color-mix(in srgb, var(--template-primary), black 28%)); }
.live-badge-shell[data-variant="8"] > .badge-motif, .preset-badge-thumb[data-variant="8"] > .badge-motif { background: radial-gradient(circle at 11% 11%, var(--template-accent) 0 2%, #00000080 2.4% 3.2%, transparent 3.6%), radial-gradient(circle at 89% 11%, var(--template-accent) 0 2%, #00000080 2.4% 3.2%, transparent 3.6%), radial-gradient(circle at 11% 89%, var(--template-accent) 0 2%, #00000080 2.4% 3.2%, transparent 3.6%), radial-gradient(circle at 89% 89%, var(--template-accent) 0 2%, #00000080 2.4% 3.2%, transparent 3.6%), repeating-linear-gradient(135deg, transparent 0 8%, #ffffff0f 8.5% 9%, transparent 9.5% 17%); }
.live-badge-shell[data-variant="9"], .preset-badge-thumb[data-variant="9"] { background-image: linear-gradient(#ffffff16 1px, transparent 1px), linear-gradient(90deg, #ffffff16 1px, transparent 1px), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 25%), var(--template-primary) 46%, color-mix(in srgb, var(--template-primary), black 35%)); background-size: 11% 11%, 11% 11%, 100% 100%; }
.live-badge-shell[data-variant="9"] > .badge-motif, .preset-badge-thumb[data-variant="9"] > .badge-motif { background: radial-gradient(circle at 18% 20%, var(--template-accent) 0 1.8%, transparent 2.3%), radial-gradient(circle at 80% 26%, var(--template-accent) 0 1.8%, transparent 2.3%), radial-gradient(circle at 24% 78%, var(--template-accent) 0 1.8%, transparent 2.3%), linear-gradient(90deg, transparent 18%, color-mix(in srgb, var(--template-accent), transparent 54%) 18% 19%, transparent 19% 79%, color-mix(in srgb, var(--template-accent), transparent 54%) 79% 80%, transparent 80%); }
.live-badge-shell[data-variant="10"], .preset-badge-thumb[data-variant="10"] { background-image: radial-gradient(circle at 36% 25%, color-mix(in srgb, var(--template-primary), white 18%), var(--template-primary) 45%, color-mix(in srgb, var(--template-primary), black 28%) 89%); }
.live-badge-shell[data-variant="10"] > .badge-motif, .preset-badge-thumb[data-variant="10"] > .badge-motif { border-radius: 50%; background: repeating-conic-gradient(from -8deg, color-mix(in srgb, var(--template-accent), transparent 24%) 0 3deg, transparent 3deg 14deg), radial-gradient(circle, transparent 0 60%, color-mix(in srgb, var(--template-accent), transparent 52%) 61% 65%, transparent 66%); }
.live-badge-shell[data-variant="11"], .preset-badge-thumb[data-variant="11"] { background-image: radial-gradient(circle at 18% 22%, #ffffff20 0 1%, transparent 1.4%), radial-gradient(circle at 73% 63%, #00000028 0 1.2%, transparent 1.7%), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 11%), var(--template-primary) 48%, color-mix(in srgb, var(--template-primary), black 29%)); }
.live-badge-shell[data-variant="11"] > .badge-motif, .preset-badge-thumb[data-variant="11"] > .badge-motif { background: linear-gradient(145deg, transparent 44%, color-mix(in srgb, var(--template-accent), transparent 45%) 45% 48%, transparent 49%) center 18% / 66% 52% no-repeat, repeating-radial-gradient(ellipse at 50% 72%, transparent 0 10%, #ffffff12 10.5% 11%, transparent 11.5% 20%); }
.live-badge-shell[data-variant="12"], .preset-badge-thumb[data-variant="12"] { background-image: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--template-accent), white 20%) 0 4%, transparent 23%), linear-gradient(150deg, color-mix(in srgb, var(--template-primary), white 20%), var(--template-primary) 48%, color-mix(in srgb, var(--template-primary), black 34%)); }
.live-badge-shell[data-variant="12"] > .badge-motif, .preset-badge-thumb[data-variant="12"] > .badge-motif { background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--template-accent), transparent 36%) 0 10%, transparent 35%), conic-gradient(from 25deg at 50% 55%, transparent 0 40%, color-mix(in srgb, var(--template-accent), transparent 34%) 41% 47%, transparent 48% 100%); }
.live-badge-shell[data-variant="13"], .preset-badge-thumb[data-variant="13"] { background-image: radial-gradient(ellipse at 31% 19%, #ffffff52 0 3%, #ffffff17 20%, transparent 37%), radial-gradient(circle, transparent 0 45%, color-mix(in srgb, var(--template-accent), transparent 46%) 46% 48%, transparent 49%), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 24%), var(--template-primary) 46%, color-mix(in srgb, var(--template-primary), black 37%)); }
.live-badge-shell[data-variant="13"] > .badge-motif, .preset-badge-thumb[data-variant="13"] > .badge-motif { border-radius: 50%; background: radial-gradient(circle at 78% 22%, var(--template-accent) 0 2.4%, #ffffff 2.8% 3.2%, transparent 3.6%), repeating-radial-gradient(ellipse at 50% 50%, transparent 0 20%, #ffffff12 20.5% 21%, transparent 21.5% 31%); transform: rotate(-18deg); }
.live-badge-shell[data-variant="14"], .preset-badge-thumb[data-variant="14"] { background-image: linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 20%), var(--template-primary) 48%, color-mix(in srgb, var(--template-primary), black 31%)); }
.live-badge-shell[data-variant="14"] > .badge-motif, .preset-badge-thumb[data-variant="14"] > .badge-motif { background: radial-gradient(circle at 31% 21%, var(--template-accent) 0 2.5%, #ffffff9c 2.8% 3.5%, transparent 4%), radial-gradient(circle at 50% 15%, var(--template-accent) 0 2.5%, #ffffff9c 2.8% 3.5%, transparent 4%), radial-gradient(circle at 69% 21%, var(--template-accent) 0 2.5%, #ffffff9c 2.8% 3.5%, transparent 4%), linear-gradient(135deg, transparent 39%, color-mix(in srgb, var(--template-accent), transparent 45%) 40% 43%, transparent 44% 56%, color-mix(in srgb, var(--template-accent), transparent 45%) 57% 60%, transparent 61%); }
.live-badge-shell[data-variant="15"], .preset-badge-thumb[data-variant="15"] { background-image: conic-gradient(from -11deg, color-mix(in srgb, var(--template-primary), white 20%), var(--template-primary) 12%, color-mix(in srgb, var(--template-primary), black 18%) 24%, var(--template-primary) 38%, color-mix(in srgb, var(--template-primary), white 12%) 52%, var(--template-primary) 68%, color-mix(in srgb, var(--template-primary), black 28%) 83%, var(--template-primary)); }
.live-badge-shell[data-variant="15"] > .badge-motif, .preset-badge-thumb[data-variant="15"] > .badge-motif { border-radius: 50%; background: repeating-conic-gradient(from -1deg, color-mix(in srgb, var(--template-accent), transparent 34%) 0 1deg, transparent 1deg 22.5deg), radial-gradient(circle, transparent 0 44%, color-mix(in srgb, var(--template-accent), transparent 50%) 45% 48%, transparent 49%); }
.live-badge-shell[data-variant="16"], .preset-badge-thumb[data-variant="16"] { background-image: radial-gradient(ellipse at 24% 17%, #ffffff5e 0 3%, #ffffff20 24%, transparent 43%), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 26%), var(--template-primary) 48%, color-mix(in srgb, var(--template-primary), black 27%)); }
.live-badge-shell[data-variant="16"] > .badge-motif, .preset-badge-thumb[data-variant="16"] > .badge-motif { background: linear-gradient(90deg, transparent 49%, color-mix(in srgb, var(--template-accent), transparent 35%) 49.5% 50.5%, transparent 51%), repeating-linear-gradient(32deg, transparent 0 13%, #ffffff17 13.5% 14%, transparent 14.5% 27%); }
.live-badge-shell[data-variant="17"], .preset-badge-thumb[data-variant="17"] { background-image: linear-gradient(180deg, #ffffff2b, transparent 26%), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 23%), var(--template-primary) 48%, color-mix(in srgb, var(--template-primary), black 29%)); }
.live-badge-shell[data-variant="17"] > .badge-motif, .preset-badge-thumb[data-variant="17"] > .badge-motif { border-radius: 50%; background: repeating-radial-gradient(ellipse at 0 72%, transparent 0 16%, color-mix(in srgb, var(--template-accent), transparent 45%) 16.5% 19%, transparent 19.5% 30%), repeating-radial-gradient(ellipse at 100% 82%, transparent 0 17%, #ffffff18 17.5% 19%, transparent 19.5% 31%); }
.live-badge-shell[data-variant="18"], .preset-badge-thumb[data-variant="18"] { background-image: radial-gradient(circle at 21% 26%, #ffffff1e 0 1%, transparent 1.4%), radial-gradient(circle at 72% 72%, #00000024 0 1.2%, transparent 1.6%), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 10%), var(--template-primary) 46%, color-mix(in srgb, var(--template-primary), black 33%)); }
.live-badge-shell[data-variant="18"] > .badge-motif, .preset-badge-thumb[data-variant="18"] > .badge-motif { background: repeating-linear-gradient(90deg, transparent 0 14%, color-mix(in srgb, var(--template-accent), transparent 58%) 14.5% 17%, #00000028 17.5% 19%, transparent 19.5% 33%), linear-gradient(180deg, color-mix(in srgb, var(--template-accent), transparent 50%) 0 8%, transparent 9% 86%, #00000042 87%); }
.live-badge-shell[data-variant="19"], .preset-badge-thumb[data-variant="19"] { background-image: conic-gradient(from -8deg, color-mix(in srgb, var(--template-primary), white 28%), var(--template-primary) 8%, color-mix(in srgb, var(--template-primary), black 26%) 16%, var(--template-primary) 25%, color-mix(in srgb, var(--template-primary), white 20%) 34%, var(--template-primary) 45%, color-mix(in srgb, var(--template-primary), black 32%) 58%, var(--template-primary) 72%, color-mix(in srgb, var(--template-primary), white 25%) 86%, var(--template-primary)); }
.live-badge-shell[data-variant="19"] > .badge-motif, .preset-badge-thumb[data-variant="19"] > .badge-motif { background: radial-gradient(circle at 17% 22%, var(--template-accent) 0 1.5%, transparent 2%), radial-gradient(circle at 81% 29%, var(--template-accent) 0 1.2%, transparent 1.8%), radial-gradient(circle at 74% 78%, #ffffff80 0 1.1%, transparent 1.7%), repeating-conic-gradient(transparent 0 13deg, color-mix(in srgb, var(--template-accent), transparent 62%) 14deg 15deg, transparent 16deg 30deg); }
.live-badge-shell[data-variant="20"], .preset-badge-thumb[data-variant="20"] { background-image: radial-gradient(circle, transparent 0 34%, color-mix(in srgb, var(--template-accent), transparent 45%) 35% 37%, transparent 38%), linear-gradient(90deg, transparent 49%, color-mix(in srgb, var(--template-accent), transparent 55%) 50% 51%, transparent 52%), linear-gradient(145deg, color-mix(in srgb, var(--template-primary), white 17%), var(--template-primary) 47%, color-mix(in srgb, var(--template-primary), black 34%)); }
.live-badge-shell[data-variant="20"] > .badge-motif, .preset-badge-thumb[data-variant="20"] > .badge-motif { background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 14%, #ffffff16 14.5% 15%, transparent 15.5% 27%), repeating-linear-gradient(90deg, transparent 0 19%, color-mix(in srgb, var(--template-accent), transparent 60%) 19.5% 20%, transparent 20.5% 39%), radial-gradient(circle at 25% 32%, var(--template-accent) 0 1.5%, transparent 2%), radial-gradient(circle at 72% 69%, var(--template-accent) 0 1.5%, transparent 2%); }
.live-badge-shell[data-variant="21"], .preset-badge-thumb[data-variant="21"] { background-image: repeating-conic-gradient(from -4deg, #ffffff14 0 .8deg, transparent .8deg 5deg), radial-gradient(circle at 34% 24%, color-mix(in srgb, var(--template-primary), white 24%), var(--template-primary) 44%, color-mix(in srgb, var(--template-primary), black 32%) 88%); }
.live-badge-shell[data-variant="21"] > .badge-motif, .preset-badge-thumb[data-variant="21"] > .badge-motif { inset: 9%; border: 5px solid color-mix(in srgb, var(--template-accent), white 24%); border-radius: 50%; background: linear-gradient(180deg, transparent 31%, color-mix(in srgb, var(--template-primary), black 30%) 32% 55%, transparent 56%), radial-gradient(circle, transparent 0 64%, color-mix(in srgb, var(--template-accent), transparent 16%) 65% 69%, transparent 70%); box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--template-primary), black 18%), inset 0 0 0 10px color-mix(in srgb, var(--template-accent), transparent 25%); }
.live-badge-shell[data-variant="22"], .preset-badge-thumb[data-variant="22"] { background-image: linear-gradient(145deg, #ffffff14 0 12%, transparent 34% 67%, #00000024 100%), radial-gradient(circle at 34% 22%, color-mix(in srgb, var(--template-primary), white 10%), var(--template-primary) 46%, color-mix(in srgb, var(--template-primary), black 24%) 90%); }
.live-badge-shell[data-variant="22"] > .badge-motif, .preset-badge-thumb[data-variant="22"] > .badge-motif { inset: 5%; border: 6px solid color-mix(in srgb, var(--template-accent), black 18%); border-radius: 50%; background: radial-gradient(circle, transparent 0 79%, color-mix(in srgb, var(--template-accent), white 14%) 80% 81%, transparent 82%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), white 20%), inset 0 0 0 14px color-mix(in srgb, var(--template-primary), black 16%); }
.live-badge-shell[data-variant="23"], .preset-badge-thumb[data-variant="23"] { background-image: linear-gradient(145deg, #ffffff1a 0 12%, transparent 34% 67%, #00000020 100%), radial-gradient(circle at 34% 22%, color-mix(in srgb, var(--template-primary), white 11%), var(--template-primary) 45%, color-mix(in srgb, var(--template-primary), black 24%) 91%); }
.live-badge-shell[data-variant="23"] > .badge-motif, .preset-badge-thumb[data-variant="23"] > .badge-motif { inset: 4.5%; border: 7px solid color-mix(in srgb, var(--template-accent), black 22%); border-radius: 50%; background: radial-gradient(circle, transparent 0 74%, color-mix(in srgb, var(--template-accent), transparent 62%) 75% 76%, transparent 77% 82%, color-mix(in srgb, var(--template-accent), white 12%) 83% 84%, transparent 85%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), white 22%), inset 0 0 0 15px color-mix(in srgb, var(--template-primary), black 17%); }
.live-badge-shell[data-variant="24"], .preset-badge-thumb[data-variant="24"] { background-image: linear-gradient(145deg, #ffffff16 0 12%, transparent 34% 67%, #00000026 100%), radial-gradient(circle at 34% 22%, color-mix(in srgb, var(--template-primary), white 10%), var(--template-primary) 45%, color-mix(in srgb, var(--template-primary), black 25%) 92%); }
.live-badge-shell[data-variant="24"] > .badge-motif, .preset-badge-thumb[data-variant="24"] > .badge-motif { inset: 4%; border: 8px solid color-mix(in srgb, var(--template-accent), black 23%); border-radius: 50%; background: radial-gradient(circle, transparent 0 70%, color-mix(in srgb, var(--template-accent), transparent 70%) 71% 72%, transparent 73% 78%, color-mix(in srgb, var(--template-accent), white 14%) 79% 80%, transparent 81%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), white 24%), inset 0 0 0 9px color-mix(in srgb, var(--template-primary), black 13%), inset 0 0 0 17px color-mix(in srgb, var(--template-accent), transparent 72%); }
.live-badge-shell[data-variant="22"] .live-badge-mark { font-size: 42px; }
.live-badge-shell[data-variant="23"] .live-badge-mark { font-size: 36px; }
.live-badge-shell[data-variant="24"] .live-badge-mark { font-size: 31px; }
.preset-badge-thumb[data-variant="21"] > .badge-motif { border-width: 2px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--template-primary), black 18%), inset 0 0 0 4px color-mix(in srgb, var(--template-accent), transparent 25%); }
.preset-badge-thumb[data-variant="22"] > .badge-motif, .preset-badge-thumb[data-variant="23"] > .badge-motif, .preset-badge-thumb[data-variant="24"] > .badge-motif { border-width: 2px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--template-accent), white 20%), inset 0 0 0 4px color-mix(in srgb, var(--template-primary), black 16%); }
.preset-badge-thumb[data-variant="22"] b { font-size: 22px; }
.preset-badge-thumb[data-variant="23"] b { font-size: 17px; }
.preset-badge-thumb[data-variant="24"] b { font-size: 14px; }
.live-badge-shell[data-variant="25"], .preset-badge-thumb[data-variant="25"], .live-badge-shell[data-variant="26"], .preset-badge-thumb[data-variant="26"], .live-badge-shell[data-variant="27"], .preset-badge-thumb[data-variant="27"] { background-image: linear-gradient(145deg, #ffffff0f 0 10%, transparent 31% 70%, #0000001f 100%), radial-gradient(ellipse at 34% 20%, color-mix(in srgb, var(--template-primary), white 6%), var(--template-primary) 48%, color-mix(in srgb, var(--template-primary), black 20%) 94%); }
.live-badge-shell[data-variant="25"] > .badge-motif, .preset-badge-thumb[data-variant="25"] > .badge-motif, .live-badge-shell[data-variant="26"] > .badge-motif, .preset-badge-thumb[data-variant="26"] > .badge-motif, .live-badge-shell[data-variant="27"] > .badge-motif, .preset-badge-thumb[data-variant="27"] > .badge-motif { inset: 5% 17%; clip-path: polygon(15% 0, 85% 0, 100% 10%, 100% 90%, 85% 100%, 15% 100%, 0 90%, 0 10%); background: linear-gradient(180deg, color-mix(in srgb, var(--template-accent), transparent 52%) 0 1%, transparent 1.5% 98.5%, color-mix(in srgb, var(--template-accent), transparent 52%) 99% 100%); }
.live-badge-shell[data-variant="25"] > .badge-motif, .preset-badge-thumb[data-variant="25"] > .badge-motif { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--template-accent), black 16%), inset 0 0 0 7px color-mix(in srgb, var(--template-primary), black 12%); }
.live-badge-shell[data-variant="26"] > .badge-motif, .preset-badge-thumb[data-variant="26"] > .badge-motif { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--template-accent), black 16%), inset 0 0 0 7px color-mix(in srgb, var(--template-primary), black 12%), inset 0 0 0 10px color-mix(in srgb, var(--template-accent), transparent 66%); }
.live-badge-shell[data-variant="27"] > .badge-motif, .preset-badge-thumb[data-variant="27"] > .badge-motif { box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--template-accent), black 16%), inset 0 0 0 8px color-mix(in srgb, var(--template-primary), black 12%), inset 0 0 0 11px color-mix(in srgb, var(--template-accent), transparent 62%), inset 0 0 0 15px color-mix(in srgb, var(--template-primary), black 10%); }
.live-badge-shell[data-variant="28"], .preset-badge-thumb[data-variant="28"], .live-badge-shell[data-variant="29"], .preset-badge-thumb[data-variant="29"], .live-badge-shell[data-variant="30"], .preset-badge-thumb[data-variant="30"] { background-image: linear-gradient(145deg, #ffffff14 0 11%, transparent 33% 69%, #00000020 100%), radial-gradient(ellipse at 34% 20%, color-mix(in srgb, var(--template-primary), white 9%), var(--template-primary) 46%, color-mix(in srgb, var(--template-primary), black 22%) 94%); }
.live-badge-shell[data-variant="28"] > .badge-motif, .preset-badge-thumb[data-variant="28"] > .badge-motif, .live-badge-shell[data-variant="29"] > .badge-motif, .preset-badge-thumb[data-variant="29"] > .badge-motif, .live-badge-shell[data-variant="30"] > .badge-motif, .preset-badge-thumb[data-variant="30"] > .badge-motif { inset: 4% 10%; border: 3px solid color-mix(in srgb, var(--template-accent), black 18%); border-radius: 50%; background: linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--template-accent), transparent 40%) 18% 82%, transparent 82%) 8% 50% / 1px 100% no-repeat, linear-gradient(180deg, transparent 18%, color-mix(in srgb, var(--template-accent), transparent 40%) 18% 82%, transparent 82%) 92% 50% / 1px 100% no-repeat; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), transparent 58%), inset 0 0 0 10px color-mix(in srgb, var(--template-primary), black 12%); }
.live-badge-shell[data-variant="29"] > .badge-motif, .preset-badge-thumb[data-variant="29"] > .badge-motif { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), transparent 54%), inset 0 0 0 9px color-mix(in srgb, var(--template-primary), black 12%), inset 0 0 0 12px color-mix(in srgb, var(--template-accent), transparent 72%); }
.live-badge-shell[data-variant="30"] > .badge-motif, .preset-badge-thumb[data-variant="30"] > .badge-motif { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), transparent 50%), inset 0 0 0 8px color-mix(in srgb, var(--template-primary), black 12%), inset 0 0 0 12px color-mix(in srgb, var(--template-accent), transparent 68%), inset 0 0 0 15px color-mix(in srgb, var(--template-primary), black 10%); }
.live-badge-shell[data-variant="28"] > .badge-motif::before, .preset-badge-thumb[data-variant="28"] > .badge-motif::before, .live-badge-shell[data-variant="29"] > .badge-motif::before, .preset-badge-thumb[data-variant="29"] > .badge-motif::before, .live-badge-shell[data-variant="30"] > .badge-motif::before, .preset-badge-thumb[data-variant="30"] > .badge-motif::before { position: absolute; inset: 3%; content: ""; background: var(--template-accent); opacity: .46; -webkit-mask: url("/images/badge-botanical-mask.svg") center / contain no-repeat; mask: url("/images/badge-botanical-mask.svg") center / contain no-repeat; }
.live-badge-shell[data-variant="29"] > .badge-motif::before, .preset-badge-thumb[data-variant="29"] > .badge-motif::before { opacity: .54; }
.live-badge-shell[data-variant="30"] > .badge-motif::before, .preset-badge-thumb[data-variant="30"] > .badge-motif::before { opacity: .62; }
.live-badge-shell[data-variant="28"] > .badge-motif::after, .preset-badge-thumb[data-variant="28"] > .badge-motif::after, .live-badge-shell[data-variant="29"] > .badge-motif::after, .preset-badge-thumb[data-variant="29"] > .badge-motif::after, .live-badge-shell[data-variant="30"] > .badge-motif::after, .preset-badge-thumb[data-variant="30"] > .badge-motif::after { display: none; }
.live-badge-shell[data-variant="25"] .live-badge-mark, .live-badge-shell[data-variant="28"] .live-badge-mark { font-size: 39px; }
.live-badge-shell[data-variant="26"] .live-badge-mark, .live-badge-shell[data-variant="29"] .live-badge-mark { font-size: 34px; }
.live-badge-shell[data-variant="27"] .live-badge-mark, .live-badge-shell[data-variant="30"] .live-badge-mark { font-size: 29px; }
.preset-badge-thumb[data-variant="25"] > .badge-motif, .preset-badge-thumb[data-variant="26"] > .badge-motif, .preset-badge-thumb[data-variant="27"] > .badge-motif, .preset-badge-thumb[data-variant="28"] > .badge-motif, .preset-badge-thumb[data-variant="29"] > .badge-motif, .preset-badge-thumb[data-variant="30"] > .badge-motif { border-width: 1px; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--template-accent), transparent 52%), inset 0 0 0 4px color-mix(in srgb, var(--template-primary), black 12%); }
.preset-badge-thumb[data-variant="25"] b, .preset-badge-thumb[data-variant="28"] b { font-size: 21px; }
.preset-badge-thumb[data-variant="26"] b, .preset-badge-thumb[data-variant="29"] b { font-size: 17px; }
.preset-badge-thumb[data-variant="27"] b, .preset-badge-thumb[data-variant="30"] b { font-size: 14px; }
.live-badge-shell:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"]) { filter: drop-shadow(0 8px 10px #1820192b); }
.preset-badge-thumb:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"]) { filter: drop-shadow(0 3px 4px #1820192b); }
.live-badge-shell:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"])::before, .preset-badge-thumb:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"])::before { background: linear-gradient(180deg, #ffffff0d, transparent 35%, #0000000f); box-shadow: inset 0 0 0 1px #ffffff14; }
.live-badge-shell:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"])::after, .preset-badge-thumb:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"])::after { background: none; box-shadow: none; }
.live-badge-shell:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"]) small, .live-badge-shell:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"]) strong, .live-badge-shell:is([data-variant="25"], [data-variant="26"], [data-variant="27"], [data-variant="28"], [data-variant="29"], [data-variant="30"]) p { font-family: var(--serif); }
.live-badge-shell[data-variant="31"], .preset-badge-thumb[data-variant="31"], .live-badge-shell[data-variant="32"], .preset-badge-thumb[data-variant="32"], .live-badge-shell[data-variant="33"], .preset-badge-thumb[data-variant="33"] { background-image: linear-gradient(145deg, #ffffff24 0 10%, transparent 32% 66%, #00000045 100%), radial-gradient(circle at 32% 20%, color-mix(in srgb, var(--template-primary), white 16%), var(--template-primary) 44%, color-mix(in srgb, var(--template-primary), black 28%) 92%); }
.live-badge-shell[data-variant="31"] > .badge-motif, .preset-badge-thumb[data-variant="31"] > .badge-motif, .live-badge-shell[data-variant="32"] > .badge-motif, .preset-badge-thumb[data-variant="32"] > .badge-motif, .live-badge-shell[data-variant="33"] > .badge-motif, .preset-badge-thumb[data-variant="33"] > .badge-motif { inset: 5%; clip-path: polygon(24% 0, 76% 0, 96% 20%, 96% 80%, 76% 100%, 24% 100%, 4% 80%, 4% 20%); border: 3px solid color-mix(in srgb, var(--template-accent), black 20%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), transparent 62%), inset 0 0 0 10px color-mix(in srgb, var(--template-primary), black 17%); }
.live-badge-shell[data-variant="31"] > .badge-motif::before, .preset-badge-thumb[data-variant="31"] > .badge-motif::before, .live-badge-shell[data-variant="32"] > .badge-motif::before, .preset-badge-thumb[data-variant="32"] > .badge-motif::before, .live-badge-shell[data-variant="33"] > .badge-motif::before, .preset-badge-thumb[data-variant="33"] > .badge-motif::before { position: absolute; inset: 2%; content: ""; background: var(--template-accent); opacity: .42; -webkit-mask: url("/images/badge-neural-mask.svg") center / contain no-repeat; mask: url("/images/badge-neural-mask.svg") center / contain no-repeat; }
.live-badge-shell[data-variant="32"] > .badge-motif::before, .preset-badge-thumb[data-variant="32"] > .badge-motif::before { opacity: .52; }
.live-badge-shell[data-variant="33"] > .badge-motif::before, .preset-badge-thumb[data-variant="33"] > .badge-motif::before { opacity: .62; }
.live-badge-shell[data-variant="34"], .preset-badge-thumb[data-variant="34"], .live-badge-shell[data-variant="35"], .preset-badge-thumb[data-variant="35"], .live-badge-shell[data-variant="36"], .preset-badge-thumb[data-variant="36"] { background-image: conic-gradient(from 205deg at 50% 45%, color-mix(in srgb, var(--template-primary), black 18%), var(--template-primary) 18%, color-mix(in srgb, var(--template-accent), transparent 74%) 35%, var(--template-primary) 52%, color-mix(in srgb, var(--template-primary), white 12%) 70%, var(--template-primary) 86%, color-mix(in srgb, var(--template-primary), black 22%)); }
.live-badge-shell[data-variant="34"] > .badge-motif, .preset-badge-thumb[data-variant="34"] > .badge-motif, .live-badge-shell[data-variant="35"] > .badge-motif, .preset-badge-thumb[data-variant="35"] > .badge-motif, .live-badge-shell[data-variant="36"] > .badge-motif, .preset-badge-thumb[data-variant="36"] > .badge-motif { inset: 4%; clip-path: polygon(50% 0, 79% 10%, 100% 36%, 92% 72%, 68% 100%, 32% 100%, 8% 72%, 0 36%, 21% 10%); border: 3px solid color-mix(in srgb, var(--template-accent), black 18%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--template-accent), transparent 64%), inset 0 0 0 10px color-mix(in srgb, var(--template-primary), black 16%); }
.live-badge-shell[data-variant="34"] > .badge-motif::before, .preset-badge-thumb[data-variant="34"] > .badge-motif::before, .live-badge-shell[data-variant="35"] > .badge-motif::before, .preset-badge-thumb[data-variant="35"] > .badge-motif::before, .live-badge-shell[data-variant="36"] > .badge-motif::before, .preset-badge-thumb[data-variant="36"] > .badge-motif::before { position: absolute; inset: 1%; content: ""; background: var(--template-accent); opacity: .4; -webkit-mask: url("/images/badge-generative-mask.svg") center / contain no-repeat; mask: url("/images/badge-generative-mask.svg") center / contain no-repeat; }
.live-badge-shell[data-variant="35"] > .badge-motif::before, .preset-badge-thumb[data-variant="35"] > .badge-motif::before { opacity: .5; }
.live-badge-shell[data-variant="36"] > .badge-motif::before, .preset-badge-thumb[data-variant="36"] > .badge-motif::before { opacity: .6; }
.live-badge-shell[data-variant="31"] .live-badge-mark, .live-badge-shell[data-variant="34"] .live-badge-mark { font-size: 41px; }
.live-badge-shell[data-variant="32"] .live-badge-mark, .live-badge-shell[data-variant="35"] .live-badge-mark { font-size: 35px; }
.live-badge-shell[data-variant="33"] .live-badge-mark, .live-badge-shell[data-variant="36"] .live-badge-mark { font-size: 30px; }
.preset-badge-thumb[data-variant="31"] b, .preset-badge-thumb[data-variant="34"] b { font-size: 22px; }
.preset-badge-thumb[data-variant="32"] b, .preset-badge-thumb[data-variant="35"] b { font-size: 17px; }
.preset-badge-thumb[data-variant="33"] b, .preset-badge-thumb[data-variant="36"] b { font-size: 14px; }
.preview-details { margin: 16px 0 0; border-top: 1px solid var(--line); }
.preview-details div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.preview-details dt { color: var(--muted); font-size: 10px; }
.preview-details dd { max-height: 37px; margin: 0; overflow: hidden; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }

@media (max-width: 1180px) {
  .design-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1040px) {
  .editor-layout { grid-template-columns: 1fr; }
  .template-live-preview { position: static; order: -1; width: min(100%, 680px); max-width: none; margin: 0 auto; }
  .design-preset-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-height: 480px; }
}

@media (max-width: 720px) {
  .form-section-heading { align-items: stretch; flex-direction: column; }
  .design-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 520px; }
  .design-preset-option { min-height: 130px; }
  .preset-palette-controls { grid-template-columns: 1fr auto; }
  .certificate-layout-controls { grid-template-columns: 1fr; }
  .certificate-field-row, .badge-field-row, .badge-size-grid, .issuer-options { grid-template-columns: 1fr; }
  .palette-status { grid-column: 1 / -1; text-align: left; }
  .badge-live-stage { min-height: 390px; }
  .generated-badge-live { width: min(96%, 340px); max-height: 360px; }
  .live-badge-shell { width: 300px; height: 300px; padding: 46px 42px 34px; }
  .live-badge-shell strong { max-width: 205px; max-height: 66px; font-size: 20px; }
  .live-badge-mark { top: 32px; font-size: 31px; }
  .preset-certificate-live .preview-description { max-height: 24px; }
  .preset-certificate-live h2 { max-height: 56px; }
  .preset-certificate-live h3 { max-height: 36px; }
  .preset-certificate-live:is([data-variant="9"],[data-variant="10"],[data-variant="11"],[data-variant="12"],[data-variant="13"],[data-variant="14"]) h3 { max-height: 54px; }
  .preset-certificate-live:is([data-variant="15"],[data-variant="16"],[data-variant="17"],[data-variant="18"],[data-variant="19"],[data-variant="20"]) h3 { max-height: 56px; }
}