:root { --ink:#172033; --muted:#687387; --line:#dfe5ee; --blue:#1769e0; --blue2:#0c4db5; --bg:#f4f7fb; --white:#fff; --danger:#c63030; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 10% 0%,#e4efff 0,transparent 32%),var(--bg); font:15px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
button,input { font:inherit; }
.topbar { height:68px; padding:0 max(24px,calc((100% - 1040px)/2)); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.9); border-bottom:1px solid var(--line); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,var(--blue),#59a3ff); box-shadow:0 10px 30px #1769e044; font-weight:800; }
.brand-mark.small { width:34px; height:34px; border-radius:10px; box-shadow:none; }
.container { width:min(1040px,calc(100% - 32px)); margin:54px auto; }
.hero { padding:42px; border:1px solid #fff; border-radius:24px; background:rgba(255,255,255,.88); box-shadow:0 20px 60px #37507514; }
.eyebrow { margin:0 0 8px; color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(28px,5vw,44px); line-height:1.2; letter-spacing:-.03em; }
h2 { margin:0; font-size:24px; }
.muted { color:var(--muted); }
.search-box { margin-top:30px; }
label { display:block; margin-bottom:8px; font-weight:700; }
.search-row,.password-row { display:flex; gap:10px; }
input { width:100%; min-width:0; height:50px; padding:0 16px; border:1px solid #cdd6e3; border-radius:12px; outline:none; background:#fff; transition:.2s; }
input:focus { border-color:var(--blue); box-shadow:0 0 0 4px #1769e018; }
button { cursor:pointer; border:0; }
.primary { min-width:112px; padding:0 24px; border-radius:12px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue2)); font-weight:700; box-shadow:0 8px 20px #1769e033; }
.primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.primary:disabled { opacity:.65; cursor:wait; transform:none; }
.wide { width:100%; height:50px; margin-top:18px; }
.ghost,.icon-button { padding:8px 12px; border-radius:9px; color:var(--muted); background:#edf1f6; }
.icon-button { flex:0 0 64px; }
.status { margin:20px 0; padding:16px 20px; border-radius:12px; background:#eaf2ff; color:#1854a6; }
.status.error,.alert { color:var(--danger); background:#fff0f0; }
.alert { margin-top:14px; padding:10px 12px; border-radius:9px; }
.result { margin-top:22px; padding:32px; border-radius:20px; background:var(--white); border:1px solid var(--line); box-shadow:0 18px 50px #37507510; }
.result-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid var(--line); }
.data-grid { display:grid; grid-template-columns:minmax(130px,220px) 1fr; margin:0; }
.data-grid dt,.data-grid dd { margin:0; padding:13px 10px; border-bottom:1px solid #edf0f4; overflow-wrap:anywhere; }
.data-grid dt { color:var(--muted); font-weight:600; }
.data-grid .data-grid { grid-column:1/-1; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.array { display:grid; gap:10px; }.array-item { padding:10px; border:1px solid var(--line); border-radius:10px; }.array-item>b { color:var(--blue); }
.empty { color:#9ba4b1; }
details { margin-top:20px; } summary { cursor:pointer; color:var(--muted); } pre { max-height:420px; overflow:auto; padding:16px; border-radius:10px; background:#101828; color:#d7e1f2; font:13px/1.55 ui-monospace,monospace; }
footer { padding:30px; text-align:center; color:#8a94a4; font-size:13px; }
.login-page { display:grid; place-items:center; padding:24px; }
.login-card { width:min(420px,100%); padding:40px; border:1px solid #fff; border-radius:24px; background:rgba(255,255,255,.94); box-shadow:0 24px 80px #27466a24; }
.login-card .brand-mark { margin-bottom:26px; }.login-card h1 { font-size:30px; }.login-card form { margin-top:26px; }
@media(max-width:640px) { .container{margin:28px auto}.hero{padding:26px 20px}.search-row{flex-direction:column}.search-row .primary{height:48px}.result{padding:22px 16px}.data-grid{grid-template-columns:1fr}.data-grid dt{padding-bottom:0;border:0}.data-grid dd{padding-top:3px}.login-card{padding:30px 22px} }

/* 极简查询界面 */
.minimal-page { min-height:100vh; display:grid; place-items:center; padding:24px; }
.minimal-card { width:min(440px,100%); }
.query-page { display:block; padding-top:clamp(80px,18vh,180px); }
.query-wrap { width:min(820px,100%); margin:auto; }
.single-form { display:flex; gap:12px; width:100%; }
.single-form input { height:54px; border-radius:14px; box-shadow:0 10px 35px #37507512; }
.single-form .primary { height:54px; flex:0 0 108px; }
.form-error { margin-top:12px; text-align:center; color:var(--danger); }
.query-wrap .status { margin:16px 0 0; }
.query-wrap .result { margin-top:20px; padding:0; overflow:hidden; }
.person-card { display:grid; grid-template-columns:104px 1fr; gap:26px; padding:28px; }
.person-card + .person-card { border-top:1px solid var(--line); }
.avatar { width:104px; height:104px; border-radius:18px; object-fit:cover; background:#edf1f6; }
.person-card .data-grid { align-self:start; }
.no-result { padding:28px; text-align:center; color:var(--muted); }
@media(max-width:640px) {
  .minimal-page { padding:16px; }
  .query-page { padding-top:56px; }
  .single-form { gap:8px; }
  .single-form .primary { flex-basis:82px; padding:0 16px; }
  .person-card { display:block; padding:20px 16px; }
  .avatar { display:block; width:82px; height:82px; margin:0 auto 18px; border-radius:50%; }
}