:root { color-scheme: light; --ink:#16213a; --muted:#64748b; --red:#ef3340; --blue:#2864dc; --paper:#f4f7fb; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; }
.hero { min-height:250px; display:flex; align-items:center; justify-content:center; gap:36px; padding:48px 24px; color:white; background:radial-gradient(circle at 20% 20%,#4d83ee,transparent 32%),linear-gradient(135deg,#102654,#183e82 60%,#102654); }
.hero h1 { margin:2px 0 8px; font-size:clamp(36px,6vw,66px); letter-spacing:-.04em; }
.eyebrow { margin:0; color:#f8d448; font-weight:900; letter-spacing:.24em; }
.subtitle { margin:0; opacity:.75; }
.hero__ball { width:120px; height:120px; flex:0 0 auto; border:9px solid white; border-radius:50%; background:linear-gradient(#ef3340 0 43%,#182035 43% 57%,white 57%); box-shadow:0 18px 45px #07142c88; position:relative; transform:rotate(-8deg); }
.hero__ball::after { content:""; position:absolute; width:34px; height:34px; border:8px solid #182035; border-radius:50%; background:white; left:calc(50% - 25px); top:calc(50% - 25px); }
main { max-width:1440px; margin:auto; padding:28px; }
.controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:18px; border:1px solid #dbe3ee; border-radius:18px; background:#ffffffed; box-shadow:0 12px 35px #16336614; backdrop-filter:blur(14px); }
label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.04em; }
input,select,button { height:42px; border-radius:10px; font:inherit; }
input,select { padding:0 12px; color:var(--ink); background:white; border:1px solid #cbd5e1; outline:none; }
input { width:120px; }
select { min-width:190px; cursor:pointer; }
input:focus,select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #2864dc20; }
button { padding:0 17px; border:0; color:white; background:var(--blue); font-weight:800; cursor:pointer; }
button:hover { filter:brightness(.92); transform:translateY(-1px); }
.search { margin-left:auto; }.search input { width:190px; }.dash { margin-bottom:10px; color:#94a3b8; }
.result-line { margin:27px 4px 15px; color:var(--muted); }.result-line strong { color:var(--ink); font-size:22px; }.result-line span { margin-left:8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.card { overflow:hidden; border:1px solid #e1e8f0; border-radius:18px; background:white; box-shadow:0 5px 18px #183e820a; transition:.2s ease; }
.card:hover { transform:translateY(-5px); box-shadow:0 18px 38px #183e8220; border-color:#b8c9df; }
.image-wrap { aspect-ratio:1; display:grid; place-items:center; background:radial-gradient(circle,#fff 28%,#eef3f9 70%); }
.image-wrap img { width:90%; height:90%; object-fit:contain; transition:transform .2s; }.card:hover img { transform:scale(1.06); }
.card-info { position:relative; padding:14px 16px 17px; border-top:1px solid #eef2f7; }
.number { color:var(--blue); font:800 12px/1 monospace; }.card h2 { margin:6px 0 3px; font-size:20px; }.generation { color:var(--muted); font-size:12px; }
.empty { text-align:center; padding:80px 20px; color:var(--muted); }
.back-to-top { position:fixed; right:24px; bottom:24px; z-index:20; width:50px; height:50px; padding:0; border:1px solid #ffffff66; border-radius:50%; color:white; background:var(--blue); box-shadow:0 12px 30px #16336655; font-size:26px; line-height:1; opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; transition:opacity .2s,transform .2s,visibility .2s,filter .2s; }
.back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.back-to-top:focus-visible { outline:3px solid #f8d448; outline-offset:3px; }
@media(max-width:650px){.hero{justify-content:flex-start}.hero__ball{width:74px;height:74px;border-width:6px}.hero__ball::after{width:23px;height:23px;border-width:5px;left:calc(50% - 16.5px);top:calc(50% - 16.5px)}main{padding:14px}.controls{top:6px}.search{margin-left:0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card-info{padding:11px}.card h2{font-size:16px}}
@media(max-width:650px){.back-to-top{right:14px;bottom:14px;width:46px;height:46px}}