/* 证书查验页：照线框 12（视觉规范 V0.4.2 口径 6 / 7 ① ② ⑥、口径 8 ①；main 9958a51）。跟随系统；深色 = 黑金，浅色 = 纸色金；状态与结果的颜色只在图标与标题上。 */
:root {
  --vr-bg: #F8F6EF; --vr-surface: #FFFEFA; --vr-surface-2: #F1EEE4; --vr-surface-3: #ECE7DA;
  --vr-line: #E0D8C3; --vr-line-soft: #E6E2D7; --vr-text: #1F2830; --vr-text-2: #6B6455;
  --vr-gold: #86691A; --vr-gold-hi: #7A5D10; --vr-on-gold: #FFFFFF; --vr-focus: #86691A;
  --vr-success: #167B63; --vr-success-bg: #EFF8F5; --vr-warning: #9A5212; --vr-warning-bg: #FFF6EC;
  --vr-danger: #B44444; --vr-danger-bg: #FFF2F1; --vr-info: #1F63B5; --vr-info-bg: #EEF5FC;
  --vr-neutral: #5C6670; --vr-neutral-bg: #F4F6F7;
  --vr-shadow: 0 1px 2px rgba(31,40,48,.06), 0 8px 24px rgba(31,40,48,.08);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --serif: "Songti SC", "Noto Serif CJK SC", STSong, serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --vr-bg: #000000; --vr-surface: #0E0C07; --vr-surface-2: #070603; --vr-surface-3: #17130C;
    /* 深色令牌（口径 9 ⑦，main 8f625f4）：主金 #B4872F、高光 #E5BB58、琥珀 #F28C4B、danger #FF453A；金色描边族 rgba(180,135,47,…) */
    --vr-line: rgba(180,135,47,.18); --vr-line-soft: rgba(255,255,255,.08); --vr-text: #ECE8DD; --vr-text-2: #9A917D;
    --vr-gold: #B4872F; --vr-gold-hi: #E5BB58; --vr-on-gold: #14100A; --vr-focus: #E8C96A;
    --vr-success: #6ECF8F; --vr-success-bg: rgba(110,207,143,.10); --vr-warning: #F28C4B; --vr-warning-bg: rgba(242,140,75,.10);
    --vr-danger: #FF453A; --vr-danger-bg: rgba(255,69,58,.10); --vr-info: #7EA0C4; --vr-info-bg: rgba(126,160,196,.10);
    --vr-neutral: #A7B0B8; --vr-neutral-bg: rgba(167,176,184,.10);
    --vr-shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--vr-bg); color: var(--vr-text); font: 400 14px/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--vr-gold-hi); }
