/* 卡密平台：干净白底 SaaS 风，蓝 #3189ef 点缀 */
:root{
  --blue:#3189ef; --blue-d:#2379e0; --blue-t:#eaf3fe;
  --ink:#1a1a1a; --gray:#6e6e6e; --gray-l:#a3a3a3;
  --line:#e5e5e5; --line-l:#f2f2f2;
  --bg:#ffffff;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC",
    "Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.6;
}
::-webkit-scrollbar{width:0;height:0}
*{scrollbar-width:none}
.hidden{display:none!important}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
.narrow{max-width:640px;margin-left:auto;margin-right:auto}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.center{text-align:center}
.mt{margin-top:16px}
.grow{flex:1}

/* ---- 顶栏 ---- */
.topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line-l)}
.topbar-in{max-width:1060px;margin:0 auto;padding:0 20px;height:60px;
  display:flex;align-items:center;gap:28px}
.brand{font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;
  display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .mark{width:30px;height:30px;border-radius:9px;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 16px;border-radius:999px;font-size:14.5px;color:var(--gray);
  text-decoration:none;font-weight:500;white-space:nowrap}
.nav a:hover{color:var(--ink);background:#f7f7f7}
.nav a.on{color:var(--blue-d);background:var(--blue-t);font-weight:700}

/* ---- 步骤条 ---- */
.steps{display:flex;margin:26px auto;max-width:640px}
.step{flex:1;text-align:center;font-size:13px;color:var(--gray-l);font-weight:500}
.step .dot{width:32px;height:32px;border-radius:50%;background:#f1f1f1;color:var(--gray);
  display:flex;align-items:center;justify-content:center;margin:0 auto 6px;
  font-weight:700;font-size:14px}
.step.now{color:var(--blue);font-weight:700}
.step.now .dot{background:var(--blue);color:#fff}
.step.done{color:var(--gray)}
.step.done .dot{background:#d6e7fd;color:var(--blue)}

/* ---- 卡片 / 表单 ---- */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px;margin:20px 0}
.sec-title{font-size:17px;font-weight:800;margin:26px 0 6px}
.hint{color:var(--gray);font-size:13px}
.hint-inline{color:var(--gray-l);font-size:12px;font-weight:400}
.field-label{display:block;font-weight:700;margin:16px 0 8px;font-size:14px}
.req{color:var(--err)}
.box{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-size:15px;background:#fff;color:var(--ink)}
.box:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-t)}
textarea.box{min-height:110px;resize:vertical}
.btn{display:inline-block;border:none;cursor:pointer;font-weight:700;font-size:15px;
  border-radius:12px;padding:13px 28px;background:var(--blue);color:#fff;
  transition:background .15s;text-decoration:none;text-align:center}
.btn:hover{background:var(--blue-d)}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.secondary:hover{background:#f9fafb}
.btn.block{width:100%}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kv .row,.row{display:flex;gap:12px;align-items:center;padding:11px 0;
  border-bottom:1px solid var(--line-l)}
.row:last-child{border-bottom:none}
.row label{color:var(--gray);font-size:13px;flex:0 0 88px}
.agree{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--gray);cursor:pointer}
.agree input{margin-top:4px;transform:scale(1.25);accent-color:var(--blue)}
.bigcheck{width:56px;height:56px;border-radius:50%;background:var(--blue-t);color:var(--blue);
  font-size:28px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}

/* ---- 提示框 ---- */
.alert{border-radius:10px;padding:13px 16px;margin:12px 0;font-size:14px;word-break:break-word}
.alert.ok{background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.alert.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.alert.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.alert.info{background:#eaf3fe;border:1px solid #bfdbfe;color:#1e40af}
.result:empty{display:none}

/* ---- 时间线 / 徽章 ---- */
.timeline{list-style:none;margin:10px 0 0;padding:0}
.timeline li{padding:8px 0 8px 18px;border-left:2px solid var(--line);margin-left:6px;
  font-size:13px;position:relative;word-break:break-word}
.timeline li::before{content:"";position:absolute;left:-5px;top:14px;width:8px;height:8px;
  border-radius:50%;background:var(--blue)}
.timeline .ts{color:var(--gray-l);margin-left:8px;font-size:12px}
.timeline-wrap{margin-top:8px}
.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;
  padding:3px 12px;white-space:nowrap}
.badge.ok{background:#dcfce7;color:#166534}
.badge.info{background:var(--blue-t);color:var(--blue-d)}
.badge.wait{background:#fef3c7;color:#92400e}
.badge.err{background:#fee2e2;color:#991b1b}
.badge.gray{background:#f1f1f1;color:var(--gray)}

/* ---- 查询结果项 ---- */
.qitem{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0}
.qhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.qorder{margin-top:8px;font-size:13.5px}
.qorder>span{color:var(--gray)}

/* ---- 浏览器示意卡 ---- */
.browser-mock{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin:14px 0;background:#fbfbfa}
.bm-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:#f4f3f0;border-bottom:1px solid var(--line-l)}
.bm-dot{width:11px;height:11px;border-radius:50%}
.bm-dot.r{background:#ff5f57}.bm-dot.y{background:#febc2e}.bm-dot.g{background:#28c840}
.bm-url{margin-left:8px;flex:1;background:#fff;border:1px solid var(--line-l);
  border-radius:999px;font-size:12.5px;color:var(--gray);padding:5px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bm-body{display:flex;align-items:center;gap:12px;padding:16px}
.bm-icon{width:40px;height:40px;border-radius:10px;background:#10a37f;color:#fff;
  flex:0 0 40px;display:flex;align-items:center;justify-content:center;font-size:20px}
.bm-body small{display:block;color:var(--gray);font-size:12.5px;font-weight:400;margin-top:2px}
.bm-open{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 18px;font-size:13.5px;font-weight:600;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.bm-open:hover{border-color:var(--blue);color:var(--blue)}
.lchip{display:inline-block;background:var(--blue-t);color:var(--blue-d);
  border-radius:999px;padding:2px 12px;font-size:13px;font-weight:600;text-decoration:none}
.lchip:hover{background:#d6e7fd}

/* ---- 教程步骤 ---- */
.tsteps{margin:18px 0}
.tstep{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-l);font-size:14px}
.tstep:last-child{border-bottom:none}
.tstep .n{flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--blue-t);color:var(--blue);font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center}

/* ---- 页脚 ---- */
.footer{margin-top:64px;border-top:1px solid var(--line-l);padding:32px 0 96px;
  color:var(--gray);font-size:13px;background:#fafafa}
.fcols{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.fbrand{font-weight:800;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:8px}
.fbrand .mark{width:24px;height:24px;border-radius:7px;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.flinks{display:flex;gap:18px;flex-wrap:wrap}
.flinks a{color:var(--gray);text-decoration:none}
.flinks a:hover{color:var(--ink)}
.fnote{margin:16px 0 0}

/* ---- 移动端底部导航 ---- */
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--line-l);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.tabbar a{flex:1;text-align:center;color:var(--gray);text-decoration:none;
  font-size:12px;font-weight:500;padding:4px 0}
.tabbar a.on{color:var(--blue);font-weight:700}

@media (max-width:720px){
  .nav a{padding:7px 10px;font-size:13px}
  .topbar-in{gap:12px}
  .tabbar{display:flex}
  .card{padding:20px}
  .footer{padding-bottom:110px}
  .bm-open{padding:7px 12px}
}