:root{
  --fz-bg: #ffffff; --fz-bg-soft: #f6f7f9; --fz-surface: #ffffff; --fz-border: #e6e8ec;
  --fz-text: #0f172a; --fz-text-soft: #6b7280; --fz-primary: #1f6feb; --fz-primary-600: #1b61d2; --fz-primary-700: #164ea8;
  --fz-accent: #10b981; --fz-danger: #ef4444; --fz-radius: 14px;
  --fz-shadow: 0 6px 18px rgba(16,24,40,.08); --fz-shadow-sm: 0 2px 10px rgba(16,24,40,.06);
  --fz-gap: 16px; --fz-font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
}
@media (prefers-color-scheme: dark){ :root{ --fz-bg:#0b1220; --fz-bg-soft:#0f182b; --fz-surface:#121a2d; --fz-border:#1f2a44; --fz-text:#eef2ff; --fz-text-soft:#a3b1c6; --fz-shadow:0 6px 18px rgba(0,0,0,.35); --fz-shadow-sm:0 2px 10px rgba(0,0,0,.25) } }
.dark :root, .dark { --fz-bg:#0b1220; --fz-bg-soft:#0f182b; --fz-surface:#121a2d; --fz-border:#1f2a44; --fz-text:#eef2ff; --fz-text-soft:#a3b1c6; --fz-shadow:0 6px 18px rgba(0,0,0,.35); --fz-shadow-sm:0 2px 10px rgba(0,0,0,.25) }

.nv-fan-zone{ max-width:1100px; margin:0 auto; padding:clamp(14px,2vw,24px); font-family:var(--fz-font); color:var(--fz-text) }
.nv-fan-header{ display:grid; grid-template-columns:1fr auto; gap:var(--fz-gap); align-items:end; margin-bottom:14px }
.nv-fan-header h2{ margin:0; font-size:clamp(1.4rem,2.2vw,2rem); line-height:1.15 }
.nv-fan-header p{ margin:6px 0 0; color:var(--fz-text-soft); max-width:70ch }

.nv-fz-search{ display:flex; gap:8px; align-items:center }
.nv-fz-search input[type=text]{ padding:10px 12px; border:1px solid var(--fz-border); border-radius:10px; outline:none; background:var(--fz-surface) }
.nv-fz-search input[type=text]:focus{ border-color:var(--fz-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--fz-primary) 20%, transparent) }

.nv-fan-form{ background:linear-gradient(180deg,var(--fz-bg-soft),var(--fz-bg)); border:1px solid var(--fz-border); border-radius:var(--fz-radius); padding:clamp(12px,2vw,18px); box-shadow:var(--fz-shadow-sm); position:sticky; top:10px; z-index:1 }
.nv-fan-form label{ display:block; font-weight:600; margin:.35rem 0 .25rem }
.nv-fan-form input[type=text], .nv-fan-form textarea, .nv-fan-form select{ width:100%; padding:12px 14px; background:var(--fz-surface); border:1px solid var(--fz-border); border-radius:10px; outline:none; transition:box-shadow .2s ease, border-color .2s ease, transform .05s ease; color:var(--fz-text) }
.nv-fan-form input[type=text]:focus, .nv-fan-form textarea:focus, .nv-fan-form select:focus{ border-color:var(--fz-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--fz-primary) 20%, transparent) }
.nv-fan-btn{ margin-top:.8rem; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:12px; background:linear-gradient(180deg,var(--fz-primary),var(--fz-primary-600)); color:#fff; font-weight:700; cursor:pointer; box-shadow:var(--fz-shadow-sm); transition:transform .06s ease, box-shadow .2s ease, filter .2s ease }
.nv-fan-btn:hover{ filter:brightness(1.05); box-shadow:var(--fz-shadow) } .nv-fan-btn:active{ transform:translateY(1px) } .nv-fan-btn[disabled]{ opacity:.75; cursor:not-allowed; filter:grayscale(.4) }

.nv-fan-list{ margin-top:18px } .nv-fan-list h3{ margin:0 0 .6rem; font-size:1.1rem; color:var(--fz-text-soft) }
.nv-fan-topics{ display:grid; grid-template-columns:1fr; gap:12px; list-style:none; padding:0; margin:0 }
@media(min-width:720px){ .nv-fan-topics{ grid-template-columns:1fr 1fr } } @media(min-width:1080px){ .nv-fan-topics{ grid-template-columns:1fr 1fr 1fr } }
.nv-fan-topic{ background:var(--fz-surface); border:1px solid var(--fz-border); border-radius:var(--fz-radius); padding:14px; box-shadow:var(--fz-shadow-sm); transition:transform .06s ease, box-shadow .2s ease, border-color .2s ease; display:grid; grid-template-rows:auto auto; gap:8px }
.nv-fan-topic:hover{ transform:translateY(-2px); border-color:color-mix(in srgb, var(--fz-primary) 30%, var(--fz-border)); box-shadow:var(--fz-shadow) }
.nv-fan-title{ text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.2px; line-height:1.25 }
.nv-fan-title::before{ content:""; inline-size:8px; block-size:8px; border-radius:999px; background:var(--fz-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--fz-accent) 20%, transparent) }
.nv-fan-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:.92rem; color:var(--fz-text-soft) }