:focus-visible { outline: 2px solid var(--vr-focus); outline-offset: 2px; }
.wrap { max-width: 720px; margin: 0 auto; padding: 16px; }
/* 日期、编号、哈希不折行（口径 9 ⑦） */
.mono, .hashf code { white-space: nowrap; }
.mono { font-family: var(--mono); }
.serif { font-family: var(--serif); }
.muted, .note { color: var(--vr-text-2); font-size: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 页头 / 页脚（线框 12 .site-head / .foot） */
.site-head { border-bottom: 1px solid var(--vr-line-soft); }
.brand { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; text-decoration: none; color: var(--vr-text); }
.wordmark { font: 700 15px/1 var(--serif); letter-spacing: .18em; }
.wordmark small { display: block; font: 400 12px/1.5 var(--sans); letter-spacing: .08em; color: var(--vr-text-2); margin-top: 3px; }
.site-foot { font-size: 12px; color: var(--vr-text-2); text-align: center; padding: 16px; border-top: 1px solid var(--vr-line-soft); }
.site-foot p { margin: 0; }
.site-foot a { display: inline-block; line-height: 24px; padding: 4px 0; white-space: nowrap; }
.site-foot .sep { display: none; }

/* 徽标：呼吸闪点按金框裁切（含下方闪点渐隐），金框外与浅色 / 深色底融合（口径 8 ①） */
.logo, .logo-hero { display: block; flex: none; height: auto; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 576'><defs><radialGradient id='d'><stop offset='0' stop-color='black'/><stop offset='.6' stop-color='black'/><stop offset='1' stop-color='black' stop-opacity='0'/></radialGradient></defs><rect x='35.5' y='15.5' width='441' height='441' rx='83' fill='black'/><circle cx='256' cy='496' r='72' fill='url(%23d)'/></svg>") center/100% 100% no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 576'><defs><radialGradient id='d'><stop offset='0' stop-color='black'/><stop offset='.6' stop-color='black'/><stop offset='1' stop-color='black' stop-opacity='0'/></radialGradient></defs><rect x='35.5' y='15.5' width='441' height='441' rx='83' fill='black'/><circle cx='256' cy='496' r='72' fill='url(%23d)'/></svg>") center/100% 100% no-repeat; }
.logo { width: 28px; }

/* 组件（线框 12 .btn / .f / .hash / .copy） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 14px; margin: 2px 6px 2px 0; border-radius: 8px; border: 1px solid var(--vr-line); background: transparent; color: var(--vr-text); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.btn:hover { border-color: var(--vr-gold); }
.btn.pri { background: var(--vr-gold); border-color: var(--vr-gold); color: var(--vr-on-gold); font-weight: 600; }
/* 禁用（口径 9 ⑦）：可读灰字 + 实线淡框，不降不透明度 */
.btn:disabled { opacity: 1; cursor: not-allowed; color: var(--vr-text-2); background: transparent; border: 1px solid var(--vr-line-soft); box-shadow: none; }
/* 手机宽度：按钮高 44、主按钮通栏（口径 9 ⑦） */
@media (max-width: 959px) { .btn { min-height: 44px; } .btn.pri { width: 100%; } }
.f { display: block; width: 100%; min-height: 36px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--vr-line-soft); background: var(--vr-surface-2); color: var(--vr-text); font: inherit; font-size: 13px; }
.f:focus { outline: 2px solid var(--vr-focus); outline-offset: 2px; border-color: var(--vr-gold); }
.hashf { display: inline-flex; align-items: center; flex-wrap: wrap; margin-right: 6px; }
.hashf code { font-family: var(--mono); font-size: 12px; background: var(--vr-surface-2); border-radius: 6px; padding: 1px 6px; }
.btn-copy { font: inherit; font-size: 12px; border: 1px solid var(--vr-line); border-radius: 6px; padding: 0 6px; margin-left: 4px; background: transparent; color: var(--vr-text-2); cursor: pointer; }

.card { background: var(--vr-surface); border: 1px solid var(--vr-line-soft); border-radius: 14px; padding: 16px 18px; margin: 10px 0; }

/* W01 查验首页（线框 12 .hero） */
.w01 { text-align: center; padding: 44px 20px 32px; }
.logo-hero { width: 88px; margin: 0 auto; }
.w01 h1 { font: 700 28px/1.3 var(--serif); letter-spacing: .08em; margin: 18px 0 8px; }
.w01 .lbl { display: block; max-width: 420px; margin: 18px auto 4px; font-size: 12px; color: var(--vr-text-2); text-align: left; }
.w01 .f { max-width: 420px; margin: 0 auto 12px; text-align: left; font-family: var(--mono); }
.w01 .btn.pri { max-width: 420px; }
@media (max-width: 480px) { .w01 h1 { font-size: 24px; } }

/* 首屏状态卡（线框 12 W02 / W05，口径 7 ①）：状态图标（按含义换图案）+ 同色宋体大字状态词 + 中性说明行；不用胶囊、不用左色条 */
.status { border: 1px solid var(--vr-line-soft); border-radius: 16px; background: var(--vr-surface); padding: 18px 18px 16px; margin: 0 0 12px; --c: var(--vr-neutral); }
.status.ok { --c: var(--vr-success); } .status.wait { --c: var(--vr-warning); } .status.off { --c: var(--vr-neutral); } .status.bad { --c: var(--vr-danger); }
.status .state { display: flex; align-items: center; gap: 10px; margin: 0; font: 700 24px/1.25 var(--serif); letter-spacing: .06em; color: var(--c); }
.status.sm .state { font-size: 18px; }
.status .meta { margin-top: 6px; color: var(--vr-text-2); font-size: 13px; }
.status .more { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--vr-line-soft); font-size: 13px; }
.status .more b { font-weight: 600; }
.status p { font-size: 13px; margin: 8px 0 0; color: var(--vr-text-2); }
.status .err-code { font-size: 12px; }
.status .btn { margin-top: 10px; }
.hint { color: var(--vr-text-2); font-size: 13px; margin: 4px 2px 12px; }

