:root{
  --pri:#2563eb; --pri-d:#1d4ed8; --pri-l:#eff6ff;
  --ok:#16a34a; --ok-l:#f0fdf4; --warn:#f59e0b; --warn-l:#fffbeb;
  --err:#dc2626; --err-l:#fef2f2;
  --tx:#0f172a; --tx2:#475569; --tx3:#94a3b8;
  --bd:#e2e8f0; --bg:#f6f8fc; --card:#ffffff;
  --radius:14px; --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--tx); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--pri);text-decoration:none}
a:hover{color:var(--pri-d)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ---------- 顶栏 ---------- */
header.nav{background:#fff;border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:50}
.nav-in{display:flex;align-items:center;height:64px;gap:28px}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--tx)}
.logo .mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#2563eb,#06b6d4);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;box-shadow:0 4px 10px rgba(37,99,235,.3)}
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{padding:8px 14px;border-radius:9px;color:var(--tx2);font-weight:500}
.nav-links a:hover{background:var(--pri-l);color:var(--pri)}
.nav-links a.on{background:var(--pri-l);color:var(--pri);font-weight:600}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.who{color:var(--tx2);font-size:13px}
.who b{color:var(--tx)}

/* ---------- 通用 ---------- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-h{padding:18px 22px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px}
.card-h h3{font-size:16px;font-weight:600}
.card-h .sub{color:var(--tx3);font-size:12px;margin-left:auto}
.card-b{padding:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 18px;
  border-radius:10px;border:1px solid var(--bd);background:#fff;color:var(--tx);font-size:14px;font-weight:500;
  cursor:pointer;transition:.15s;font-family:inherit}
.btn:hover{border-color:#c7d2fe;background:#fafbff}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.25)}
.btn.pri:hover{background:var(--pri-d);border-color:var(--pri-d)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.ok:hover{filter:brightness(.95)}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:transparent;color:var(--tx2)}
.btn.ghost:hover{background:#f1f5f9}

label.f{display:block;font-weight:600;font-size:13px;margin-bottom:8px;color:var(--tx)}
label.f .req{color:var(--err);margin-right:4px}
input.i,select.i,textarea.i{width:100%;height:42px;padding:0 13px;border:1px solid var(--bd);border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--tx);background:#fff;outline:none;transition:.15s}
textarea.i{height:auto;padding:11px 13px;resize:vertical;line-height:1.7}
input.i:focus,select.i:focus,textarea.i:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.hint{color:var(--tx3);font-size:12px;margin-top:7px;line-height:1.7}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.row2{grid-template-columns:1fr}}

.alert{padding:11px 15px;border-radius:10px;font-size:13px;margin-bottom:16px}
.alert.err{background:var(--err-l);color:#b91c1c;border:1px solid #fecaca}
.alert.warn{background:var(--warn-l);color:#b45309;border:1px solid #fde68a}
.alert.ok{background:var(--ok-l);color:#15803d;border:1px solid #bbf7d0}
.alert.info{background:var(--pri-l);color:#1e40af;border:1px solid #bfdbfe}

table.tb{width:100%;border-collapse:collapse;font-size:13px}
table.tb th{background:#f8fafc;color:var(--tx2);font-weight:600;text-align:left;padding:11px 12px;
  border-bottom:1px solid var(--bd);white-space:nowrap}
table.tb td{padding:11px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
table.tb td:nth-child(3),table.tb td:nth-child(4){white-space:nowrap}
table.tb tr:last-child td{border-bottom:none}
table.tb tr:hover td{background:#fafbff}
.code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  background:#f8fafc;border:1px solid var(--bd);border-radius:7px;padding:3px 7px;word-break:break-all}
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  font-size:12px;font-weight:600}
.pill.p{background:#f1f5f9;color:#64748b}
.pill.w{background:var(--warn-l);color:#b45309}
.pill.s{background:var(--ok-l);color:#15803d}
.pill.e{background:var(--err-l);color:#b91c1c}
.pill.i{background:var(--pri-l);color:#1e40af}
.ospin{display:inline-block;width:12px;height:12px;border:2px solid rgba(37,99,235,.25);
  border-top-color:var(--pri);border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ---------- 首页 ---------- */
