/* Gard Zagreb — zajednički tokeni i komponente
   Svijet: tatami, ring, pojasevi. Plavi kut = primarna akcija, crveni kut = upozorenje/brisanje.
   Signatura: pojas (belt) ispod naziva kluba = povjerenje u podatak (bijeli → plavi → crni). */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --canvas:#F2F4F6; --card:#FFFFFF; --ink:#14181E; --ink-2:#5B6470; --ink-3:#8B93A0; --line:#DCE1E8; --line-2:#EEF1F5;
  --blue:#1F4FD8; --blue-ink:#163CA6; --blue-soft:#E6ECFB; --red:#D93025; --red-soft:#FBE7E5; --yellow:#F5C518;
  --belt-white:#FFFFFF; --belt-blue:#1F4FD8; --belt-black:#14181E;
  --display:"Bricolage Grotesque", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
  --body:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r:10px; --r-sm:6px; --shadow:0 1px 2px rgba(20,24,30,.05), 0 8px 24px -12px rgba(20,24,30,.18);
  --focus:0 0 0 3px rgba(31,79,216,.35);
}
* { box-sizing:border-box }
html { color-scheme:light }
body { margin:0; font:15px/1.5 var(--body); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums }
a { color:var(--blue-ink) }
:focus-visible { outline:none; box-shadow:var(--focus) }
h1,h2,h3 { font-family:var(--display); letter-spacing:-.015em; line-height:1.1; margin:0 }
h1 { font-size:1.15rem; font-weight:800 } h2 { font-size:1.6rem; font-weight:800; margin:1.8rem 0 .7rem } h3 { font-size:1.05rem; font-weight:700; margin:1rem 0 .4rem }
p { margin:.4rem 0 }

