/* ====== ÜLDINE STIIL ====== */
:root{
    --bg1:#eef2ff;
    --bg2:#fdf2f8;
    --card:#ffffff;
    --text:#1f2937;
    --muted:#6b7280;

    --primary:#2563eb;
    --primary2:#7c3aed;
    --accent:#22c55e;
    --danger:#ef4444;

    --shadow: 0 12px 30px rgba(0,0,0,0.10);
    --shadow2: 0 6px 16px rgba(37,99,235,0.18);
    --radius:14px;
}

*{ box-sizing:border-box; }

body{
    font-family: "Segoe UI", Arial, sans-serif;
    margin:0;
    padding:40px 16px;
    color: var(--text);

    /* värviline gradient taust */
    background: radial-gradient(1200px 600px at 10% 10%, var(--bg1), transparent 60%),
    radial-gradient(1000px 600px at 90% 20%, var(--bg2), transparent 55%),
    linear-gradient(180deg, #f7fafc, #eef2ff);
}

/* ====== PEALKIRI ====== */
h1{
    text-align:center;
    margin: 0 0 22px 0;
    font-weight: 800;
    letter-spacing: .2px;

    /* gradient tekst */
    background: linear-gradient(90deg, var(--primary), var(--primary2), #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* “vilkumise” asemel õrn pulse + glow */
    animation: titlePulse 1.6s ease-in-out infinite;
}

/* ÕRN PULSE (ei ole agressiivne vilkumine) */
@keyframes titlePulse{
    0%,100%{
        filter: drop-shadow(0 0 0 rgba(37,99,235,0));
        transform: translateY(0);
    }
    50%{
        filter: drop-shadow(0 10px 18px rgba(124,58,237,0.25));
        transform: translateY(-1px);
    }
}

/* Kui sa tahad PÄRISELT vilkuvat (soovi korral), lisa h1-le class="blink"
   ja see efekt rakendub (natuke tugevam):
*/
h1.blink{
    animation: blinkGlow 0.8s steps(2, end) infinite;
}
@keyframes blinkGlow{
    0%{ opacity: 1; filter: drop-shadow(0 0 0 rgba(236,72,153,0)); }
    50%{ opacity: .55; filter: drop-shadow(0 0 18px rgba(236,72,153,.55)); }
    100%{ opacity: 1; filter: drop-shadow(0 0 0 rgba(236,72,153,0)); }
}
/* ===== ÕPILASE PILDID (ÜHESUURUSED) ===== */
td.pilt img{
    width: 100px;
    height: 120px;
    object-fit: cover;        /* lõikab keskelt, ei veni */
    object-position: center;  /* hoiab näo/objekti keskel */

    border-radius: 12px;
    border: 2px solid rgba(37,99,235,0.25);

    box-shadow: 0 6px 14px rgba(0,0,0,0.15);
    background: #f3f4f6;
}

/* ====== OTSINGU VORM ====== */
form{
    width: min(900px, 100%);
    margin: 0 auto 22px auto;
    padding: 14px 14px;
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(37,99,235,0.12);
    border-radius: var(--radius);
    box-shadow: var(--shadow2);
    text-align:center;
}

label{
    font-weight: 700;
    margin-right: 10px;
    color: #111827;
}

input[type="text"]{
    padding: 10px 12px;
    width: min(360px, 100%);
    border: 1px solid rgba(17,24,39,0.15);
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
    background: white;
}

input[type="text"]:focus{
    border-color: rgba(37,99,235,0.55);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.14);
}

/* ====== NUPP ====== */
input[type="submit"]{
    padding: 10px 16px;
    margin-left: 10px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: white;

    background: linear-gradient(90deg, var(--primary), var(--primary2));
    box-shadow: 0 10px 18px rgba(37,99,235,0.20);
    transition: transform .15s ease, filter .15s ease;
}

input[type="submit"]:hover{
    transform: translateY(-1px);
    filter: brightness(1.05);
}

input[type="submit"]:active{
    transform: translateY(0px) scale(0.99);
}

/* ====== TABEL ====== */
table{
    width: min(900px, 100%);
    margin: 0 auto 26px auto;
    border-collapse: collapse;
    background: var(--card);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    overflow: hidden;

    /* pisike “float” animatsioon */
    animation: cardFloat 6s ease-in-out infinite;
}

@keyframes cardFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-3px); }
}

th{
    padding: 14px 14px;
    text-align: left;
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: white;

    background: linear-gradient(90deg, #111827, #1e3a8a, #7c3aed);
}

td{
    padding: 12px 14px;
    border-bottom: 1px solid rgba(17,24,39,0.06);
    font-size: 14px;
}

/* Zebra + värviline “accent” vasakul */
tr:nth-child(even) td{
    background: linear-gradient(90deg, rgba(37,99,235,0.06), transparent 20%);
}

tr:hover td{
    background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(236,72,153,0.06));
}

/* Esimese veeru “badge” efekt (nimi) */
td:first-child{
    font-weight: 700;
}

/* ====== VÄIKE TEKST ====== */
p{
    text-align:center;
    font-weight: 800;
    color: var(--muted);
}