:root {
  --bg:#faf6ec; --surface:#fffdf7; --card:#fffdf7; --fg:#15343b; --muted:#6f7a79; --line:#ddd6c3;
  --bd2:#b3a583; --input:#faf5e8; --text2:#3d352b;
  --brand:#c8402a; --on-brand:#fff9ee; --accent:#b8351f; --blue:#2f5d8a; --err:#b3261e; --ok:#3f7a3a; --warn:#9a6a00;
  --hot-bg:#15343b; --hot-fg:#faf6ec; --hot-muted:#b7c4c2; --violet:var(--hot-bg);
  --display:'Fraunces Variable',Georgia,serif;
  --mono:'Hanken Grotesk Variable',system-ui,sans-serif;
  --body:'Hanken Grotesk Variable',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--fg); font:400 15px/1.5 var(--body); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
::selection { background:var(--brand); color:var(--on-brand); }

.mono, .kicker, th, .badge, .btn, label, .tab { font-family:var(--mono); letter-spacing:.16em; font-weight:600; text-transform:uppercase; }
.kicker { color:var(--accent); font-size:.72rem; display:block; margin-bottom:12px; }
.muted { color:var(--muted); }
.small { font-size:.8rem; }

/* zgornja vrstica */
.bar { border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:5; }
.bar-in { max-width:1240px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:28px; min-height:64px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font:900 1.7rem/1 var(--display);   color:var(--fg); text-decoration:none; }
.brand::before { content:''; width:13px; height:13px; border-radius:50%; background:var(--brand); }
.brand small { font:400 .65rem var(--mono); letter-spacing:.1em; color:var(--accent); border:1px solid var(--accent); padding:3px 6px; margin-left:4px; }
.tabs { display:flex; gap:4px; flex:1; }
.tab { color:var(--muted); text-decoration:none; font-size:.72rem; padding:8px 12px; border-bottom:2px solid transparent; }
.tab:hover { color:var(--fg); }
.tab.active { color:var(--accent); border-color:var(--brand); }
.who { font-size:.72rem; color:var(--muted); display:flex; align-items:center; gap:12px; }

.main { max-width:1240px; margin:0 auto; padding:44px 20px 80px; }
.title { font:900 clamp(2.8rem,7vw,5.5rem)/1.05 var(--display);   margin:0 0 32px; }
h3.sub { font:900 1.7rem/1 var(--display);   margin:40px 0 14px; }

/* tiles */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.tile { border:1px solid var(--line); margin:-1px 0 0 -1px; padding:22px 22px 18px; background:var(--surface); }
.tile .l { font:400 .68rem var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); min-height:2.2em; }
.tile .n { font:900 4.2rem/1 var(--display);  margin-top:14px; }
.tile.hot { background:var(--brand); border-color:var(--brand); color:var(--on-brand); }
.tile.hot .l { color:var(--on-brand); }
.tile.violet { background:var(--hot-bg); border-color:var(--hot-bg); color:var(--hot-fg); }
.tile.violet .l { color:var(--hot-muted); }
.tile.bad .n { color:var(--err); }

/* tabele */
.panel { border:1px solid var(--line); background:var(--surface); overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th { text-align:left; font-size:.66rem; font-weight:400; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--bd2); white-space:nowrap; }
td { padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:var(--bg); }
td.nw { white-space:nowrap; }

.badge { display:inline-block; font-size:.62rem; padding:3px 8px; border:1px solid currentColor; }
.badge.ok { color:var(--ok); }
.badge.pro { background:var(--hot-bg); border-color:var(--hot-bg); color:var(--hot-fg); }
.badge.bad { color:var(--err); }
.badge.warn { color:var(--warn); }
.badge.mute { color:var(--muted); }

/* gumbi in forme */
.btn { display:inline-block; border:1.5px solid var(--brand); background:var(--brand); color:var(--on-brand); font-size:.7rem; font-weight:700; padding:10px 16px; cursor:pointer; text-decoration:none; border-radius:0; transition:transform .12s; }
.btn:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); transform:translate(-2px,-2px); box-shadow:3px 3px 0 var(--brand); }
.btn.ghost { background:transparent; color:var(--fg); border-color:var(--bd2); }
.btn.ghost:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn.danger { background:transparent; color:var(--err); border-color:var(--err); }
.btn.danger:hover { background:var(--err); color:#fff; border-color:var(--err); }
.btn.sm { padding:6px 10px; font-size:.62rem; }
.btn.full { width:100%; text-align:center; }
.inline { display:inline-block; margin:0 4px 4px 0; }

label { display:block; font-size:.68rem; color:var(--muted); margin:16px 0 6px; }
input[type=text], input[type=email], input[type=password] { width:100%; padding:12px 13px; border:1px solid var(--bd2); background:var(--input); color:var(--fg); font:400 1rem var(--body); border-radius:0; }
input:focus { outline:2px solid var(--brand); border-color:var(--brand); }
.toolbar { display:flex; gap:10px; margin-bottom:18px; }
.toolbar input { flex:1; }
.alert { border-left:4px solid var(--err); background:color-mix(in srgb,var(--err) 12%,transparent); color:var(--err); padding:11px 14px; font:400 .82rem var(--mono); margin:16px 0; }

/* prijava */
.login { min-height:100vh; display:grid; grid-template-columns:1.2fr 1fr; }
.login-art { background:var(--brand); color:var(--on-brand); padding:48px; display:flex; flex-direction:column; justify-content:space-between; }
.login-art .big { font:500 clamp(5rem,15vw,13rem)/.9 var(--display);   }
.login-art .mono { font-size:.72rem; }
.login-form { padding:48px; display:flex; flex-direction:column; justify-content:center; max-width:460px; width:100%; margin:0 auto; }
.login-form h1 { font:500 2.6rem/1.05 var(--display);   margin:0 0 8px; }
@media (max-width:820px) { .login { grid-template-columns:1fr; } .login-art { padding:28px; min-height:220px; } .login-form { padding:28px; } }
@media (max-width:640px) { th, td { padding:10px 12px; } .tile .n { font-size:3.2rem; } }

/* promo forme */
select, input[type=date] { width:100%; padding:12px 13px; border:1px solid var(--bd2); background:var(--input); color:var(--fg); font:400 1rem var(--body); border-radius:0; color-scheme:light; }
select:focus, input[type=date]:focus { outline:2px solid var(--brand); border-color:var(--brand); }
.pform { padding:8px 22px 22px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 18px; margin-bottom:20px; }
.chk { display:flex; align-items:flex-end; padding-bottom:8px; }
.inline-l { display:flex; gap:8px; align-items:center; margin:0; color:var(--fg); }
.inline-l input { accent-color:var(--brand); width:16px; height:16px; }
.alert.ok { border-color:var(--ok); background:color-mix(in srgb,var(--ok) 12%,transparent); color:var(--ok); }
.small { font-size:.75rem; }