:root {
  color-scheme: light;
  --ink: #101f38;
  --muted: #516079;
  --blue: #144fcb;
  --deep-blue: #12366f;
  --cyan: #1185e0;
  --gold: #eea13f;
  --page: #f4f6fa;
  --warm: #fbfaf7;
  --paper: #fff;
  --line: #dbe2ee;
  --soft: #eaf2ff;
  --danger: #9b252d;
  --radius: 14px;
  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Inter, system-ui, sans-serif;
  font-family: var(--font);
  font-size: 16px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--page); color: var(--ink); line-height: 1.55; }
a { color: var(--blue); text-underline-offset: .2em; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
h1 { font-size: clamp(1.85rem, 3vw, 2.45rem); line-height: 1.24; letter-spacing: -.032em; }
h2 { font-size: 1.13rem; line-height: 1.4; }
h3 { font-size: 1rem; }
.wrap { width: min(calc(100% - 3rem), 1240px); margin-inline: auto; }
.skip-link { position: fixed; top: 0; left: 1rem; padding: .75rem 1rem; color: #fff; background: var(--deep-blue); z-index: 10; transform: translateY(-130%); }
.skip-link:focus { transform: translateY(.5rem); }
.masthead { background: var(--paper); border-bottom: 1px solid var(--line); }
.top { min-height: 77px; display: flex; align-items: center; justify-content: space-between; gap: 1.7rem; }
.brand { display: flex; align-items: center; gap: .95rem; flex: 0 1 auto; color: var(--ink); text-decoration: none; font-size: .8rem; font-weight: 750; white-space: nowrap; min-height: 44px; }
.brand span:first-child { font-size: 1.02rem; }
.brand-personal { padding-left: .95rem; border-left: 1px solid var(--line); color: var(--muted); font-size: .73rem; letter-spacing: .06em; }
.primary-nav { display: flex; gap: 1.12rem; align-items: stretch; min-height: 77px; align-self: stretch; }
.primary-nav a { border-bottom: 3px solid transparent; display: flex; align-items: center; color: var(--muted); font-size: .88rem; font-weight: 700; text-decoration: none; padding: 0 .2rem; white-space: nowrap; }
.primary-nav a:hover, .primary-nav a[aria-current] { color: var(--blue); border-bottom-color: var(--blue); }
.top-account { display: flex; align-items: center; margin-left: auto; }
.back-site { color: var(--muted); font-size: .83rem; white-space: nowrap; text-decoration: none; }
.back-site:hover, .footer-content a:hover { color: var(--blue); text-decoration: underline; }
.account-menu { position: relative; }
.account-menu summary { list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; color: var(--ink); font-size: .85rem; font-weight: 700; white-space: nowrap; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--deep-blue); background: var(--soft); font-weight: 750; }
.account-popover { background: var(--paper); border: 1px solid var(--line); box-shadow: 0 9px 30px #172d5320; border-radius: 12px; position: absolute; right: 0; top: calc(100% + .25rem); z-index: 2; min-width: 144px; padding: .25rem; }
.account-popover form { margin: 0; }
.account-popover a, .account-popover button { width: 100%; min-height: 41px; padding: .4rem .65rem; color: var(--ink); background: transparent; border: none; border-radius: 8px; display: flex; align-items: center; text-align: left; text-decoration: none; font-size: .85rem; white-space: nowrap; cursor: pointer; }
.account-popover a:hover, .account-popover button:hover { color: var(--blue); background: var(--soft); }
.app-main { flex: 1; padding-block: clamp(1.65rem, 4vw, 3rem); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; padding-block: 1.05rem; }
.footer-content a { color: var(--muted); text-decoration: none; }
.page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.page-heading p { color: var(--muted); margin-top: .35rem; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 5px 18px #172d5307; min-width: 0; }
.section-head { min-height: 50px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .45rem; padding-bottom: .85rem; }
.section-head.compact { min-height: auto; }
.composer, .preview-panel, .summary-panel, .records-panel, .password-panel, .auth-panel { padding: clamp(1rem, 2.7vw, 1.55rem); }
.issue-layout, .template-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.inspection { display: grid; gap: 1.2rem; }
.field { min-width: 0; margin-bottom: .9rem; }
.field label { display: inline-block; font-size: .86rem; font-weight: 730; margin-bottom: .33rem; color: var(--ink); }
.required { margin-left: .25rem; color: var(--danger); }
.field input:not([type="checkbox"]), .field select, .field textarea { display: block; min-height: 44px; width: 100%; border: 1px solid #c8d2e0; border-radius: 8px; background: #fcfdff; color: var(--ink); padding: .55rem .65rem; }
.field input::placeholder, .field textarea::placeholder { color: #65748c; }
.field textarea { resize: vertical; min-height: 110px; }
.field input[type="file"] { padding: .43rem; }
.field.invalid :is(input, select, textarea), [aria-invalid="true"] { border-color: var(--danger); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.help, .helptxt, .muted, .print-note { color: var(--muted); font-size: .83rem; }
.help { margin-top: .25rem; }
.help ul { padding-left: 1.1rem; margin-block: .3rem; }
.names-help { margin-top: -.55rem; }
.name-meta { display: flex; justify-content: space-between; align-items: center; gap: .45rem; margin-top: 0; flex-wrap: wrap; }
.file-button { display: inline-flex; min-height: 44px; align-items: center; color: var(--blue); text-decoration: underline; text-underline-offset: .18em; font-size: .84rem; cursor: pointer; }
.file-button input { height: 1px; width: 1px; overflow: hidden; clip-path: inset(50%); position: absolute; }
.file-button:focus-within { outline: 2px solid var(--cyan); outline-offset: 3px; }
.actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; }
.issue-actions { margin-top: .75rem; }
.button { font-weight: 710; text-decoration: none; font-size: .88rem; padding: .56rem 1rem; min-height: 44px; color: var(--ink); border: 1px solid transparent; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; line-height: 1.35; cursor: pointer; }
.button.primary { background: var(--blue); color: #fff; }
.button.primary:hover { background: var(--deep-blue); color: #fff; }
.button.secondary { background: var(--paper); color: var(--deep-blue); border-color: #bfcce0; }
.button.secondary:hover { background: var(--soft); border-color: var(--blue); }
.button.small { padding-inline: .68rem; }
.button.stretch { width: 100%; }
.messages { padding: 0; list-style: none; margin-top: .9rem; margin-bottom: 0; }
.notice { padding: .75rem 1rem; background: var(--soft); border: 1px solid #d0e0ff; border-radius: 10px; color: var(--deep-blue); margin-bottom: 1rem; }
.notice.error, .errorlist.nonfield { color: var(--danger); background: #fff2f2; border: 1px solid #edcbd0; }
.verify-layout { display: grid; grid-template-columns: minmax(258px, .8fr) minmax(0, 1.42fr); align-items: start; gap: 1.2rem; }
.verify-notice { margin-bottom: 0; }
.verify-help { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; color: var(--muted); font-size: .83rem; }
.verify-help summary { color: var(--deep-blue); cursor: pointer; font-weight: 700; }
.verify-help p { margin-top: .55rem; }
.verify-serial { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .65rem; margin-top: .45rem; }
.verify-serial dt { color: var(--muted); font-size: .82rem; }
.verify-serial dd { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(1rem, 2.3vw, 1.3rem); font-weight: 700; overflow-wrap: anywhere; }
.verify-proof { margin-top: .8rem; overflow-wrap: anywhere; }
.verify-proof p + p { margin-top: .3rem; }
.verify-watermark { margin-top: 1rem; }
.watermark-image-frame { overflow: auto; max-height: min(72vh, 660px); border: 1px solid var(--line); border-radius: 8px; background: var(--warm); overscroll-behavior: contain; }
.verify-watermark img { width: 100%; max-width: none; height: auto; image-rendering: pixelated; }
.verify-watermark.has-zoom:not(.is-enlarged) .watermark-image-frame { cursor: zoom-in; }
.verify-watermark.is-enlarged .watermark-image-frame { cursor: zoom-out; }
.verify-watermark.is-enlarged img { width: max(185%, 620px); }
.watermark-actions:not([hidden]) { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.verify-watermark figcaption { margin-top: .45rem; color: var(--muted); font-size: .83rem; }
@media (hover: hover) and (pointer: fine) {
  .verify-watermark.has-zoom:not(.is-enlarged) .watermark-image-frame:is(:hover,:focus-visible) img { transform: scale(1.15); transform-origin: 12% top; }
}
.errorlist { color: var(--danger); padding-left: 1.25rem; font-size: .85rem; margin: .4rem 0 .5rem; }
.errorlist.nonfield { border-radius: 8px; padding: .55rem .7rem .55rem 1.6rem; margin-bottom: 1rem; }
.style-current { font-size: .79rem; color: var(--deep-blue); background: var(--soft); padding: .22rem .6rem; border-radius: 100vw; }
.preview-mat { background: #eaf0f9; border-radius: 10px; border: 1px solid #dbe4f1; padding: clamp(.85rem, 2.7vw, 1.35rem); }
.certificate-sample { margin: auto; width: 100%; aspect-ratio: 297 / 210; position: relative; box-shadow: 0 5px 16px #11284f20; background: var(--warm); }
.style-preview { position: absolute; inset: 0; display: grid; place-items: center; }
.style-preview img { width: 100%; height: 100%; object-fit: contain; }
.certificate-outline { position: absolute; inset: 5%; border: 2px solid #1e56b1; outline: 1px solid #be8a40; outline-offset: -5px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--deep-blue); padding: 8%; }
.certificate-outline span { width: 25px; height: 3px; background: var(--gold); margin-bottom: 4%; }
.certificate-outline strong { font-size: clamp(.7rem, 2.5vw, 1.75rem); letter-spacing: .13em; }
.certificate-outline small { font-size: .6rem; letter-spacing: .2em; margin-bottom: 7%; opacity: .76; }
.certificate-outline i { width: 58%; height: 2px; background: #c5cfdd; margin: 2% 0; }
.certificate-outline i:last-child { width: 43%; }
.preview-description { color: var(--muted); margin-top: .6rem; font-size: .85rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.summary-grid div { background: #f0f4fb; padding: .55rem .65rem; border-radius: 8px; min-width: 0; }
.summary-grid dt { font-size: .76rem; color: var(--muted); }
.summary-grid dd { color: var(--deep-blue); font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.5; overflow-wrap: anywhere; }
.summary-grid div:last-child dd { font-size: clamp(.69rem, 1.36vw, 1rem); white-space: nowrap; }
.issuance-notes { margin: .75rem 0 0; padding-left: 1rem; color: var(--muted); font-size: .82rem; display: grid; gap: .3rem; }
.issuance-notes li::marker { color: var(--gold); }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 1.35rem; align-items: stretch; max-width: 960px; margin: clamp(0rem, 3vw, 2.4rem) auto; }
.auth-art { min-height: 400px; position: relative; overflow: hidden; border-radius: var(--radius); background: radial-gradient(ellipse at 76% 4%, #158de3 0, #115eb8 36%, #102545 85%); color: white; padding: clamp(1.65rem, 4vw, 2.65rem); }
.auth-art::before { content: ""; position: absolute; width: 500px; height: 500px; border-radius: 42%; border: 1px solid #8ce4ff5e; transform: rotate(34deg); right: -155px; bottom: -215px; box-shadow: 0 0 0 14px #79daff19, 0 0 0 45px #79daff0f; }
.auth-art-text { position: relative; z-index: 1; }
.auth-art strong { display: block; line-height: 1.2; font-size: clamp(1.77rem, 4vw, 2.75rem); font-weight: 800; }
.auth-art p { margin-bottom: .25rem; color: #d8efff; font-size: .9rem; letter-spacing: .12em; }
.auth-art-text::after { content: ""; display: block; background: var(--gold); width: 38px; height: 3px; margin-top: .85rem; }
.auth-certificate { width: 73%; position: relative; margin: 1.4rem auto 0; aspect-ratio: 297 / 210; background: var(--warm); overflow: hidden; transform: rotate(-5deg); box-shadow: 0 14px 32px #10254570; }
.auth-certificate img { height: 100%; width: 100%; object-fit: contain; }
.auth-panel { padding: clamp(1.25rem, 4vw, 2.5rem); display: flex; flex-direction: column; justify-content: center; }
.auth-panel h1 { font-size: clamp(1.4rem, 3vw, 1.65rem); }
.auth-panel .muted { margin: .3rem 0 1.05rem; }
.auth-panel .button, .password-panel .actions { margin-top: .5rem; }
.password-panel { width: min(100%, 550px); margin: clamp(0rem, 3vw, 2.4rem) auto; }
.password-panel h1 { font-size: 1.65rem; }
.password-panel .muted { margin-top: .35rem; }
.history-filters { display: grid; grid-template-columns: minmax(140px, 420px) minmax(105px, 190px) auto auto; justify-content: start; align-items: end; column-gap: .65rem; row-gap: .5rem; margin-bottom: 1rem; }
.history-filters .field { margin-bottom: 0; }
.history-filters .text-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.table-scroll { overflow-x: auto; }
.records { width: 100%; border-collapse: collapse; text-align: left; font-size: .87rem; }
.records td, .records th { padding: .65rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 86px; }
.records th { font-size: .81rem; background: #f0f4fb; color: var(--deep-blue); white-space: nowrap; }
.records th:first-child { border-top-left-radius: 8px; }
.records th:last-child { border-top-right-radius: 8px; }
.record-serial, .table-detail { display: block; margin-top: .12rem; color: var(--muted); font-size: .77rem; white-space: nowrap; }
.record-serial { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.text-link { color: var(--blue); font-weight: 680; text-underline-offset: .14em; white-space: nowrap; }
.tag { display: table; border-radius: 100vw; padding: .13rem .47rem; margin-top: .22rem; color: var(--deep-blue); background: var(--soft); font-size: .72rem; white-space: nowrap; }
.tag.muted-tag { color: var(--muted); background: #f2f4f8; }
.page-links { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.page-links span { color: var(--muted); font-size: .82rem; }
.empty { background: #f0f4fb; border-radius: 9px; text-align: center; padding: 2rem 1rem; color: var(--deep-blue); }
.empty p { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.print-note { margin-top: 1rem; }
.template-list { padding: 0; margin: 0; list-style: none; }
.template-list li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: .65rem; border-top: 1px solid var(--line); padding: .65rem 0; }
.template-list li img, .template-paper { width: 100%; aspect-ratio: 297 / 210; object-fit: contain; background: #f1f5fb; border: 1px solid var(--line); border-radius: 5px; }
.template-paper { display: grid; place-items: center; color: var(--muted); font-size: .68rem; }
.template-actions { display: grid; justify-items: start; gap: .26rem; }
.template-actions .button { min-height: 37px; padding: .3rem .45rem; }
.template-list li p, .token-guide p { font-size: .83rem; color: var(--muted); margin-top: .26rem; }
.token-guide { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.tokens { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin: .65rem 0; }
.tokens div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; background: #f0f4fb; padding: .32rem .42rem; border-radius: 6px; font-size: .75rem; }
.tokens code { color: var(--deep-blue); }
@media (max-width: 950px) {
  .top { gap: 1rem; }
  .brand { gap: .65rem; }
  .brand-personal { padding-left: .65rem; }
  .primary-nav { gap: .7rem; }
}
@media (max-width: 800px) {
  .issue-layout, .template-layout, .verify-layout { grid-template-columns: minmax(0, 1fr); }
  .inspection { grid-template-columns: 1fr 1fr; align-items: start; }
  .auth-art { min-height: 340px; }
  .auth-certificate { width: 91%; }
  .wrap { width: calc(100% - 2rem); }
}
@media (max-width: 620px) {
  .top { min-height: 63px; flex-wrap: wrap; row-gap: 0; }
  .brand span:first-child { font-size: .9rem; }
  .brand-personal { font-size: .67rem; }
  .primary-nav { order: 3; min-height: 41px; flex: 1 0 100%; gap: clamp(.38rem, 2.4vw, 1rem); flex-wrap: wrap; }
  .primary-nav a { padding-inline: .15rem; }
  .account-name { max-width: 72px; overflow: hidden; text-overflow: ellipsis; }
  .auth-layout { grid-template-columns: 1fr; gap: .85rem; }
  .auth-art { min-height: 176px; display: flex; align-items: center; padding: 1.05rem; }
  .auth-art strong { display: block; line-height: 1.2; max-width: 9em; }
  .auth-certificate { position: absolute; right: -18%; top: 23%; width: 65%; margin: 0; }
  .auth-art-text { text-shadow: 0 2px 15px #13254770; }
  .inspection { grid-template-columns: 1fr; }
  .history-filters { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .records td, .records th { min-width: 98px; }
  .section-head { align-items: flex-start; }
  .field-grid { gap: .55rem; }
}
@media (max-width: 370px) {
  .wrap { width: calc(100% - 1.35rem); }
  .account-name { display: none; }
}