/* Global theme */
:root{
    --primary:#4F46E5;
    --primary-hover:#4338CA;
    --accent:#0EA5E9;
    --surface:#ffffff;
    --card:#ffffff;
    --card-soft:#f8fafc;
    --background:#f5f7fb;
    --text-dark:#0F172A;
    --text-light:#475569;
    --border:#e2e8f0;
    --radius:14px;
    --shadow:0 18px 45px rgba(15,23,42,0.10);
    --header-height:64px;
    --footer-height:72px;
}

/* Reset */
html,body{
    margin:0;
    height:100%;
    font-family:'Inter',sans-serif;
    background:var(--background);
    color:var(--text-dark);
    padding-top:60px;
}

/* Page layout */
body{
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
    width:min(1280px, 100%);
    margin:0 auto;
    padding:32px clamp(20px, 4vw, 48px);
}

input[type="text"] {
    padding:12px 16px;
    font-size:1rem;
    min-width:200px;
    flex:1;
    max-width:420px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:#0d1424;
    color:var(--text-dark);
}

button {
    padding:12px 20px;
    font-size:1rem;
    cursor:pointer;
    border-radius:var(--radius);
    border:none;
    background:var(--primary);
    color:#fff;
    transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    box-shadow:0 10px 30px rgba(79,70,229,0.35);
}

button:hover { background:var(--primary-hover); transform:translateY(-1px); }
button:active { transform:translateY(0); box-shadow:none; }

#results{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:16px;
    max-width:1200px;
    margin:0 auto;
    padding:10px;
}

@media (max-width:600px){

#results{
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
    gap:10px;
    padding:8px;
    max-width:100%;
}

}
img{
    max-width:100%;
    height:auto;
}