:root { --bg:#111418; --kartica:#1b2027; --tekst:#e9edf2; --tiho:#9aa4b1; --akcenat:#e5484d; --plavo:#4c8dff; --ivica:#2a313b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--tekst); font:16px/1.45 system-ui, -apple-system, sans-serif; }
main { max-width:560px; margin:0 auto; padding:16px; }
header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
h1 { font-size:20px; margin:4px 0 12px; }
h2 { font-size:16px; margin:0 0 8px; }
a { color:var(--plavo); }
.tiho { color:var(--tiho); font-size:14px; }
.kartica { background:var(--kartica); border:1px solid var(--ivica); border-radius:12px; padding:14px; margin-bottom:12px; }
.centar { text-align:center; }
label { display:block; margin-bottom:10px; font-size:14px; color:var(--tiho); }
input, select { display:block; width:100%; margin-top:4px; padding:10px; border-radius:8px; border:1px solid var(--ivica); background:var(--bg); color:var(--tekst); font-size:16px; }
button { padding:10px 14px; border-radius:8px; border:0; background:var(--plavo); color:#fff; font-size:16px; cursor:pointer; }
button:disabled { opacity:.5; cursor:default; }
button.veliko { width:140px; height:140px; border-radius:50%; font-size:20px; background:var(--akcenat); }
button.veliko.radi { background:#333a44; outline:4px solid var(--akcenat); }
button.sitno { padding:6px 10px; font-size:14px; background:#333a44; }
.vreme { font-size:32px; font-variant-numeric:tabular-nums; margin-top:10px; }
.nivo { height:8px; background:var(--bg); border-radius:4px; overflow:hidden; }
#nivo { height:100%; width:0; background:#3ecf8e; transition:width .08s; }
ul { list-style:none; padding:0; margin:0; }
li { border-top:1px solid var(--ivica); padding:10px 0; }
li:first-child { border-top:0; }
.red { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.red input[type=checkbox] { width:22px; height:22px; margin:0; display:inline-block; }
.red .naslov { flex:1; min-width:150px; }
audio { width:100%; margin-top:6px; }
.oznaka { font-size:12px; padding:2px 6px; border-radius:4px; background:#333a44; color:var(--tiho); }
.oznaka.poslato { background:#1e4d3a; color:#8fe3bd; }
.oznaka.greska { background:#5a1f22; color:#ffb4b6; }