* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f1f5f9; color: #172033; font: 15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; }
.card { width: min(100%, 600px); background: #fff; padding: 32px; border-radius: 14px; box-shadow: 0 12px 36px #18243b18; }
h1 { margin: 0; font-size: 24px; } h2 { font-size: 17px; margin: 0 0 14px; } .hint { color: #64748b; margin: 6px 0 24px; }
form { display: grid; gap: 16px; } label { display: grid; gap: 6px; font-weight: 600; } input { width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; padding: 10px 12px; font: inherit; } input:focus { border-color: #2563eb; outline: 3px solid #dbeafe; }
button { border: 0; border-radius: 7px; padding: 10px 16px; color: #fff; background: #2563eb; font: inherit; font-weight: 600; cursor: pointer; } button:hover { background:#1d4ed8; } button:disabled { background:#94a3b8; cursor:not-allowed; } .secondary { background:#64748b; } .danger { background:#dc2626; } .danger:hover { background:#b91c1c; }
.heading { display:flex; justify-content:space-between; gap:16px; align-items:start; } .heading form { display:block; } .query { grid-template-columns: 1fr auto; align-items:end; } .actions { display:flex; gap:8px; } .message { padding:10px 12px; border-radius:7px; } .error { color:#991b1b; background:#fee2e2; } .success { color:#166534; background:#dcfce7; }
.results { margin-top: 26px; border-top: 1px solid #e2e8f0; padding-top: 22px; } .stat { display:flex; align-items:baseline; gap:7px; padding:10px 0; border-bottom:1px solid #f1f5f9; } .stat span { flex:1; } .stat strong { font-size:22px; } .stat small,.total { color:#64748b; } .total { text-align:right; padding-top:12px; } @media(max-width:520px) { .card { padding:22px; } .query { grid-template-columns:1fr; } .heading { display:block; } .heading form { margin-top:12px; } }