/* Auto badges */
.nv-fan-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:.2rem 0 0 }
.nv-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:.84rem; border:1px solid var(--fz-border); background:var(--fz-surface) }
.nv-badge::before{ content:""; inline-size:8px; block-size:8px; border-radius:999px; background:#9aa4b2 }
.nv-badge.dinamo::before{ background:#003ea8 } .nv-badge.hajduk::before{ background:#e11d48 } .nv-badge.rijeka::before{ background:#00b4d8 } .nv-badge.osijek::before{ background:#1e90ff }
.nv-badge.istra::before{ background:#2dd36f } .nv-badge.lokomotiva::before{ background:#4169e1 } .nv-badge.gorica::before{ background:#b91c1c } .nv-badge.sibenik::before{ background:#ff6b35 }

/* Sticky block */
.nv-fz-sticky .nv-fan-topics .nv-fz-topic-sticky{ border-color:color-mix(in srgb, var(--fz-primary) 40%, var(--fz-border)); position:relative }
.nv-fz-topic-sticky::after{ content:"ISTAKNUTO"; position:absolute; top:10px; right:10px; font-size:.72rem; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--fz-primary); color:#fff }

/* Pagination */
.nv-fan-pagination{ margin-top:14px; display:flex; gap:8px; flex-wrap:wrap }
.nv-fan-pagination a, .nv-fan-pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--fz-border); background:var(--fz-surface); text-decoration:none; color:var(--fz-text); transition:background .2s ease, border-color .2s ease, transform .06s }
.nv-fan-pagination a:hover{ border-color:var(--fz-primary) } .nv-fan-pagination .current{ background:var(--fz-primary); color:#fff; border-color:var(--fz-primary) }

/* Right sidebar */
.nv-fz-two-col{ display:grid; grid-template-columns:1fr; gap:18px }
@media(min-width:980px){ .nv-fz-two-col{ grid-template-columns:minmax(0,1fr) 300px } }
.nv-fz-main{ min-width:0 } .nv-fz-sidebar{ position:relative }
.nv-fz-widget{ background:var(--fz-surface); border:1px solid var(--fz-border); border-radius:12px; padding:14px; box-shadow:var(--fz-shadow-sm) }
.nv-fz-widget h4{ margin:0 0 .5rem }
.nv-fz-cats{ list-style:none; margin:0; padding:0; display:grid; gap:6px }
.nv-fz-cats a{ display:flex; justify-content:space-between; align-items:center; text-decoration:none; border:1px solid var(--fz-border); border-radius:10px; padding:8px 10px; color:var(--fz-text); background:var(--fz-surface); transition:border-color .2s ease, background .2s ease }
.nv-fz-cats a:hover{ border-color:var(--fz-primary) } .nv-fz-cats a.active{ background:var(--fz-primary); color:#fff; border-color:var(--fz-primary) }
.nv-fz-count{ font-size:.85rem; opacity:.8 }

/* Single */
.fan-topic-container{ max-width:980px; margin:0 auto; padding:clamp(14px,2vw,22px) }
.fan-topic-title{ margin:0 0 .25rem; font-size:clamp(1.6rem,2.4vw,2.1rem) }
.fan-topic-meta{ color:var(--fz-text-soft); margin-bottom:1rem }
.fan-topic-content{ background:var(--fz-surface); border:1px solid var(--fz-border); border-radius:var(--fz-radius); padding:16px; box-shadow:var(--fz-shadow-sm) }
.comment-list .comment{ border-bottom:1px solid var(--fz-border); padding:14px 0 } .comment-author .avatar{ border-radius:999px }
.comment-reply-link{ color: var(--fz-primary); font-weight:600; text-decoration:none } .comment-reply-link:hover{ text-decoration:underline }

/* === FAN ZONA: KARTIČNI PRIKAZ TEMA === */
.nv-fan-topics{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:720px){.nv-fan-topics{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.nv-fan-topics{grid-template-columns:1fr 1fr 1fr}}

.nv-fan-topic{
  position:relative; overflow:hidden;
  background:var(--fz-surface); border:1px solid var(--fz-border);
  border-radius:16px; padding:16px; box-shadow:var(--fz-shadow-sm);
  display:grid; gap:10px; transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.nv-fan-topic:hover{ transform:translateY(-3px); box-shadow:var(--fz-shadow); border-color:color-mix(in srgb,var(--fz-primary) 35%,var(--fz-border)) }

/* gornji red: ikona kluba + naslov */
.nv-fz-card-head{display:flex; align-items:center; gap:10px}
.nv-fz-club-icon{
  inline-size:36px; block-size:36px; border-radius:12px;
  background:linear-gradient(180deg,#f2f6ff,#e9eefc);
  display:grid; place-items:center; font-weight:900;
  color:#0f172a; border:1px solid var(--fz-border);
}
.hnl-theme .nv-fz-club-icon{ background:#0d1520; color:#e8eef7; border-color:#1b2a3c }

.nv-fan-title{font-weight:900; line-height:1.2; text-decoration:none; color:var(--fz-text)}
.nv-fan-title:hover{text-decoration:underline}

/* meta red */
.nv-fan-meta{display:flex; flex-wrap:wrap; gap:10px; color:var(--fz-text-soft); font-size:.92rem}

/* badge za klubove (iz već postojećih badgeova) */
.nv-fan-badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.nv-badge{padding:6px 10px; border-radius:999px; border:1px solid var(--fz-border); background:var(--fz-surface); font-size:.82rem}

/* kutni bedž s komentarima */
.nv-fz-comments-badge{
  position:absolute; top:10px; right:10px;
  padding:6px 10px; border-radius:999px; font-weight:800; font-size:.85rem;
  background:var(--fz-primary); color:#fff; box-shadow:var(--fz-shadow-sm)
}

/* varijante boja prema klubu (ako je prva oznaka) */
.nv-fan-topic .nv-badge.dinamo{border-color:#003ea8}
.nv-fan-topic .nv-badge.hajduk{border-color:#e11d48}
.nv-fan-topic .nv-badge.rijeka{border-color:#00b4d8}
.nv-fan-topic .nv-badge.osijek{border-color:#1e90ff}

/* tamni / HNL */
.hnl-theme .nv-fan-topic{ background:#101a28; border-color:#1b2a3c; color:#e8eef7 }
.hnl-theme .nv-fan-title{ color:#e8eef7 }
.hnl-theme .nv-badge{ background:#0d1520; border-color:#1b2a3c; color:#e8eef7 }