:root {
    --zelena: #16794c;
    --zelena-tamna: #12633e;
    --crvena: #c0392b;
    --tekst: #1c2321;
    --siva: #6b7671;
    --pozadina: #f6f8f7;
    --kartica: #fff;
    --ivica: #e2e8e5;
    --radijus: 12px;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--tekst);
    background: var(--pozadina);
    margin: 0;
    line-height: 1.55;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .8rem 1.2rem;
    background: var(--zelena);
    color: #fff;
    flex-wrap: wrap;
}
.topbar .brand { font-weight: 700; font-size: 1.15rem; color: #fff; text-decoration: none; }
.topbar nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.topbar nav a { color: #fff; text-decoration: none; opacity: .92; }
.topbar nav a:hover { opacity: 1; text-decoration: underline; }

.wrap { max-width: 820px; margin: 0 auto; padding: 1.5rem 1.2rem 4rem; }

h1 { margin-top: 0; }
a { color: var(--zelena); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }

.kartica {
    background: var(--kartica);
    border: 1px solid var(--ivica);
    border-radius: var(--radijus);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.kartica:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.kartica img, .kartica video { width: 100%; height: 160px; object-fit: cover; background: #eef2f0; display: block; }
.kartica .telo { padding: .8rem 1rem; }
.kartica h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.kartica .meta { color: var(--siva); font-size: .85rem; }

.dugme, button.dugme, a.dugme {
    display: inline-block;
    padding: .7rem 1.4rem;
    font: inherit;
    font-weight: 600;
    background: var(--zelena);
    color: #fff;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.dugme:hover { background: var(--zelena-tamna); }
.dugme.velika { padding: 1rem 2rem; font-size: 1.2rem; }
.dugme.sekundarna { background: #eef2f0; color: var(--tekst); }
.dugme.crvena { background: var(--crvena); }

label { display: block; margin: 1rem 0 .25rem; font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=number], textarea, select {
    width: 100%;
    padding: .6rem;
    font: inherit;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
}
textarea { min-height: 110px; resize: vertical; }
.red { display: flex; gap: 1rem; flex-wrap: wrap; }
.red > div { flex: 1; min-width: 120px; }

.poruka { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; }
.poruka.ok { background: #e7f6ee; border: 1px solid #a6dcbf; color: var(--zelena); }
.poruka.greska { background: #fdecea; border: 1px solid #f5c2c0; color: #8a1c17; }
.poruka ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.hp { position: absolute; left: -5000px; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--ivica); }
.akcije { display: flex; gap: .5rem; flex-wrap: wrap; }
.mala { font-size: .85rem; padding: .35rem .8rem; }

/* Sesija / tajmer */
.tajmer-ekran {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 1.5rem;
    transition: background .3s;
}
.tajmer-ekran.rad { background: var(--zelena); }
.tajmer-ekran.pauza { background: #2c6fb0; }
.tajmer-ekran.kraj { background: #333; }
.tajmer-broj { font-size: clamp(4rem, 22vw, 11rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.tajmer-faza { font-size: 1.4rem; letter-spacing: .15em; text-transform: uppercase; opacity: .9; }
.tajmer-vezba { font-size: 2rem; font-weight: 700; margin: .3rem 0; }
.tajmer-info { opacity: .9; margin-bottom: 1rem; }
.tajmer-kontrole { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
.tajmer-kontrole button { min-width: 110px; }
.tajmer-media { max-width: 320px; max-height: 30vh; border-radius: 12px; margin: 1rem 0; }