:root{
  --blue:#0040a0; --blue-2:#0a52c4; --cyan:#00c0f0; --amber:#f0a000;
  --ink:#0d1729; --text:#2b3a52; --sub:#6b7c96;
  --line:#e4eaf3; --line-2:#eef2f8; --bg:#fff; --bg-2:#f7f9fc;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);
     font:15px/1.75 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.02em}
p{margin:0}
.shell{max-width:1040px;margin:0 auto;padding:0 28px}
.shell-n{max-width:860px;margin:0 auto;padding:0 28px}

/* 页头 */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);
       backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--line)}
.hbar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.brand img{width:32px;height:32px;display:block}
.bname{font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1.2}
.bsub{display:block;font-size:10.5px;font-weight:400;color:var(--sub);letter-spacing:.16em;margin-top:3px}
nav{display:flex;align-items:center;gap:28px;font-size:14px}
nav a{color:var(--text)}
nav a:hover{color:var(--blue)}
.rule{height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue) 46%,var(--amber))}
.acts{display:flex;align-items:center;gap:12px}

/* 按钮 */
.btn{display:inline-block;border:0;border-radius:8px;background:var(--blue);color:#fff;
     font:500 14px/1 inherit;padding:12px 22px;cursor:pointer;text-align:center}
.btn:hover{background:var(--blue-2)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:#c6d4e8;color:var(--blue);background:#fff}
.btn.sm{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default}

/* 首页 */
.hero{padding:96px 0 84px;border-bottom:1px solid var(--line-2)}
.hero h1{font-size:46px;line-height:1.24;max-width:16em}
.hero .sub{margin-top:22px;font-size:16px;color:var(--sub);max-width:32em;line-height:1.9}
.hero .cta{margin-top:38px;display:flex;gap:12px;flex-wrap:wrap}

.sec{padding:64px 0;border-bottom:1px solid var(--line-2)}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:38px}
.sec-h span{font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
            color:var(--amber);letter-spacing:.1em}
.sec-h h2{font-size:22px}

