/* ============================================================
   SSLOPS 工具集统一外框（appbar / hero / 页面容器 + 通用组件）
   从 public/index.html 的设计语言抽出，供 /match/ /convert-key/
   /convert/ /view/ 复用。

   加载顺序：各页自身 style.css → 本文件 → 页面内联 <style> 之前
   所以这里的规则既提供新组件，也负责把旧样式拉齐到同一套 token。
   本文件由 Cloudflare-worker-page/add-nav.mjs 注入，改这里所有页面同步生效。
   ============================================================ */

:root{
  --bg:#f6f8fb;--surface:#fff;--surface-2:#fafcfe;--surface-3:#f2f5f9;
  --line:#e6ebf2;--line-2:#eef2f7;--line-3:#d8e0ea;
  --ink:#0f172a;--ink-2:#44546b;--ink-3:#74839a;--ink-4:#9dabbd;
  --brand:#2563eb;--brand-ink:#1d4ed8;--brand-soft:#eef4ff;--brand-line:#cbdcff;
  --ok:#16a34a;--ok-soft:#e8f8ee;--ok-line:#aae5c4;
  --warn:#a85c07;--warn-soft:#fff5e6;--warn-line:#f3d9ae;
  --bad:#cf2b1e;--bad-soft:#fef2f1;--bad-line:#f5cbc6;
  --r-sm:8px;--r-md:12px;--r-lg:16px;
  --sh-1:0 1px 2px rgba(16,24,40,.05);
  --sh-2:0 1px 2px rgba(16,24,40,.04),0 6px 20px -10px rgba(16,24,40,.14);
  --sans:'Inter','PingFang SC','Noto Sans SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  --ease:cubic-bezier(.4,0,.2,1);--t-fast:140ms var(--ease);--t-base:220ms var(--ease);
  --page:1080px;--page-narrow:880px;
}

html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  /* 旧样式是 flex 居中布局，会与 appbar 挤成一行；现为纵向 flex，仅用于把页脚推到视口底部（内容不足一屏时） */
  display:flex;flex-direction:column;padding:0;min-height:100vh;
  /* 注意：body 不能设背景色 —— html 已有底色，body 若再刷背景会盖住 z-index:-1 的色雾层（body::before） */
  color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
}
body>main{flex:1 0 auto;width:100%}
/* 极光色雾背景统一由 /assets/bg.css 提供（与主页共用），此处不再重复定义 */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

/* ---------------- app bar ---------------- */
.appbar{position:sticky;top:0;z-index:40;background-color:rgba(246,248,251,.55);background-size:100% 100%;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line-2)}
.appbar-inner{position:relative;max-width:var(--page);margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;color:inherit}
.brand-mark{display:block;width:30px;height:30px;border-radius:8px}
.brand-name{font-size:14.5px;font-weight:650;letter-spacing:.01em}
.brand-name span{color:var(--ink-4);font-weight:500}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px;min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:0 0 auto;padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.nav a:hover{background:var(--surface-3);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 2px 8px -3px rgba(37,99,235,.6)}
/* 部署教程入口：顶栏最右侧的低调书本图标 */
.appbar>a.blog-link{position:absolute;right:24px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font-size:12.5px;line-height:1;text-decoration:none;white-space:nowrap;flex:0 0 auto;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.appbar>a.blog-link:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
/* 全站统一页脚 */
.site-footer{max-width:var(--page);margin:0 auto;padding:30px 24px 10px;text-align:center;font-size:12px;color:var(--ink-4)}
.site-footer a{color:var(--ink-3);text-decoration:none}
.site-footer a:hover{color:var(--brand)}
.appbar-tail{margin-left:auto;display:none;align-items:center;gap:8px}
.nav-toggle{display:none;width:34px;height:34px;place-items:center;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);cursor:pointer;flex:0 0 auto;padding:0;transition:background var(--t-fast),color var(--t-fast)}
.nav-toggle:hover{background:var(--surface-3);color:var(--ink)}
.nav-toggle .ico-close{display:none}
.nav-toggle.open .ico-menu{display:none}
.nav-toggle.open .ico-close{display:block}

/* ---------------- hero ---------------- */
.hero{position:relative;padding:40px 24px 22px;text-align:center;background:linear-gradient(180deg,rgba(37,99,235,.02),transparent 70%)}
.hero h1{font-size:30px;line-height:1.28;font-weight:680;letter-spacing:-.02em;color:var(--ink)}
.hero p.sub{margin-top:10px;font-size:14px;color:var(--ink-3)}

/* ---------------- 页面容器 ---------------- */
.page{max-width:var(--page-narrow);margin:0 auto;padding:18px 24px 28px}

/* ---------------- 卡片 ---------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:26px 28px}

/* ---------------- 步骤 / 图标轨 ---------------- */
.rail .num{background:var(--brand-soft)}
.rail .line{border-left-color:var(--line-3)}
.lab b{font-size:15px;color:var(--ink);font-weight:600}
.lab span{font-size:12px;color:var(--ink-4)}