/* ---- wordmark: dva kuta ringa (plavi/crveni) + naziv ---- */
.brand { display:inline-flex; align-items:center; gap:.55rem; color:inherit; text-decoration:none; font-family:var(--display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em }
.brand .mark { position:relative; width:18px; height:18px; flex:none }
.brand .mark::before, .brand .mark::after { content:""; position:absolute; width:8px; height:8px; border-radius:2px }
.brand .mark::before { left:0; top:0; background:var(--blue) } .brand .mark::after { right:0; bottom:0; background:var(--red) }
.brand b { color:var(--blue); font-weight:800 }
.brand small { font-family:var(--body); font-weight:500; font-size:.78rem; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; margin-left:.35rem }

/* ---- header ---- */
header.top { display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; padding:.7rem 1.1rem; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20 }
header.top .sp { margin-left:auto; color:var(--ink-2); font-size:.88rem; display:inline-flex; gap:.6rem; align-items:center }
main.wrap { max-width:920px; margin:0 auto; padding:1.2rem 1.1rem 4rem; width:100% }
body.page { min-height:100dvh; display:flex; flex-direction:column } body.page main { flex:1 }
footer.site { border-top:1px solid var(--line); background:var(--card); color:var(--ink-2); font-size:.88rem }
footer.site .wrap { max-width:920px; margin:0 auto; padding:1.4rem 1.1rem; width:100% }
footer.site nav { display:flex; gap:1.2rem; flex-wrap:wrap; margin-bottom:.5rem } footer.site a { color:var(--ink) }
.lead { font-size:1.05rem; color:var(--ink-2); max-width:56ch }

/* ---- pojas: povjerenje u podatak ---- */
.belt { display:block; height:5px; width:64px; border-radius:2px; margin:.35rem 0 .45rem; background:var(--belt-white); box-shadow:inset 0 0 0 1px var(--line); transition:width .25s ease }
.belt.blue { background:var(--belt-blue); box-shadow:none } .belt.black { background:var(--belt-black); box-shadow:none }
.belt-key { display:inline-flex; gap:1rem; font-size:.8rem; color:var(--ink-2) } .belt-key i { display:inline-block; width:22px; height:5px; border-radius:2px; vertical-align:middle; margin-right:.35rem; background:var(--belt-white); box-shadow:inset 0 0 0 1px var(--line) }
.belt-key i.blue { background:var(--belt-blue); box-shadow:none } .belt-key i.black { background:var(--belt-black); box-shadow:none }

/* ---- kartice, forme ---- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem; margin:.9rem 0; box-shadow:var(--shadow) }
.card.flat { box-shadow:none }
label { display:block; font-size:.8rem; font-weight:500; color:var(--ink-2); margin:.7rem 0 .25rem; letter-spacing:.01em }
input, select, textarea, button { font:inherit; color:inherit }
input[type=text], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=time], input[type=search], select, textarea {
  width:100%; padding:.5rem .65rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:border-color .15s }
input:hover, select:hover, textarea:hover { border-color:#c3cad4 }
input:focus, select:focus, textarea:focus { border-color:var(--blue) }
textarea { min-height:5.5rem; resize:vertical }
select { appearance:none; -webkit-appearance:none; padding-right:1.9rem; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6470' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right .65rem center }
.row { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:.2rem .8rem }
button { padding:.5rem .95rem; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:pointer; font-weight:500; transition:background .15s, border-color .15s, transform .05s }
button:hover { background:#f7f8fa; border-color:#c3cad4 } button:active { transform:translateY(1px) }
button.pri { background:var(--blue); color:#fff; border-color:var(--blue) } button.pri:hover { background:var(--blue-ink); border-color:var(--blue-ink) }
button.ok { background:var(--ink); color:#fff; border-color:var(--ink) } button.ok:hover { background:#000 }
button.danger { color:var(--red) } button.danger:hover { background:var(--red-soft); border-color:#f0b9b4 }
button.sm { padding:.3rem .6rem; font-size:.85rem } button.ghost { border-color:transparent; background:transparent } button.ghost:hover { background:var(--line-2) }
button:disabled { opacity:.5; cursor:default; transform:none }
.muted { color:var(--ink-2) } .small { font-size:.85rem } .err { color:var(--red) } .okmsg { color:var(--blue-ink) }
.toolbar { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.9rem 0 .2rem }

/* ---- čipovi (sportovi) ---- */
.chips { display:flex; flex-wrap:wrap; gap:.4rem } .chips label { display:inline-flex; gap:.35rem; align-items:center; border:1px solid var(--line); border-radius:999px; padding:.25rem .7rem; margin:0; color:var(--ink); font-size:.88rem; font-weight:500; cursor:pointer; background:#fff; transition:all .15s }
.chips label:has(input:checked) { background:var(--blue-soft); border-color:var(--blue); color:var(--blue-ink) }
.chips input { margin:0; accent-color:var(--blue) }
.tag { display:inline-block; font-size:.74rem; font-weight:500; padding:.1rem .5rem; border-radius:999px; background:var(--line-2); color:var(--ink-2); margin:.15rem .25rem 0 0; white-space:nowrap }
.tag.blue { background:var(--blue-soft); color:var(--blue-ink) } .tag.red { background:var(--red-soft); color:var(--red) } .tag.ink { background:var(--ink); color:#fff } .tag.dash { background:transparent; border:1px dashed var(--line); }
.badge { display:inline-block; font-size:.74rem; font-weight:500; padding:.08rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:#fff }
.badge.ok { border-color:var(--blue); color:var(--blue-ink); background:var(--blue-soft) }

/* ---- tablice, tabovi ---- */
table { width:100%; border-collapse:collapse; font-size:.92rem } th, td { text-align:left; padding:.5rem .55rem; border-bottom:1px solid var(--line-2); vertical-align:top } th { color:var(--ink-3); font-weight:500; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em }
tr:last-child td { border-bottom:0 }
nav.tabs { display:flex; gap:.1rem; border-bottom:1px solid var(--line); margin:1.2rem 0 1rem; overflow-x:auto }
nav.tabs button { border:0; border-bottom:2px solid transparent; border-radius:0; background:none; padding:.55rem .85rem; color:var(--ink-2); font-weight:500; white-space:nowrap; margin-bottom:-1px }
nav.tabs button:hover { color:var(--ink); background:none } nav.tabs button.on { border-bottom-color:var(--blue); color:var(--ink); font-weight:600 }
.termin { display:grid; grid-template-columns:1.3fr 1fr 1fr auto; gap:.4rem; align-items:center; margin:.3rem 0 }
pre.mail { white-space:pre-wrap; font:.84rem/1.5 "IBM Plex Mono", ui-monospace, Menlo, monospace; background:var(--canvas); border:1px solid var(--line-2); padding:.8rem; border-radius:var(--r-sm); max-height:20rem; overflow:auto }
details summary { cursor:pointer; color:var(--ink-2) }
.empty { color:var(--ink-2); padding:1.2rem; text-align:center; border:1px dashed var(--line); border-radius:var(--r) }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; animation:none !important } }