.items{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);
       border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.item{background:#fff;padding:26px 26px 28px}
.item h3{font-size:16px;margin-bottom:8px}
.item p{font-size:13.5px;color:var(--sub);line-height:1.8}
.item em{font-style:normal;display:block;font:600 11px/1 ui-monospace,Menlo,monospace;
         color:#9fb0c8;margin-bottom:14px;letter-spacing:.1em}

.about p{font-size:15px;line-height:2;max-width:44em;color:var(--text)}
.facts{display:flex;gap:48px;margin-top:34px;flex-wrap:wrap}
.fact b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.fact span{font-size:12.5px;color:var(--sub)}

.contact{display:flex;justify-content:space-between;gap:32px;align-items:flex-end;flex-wrap:wrap}
.contact .big{font-size:20px;color:var(--ink);font-weight:600}

footer{border-top:1px solid var(--line);padding:26px 0 34px;font-size:12.5px;color:var(--sub)}
.fbar{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* 表单 / 账号页 */
.card{max-width:400px;margin:76px auto;border:1px solid var(--line);border-radius:12px;
      padding:34px 32px 30px;box-shadow:0 1px 2px rgba(13,23,41,.03)}
.card h1{font-size:22px;margin-bottom:8px}
.card .hint{font-size:13px;color:var(--sub);margin-bottom:26px}
label{display:block;font-size:12.5px;color:var(--sub);margin:16px 0 7px}
input[type=text],input[type=password],input[type=email]{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font-size:14.5px;
  font-family:inherit;color:var(--ink);outline:none;background:#fff}
input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,64,160,.08)}
.card .btn{width:100%;margin-top:24px}
.switch{text-align:center;font-size:13px;color:var(--sub);margin-top:18px}
.err{color:#b42318;font-size:13px;min-height:20px;margin-top:12px}
.tip{background:#fff8ec;border:1px solid #f6e0bb;color:#8a5a00;border-radius:8px;
     padding:12px 14px;font-size:13px;line-height:1.7;margin-top:22px}

/* 工作台 */
.toolbar{padding-top:26px}
.searchbar{display:flex;align-items:center;border:1px solid var(--line);border-radius:10px;
           background:#fff;padding:4px 4px 4px 14px;transition:border-color .15s,box-shadow .15s}
.searchbar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,64,160,.08)}
.searchbar svg{flex:none;width:17px;height:17px;stroke:var(--sub);fill:none;stroke-width:1.8}
.searchbar input{flex:1;border:0;outline:none;padding:12px;font-size:15px;background:transparent;
                 color:var(--ink);font-family:inherit}
.searchbar input::placeholder{color:#9aa8bd}
.searchbar button{flex:none;border:0;border-radius:7px;background:var(--blue);color:#fff;
                  font:500 14px/1 inherit;padding:12px 20px;cursor:pointer}
.searchbar button:hover{background:var(--blue-2)}
.searchbar button:disabled{background:#8fa6c8}
.chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;color:var(--sub);font-size:12.5px;
      padding:5px 12px;border-radius:999px;cursor:pointer;font-family:inherit}
.chip[aria-pressed=true]{border-color:var(--blue);color:var(--blue);background:#f2f6fd}
.chip small{opacity:.72;margin-left:4px}
.note{font-size:12px;color:var(--sub);margin-top:10px}
.block{margin-top:44px;padding-top:22px;border-top:1px solid var(--line-2)}
.block h2{font-size:11.5px;font-weight:600;color:var(--sub);letter-spacing:.18em;margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;color:var(--text);background:var(--bg-2);border:1px solid var(--line-2);
     padding:6px 12px;border-radius:6px;cursor:pointer;font-family:inherit}
.tag:hover{border-color:#c9d6ea;color:var(--blue)}
.ans{border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:8px;
     background:#fbfcfe;padding:20px 22px;white-space:pre-wrap;line-height:1.9;
     color:var(--ink);font-size:15px}
.ans.wait{color:var(--sub);border-left-color:#c7d2e3}
.disclaimer{font-size:11.5px;color:var(--sub);margin-top:10px}
.src{display:flex;gap:14px;padding:15px 2px;border-bottom:1px solid var(--line-2)}
.src:first-child{border-top:1px solid var(--line-2)}
.idx{flex:none;width:24px;height:24px;border-radius:5px;background:#fdf3e0;color:#9a6800;
     font:600 11.5px/24px ui-monospace,Menlo,monospace;text-align:center}
.sbody{flex:1;min-width:0}
.stitle{font-size:15px;color:var(--ink);font-weight:500;display:block;overflow:hidden;
        text-overflow:ellipsis;white-space:nowrap}
.stitle:hover{color:var(--blue)}
.smeta{font-size:11.5px;color:var(--sub);margin:3px 0 5px;
       font-family:ui-monospace,Menlo,monospace}
.smeta .ok{color:#0a7a45}
.ssnip{font-size:13px;color:#5a6b84;line-height:1.65}
.read{flex:none;align-self:flex-start;border:1px solid var(--line);background:#fff;color:var(--sub);
      font:12px/1 inherit;padding:6px 10px;border-radius:5px;cursor:pointer;white-space:nowrap}
.read:hover{border-color:var(--blue);color:var(--blue)}

/* 抽屉 */
.mask{position:fixed;inset:0;background:rgba(13,23,41,.32);opacity:0;pointer-events:none;
      transition:opacity .2s;z-index:40}
.mask.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(640px,96vw);background:#fff;
        transform:translateX(101%);transition:transform .24s ease;z-index:41;
        display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(13,23,41,.10)}
.drawer.on{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
       padding:16px 22px;border-bottom:1px solid var(--line)}
.dhead b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dhead button{border:0;background:none;font-size:20px;line-height:1;color:var(--sub);cursor:pointer}
.dbody{padding:22px 24px 60px;overflow-y:auto;white-space:pre-wrap;font-size:14px;line-height:1.9}

/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line-2)}
th{font-size:11.5px;color:var(--sub);font-weight:600;letter-spacing:.1em}
.role{font:11.5px/1 ui-monospace,Menlo,monospace;padding:4px 8px;border-radius:4px}
.role.user{background:#f2f4f8;color:#5a6b84}
.role.vip{background:#eaf7ef;color:#0a7a45}
.role.admin{background:#fdf3e0;color:#9a6800}

.center{text-align:center}
.muted{color:var(--sub);font-size:13.5px}

@media(max-width:760px){
  .hero{padding:64px 0 56px}
  .hero h1{font-size:32px}
  .items{grid-template-columns:1fr}
  nav{display:none}
  .shell,.shell-n{padding:0 20px}
  .stitle{white-space:normal}
  .read{display:none}
  .src{cursor:pointer}
}