:root{--red:#E71C23;--blue:#0054CE;--bk:#161616;--g1:#1f1f1f;--g2:#2a2a2a;--tx:#fff;--mu:#9a9a9a}
*{box-sizing:border-box;margin:0}html,body{height:100%}
body{background:var(--bk);color:var(--tx);font-family:Outfit,system-ui,sans-serif;display:flex;flex-direction:column;padding:1.4vw 1.8vw;gap:1vw;overflow:hidden;font-size:clamp(14px,1vw,22px)}
header{display:flex;align-items:center;justify-content:space-between;gap:2vw;border-bottom:3px solid var(--red);padding-bottom:1vw}
.brand{display:flex;align-items:center;gap:1.2vw}.brand img{height:3.2vw;min-height:36px}.sep{width:2px;height:3vw;background:var(--red)}
h1{font-size:2.1em;font-weight:700;letter-spacing:.5px}.brand small{color:var(--mu);letter-spacing:4px;font-size:.75em}
.kpis{display:flex;gap:.8vw}.kpi{background:var(--g1);border-left:6px solid;border-radius:10px;padding:.5vw 1.1vw;min-width:8vw}.kpi b{font-size:2.4em;display:block;line-height:1}.kpi span{color:var(--mu);font-size:.9em}
.right{text-align:right}.clock{font-size:3em;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.date{text-transform:capitalize;color:#ddd}.upd{color:var(--mu);font-size:.8em}
nav{display:flex;align-items:center;justify-content:space-between;gap:1vw}
button{font:inherit;background:var(--g2);color:#fff;border:0;border-radius:8px;padding:.35em .9em;cursor:pointer}
.tabs button.on{background:var(--blue)}.navc{display:flex;align-items:center;gap:.6vw}#period{font-size:1.4em;font-weight:600;min-width:16vw;text-align:center;text-transform:capitalize}#today{background:var(--red)}
.legend{display:flex;gap:1vw;font-size:.9em}.legend i{display:inline-block;width:.9em;height:.9em;border-radius:50%;margin-right:.35em;vertical-align:-1px}
main{flex:1;min-height:0;display:grid;gap:.6vw}
.week{grid-template-columns:repeat(7,1fr)}.month{grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr}
.day{background:var(--g1);border-radius:12px;padding:.6vw;display:flex;flex-direction:column;gap:.45vw;overflow:hidden;min-height:0}
.day.off{opacity:.35}.day.today{outline:4px solid var(--red);background:#241617}
.dh{display:flex;justify-content:space-between;align-items:baseline;text-transform:capitalize;color:#ccc}.dh b{font-size:1.9em;color:#fff}.month .dh b{font-size:1.1em}
.day.today .dh::after{content:"HOJE";background:var(--red);color:#fff;font-weight:700;font-size:.7em;padding:2px 8px;border-radius:6px}
.chip{border-radius:8px;padding:.45vw .6vw;border-left:6px solid;background:var(--g2);line-height:1.2}
.chip .n{font-weight:700;font-size:1.05em}.chip .c{font-size:.95em}.chip .l{color:#bbb;font-size:.82em}.chip .f{font-size:.7em;font-weight:700;text-transform:uppercase;letter-spacing:1px}
.month .chip{padding:2px 6px;font-size:.75em}.month .chip .l,.month .chip .f{display:none}
.more{color:var(--mu);font-size:.8em}.empty{color:#555;margin:auto;font-size:.9em}
#extra{display:flex;gap:1vw;max-height:22vh;overflow:hidden}
.box{background:var(--g1);border-radius:12px;padding:.8vw 1vw;flex:1;overflow:hidden}.box h3{color:var(--mu);font-weight:500;font-size:.85em;letter-spacing:2px;text-transform:uppercase;margin-bottom:.4vw}
table{width:100%;border-collapse:collapse;font-size:.9em}td{padding:.2vw .4vw;border-bottom:1px solid #2c2c2c}
.pill{display:inline-block;padding:1px 10px;border-radius:99px;font-size:.8em;font-weight:600}
.next b{font-size:1.5em}