/* ---------------- 输入框 ---------------- */
.box{border:1px dashed var(--line-3);background:var(--surface-2);border-radius:var(--r-md)}
.box.dragover{border-color:var(--brand);background:var(--brand-soft)}
.box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.box.out{background:var(--surface-3)}
.up{border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand);border-radius:7px;font-weight:550}
.up:hover{background:#e2ecff}
.text-input{font:12.5px/1.75 var(--mono);color:var(--ink-2)}
.text-input::placeholder{color:var(--ink-4)}
.box.out .text-input{color:var(--ink-2)}

/* ---------------- 按钮 ---------------- */
.btn{height:40px;border-radius:10px;letter-spacing:.01em}
.btn.primary{background:var(--brand);box-shadow:0 2px 8px -2px rgba(37,99,235,.5);padding:0 30px}
.btn.primary:hover{background:var(--brand-ink);box-shadow:0 4px 14px -4px rgba(37,99,235,.6)}
.btn.ghost{border:1px solid var(--line-3);color:var(--ink-2);background:var(--surface);padding:0 22px}
.btn.ghost:hover{border-color:var(--brand-line);color:var(--brand-ink);background:var(--brand-soft)}

/* ---------------- 分段选择 ---------------- */
.seg{background:var(--surface-3);border:1px solid var(--line);border-radius:12px}
.seg span{color:var(--ink-2);border-radius:8px}
.seg span:hover{color:var(--brand-ink)}
.seg input:checked + span{background:var(--surface);color:var(--brand-ink);box-shadow:0 1px 2px rgba(16,24,40,.08),0 0 0 1px var(--line)}

/* ---------------- 加载 / 错误 / 结果 ---------------- */
.loading p{color:var(--ink-2);font-weight:450}
.spinner{border-color:rgba(37,99,235,.15);border-top-color:var(--brand)}
.error-message{color:var(--bad);background:var(--bad-soft);border:1px solid var(--bad-line);border-radius:10px}

.match-success{background:var(--ok-soft);border:1px solid var(--ok-line)}
.match-success b{color:#166534}
.match-success span{color:#3f7d65}
.match-success .ok{background:var(--ok)}
.match-failure{background:var(--bad-soft);border:1px solid var(--bad-line)}
.match-failure b{color:#8a2419}
.match-failure span{color:#a9584f}
.match-failure .ok{background:var(--bad)}

.privacy-note{margin-top:18px;font-size:12px;color:var(--ink-4);text-align:center}

/* ---------------- 命令行参考 ---------------- */
.cmd-ref{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r-md)}
.cmd-ref summary{color:var(--brand-ink)}
.cmd-body{color:var(--ink-3)}
.cmd-body pre{border:1px solid var(--line);background:var(--surface-3);color:#16324f;font-family:var(--mono)}

/* ============================================================
   /view/ 证书链解析组件
   ============================================================ */
.result-empty{border:1px dashed var(--line-3);background:var(--surface-2);color:var(--ink-4);border-radius:var(--r-md)}
.chain-head{color:var(--ink)}
.node-dot{background:var(--brand);border-color:var(--surface);box-shadow:0 0 0 2px var(--brand)}
.node-line{background:var(--ok)}
.cert-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.cert-card:hover{border-color:var(--brand-line);box-shadow:var(--sh-1)}
.cert-card.active{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.cert-card .cn-name{color:var(--ink)}
.cert-card .issuer-line{color:var(--ink-3)}
.cert-card .card-row2 .ik{color:var(--ink-4)}
.cert-card .card-row2 .iv{color:var(--ink-2)}
.valid-tag{color:var(--ok)}
.expired-tag{color:var(--bad)}
.warn-tag{color:var(--warn)}
.it-err{background:var(--bad-soft);color:var(--bad);border-color:var(--bad-line)}
.it-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.cert-detail{border-top:1px solid var(--line-2)}
.detail-item .dk{color:var(--ink-4)}
.detail-item .dv{color:var(--ink-2);font-family:var(--mono)}
.link-ok{color:var(--ok)}
.link-bad{color:var(--bad)}
.pem-box{background:var(--surface-3);border:1px solid var(--line);color:var(--ink-3);font-family:var(--mono);border-radius:var(--r-sm)}
.copy-btn{border:1px solid var(--line-3);color:var(--ink-2);border-radius:6px}
.copy-btn:hover{border-color:var(--brand);color:var(--brand)}
.result-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md)}
.result-card.error-card{border-left:3px solid var(--bad)}
.result-card h2,.result-card p{color:var(--bad)}
.san-item{background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--brand-line);font-family:var(--mono)}

/* AIA 补链 */
.cc-btn{border:1px solid var(--brand-line);background:var(--brand-soft);color:var(--brand-ink);border-radius:var(--r-sm)}
.cc-btn:hover{background:#e2ecff}
.cc-hint{color:var(--ink-4)}
.cc-status{color:var(--ink-3)}
.cc-status.err{color:var(--bad)}
.cc-retry{border:1px solid var(--bad-line);background:var(--bad-soft);color:var(--bad)}
.cc-retry:hover{background:#fbe6e4}
.alt-head{border-top:1px dashed var(--line-3);color:var(--ink)}
.cc-dl-link{color:var(--brand-ink)}
.cc-band{background:var(--surface-3);border-radius:var(--r-md)}
.ctab{color:var(--ink-2)}
.ctab.on{background:var(--brand);color:#fff}
.ctab:hover:not(.on){background:var(--brand-soft);color:var(--brand-ink)}
.plus-tag{background:#f1f5f9;color:#64748b;border:1px solid #dbe2ec}

/* ============================================================
   /convert/ 参数表 / 文件框 / 命令行
   ============================================================ */
/* collapse 模式下圆角画不出来，改 separate + 清零间距 */
.param-table{border:1px solid var(--line);border-radius:var(--r-md);border-collapse:separate;border-spacing:0;overflow:hidden}
.param-table tr:first-child td:first-child{border-top-left-radius:calc(var(--r-md) - 1px)}
.param-table tr:first-child td:last-child{border-top-right-radius:calc(var(--r-md) - 1px)}
.param-table tr:last-child td:first-child{border-bottom-left-radius:calc(var(--r-md) - 1px)}
.param-table tr:last-child td:last-child{border-bottom-right-radius:calc(var(--r-md) - 1px)}
.param-table tr+tr td{border-top:1px solid var(--line-2)}
.param-table td{background:var(--surface-2);color:var(--ink-2)}
.param-table td:first-child{background:var(--surface-3);color:var(--ink-3);white-space:nowrap}
.param-table label{color:var(--ink-2)}
.param-table input[type=radio]{accent-color:var(--brand)}
.src-file-box{border:1px dashed var(--line-3);background:var(--surface-2);border-radius:var(--r-md)}
.src-file-box:hover,.src-file-box.dragover{border-color:var(--brand);background:var(--brand-soft)}
.src-file-box .hint{color:var(--ink-4)}
.param-input{border:1px solid var(--line-3);color:var(--ink-2);border-radius:var(--r-sm)}
.param-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.field-label{color:var(--ink-3)}
.field-label b{color:var(--ink-2)}
.gen-pwd-btn{border:1px solid var(--line-3);color:var(--brand-ink);border-radius:var(--r-sm)}
.gen-pwd-btn:hover{border-color:var(--brand);background:var(--brand-soft)}
.eye-btn svg path,.eye-btn svg circle{stroke:var(--ink-4)}
.eye-btn:hover svg path,.eye-btn:hover svg circle{stroke:var(--brand)}
.result-summary{background:var(--ok-soft);border:1px solid var(--ok-line);color:#166534;border-radius:var(--r-md)}

/* 弹窗 */
.modal{border-radius:var(--r-lg)}
.modal-header{color:var(--ink)}
.modal-body{color:var(--ink-2)}
.modal-body strong{color:var(--brand-ink)}
.modal-btn{background:var(--brand);border-radius:10px;letter-spacing:0}
.modal-btn:hover{background:var(--brand-ink)}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:900px){
  .nav-toggle{display:grid}
  .appbar-tail{display:flex}
  .appbar-inner{position:relative;gap:12px;justify-content:flex-start}
  .nav{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:60;flex-direction:column;align-items:stretch;gap:2px;margin-left:0;min-width:176px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 32px -8px rgba(16,24,40,.22);overflow:visible}
  .nav.open{display:flex;animation:navIn .16s ease-out}
  .nav a{padding:9px 14px;border-radius:8px}
  .nav a[aria-current="page"]{box-shadow:none}
  .appbar>a.blog-link{right:56px;padding:5px 7px}.appbar>a.blog-link span{display:none}
}
@keyframes navIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:680px){
  .hero{padding:26px 18px 14px}
  .hero h1{font-size:22px}
  .hero p.sub{font-size:12.5px}
  .page{padding:14px 14px 52px}
  .card{padding:20px 16px;border-radius:var(--r-md)}
  .appbar-inner{padding:0 14px;gap:12px}
  .brand-name{display:none}
  .detail-grid{grid-template-columns:1fr}
  .param-table td:first-child{width:1%}
}
@media (max-width:520px){
  /* 手机输入法组合期与占位文字叠加发虚的缓解：聚焦时隐藏占位 */
  .text-input:focus::placeholder{color:transparent}
  .actions{flex-direction:column}
  .actions .btn{width:100%}
}

/* ---- 工具页一屏压缩（仅 match / convert / convert-key / view，body.page-compact；不影响首页） ---- */
body.page-compact .hero{padding:22px 24px 12px}
body.page-compact .hero h1{font-size:26px}
body.page-compact .hero p.sub{margin-top:6px}
body.page-compact .site-footer{padding:16px 24px 8px}
body.page-compact .page{padding:10px 24px 8px}
@media (max-width:520px){
  body.page-compact .page{padding:14px 14px 52px}
}