/* TLS 签章验证页面（seal/verify.php，访客点击网站上的签章后在小窗口中打开）。依赖 site.css 的颜色变量与 .brand-logo。 */
.seal-body{min-height:100vh;background:#f3f7fb;font-size:14px;line-height:1.65}
.seal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;background:#fff;border-bottom:1px solid var(--line)}
.seal-top .brand-logo{--h:28px}
.seal-top-tag{flex-shrink:0;padding:3px 10px;border-radius:999px;background:#e8f5fd;color:var(--brand-600);font-size:12.5px;font-weight:600}
.seal-main{display:grid;gap:14px;max-width:660px;margin:0 auto;padding:18px 16px 6px}

/* 结论 */
.seal-card{padding:20px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.seal-head{display:flex;align-items:flex-start;gap:14px}
.seal-head h1{font-size:18px}
.seal-head p{margin-top:5px}
.seal-head .seal-muted{margin-top:6px}
.seal-head-host{font-size:15px;color:var(--ink)}
.seal-head-icon{display:grid;place-items:center;flex-shrink:0;width:48px;height:48px;border-radius:14px}
.seal-head-icon svg{display:block}
.seal-head.is-ok{border-color:#b6e6d1;background:linear-gradient(180deg,#effaf5 0%,#fff 70%)}
.seal-head.is-ok .seal-head-icon{background:#059669;color:#fff;box-shadow:0 10px 20px -10px rgba(5,150,105,.7)}
.seal-head.is-warn{border-color:#fbe0b4;background:linear-gradient(180deg,#fff8ec 0%,#fff 70%)}
.seal-head.is-warn .seal-head-icon{background:#fff1dc;color:#d97706}
.seal-head.is-danger{border-color:#fbcaca;background:linear-gradient(180deg,#fff3f3 0%,#fff 70%)}
.seal-head.is-danger .seal-head-icon{background:#fee2e2;color:#dc2626}

/* 信息表格（与常见的 CA 签章页面一致：左侧标签，右侧内容） */
.seal-section{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm)}
.seal-section h2{padding:10px 16px;font-size:14.5px;color:var(--navy-2);background:#edf5fc;border-bottom:1px solid var(--line);box-shadow:inset 4px 0 0 var(--brand)}
.seal-table{width:100%;border-collapse:collapse}
.seal-table th,.seal-table td{padding:10px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.seal-table tr:last-child th,.seal-table tr:last-child td{border-bottom:0}
.seal-table th{width:122px;font-weight:600;color:var(--ink);background:#fafcfe;border-right:1px solid var(--line);white-space:nowrap}
.seal-table td{color:var(--text);overflow-wrap:anywhere}
.seal-table td img{display:inline-block}
.seal-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;overflow-wrap:anywhere}
.seal-muted{font-size:13px;color:var(--muted)}
.seal-pill{display:inline-flex;padding:1px 10px;border-radius:999px;font-size:12.5px;font-weight:600}
.seal-pill.is-ok{background:#e3f6ee;color:#047857}
.seal-pill.is-danger{background:#fee2e2;color:#dc2626}
.seal-brand-logo{width:auto;max-width:96px;height:20px;margin-right:8px;vertical-align:-5px;object-fit:contain}

/* 请确认以下三点 */
.seal-confirm ol{display:grid;gap:6px;padding:12px 16px 2px 36px;list-style:decimal}
.seal-confirm li{padding-left:2px}
.seal-confirm-note{margin:10px 16px 16px;padding:10px 14px;border-radius:10px;background:var(--navy);color:#fff;font-size:13px}

/* 加载状态 */
.seal-loading{padding:44px 20px;text-align:center}
.seal-spinner{width:42px;height:42px;margin:0 auto 18px;border:3px solid #d7e8f5;border-top-color:var(--brand);border-radius:50%;animation:seal-spin .8s linear infinite}
@keyframes seal-spin{to{transform:rotate(360deg)}}
.seal-loading h1{font-size:18px}
.seal-loading-host{margin:6px 0 4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px;color:var(--ink);overflow-wrap:anywhere}
.seal-loading .btn{margin-top:16px;height:40px;font-size:14px}
.seal-loading .btn-primary{display:inline-flex}

.seal-demo{padding:10px 14px;border:1px solid #fbe0b4;border-radius:12px;background:#fff8ec;color:#92400e;font-size:13px}
.seal-foot{padding:14px 16px 22px;text-align:center;font-size:12.5px;color:var(--muted)}
.seal-foot a{color:var(--brand-600)}

@media (prefers-reduced-motion:reduce){.seal-spinner{animation-duration:2.4s}}
@media (max-width:480px){
  .seal-top{padding:10px 14px}
  .seal-top .brand-logo{--h:24px}
  .seal-main{padding:14px 12px 4px}
  .seal-head{flex-direction:column;gap:10px}
  .seal-table th{width:92px;padding:9px 10px;white-space:normal}
  .seal-table td{padding:9px 12px}
}