/* 状态图标（线框 12 .ic.*）：实心圆 + 镂空图案 */
.ic { flex: none; display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--c, var(--vr-neutral)); position: relative; }
.status.sm .ic { width: 20px; height: 20px; }
.ic::after { content: ""; position: absolute; inset: 4px; background: var(--vr-surface); -webkit-mask: var(--g) center/contain no-repeat; mask: var(--g) center/contain no-repeat; }
.ic.eq{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 9.5h11M6.5 14.5h11'/></svg>")}
.ic.ne{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6.5 9.5h11M6.5 14.5h11M14.5 6l-5 12'/></svg>")}
.ic.ok{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='5.5,12.5 10,17 18.5,7.5'/></svg>")}
.ic.no{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7.5 7.5l9 9M16.5 7.5l-9 9'/></svg>")}
.ic.warn{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v8'/><circle cx='12' cy='18' r='1.3' fill='black' stroke='none'/></svg>")}
.ic.pen{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18l1-3.8L15.5 5.7l2.8 2.8L9.8 17z'/></svg>")}
.ic.clock{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='7'/><path d='M12 8.5V12l2.6 1.6'/></svg>")}
.ic.off{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='7'/><path d='M7.2 16.8l9.6-9.6'/></svg>")}
.ic.expired{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M7.5 5h9M7.5 19h9M8.5 5c0 4.5 7 5.5 7 14M15.5 5c0 4.5-7 5.5-7 14'/></svg>")}
.ic.q{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M9.4 9.2a2.7 2.7 0 1 1 3.8 2.5c-.8.4-1.2 1-1.2 1.9'/><circle cx='12' cy='17.6' r='1.3' fill='black' stroke='none'/></svg>")}
.ic.retry{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18 12a6 6 0 1 1-1.8-4.3'/><path d='M18.5 5v3.6h-3.6'/></svg>")}
.ic.ratify{--g:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.2 12a6.8 6.8 0 1 0 2-4.8'/><path d='M5 4.8v3h3'/><path d='M12 8.6V12l2.4 1.5'/></svg>")}
/* 小标签（口径 7 ③）：16 px 琥珀图标 + 琥珀文字 */
.tag { display: inline-flex; align-items: center; gap: 6px; }
.tag .ic { width: 16px; height: 16px; --c: var(--vr-warning); } .tag .ic::after { inset: 3px; }
.tag.wait { color: var(--vr-warning); }

/* 字段分组（线框 12 .grp：可折叠） */
.grp { border: 1px solid var(--vr-line-soft); border-radius: 14px; background: var(--vr-surface); margin: 10px 0; overflow: hidden; }
.grp > summary { cursor: pointer; padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--vr-text); list-style: none; display: flex; justify-content: space-between; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::after { content: "▾"; color: var(--vr-text-2); }
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px 10px; padding: 0 14px 12px; margin: 0; font-size: 13px; }
.kv dt { color: var(--vr-text-2); font-size: 12px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.grp-body { padding: 0 14px 12px; font-size: 13px; }
.group-partial { margin: 0 14px 8px; }

/* 核对我手上的文件：拖放区 1px 细虚线（口径 7 ⑥：全页唯一保留虚线处） */
.drop { display: block; border: 1px dashed rgba(128,128,128,.4); border-radius: 14px; padding: 22px 14px; text-align: center; color: var(--vr-text-2); font-size: 13px; margin: 0 14px 14px; cursor: pointer; }
.drop:hover { border-color: color-mix(in srgb, var(--vr-gold) 55%, transparent); }
.drop .file-name { display: block; margin-top: 6px; font-size: 12px; }
.result-slot { padding: 0 14px; }
.result-slot:not(:empty) { padding-bottom: 6px; }

/* 结果卡（线框 12 W03 / W04，口径 7 ②）：一致 = 绿，不一致 / 需留意 = 琥珀；标题与图标同色，说明中性，不加色条 */
.result { background: var(--vr-surface); border: 1px solid var(--vr-line-soft); border-radius: 12px; padding: 12px 14px; margin: 8px 0; font-size: 13px; }
.result.yes { --c: var(--vr-success); } .result.diff { --c: var(--vr-warning); } .result.key { border-color: var(--vr-line); }
.result p { margin: 0; }
.result-main { display: flex; gap: 10px; align-items: center; font-weight: 600; line-height: 1.5; color: var(--c, var(--vr-text)); }
.result-main .ic { width: 20px; height: 20px; }
.result > :not(.result-main) { margin-left: calc(20px + 10px); }
.result-desc, .result-note { color: var(--vr-text-2); margin-top: 4px !important; }
.bound { color: var(--vr-text-2); font-size: 12px; margin-top: 4px !important; }
.further, .gate { margin-top: 10px; }
.gate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.w04-error { color: var(--vr-danger); margin: 8px 0 0; }

.skeleton div { height: 56px; margin: 12px 0; border-radius: 14px; background: var(--vr-surface-3); animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skeleton div { animation: none; } }
.help h1 { font: 700 20px/1.35 var(--serif); margin: 0 0 12px; }
.help h3 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
@media (max-width: 480px) { .kv { grid-template-columns: 88px 1fr; } }
/* C2 同意对话框（视觉 §4：圆角 16、宽 480–560） */
dialog.c2 { width: min(560px, calc(100vw - 32px)); min-width: min(480px, calc(100vw - 32px)); box-sizing: border-box; border: 1px solid var(--vr-line); border-radius: 16px; padding: 20px 22px; background: var(--vr-surface); color: var(--vr-text); box-shadow: var(--vr-shadow); }
dialog.c2::backdrop { background: rgba(31, 40, 48, .45); }
dialog.c2 h3 { margin: 0 0 10px; font-size: 16px; }
dialog.c2 p { font-size: 13px; color: var(--vr-text-2); }
.c2-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
/* DEV-C9-SUB：转授权凭证标题、原证书「转授权记录」列表 */
.page-title { font: 700 20px/1.35 var(--serif); margin: 0 0 8px; }
.sub-list { list-style: none; margin: 0; padding: 0 14px 12px; font-size: 13px; }
.sub-list li { padding: 6px 0; border-top: 1px solid var(--vr-line-soft); overflow-wrap: anywhere; }
.sub-list li:first-child { border-top: 0; }

/* 电脑宽度版式（线框 12「W01–W05 · 电脑宽度版式」，≥ 960）：内容区居中单列 ≤ 720；页头徽标与字标左对齐到内容区；
   字段分组两列，「核对本地文件」与结果卡通栏；W01 首屏 ≤ 560；页脚一行。< 960 用手机版式 */
@media (min-width: 960px) {
  .brand { padding: 12px 24px; }
  .wrap { padding: 28px 24px 8px; }
  .grps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .grps > .grp { margin: 0; }
  .w01 { max-width: 560px; margin: 0 auto; }
  .site-foot .sep { display: inline; } .site-foot br { display: none; }
}