:root { color-scheme: light; --ink:#13261f; --muted:#65736d; --green:#0b7a53; --lime:#c8f36b; --paper:#f4f7f1; --line:#d9e1da; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 8% 12%,#dff4d8 0,transparent 29%),linear-gradient(135deg,#f8faf5,#edf2ec); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.24; background-image:linear-gradient(rgba(15,80,58,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(15,80,58,.08) 1px,transparent 1px); background-size:38px 38px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.shell { position:relative; width:min(1120px,calc(100% - 40px)); min-height:calc(100vh - 72px); margin:auto; display:grid; grid-template-columns:1.05fr .95fr; gap:80px; align-items:center; padding:64px 0; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.06em; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--green); border-radius:9px; font-family:Georgia,serif; }
.eyebrow { margin:76px 0 16px; color:var(--green); font-size:13px; font-weight:800; letter-spacing:.22em; }
h1 { margin:0; font-family:Georgia,"Songti SC",serif; font-size:clamp(46px,6vw,76px); line-height:1.08; font-weight:500; letter-spacing:-.04em; }
h1 span { color:var(--green); }
.lead { max-width:570px; margin:28px 0; color:var(--muted); font-size:17px; line-height:1.9; }
.privacy-note { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; max-width:560px; padding:18px 20px; border-left:3px solid var(--green); background:rgba(255,255,255,.55); }
.privacy-note strong { color:var(--green); }
.privacy-note span { color:var(--muted); line-height:1.55; }
.lookup-card { padding:38px; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.9); border-radius:24px; box-shadow:0 28px 80px rgba(28,61,46,.13); backdrop-filter:blur(12px); }
.card-heading { display:flex; gap:16px; align-items:center; margin-bottom:30px; }
.step { display:grid; place-items:center; width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--lime); color:#315015; font-family:Georgia,serif; font-size:19px; }
h2 { margin:0 0 5px; font-size:22px; }
.card-heading p { margin:0; color:var(--muted); font-size:13px; }
label { display:block; margin:20px 0 9px; font-size:14px; font-weight:700; }
input { width:100%; padding:16px 17px; border:1px solid var(--line); border-radius:12px; outline:none; background:#fbfcfa; color:var(--ink); font:inherit; transition:.2s; }
input:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(11,122,83,.1); }
.hint { margin:7px 2px 0; color:#88938e; font-size:12px; }
.trap { position:absolute; left:-9999px; }
button[type="submit"] { width:100%; margin-top:28px; padding:16px 20px; display:flex; justify-content:space-between; border:0; border-radius:12px; background:var(--ink); color:white; font:700 15px inherit; cursor:pointer; transition:.2s; }
button[type="submit"]:hover { transform:translateY(-1px); background:var(--green); }
button:disabled { opacity:.55; cursor:wait; }
.status { min-height:22px; margin-top:18px; text-align:center; color:var(--muted); font-size:14px; }
.status.success { color:var(--green); font-weight:700; }
.status.error { color:#ad3d34; }
.result-item { margin-top:12px; padding:20px; border:1px solid #cde1d3; border-radius:14px; background:#f3faf5; }
.result-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:12px; }
.result-item p { margin:15px 0 8px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.1em; }
.code-row { display:flex; align-items:center; gap:10px; }
code { flex:1; overflow-wrap:anywhere; font:700 14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; }
.copy { padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:white; color:var(--green); cursor:pointer; }
.support { margin:24px 0 0; padding-top:20px; border-top:1px solid var(--line); color:#84908a; font-size:12px; line-height:1.6; text-align:center; }
footer { position:relative; padding:0 20px 28px; color:#87928d; text-align:center; font-size:12px; }
@media (max-width:860px) { .shell { grid-template-columns:1fr; gap:40px; padding:34px 0; } .eyebrow { margin-top:48px; } .intro { text-align:center; } .lead,.privacy-note { margin-left:auto; margin-right:auto; text-align:left; } }
@media (max-width:520px) { .shell { width:min(100% - 24px,1120px); } .lookup-card { padding:25px 20px; border-radius:18px; } h1 { font-size:43px; } .privacy-note { grid-template-columns:1fr; } }