.hero{padding:70px 0 56px;text-align:center;
  background:radial-gradient(circle at 50% -10%,#dbeafe 0%,rgba(219,234,254,0) 60%),#fff;
  border-bottom:1px solid var(--bd)}
.hero h1{font-size:40px;line-height:1.25;font-weight:800;letter-spacing:.5px}
.hero h1 em{font-style:normal;background:linear-gradient(120deg,#2563eb,#06b6d4);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--tx2);font-size:16px;margin-top:16px}
.hero .acts{margin-top:28px;display:flex;gap:12px;justify-content:center}
.hero .btn{height:46px;padding:0 26px;font-size:15px}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:-32px auto 0;position:relative;z-index:2}
@media(max-width:900px){.feat{grid-template-columns:1fr 1fr}}
.feat .card{padding:22px}
.feat .ic{width:40px;height:40px;border-radius:11px;background:var(--pri-l);color:var(--pri);
  display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:12px}
.feat h4{font-size:15px;font-weight:600;margin-bottom:6px}
.feat p{color:var(--tx2);font-size:13px}
.cas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
@media(max-width:900px){.cas{grid-template-columns:1fr 1fr}}
.ca{border:1px solid var(--bd);border-radius:12px;padding:14px;background:#fff}
.ca b{font-size:14px}
.ca span{display:block;color:var(--tx3);font-size:12px;margin-top:4px}
section.blk{padding:48px 0}
h2.sec{font-size:23px;font-weight:700;margin-bottom:8px}
p.sec{color:var(--tx2);margin-bottom:22px}

/* ---------- 登录 ---------- */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px;
  background:radial-gradient(circle at 20% 0%,#dbeafe 0%,rgba(219,234,254,0) 55%),var(--bg)}
.auth .box{width:100%;max-width:420px}
.auth .box .logo{justify-content:center;margin-bottom:22px;font-size:20px}
.auth .card-b{padding:26px}
.auth h2{font-size:19px;margin-bottom:4px}
.auth .d{color:var(--tx3);font-size:13px;margin-bottom:20px}
.auth .field{margin-bottom:16px}
.auth .btn{width:100%;margin-top:6px}
.auth .foot{text-align:center;color:var(--tx2);font-size:13px;margin-top:18px}

/* ---------- 申请页 ---------- */
.stepbar{display:flex;align-items:center;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:9px;padding:9px 15px;border-radius:10px;background:#fff;
  border:1px solid var(--bd);font-size:13px;color:var(--tx2)}
.step b{width:20px;height:20px;border-radius:50%;background:#e2e8f0;color:#64748b;font-size:12px;
  display:flex;align-items:center;justify-content:center}
.step.on{border-color:#bfdbfe;background:var(--pri-l);color:var(--pri-d);font-weight:600}
.step.on b{background:var(--pri);color:#fff}
.step.done{border-color:#bbf7d0;background:var(--ok-l);color:#15803d}
.step.done b{background:var(--ok);color:#fff}
.step .arw{color:var(--tx3)}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.choose{grid-template-columns:1fr}}
.opt{border:1.5px solid var(--bd);border-radius:12px;padding:15px;cursor:pointer;transition:.15s;background:#fff}
.opt:hover{border-color:#c7d2fe}
.opt.on{border-color:var(--pri);background:var(--pri-l);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.opt .t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.opt .t .tagm{margin-left:auto;font-size:11px;font-weight:600;background:#eef2ff;color:#4338ca;
  padding:2px 8px;border-radius:6px}
.opt p{color:var(--tx2);font-size:12px;margin-top:7px;line-height:1.6}
.casel{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.casel{grid-template-columns:1fr 1fr}}
.casel .opt{padding:13px;text-align:left}
.casel .opt .t{font-size:13px}
.casel .opt .d{color:var(--tx3);font-size:11px;margin-top:5px}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--bd)}
.mono{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:12px}

/* ---------- 管理后台 ---------- */
.tabs{display:flex;gap:6px;margin-bottom:20px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.tab{padding:11px 18px;color:var(--tx2);font-size:14px;font-weight:500;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.tab:hover{color:var(--pri)}
.tab.on{color:var(--pri);font-weight:600;border-bottom-color:var(--pri)}
.panel[hidden]{display:none}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
.stats .card{padding:20px}
.stats .card b{display:block;font-size:30px;font-weight:800;line-height:1.2;color:var(--pri)}
.stats .card span{color:var(--tx2);font-size:13px}
.stats .card.ok b{color:var(--ok)}
.stats .card.warn b{color:var(--warn)}
.stats .card.err b{color:var(--err)}

/* ---------- 页脚 ---------- */
footer.ft{border-top:1px solid var(--bd);background:#fff;padding:26px 0;margin-top:40px;
  color:var(--tx3);font-size:13px;text-align:center}
.empty{padding:52px 20px;text-align:center;color:var(--tx3)}
.empty .big{font-size:34px;margin-bottom:10px;opacity:.5}

/* ---------- 移动端适配（≤640px 手机） ---------- */
@media(max-width:640px){
  .wrap{padding:0 14px}
  /* 顶栏：logo 与链接分两行，避免重叠 */
  .nav-in{height:auto;flex-wrap:wrap;gap:0;padding:9px 0 7px;row-gap:4px}
  .logo{flex:1 1 100%;justify-content:center;font-size:16px}
  .nav-links{flex:1 1 100%;margin-left:0;justify-content:center;gap:2px;flex-wrap:wrap}
  .nav-links a{padding:7px 10px;font-size:13px}
  .nav-right{flex:1 1 100%;margin-left:0;justify-content:center;gap:10px}
  /* 首页 */
  .hero{padding:42px 0 38px}
  .hero h1{font-size:27px;letter-spacing:0}
  .hero p{font-size:14px}
  .hero .acts{margin-top:20px;flex-direction:column;align-items:stretch}
  .hero .btn{height:44px;padding:0 20px}
  .feat{grid-template-columns:1fr;margin-top:24px;gap:12px}
  .cas{grid-template-columns:1fr 1fr;gap:10px}
  section.blk{padding:32px 0}
  h2.sec{font-size:19px}
  /* 卡片 / 表格 */
  .card-b{padding:16px}
  .card-h{padding:14px 16px;flex-wrap:wrap}
  table.tb{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .code{display:inline-block;max-width:100%}
  .mono{word-break:break-all}
  /* 申请页 */
  .casel{grid-template-columns:1fr}
  .stepbar{gap:4px}
  .step{padding:7px 10px;font-size:12px}
  .step .arw{display:none}
  .acts{flex-direction:column;align-items:stretch;margin-top:16px;padding-top:16px}
  .acts .btn{width:100%}
  /* 管理后台 */
  .tabs{gap:2px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:14px}
  .tab{padding:10px 13px;font-size:13px;white-space:nowrap}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stats .card b{font-size:24px}
  footer.ft{padding:18px 0;margin-top:28px;font-size:12px}
}