/* ============================================================
   InTeh CMS — admin panel
   Modern SaaS look: dark sidebar, light content, Inter.
   ============================================================ */

:root {
    --bg: #f4f5f8;
    --surface: #ffffff;
    --border: #e5e7ee;
    --border-strong: #d3d7e2;
    --text: #171a2c;
    --muted: #667085;

    --accent: #167c2e;
    --accent-hover: #115f23;
    --accent-soft: #e9f6ec;
    --accent-ring: rgba(31, 158, 51, .30);

    --green: #067647;
    --green-bg: #e6f6ee;
    --amber: #92510c;
    --amber-bg: #fdf1dc;
    --red: #b42318;
    --red-bg: #fdecea;
    --gray-badge: #4b5563;
    --gray-badge-bg: #eef1f5;

    --side-bg: #14162a;
    --side-bg-2: #1b1e38;
    --side-text: #a5aac6;
    --side-active: #ffffff;

    --radius: 10px;
    --radius-sm: 8px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
    --shadow-lg: 0 12px 32px rgba(16, 24, 40, .16);
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --sidebar-w: 228px;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
svg { display: block; }

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
    border-radius: 6px;
}

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 13px; }
.nowrap { white-space: nowrap; }
.ta-r { text-align: right; }
.link { font-weight: 600; font-size: 13.5px; white-space: nowrap; }

/* ============================================================
   Auth (login)
   ============================================================ */

body.auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0a1610 0%, #0c1b2a 55%, #12142b 100%);
}
/* aurora — dvije lebdeće svjetlosne mrlje */
body.auth::before,
body.auth::after {
    content: "";
    position: fixed;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}
body.auth::before {
    top: -26vmax;
    left: -18vmax;
    background: radial-gradient(circle at 35% 35%, rgba(31, 158, 51, 0.6), transparent 62%);
    animation: authFloatA 16s ease-in-out infinite alternate;
}
body.auth::after {
    bottom: -28vmax;
    right: -20vmax;
    background: radial-gradient(circle at 60% 60%, rgba(56, 132, 255, 0.45), transparent 62%);
    animation: authFloatB 21s ease-in-out infinite alternate;
}
@keyframes authFloatA {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(9vmax, 7vmax) scale(1.18); }
}
@keyframes authFloatB {
    from { transform: translate(0, 0) scale(1.12); }
    to   { transform: translate(-8vmax, -6vmax) scale(0.94); }
}

.auth-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    position: relative;
    z-index: 1;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 22px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 70px rgba(31, 158, 51, 0.4),
        0 0 140px rgba(56, 132, 255, 0.28);
    padding: 40px 34px 28px;
    text-align: center;
    position: relative;
    animation:
        authIn 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.15) both,
        authGlow 7s ease-in-out 1s infinite alternate;
}
@keyframes authIn {
    from { opacity: 0; transform: translateY(28px) scale(0.95); }
}
/* aura oko kartice polako mijenja boju (zelena <-> plava) */
@keyframes authGlow {
    to {
        box-shadow:
            0 30px 80px rgba(0, 0, 0, 0.5),
            0 0 70px rgba(56, 132, 255, 0.45),
            0 0 140px rgba(31, 158, 51, 0.32);
    }
}

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(135deg, #0f5f24, #1f9e33 55%, #29b98f);
    color: #fff;
    flex: none;
    box-shadow: 0 10px 26px rgba(31, 158, 51, 0.45), inset 0 1px 0 rgba(255, 255, 255, .28);
    animation: authMark 0.6s 0.15s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
@keyframes authMark {
    from { opacity: 0; transform: scale(0.4) rotate(-10deg); }
}
.brand-mark svg { width: 26px; height: 26px; }

.brand-text { font-size: 17px; font-weight: 500; letter-spacing: .01em; }
.brand-text b { font-weight: 800; }
.auth-card .brand-text { color: var(--text); }

.auth-title {
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    background: linear-gradient(95deg, #142b19, #1f9e33 55%, #1c6f95);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.auth-sub { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; }

.pin-form { text-align: left; }
.pin-form .label { text-align: left; }

.pin-boxes {
    display: flex;
    gap: 9px;
    justify-content: center;
    margin: 6px 0 18px;
}

.pin-box {
    width: 50px;
    height: 60px;
    text-align: center;
    font: 700 24px var(--font);
    color: var(--text);
    border: 1.5px solid var(--border-strong);
    border-radius: 14px;
    background: #f5f8f4;
    caret-color: var(--accent);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, transform 0.15s;
    -moz-appearance: textfield;
    animation: pinIn 0.4s both;
}
.pin-box:nth-child(1) { animation-delay: 0.20s; }
.pin-box:nth-child(2) { animation-delay: 0.26s; }
.pin-box:nth-child(3) { animation-delay: 0.32s; }
.pin-box:nth-child(4) { animation-delay: 0.38s; }
.pin-box:nth-child(5) { animation-delay: 0.44s; }
.pin-box:nth-child(6) { animation-delay: 0.50s; }
@keyframes pinIn {
    from { opacity: 0; transform: translateY(12px) scale(0.85); }
}
.pin-box::-webkit-outer-spin-button, .pin-box::-webkit-inner-spin-button { -webkit-appearance: none; }
.pin-box:focus {
    outline: none;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 4px var(--accent-ring), 0 8px 20px rgba(31, 158, 51, 0.18);
    transform: translateY(-2px) scale(1.05);
}
.pin-box.filled {
    border-color: var(--accent);
    background: #edfaee;
    animation: pinPop 0.18s ease;
}
@keyframes pinPop {
    50% { transform: scale(1.12); }
}

.pin-fallback { text-align: center; letter-spacing: .5em; font-weight: 700; font-size: 18px; margin-bottom: 16px; }

.pin-error { color: var(--red); font-size: 13px; margin: -8px 0 12px; text-align: center; }

/* gumb: gradijent + sjaj koji prelazi na hover */
.pin-form .btn-primary {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    background: linear-gradient(120deg, #167c2e, #1f9e33 60%, #23af52);
    box-shadow: 0 12px 28px rgba(31, 158, 51, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
}
.pin-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(31, 158, 51, 0.45);
}
.pin-form .btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.38) 50%, transparent 60%);
    transform: translateX(-130%);
    transition: transform 0.55s ease;
    pointer-events: none;
}
.pin-form .btn-primary:hover::after { transform: translateX(130%); }

.auth-foot { margin-top: 20px; font-size: 13px; }
.auth-foot a { color: var(--muted); }
.auth-foot a:hover { color: var(--accent); }
.auth-credit { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.auth-credit a { color: inherit; font-weight: 700; text-decoration: none; }
.auth-credit-mark { display: inline-block; vertical-align: -2px; margin-right: 3px; border-radius: 4px; }

@media (max-width: 430px) {
    .auth-card { padding: 30px 20px 22px; border-radius: 18px; }
    .pin-boxes { gap: 6px; }
    .pin-box { width: 42px; height: 54px; font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
    body.auth::before, body.auth::after, .auth-card, .auth-card::before,
    .brand-mark, .pin-box { animation: none; }
}
.auth-credit a:hover { color: var(--accent); text-decoration: underline; }

/* ============================================================
   App shell
   ============================================================ */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2));
    color: var(--side-text);
    display: flex;
    flex-direction: column;
    z-index: 60;
    transition: transform .22s ease;
}

.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 9px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
.sidebar .brand-mark svg { width: 22px; height: 22px; }
.sidebar .brand-text { font-size: 15.5px; }

.nav {
    flex: 1;
    padding: 5px 9px;
    overflow-y: auto;
    scrollbar-width: none;                          /* Firefox — bez trake */
    -ms-overflow-style: none;
}
/* skriven scrollbar (Chromium/WebKit) — skrolanje kotačićem/touchom i dalje radi */
.nav::-webkit-scrollbar { display: none; width: 0; }

.nav-group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #62678c;
    padding: 6px 9px 2px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 4px 9px;
    margin: 1px 0;
    border-radius: 8px;
    color: var(--side-text);
    font-weight: 500;
    font-size: 12.5px;
    text-decoration: none;
    transition: background .12s, color .12s;
}
.nav-link svg { width: 16px; height: 16px; flex: none; opacity: .85; }
.nav-link:hover { background: rgba(255, 255, 255, .06); color: #e6e8f2; text-decoration: none; }
.nav-link.is-active {
    background: linear-gradient(90deg, rgba(31, 158, 51, .32), rgba(31, 158, 51, .14));
    color: var(--side-active);
    box-shadow: inset 2.5px 0 0 var(--accent);
}
.nav-link.is-active svg { opacity: 1; }

.sidebar-foot { padding: 5px 9px 7px; border-top: 1px solid rgba(255, 255, 255, .07); }
.side-credit {
    margin: 4px 6px 0;
    font-size: 9.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .38);
}
.side-credit a { color: rgba(255, 255, 255, .6); font-weight: 700; text-decoration: none; }
.side-credit a:hover { color: #fff; text-decoration: underline; }

.side-web {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border-radius: 8px;
    color: var(--side-text);
    font-size: 12.5px;
    text-decoration: none;
    overflow: hidden;
}
.side-web span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-web svg { width: 16px; height: 16px; flex: none; }
.side-web:hover { background: rgba(255, 255, 255, .06); color: #e6e8f2; text-decoration: none; }

/* niži ekrani (laptopi): još gušći meni da sve stane bez skrolanja */
@media (max-height: 840px) {
    .sidebar .brand { padding: 7px 16px 6px; }
    .sidebar .brand-mark { width: 32px; height: 32px; border-radius: 10px; }
    .nav { padding: 3px 9px; }
    .nav-group { padding: 3px 9px 1px; }
    .nav-link { padding: 2.5px 9px; margin: 0; font-size: 12px; }
    .sidebar-foot { padding: 4px 9px 5px; }
    .side-web { padding: 4px 9px; }
    .side-credit { margin-top: 2px; line-height: 1.35; }
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(13, 15, 30, .55);
    z-index: 55;
    backdrop-filter: blur(1.5px);
}

.main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 26px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.page-title { font-size: 17px; font-weight: 700; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.topbar:has(.page-action) .page-title { flex: 0 1 auto; }
.page-action { flex: none; margin-right: auto; white-space: nowrap; }

.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions form { margin: 0; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--bg); }

.nav-toggle { display: none; }

.content { padding: 26px 32px; width: 100%; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: 600 13.5px/1.3 var(--font);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .06s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(22, 124, 46, .35); }
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.btn-secondary:hover { background: var(--bg); }

.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }

.btn-danger { background: #d92d20; color: #fff; }
.btn-danger:hover { background: #b42318; }

.btn-danger-ghost { background: transparent; color: var(--red); }
.btn-danger-ghost:hover { background: var(--red-bg); }

.btn-warning { background: #b54708; color: #fff; }
.btn-warning:hover { background: #93370d; }

/* ispis / PDF — plavi gradijent, ikona dolazi iz BTN_ICONS */
.btn-print { background: linear-gradient(135deg, #3b82f6, #4f46e5); color: #fff; box-shadow: 0 2px 8px rgba(79, 70, 229, .3); }
.btn-print:hover { background: linear-gradient(135deg, #2563eb, #4338ca); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, .4); }

.btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.btn-lg { padding: 11px 20px; font-size: 15px; }
.btn-block { width: 100%; }

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background .12s, color .12s;
    flex: none;
}
.btn-icon svg { width: 15px; height: 15px; }
.btn-icon:hover { background: var(--gray-badge-bg); color: var(--text); }
.btn-icon-danger:hover { background: var(--red-bg); color: var(--red); }
.btn-icon.copied { color: var(--green); }

/* ============================================================
   Cards, toolbars, grids
   ============================================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.card-head form { margin: 0; }

.card-title { font-size: 15px; font-weight: 700; margin: 0; }

.card-warning { border-color: #f2c288; box-shadow: 0 0 0 3px rgba(240, 165, 60, .12), var(--shadow); }

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.toolbar-info { color: var(--muted); font-size: 13px; margin: 0; }

.panel-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
}

.split-grid {
    display: grid;
    grid-template-columns: minmax(320px, 5fr) 7fr;
    gap: 20px;
    align-items: start;
}
.split-grid-menu { grid-template-columns: 7fr minmax(300px, 5fr); }

.empty-inline { color: var(--muted); font-size: 13.5px; padding: 6px 0; }

.empty-state {
    text-align: center;
    padding: 52px 24px;
    color: var(--muted);
}
.empty-state svg { width: 44px; height: 44px; margin: 0 auto 14px; color: var(--border-strong); }
.empty-state h2 { font-size: 17px; color: var(--text); }
.empty-state .btn { margin-top: 12px; }

/* ---------- stats ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 13px;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 18px;
    color: var(--text);
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s, transform .1s;
}
.stat:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 4px 14px rgba(31, 158, 51, .12); transform: translateY(-1px); }

.stat-icon {
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
}
.stat-icon svg { width: 20px; height: 20px; }

.stat-num { font-size: 22px; font-weight: 800; line-height: 1.15; }
.stat-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }

.stat-accent { border-color: var(--accent); background: linear-gradient(135deg, #fff 55%, var(--accent-soft)); }
.stat-accent .stat-num { color: var(--accent); }

/* plocice kao brzi filtri (novosti) */
.stat-btn { appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.stat-btn.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow); }
.stat-icon--green { background: var(--green-bg); color: var(--green); }
.stat-icon--amber { background: var(--amber-bg); color: var(--amber); }

/* trenutna pretraga/filtri novosti */
.news-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; min-width: 0; }
.news-search { position: relative; flex: 1 1 260px; max-width: 440px; }
.news-search svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.news-search .input { width: 100%; padding-left: 36px; }
.news-filter select.input { width: auto; }
.news-filter-count { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }

/* ---------- dashboard rows ---------- */

.row-list { list-style: none; margin: 0; padding: 0; }

.row-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--border);
}
.row-item:last-child { border-bottom: none; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.row-title:hover { color: var(--accent); }
.row-unread { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }

/* ============================================================
   Badges
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2.5px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-gray { background: var(--gray-badge-bg); color: var(--gray-badge); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }

/* file-type badges */
.ext {
    display: inline-block;
    min-width: 44px;
    text-align: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    background: var(--gray-badge-bg);
    color: var(--gray-badge);
}
.ext-pdf { background: #fdecea; color: #b42318; }
.ext-doc, .ext-docx, .ext-odt { background: #e7effc; color: #1d4ed8; }
.ext-xls, .ext-xlsx, .ext-ods, .ext-csv { background: #e6f6ee; color: #067647; }
.ext-ppt, .ext-pptx { background: #fdf1dc; color: #b54708; }
.ext-zip { background: #f1e9fd; color: #6d28d9; }
.ext-jpg, .ext-jpeg, .ext-png { background: #e0f2f7; color: #0e7490; }

/* ============================================================
   Forms
   ============================================================ */

.field { margin-bottom: 15px; min-width: 0; }
.field:last-child { margin-bottom: 0; }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.field-row .field { margin-bottom: 15px; }

.label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 5px;
}
.req { color: var(--red); }

.input {
    display: block;
    width: 100%;
    padding: 8.5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: 400 14px/1.45 var(--font);
    transition: border-color .12s, box-shadow .12s;
}
.input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.input:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }
.input::placeholder { color: #9aa1b2; }

textarea.input { resize: vertical; min-height: 40px; }
select.input { cursor: pointer; }

.input-lg { font-size: 17px; font-weight: 600; padding: 11px 14px; }
.input-time { max-width: 120px; }

.input-file { padding: 7px; cursor: pointer; }
.input-file::file-selector-button {
    margin-right: 10px;
    padding: 5px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: 600 12.5px var(--font);
    cursor: pointer;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
    flex: none;
}

.hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; }
.hint .mono { font-size: 11.5px; }

.charcount {
    display: block;
    text-align: right;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.charcount.over { color: var(--red); font-weight: 700; }

.actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.actions form { margin: 0; display: inline-flex; }

/* ============================================================
   Alerts, banners, toasts
   ============================================================ */

.alert {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 18px;
}
.alert svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.alert-error { background: var(--red-bg); color: var(--red); border: 1px solid #f5c6c0; }
.alert-success { background: var(--green-bg); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }

.banner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 13.5px;
}
.banner svg { width: 20px; height: 20px; flex: none; }
.banner > div { flex: 1; }
.banner strong { display: inline-block; margin-right: 4px; }
.banner .btn { flex: none; }
.banner-warning { background: #fff7e8; border: 1px solid #f2ce8a; color: #93500b; }

.toast {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 200;
    max-width: min(420px, calc(100vw - 36px));
    padding: 13px 40px 13px 16px;
    border-radius: var(--radius);
    background: var(--side-bg);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--accent);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .28s ease, transform .28s ease;
    cursor: pointer;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-success { border-left-color: #12b76a; }
.toast-error { border-left-color: #f04438; }
.toast-warning { border-left-color: #f79009; }

/* ============================================================
   Tables
   ============================================================ */

.table-card { padding: 8px 0 0; overflow: hidden; }
.table-card .card-head { padding: 12px 20px 0; }
.table-card > .empty-inline { padding: 8px 20px 20px; }

.table-scroll { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}
.table th, .table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table th:last-child, .table td:last-child { padding-right: 20px; }

.table thead th {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    background: #fafbfd;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody tr { transition: background .1s; }
.table tbody tr:hover { background: #f8f9fc; }
.table tbody tr:last-child td { border-bottom: none; }

.cell-title { font-weight: 600; color: var(--text); }
a.cell-title:hover { color: var(--accent); }

.col-thumb { width: 72px; }
.thumb {
    display: block;
    width: 52px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg);
}
.thumb-ph { display: flex; align-items: center; justify-content: center; color: var(--border-strong); }
.thumb-ph svg { width: 20px; height: 20px; }

.slug-cell { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   Editor (news / pages)
   ============================================================ */

.editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 20px;
    align-items: start;
}
.editor-main { min-width: 0; }
.editor-side { min-width: 0; }
.editor-below { margin-top: 0; }

.cover-preview {
    display: block;
    width: 100%;
    max-height: 170px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.img-preview {
    display: inline-block;
    padding: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}
.img-preview img { display: block; max-height: 72px; max-width: 200px; }
.img-preview--sm img { width: 32px; height: 32px; object-fit: contain; }

/* media library (galerija slika) */
.media-toolbar { display: flex; align-items: center; gap: 10px; }
.media-search { width: 220px; }
.media-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}
.media-item {
    position: relative;
    margin: 0;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card, #fff);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.media-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .1); }
.media-item.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.media-thumb { display: block; aspect-ratio: 4 / 3; background: var(--bg); }
/* dokument u galeriji: pločica s ekstenzijom umjesto sličice */
a.media-thumb--doc {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 5%, var(--bg));
    text-decoration: none;
}
a.media-thumb--doc .ext { font-size: 14px; padding: 7px 13px; }
a.media-thumb--doc:hover { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-check {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    padding: 0;
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, .9);
    background: rgba(16, 24, 40, .35);
    color: transparent;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s, background-color .15s, color .15s;
}
.media-item:hover .media-check,
.media-item.is-selected .media-check,
.media-check:focus-visible { opacity: 1; }
.media-item.is-selected .media-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.media-meta { display: grid; gap: 1px; padding: 8px 10px; }
.media-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.media-dims { font-size: 11px; color: var(--text-soft, #6b7280); }
.media-actions {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: opacity .15s;
}
.media-item:hover .media-actions,
.media-actions:focus-within { opacity: 1; }
.media-actions form { margin: 0; display: inline-flex; }
.media-act {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: rgba(16, 24, 40, .55);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s;
}
.media-act:hover { background: rgba(16, 24, 40, .8); }
.media-act--danger:hover { background: #d92d20; }
.media-pick-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.media-pick-note { font-size: 12px; font-weight: 600; color: var(--accent); }

/* media picker modal */
.modal.modal--wide { max-width: min(1160px, calc(100vw - 48px)); }
.mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.mp-head .modal-title { margin: 0; font-size: 18px; }
.mp-search { flex: 1; max-width: 380px; }
.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-auto-rows: 192px; /* fiksni red — button kao grid stavka ne prenosi visinu sadrzaja */
    gap: 14px;
    height: min(62vh, 640px);
    overflow-y: auto;
    align-content: start;
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.mp-loading { grid-column: 1 / -1; text-align: center; color: var(--text-soft, #6b7280); font-size: 13px; padding: 26px 0; }
.mp-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card, #fff);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, transform .12s, box-shadow .12s;
}
.mp-item:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(16, 24, 40, .12); }
.mp-item.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.mp-item.is-picked::after {
    content: "✓";
    position: absolute;
    top: 7px; right: 7px;
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .25);
}
.mp-thumb {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    background: repeating-conic-gradient(#f0f1f3 0% 25%, #fff 0% 50%) 50% / 18px 18px;
    overflow: hidden;
}
.mp-name { flex: none; }
.mp-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.mp-item:hover .mp-thumb img { transform: scale(1.05); }
.mp-name {
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid var(--border);
    background: var(--card, #fff);
}
.mp-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 720px) {
    .mp-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); grid-auto-rows: 150px; gap: 10px; }
}

/* page block builder */
.pb-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.pb-block {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card, #fff);
    overflow: hidden;
}
.pb-block.dragging { opacity: .5; border-color: var(--accent); }
.pb-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.pb-head .drag-handle { cursor: grab; color: var(--text-soft, #9ca3af); letter-spacing: -2px; user-select: none; }
.pb-label { flex: none; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft, #6b7280); }
.pb-body { padding: 14px; }
.pb-sum {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--text-soft, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}
.pb-tog {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    transition: background .12s, transform .2s;
}
.pb-tog:hover { background: var(--accent-soft); color: var(--accent); }
.pb-block.is-collapsed .pb-tog svg { transform: rotate(-90deg); }
.pb-tog svg { transition: transform .2s; }
.pb-block.is-collapsed > .pb-body { display: none; }
.pb-block.is-collapsed > .pb-head { border-bottom: 0; }
.pb-img-preview {
    margin-bottom: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg);
    display: grid;
    place-items: center;
    min-height: 90px;
}
.pb-img-preview img { display: block; max-width: 100%; max-height: 220px; }
.pb-img-none { font-size: 12.5px; color: var(--text-soft, #9ca3af); padding: 20px; }
.pb-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pb-thumb {
    position: relative;
    width: 86px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-thumb-x {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(16, 24, 40, .65);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}
.pb-thumb-x:hover { background: #d92d20; }
.pb-acc-items { display: grid; gap: 10px; margin-bottom: 10px; }
/* redci Info kartice: vrsta + tekst + ukloni */
.pb-ic-items { display: grid; gap: 6px; margin: 8px 0; }
.pb-ic-rowedit {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    gap: 6px;
    align-items: center;
}
@media (max-width: 700px) {
    .pb-ic-rowedit { grid-template-columns: 1fr auto; }
    .pb-ic-rowedit .pb-fi-ick { grid-column: 1 / -1; }
}
.pb-acc-row {
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.pb-acc-row .btn { justify-self: end; }
.pb-btn-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.pb-add {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}
.pb-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card, #fff);
    font: 600 13px/1 var(--font);
    color: var(--text);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s, color .15s;
}
.pb-add-btn svg { width: 16px; height: 16px; color: var(--accent); }
.pb-add-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); transform: translateY(-1px); }
@media (max-width: 720px) {
    .pb-btn-row { grid-template-columns: 1fr; }
}

/* page builder: predlošci dizajna */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.tpl-card {
    display: grid;
    gap: 4px;
    justify-items: start;
    text-align: left;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card, #fff);
    cursor: pointer;
    font-family: var(--font);
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.tpl-card:hover {
    border-color: var(--accent);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .1);
    transform: translateY(-2px);
}
.tpl-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tpl-ico { font-size: 20px; line-height: 1; }
.tpl-name { font-size: 13.5px; font-weight: 700; color: var(--text); }
.tpl-desc { font-size: 11.5px; line-height: 1.45; color: var(--text-soft, #6b7280); }

/* page builder: stupci */
.pb-cols-count { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.pb-cols-count .input { width: auto; min-width: 64px; }

/* izbor ikone za modul Digitalna pristupačnost (Postavke) */
.a11y-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.a11y-ico { display: grid; justify-items: center; gap: 5px; width: 92px; padding: 10px 6px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; text-align: center; }
.a11y-ico:hover { border-color: var(--accent); }
.a11y-ico input { position: absolute; opacity: 0; pointer-events: none; }
.a11y-ico-box { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--bg); color: var(--text-soft, #6b7280); }
.a11y-ico-name { font-size: 11.5px; font-weight: 600; color: var(--text-soft, #6b7280); }
.a11y-ico:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.a11y-ico:has(input:checked) .a11y-ico-box { background: var(--accent); color: #fff; }
.a11y-ico:has(input:checked) .a11y-ico-name { color: var(--accent); }
.a11y-ico:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--accent-ring); }

.pb-cols-count .pb-f-cols { width: 64px; min-width: 0; }
.pb-btn-opts { align-items: center; }
.pb-btn-opts .pb-cols-count { margin-bottom: 0; }
.pb-cols-edit { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.pb-col-edit {
    border: 1px dashed var(--border-strong, #cbd2dc);
    border-radius: 10px;
    padding: 10px;
    background: var(--bg);
    min-width: 0;
}
.pb-col-edit .pb-col-list { min-height: 40px; margin-bottom: 10px; gap: 10px; }
.pb-col-title-in { margin-bottom: 10px; font-weight: 600; }
.pb-col-edit .pb-block { box-shadow: none; }
.pb-col-add { display: flex; flex-wrap: wrap; gap: 5px; }
.pb-col-add-btn {
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card, #fff);
    font: 600 11.5px/1 var(--font);
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.pb-col-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
/* stupci: traka ikona (bez teksta) na vrhu stupca; naziv bloka u tooltipu */
.pb-col-add--ico { gap: 4px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed var(--border-strong); }
.pb-col-add--ico .pb-col-add-btn, .pb-col-add--ico .pb-col-add-btn[data-pb-ct] {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    box-shadow: none;
    color: var(--pbc, var(--accent));
}
.pb-col-add--ico .pb-col-add-btn svg { width: 16px; height: 16px; }
.pb-col-add--ico .pb-col-add-btn:hover {
    border-color: var(--pbc, var(--accent));
    background: color-mix(in srgb, var(--pbc, var(--accent)) 10%, var(--surface));
    color: var(--pbc, var(--accent));
    transform: translateY(-1px);
}
.pb-col-add--ico .pb-col-add-btn::after {
    content: "+ " attr(data-tip);
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    z-index: 30;
    padding: 5px 9px;
    border-radius: 7px;
    background: var(--side-bg);
    color: #fff;
    font: 600 11.5px/1 var(--font);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 3px);
    transition: opacity .12s, transform .12s;
}
.pb-col-add--ico .pb-col-add-btn:hover::after,
.pb-col-add--ico .pb-col-add-btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* zaglavlje stupca: kloniraj/ukloni gore desno, naziv stupca u punoj širini ispod */
.pb-col-edit .pb-col-head { flex-wrap: wrap; justify-content: flex-end; margin-bottom: 8px; }
.pb-col-edit .pb-col-head .pb-col-title-in { order: 2; flex: 1 1 100%; margin-bottom: 0; }
.pb-col-edit .pb-col-head .pb-col-clone { width: 26px; height: 26px; }
@media (max-width: 900px) {
    .pb-cols-edit { grid-auto-flow: row; grid-auto-columns: unset; }
}

/* ---- boje tipova blokova (lakše snalaženje): rub bloka, oznaka tipa, ikona u paleti ---- */
.pb-block[data-type="heading"],  .pb-add-btn[data-pb-add="heading"],  .pb-col-add-btn[data-pb-ct="heading"]  { --pbc: #7c3aed; }
.pb-block[data-type="text"],     .pb-add-btn[data-pb-add="text"],     .pb-col-add-btn[data-pb-ct="text"]     { --pbc: #65a30d; }
.pb-block[data-type="image"],    .pb-add-btn[data-pb-add="image"],    .pb-col-add-btn[data-pb-ct="image"]    { --pbc: #0284c7; }
.pb-block[data-type="gallery"],  .pb-add-btn[data-pb-add="gallery"],  .pb-col-add-btn[data-pb-ct="gallery"]  { --pbc: #06a6c4; }
.pb-block[data-type="accordion"],.pb-add-btn[data-pb-add="accordion"],.pb-col-add-btn[data-pb-ct="accordion"]{ --pbc: #d97706; }
.pb-block[data-type="faq"],      .pb-add-btn[data-pb-add="faq"],      .pb-col-add-btn[data-pb-ct="faq"]      { --pbc: #0d9488; }
.pb-block[data-type="staff"],    .pb-add-btn[data-pb-add="staff"],    .pb-col-add-btn[data-pb-ct="staff"]    { --pbc: #4f46e5; }
.pb-block[data-type="saturdays"],.pb-add-btn[data-pb-add="saturdays"],.pb-col-add-btn[data-pb-ct="saturdays"]{ --pbc: #15803d; }
/* blok Pitanja i odgovori: odabir boje (krugovi) */
.pb-faq-swatches { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 12px 0; font-size: 13px; font-weight: 600; }
.pb-faq-sw {
    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--sw);
    box-shadow: 0 0 0 1px var(--border-strong);
    color: #fff;
    font: 700 11px/1 var(--font);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s;
}
.pb-faq-sw:hover { transform: scale(1.1); }
.pb-faq-sw.is-on { box-shadow: 0 0 0 2px var(--sw); transform: scale(1.12); }
.pb-block[data-type="faq"] .pb-btn-opts .check { font-size: 13px; }
.pb-block[data-type="button"],   .pb-add-btn[data-pb-add="button"],   .pb-col-add-btn[data-pb-ct="button"]   { --pbc: #16a34a; }
.pb-block[data-type="columns"],  .pb-add-btn[data-pb-add="columns"]                                          { --pbc: #db2777; }
.pb-block[data-type="documents"],.pb-add-btn[data-pb-add="documents"],.pb-col-add-btn[data-pb-ct="documents"]{ --pbc: #a16207; }
.pb-block[data-type="youtube"],  .pb-add-btn[data-pb-add="youtube"],  .pb-col-add-btn[data-pb-ct="youtube"]  { --pbc: #dc2626; }
.pb-block[data-type="quote"],    .pb-add-btn[data-pb-add="quote"],    .pb-col-add-btn[data-pb-ct="quote"]    { --pbc: #9333ea; }
.pb-block[data-type="callout"],  .pb-add-btn[data-pb-add="callout"],  .pb-col-add-btn[data-pb-ct="callout"]  { --pbc: #ea580c; }
.pb-block[data-type="divider"],  .pb-add-btn[data-pb-add="divider"],  .pb-col-add-btn[data-pb-ct="divider"]  { --pbc: #94a3b8; }
.pb-block[data-type="map"],      .pb-add-btn[data-pb-add="map"],      .pb-col-add-btn[data-pb-ct="map"]      { --pbc: #059669; }
.pb-block[data-type="form"],     .pb-add-btn[data-pb-add="form"],     .pb-col-add-btn[data-pb-ct="form"]     { --pbc: #2563eb; }
.pb-block[data-type="features"], .pb-add-btn[data-pb-add="features"], .pb-col-add-btn[data-pb-ct="features"] { --pbc: #0d9488; }
.pb-block[data-type="infocard"], .pb-add-btn[data-pb-add="infocard"], .pb-col-add-btn[data-pb-ct="infocard"] { --pbc: #0e7490; }
.pb-block[data-type="stats"],    .pb-add-btn[data-pb-add="stats"],    .pb-col-add-btn[data-pb-ct="stats"]    { --pbc: #15803d; }

.pb-block[data-type] { border-left: 4px solid var(--pbc, var(--border)); }
.pb-block[data-type] > .pb-head { background: color-mix(in srgb, var(--pbc, #64748b) 6%, var(--bg)); }
.pb-block[data-type] > .pb-head .pb-label { color: var(--pbc, var(--text-soft)); }
.pb-add-btn[data-pb-add] svg { color: var(--pbc, currentColor); }
.pb-add-btn[data-pb-add]:hover {
    border-color: color-mix(in srgb, var(--pbc, #64748b) 55%, var(--border));
    background: color-mix(in srgb, var(--pbc, #64748b) 7%, #fff);
    color: color-mix(in srgb, var(--pbc, #64748b) 80%, #000);
}
.pb-col-add-btn[data-pb-ct] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pbc, #64748b) 65%, transparent); }
.pb-col-add-btn[data-pb-ct]:hover {
    border-color: color-mix(in srgb, var(--pbc, #64748b) 55%, var(--border));
    color: color-mix(in srgb, var(--pbc, #64748b) 85%, #000);
    background: color-mix(in srgb, var(--pbc, #64748b) 7%, #fff);
}

/* dokumenti: explorer raspored — stablo lijevo, sadrzaj desno */
.docs-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}
.ftree-card { position: sticky; top: 20px; padding-bottom: 10px; }
.ftree-root {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.ftree-root svg { width: 16px; height: 16px; color: var(--accent); }
.ftree-root:hover { background: var(--bg); text-decoration: none; }
.ftree-root.is-active { background: var(--accent-soft); color: var(--accent); }
.ftree-list { list-style: none; margin: 0; padding: 0; }
.ftree-list .ftree-list { margin-left: 18px; border-left: 1px dashed var(--border); padding-left: 6px; }
.ftree-item { margin: 1px 0; }
.ftree-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}
.ftree-row:hover { background: var(--bg); }
.ftree-row.is-active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.ftree-row.is-active .ftree-name { color: var(--accent); font-weight: 700; }
.ftree-row .drag-handle { cursor: grab; color: var(--text-soft, #9ca3af); font-size: 12px; letter-spacing: -2px; user-select: none; opacity: 0; transition: opacity .12s; }
.ftree-row:hover .drag-handle { opacity: 1; }
.ftree-link {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    color: var(--text);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 550;
}
.ftree-link:hover { text-decoration: none; color: var(--accent); }
.ftree-link svg { width: 15px; height: 15px; flex: none; color: color-mix(in srgb, var(--accent) 75%, #b8860b); }
.ftree-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ftree-count {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-soft, #6b7280);
}
.ftree-actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.ftree-row:hover .ftree-actions, .ftree-actions:focus-within { opacity: 1; }
.ftree-actions form { margin: 0; display: inline-flex; }
.ftree-row.dnd-over {
    background: var(--accent-soft);
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}
.ftree-root.dnd-over { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-ring); color: var(--accent); }
@media (max-width: 1080px) {
    .docs-layout { grid-template-columns: minmax(0, 1fr); }
    .ftree-card { position: static; }
}

/* explorer drag & drop u dokumentima */
.dnd-dragging { opacity: .45; }
.folder-card[data-dnd-target].dnd-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    transform: scale(1.03);
    background: var(--accent-soft);
}
.crumbs a.dnd-over {
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 6px;
    box-shadow: 0 0 0 2px var(--accent-ring);
}
[data-dnd-folder], [data-dnd-doc] { cursor: grab; }
[data-dnd-folder]:active, [data-dnd-doc]:active { cursor: grabbing; }

.popover-panel--wide { min-width: 320px; }
.popover-panel--wide .input { width: 100%; }

/* draggable table rows (redoslijed novosti) */
.col-drag { width: 34px; }
.col-drag .drag-handle { cursor: grab; color: var(--text-soft, #9ca3af); font-size: 13px; letter-spacing: -2px; user-select: none; }
tr.dragging { opacity: .45; background: var(--accent-soft); }
tr[draggable="true"]:active .drag-handle { cursor: grabbing; }

/* corner style picker */
.corner-row { margin-top: 16px; }
.corner-picks { display: flex; gap: 10px; }
.corner-pick { cursor: pointer; }
.corner-pick input { position: absolute; opacity: 0; pointer-events: none; }
.corner-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card, #fff);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s, box-shadow .15s;
}
.corner-pick:hover .corner-chip { border-color: var(--accent); }
.corner-pick input:checked + .corner-chip {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
    background: var(--accent-soft);
}
.corner-pick input:focus-visible + .corner-chip { box-shadow: 0 0 0 3px var(--accent-ring); }
.corner-demo {
    width: 34px; height: 24px;
    background: var(--accent);
    opacity: .85;
}
.corner-demo--rounded { border-radius: 10px; }
.corner-demo--square { border-radius: 0; }
.corner-demo--boxed {
    background: linear-gradient(90deg, transparent 0 22%, var(--accent) 22% 78%, transparent 78%);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.corner-demo--full { border-radius: 4px; }

/* statistika */
.stats-controls { margin-bottom: 18px; }
.stats-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; justify-content: space-between; }
.stats-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.stats-range { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; }
.stats-range .label { margin: 0 0 8px; }
.stats-range .input { width: auto; }
.stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stats-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 240px;
    padding: 10px 4px 0;
    overflow-x: auto;
}
.stats-bar-wrap {
    flex: 1 1 0;
    min-width: 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}
.stats-bar-val { font-size: 10.5px; font-weight: 700; color: var(--text-soft, #6b7280); }
.stats-bar {
    width: 100%;
    max-width: 46px;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff));
    min-height: 3px;
    transition: filter .15s;
}
.stats-bar-wrap:hover .stats-bar { filter: brightness(1.15); }
.stats-bar-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-soft, #9ca3af);
    white-space: nowrap;
}
.stats-types { display: grid; gap: 9px; }
.stats-type-row { display: grid; grid-template-columns: 150px 1fr 64px; gap: 10px; align-items: center; }
.stats-type-name { font-size: 12.5px; font-weight: 600; }
.stats-type-track { display: block; height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.stats-type-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.stats-type-count { text-align: right; font-size: 12.5px; font-weight: 700; }
.stats-top { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.stats-top li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.stats-top a { color: var(--text); font-weight: 600; }
.stats-top a:hover { color: var(--accent); }
.stats-print-head { display: none; }
.stats-note { margin-top: 14px; }

/* ispis / PDF — cist izvjestaj bez admin okvira */
@media print {
    .sidebar, .topbar, .stats-controls, .toast, .overlay { display: none !important; }
    .main { margin-left: 0 !important; }
    .content { padding: 0 !important; }
    body { background: #fff !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    .stats-print-head { display: block; margin-bottom: 16px; }
    .stats-print-head h2 { margin: 0 0 4px; font-size: 20px; }
    .stats-print-head p { margin: 0; color: #555; font-size: 12px; }
    .stats-chart { overflow: visible; }
    .split-grid { grid-template-columns: 1fr 1fr !important; }
    .stats-top a { text-decoration: none; color: #000; }
}

/* callout notes */
.callout {
    margin: 4px 0 16px;
    padding: 12px 15px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid var(--border);
    background: var(--bg);
}
.callout-warning {
    background: #fffaeb;
    border-color: #fedf89;
    color: #7a5307;
}
.callout-warning a { color: inherit; font-weight: 700; }

/* modal dialog (sve potvrde brisanja/upiti idu kroz modal) */
.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(10, 14, 20, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .14s ease;
}
.modal-backdrop.is-open { opacity: 1; }
.modal-backdrop.is-closing { opacity: 0; }
.modal {
    width: 100%;
    max-width: 440px;
    background: var(--card, #fff);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 20px rgba(16, 24, 40, .12), 0 32px 64px -12px rgba(16, 24, 40, .3);
    transform: translateY(10px) scale(.97);
    transition: transform .14s ease;
}
.modal-backdrop.is-open .modal { transform: none; }
.modal-icon {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 12px;
    margin-bottom: 14px;
    background: var(--accent-soft);
    color: var(--accent);
}
.modal-icon svg { width: 22px; height: 22px; }
.modal-icon--danger { background: #fee4e2; color: #d92d20; }
.modal-title { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; }
.modal-msg { margin: 0 0 16px; font-size: 13.5px; color: var(--text-soft, #6b7280); line-height: 1.55; }
.modal-label { display: block; margin-bottom: 16px; font-size: 12.5px; font-weight: 600; }
.modal-label .input { margin-top: 6px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
body.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop, .modal { transition: none; }
}

/* categories & homepage layout picker */
.cat-color-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: -1px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.hint-inline { display: block; font-size: 11.5px; color: var(--text-soft, #6b7280); margin-top: 2px; }
.input-color {
    width: 54px; height: 36px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
.layout-grid--sm { margin-top: 14px; }
.layout-pick { cursor: pointer; }
.layout-pick input { position: absolute; opacity: 0; pointer-events: none; }
.layout-chip {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, transform .12s;
    height: 100%;
}
.layout-pick:hover .layout-chip { border-color: var(--accent); transform: translateY(-1px); }
.layout-pick input:checked + .layout-chip {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
    background: var(--accent-soft);
}
.layout-pick input:focus-visible + .layout-chip { box-shadow: 0 0 0 3px var(--accent-ring); }
.layout-name { font-size: 11.5px; font-weight: 600; line-height: 1.3; }
.lt {
    display: grid;
    gap: 3px;
    height: 58px;
    padding: 5px;
    background: var(--bg);
    border-radius: 6px;
}
.lt--grid-2 { grid-template-columns: 1fr 1fr; }
.lt--grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.lt--grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.lt--hero-side { grid-template-columns: 1.6fr 1fr; }
.lt--magazine { grid-template-columns: 1fr 1fr 1fr; }
.lt--list, .lt--compact { grid-template-columns: 1fr; }
.lt-card, .lt-big, .lt-wide, .lt-row, .lt-line, .lt-side {
    background: color-mix(in srgb, var(--accent) 38%, #cfd4dc);
    border-radius: 3px;
}
.lt--magazine .lt-wide { grid-column: 1 / -1; height: 22px; background: color-mix(in srgb, var(--accent) 62%, #b9bfca); }
.lt--hero-side .lt-big { background: color-mix(in srgb, var(--accent) 62%, #b9bfca); }
.lt-side { display: grid; gap: 3px; background: transparent; }
.lt--list .lt-row--lg { height: 100%; }
.lt--compact { align-content: space-between; }
.lt--compact .lt-line { height: 8px; }
.homecat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 6px;
}
.homecat-pick { cursor: pointer; }
.homecat-pick input { position: absolute; opacity: 0; pointer-events: none; }
.homecat-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 9px;
    transition: border-color .15s, box-shadow .15s;
}
.homecat-pick:hover .homecat-chip { border-color: var(--accent); }
.homecat-pick input:checked + .homecat-chip {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
    background: var(--accent-soft);
}
.homecat-pick input:focus-visible + .homecat-chip { box-shadow: 0 0 0 3px var(--accent-ring); }
.homecat-name { flex: 1; font-size: 13px; font-weight: 600; }

/* website color themes */
.theme-preview {
    --tp-primary: #1f9e33;
    --tp-primary-dark: #157a28;
    --tp-accent: #f2e00a;
    --tp-dark: #0a140c;
    --tp-paper: #f6f8f2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 18px;
}
.tp-dark {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 22px 20px;
    background: radial-gradient(120% 140% at 80% -20%, color-mix(in srgb, var(--tp-dark) 72%, var(--tp-primary)), var(--tp-dark) 70%);
}
.tp-title {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    font-size: 19px;
    color: color-mix(in srgb, var(--tp-paper) 90%, #fff);
}
.tp-sub { font-size: 12px; font-style: italic; color: color-mix(in srgb, var(--tp-paper) 65%, transparent); }
.tp-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tp-btn-accent {
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--tp-accent);
    color: var(--tp-dark);
    font-size: 12px;
    font-weight: 700;
}
.tp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--tp-paper) 25%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--tp-paper) 85%, transparent);
    font-size: 11px;
    font-weight: 600;
}
.tp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tp-primary); }
.tp-light {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--tp-paper);
}
.tp-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--tp-dark) 12%, transparent);
    border-radius: 10px;
}
.tp-card-bar { height: 5px; width: 42px; border-radius: 4px; background: var(--tp-primary); }
.tp-line { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--tp-dark) 14%, transparent); }
.tp-line-lg { height: 9px; width: 80%; background: color-mix(in srgb, var(--tp-dark) 30%, transparent); }
.tp-link { font-size: 11px; font-weight: 700; color: var(--tp-primary-dark); }
.tp-btn-primary {
    padding: 7px 15px;
    border-radius: 999px;
    background: var(--tp-primary-dark);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
    max-height: 340px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.theme-swatch { cursor: pointer; }
.theme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.theme-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 9px;
    transition: border-color .15s, box-shadow .15s, transform .12s;
}
.theme-swatch:hover .theme-chip { border-color: var(--accent); transform: translateY(-1px); }
.theme-swatch input:checked + .theme-chip {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
    background: var(--accent-soft);
}
.theme-swatch input:focus-visible + .theme-chip { box-shadow: 0 0 0 3px var(--accent-ring); }
.theme-dots { display: inline-flex; }
.theme-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
.theme-dot + .theme-dot { margin-left: -5px; }
.theme-name { font-size: 12.5px; font-weight: 600; }
.theme-custom {
    padding: 12px 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}
.theme-custom-head { margin-bottom: 10px; }
.theme-pickers { display: flex; flex-wrap: wrap; gap: 14px; }
.theme-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.theme-picker input[type="color"] {
    width: 40px; height: 30px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
}
@media (max-width: 720px) {
    .theme-preview { grid-template-columns: 1fr; }
}

/* working saturdays calendar */
.sat-form { margin-top: 18px; }
.sat-yearnav { display: flex; align-items: center; gap: 10px; }
.sat-year { font-weight: 700; font-size: 15px; min-width: 52px; text-align: center; }
.sat-mode { display: grid; gap: 8px; margin-bottom: 16px; }
.sat-cal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
    transition: opacity .2s;
}
.sat-cal.is-muted { opacity: .45; pointer-events: none; }
.sat-month {
    margin: 0;
    padding: 10px 12px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.sat-month legend {
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-soft, #6b7280);
}
.sat-days { display: flex; flex-wrap: wrap; gap: 6px; }
.sat-pill { cursor: pointer; }
.sat-pill input { position: absolute; opacity: 0; pointer-events: none; }
.sat-pill span {
    display: inline-block;
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card, #fff);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .15s, border-color .15s, color .15s, transform .12s;
    user-select: none;
}
.sat-pill:hover span { border-color: var(--accent); color: var(--accent); }
.sat-pill input:checked + span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.sat-pill input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
.sat-pill:active span { transform: scale(.96); }

/* gallery */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}
.gallery-item {
    position: relative;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg);
}
.gallery-item img { display: block; width: 100%; height: 100px; object-fit: cover; }
.gallery-grid--sortable { list-style: none; margin: 0; padding: 0; }
.gallery-grid--sortable .gallery-item { cursor: grab; }
.gallery-grid--sortable .gallery-item:active { cursor: grabbing; }
.gallery-grid--sortable .gallery-item.dragging { opacity: .45; border-color: var(--accent); }
.gallery-drag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 1;
    padding: 2px 5px;
    border-radius: 6px;
    background: rgba(16, 24, 40, .55);
    color: #fff;
    font-size: 11px;
    letter-spacing: -2px;
    user-select: none;
    opacity: 0;
    transition: opacity .12s;
}
.gallery-item:hover .gallery-drag { opacity: 1; }
.gallery-item figcaption { font-size: 11.5px; color: var(--muted); padding: 4px 8px; }
.img-preview--removable { position: relative; display: inline-block; }

.gallery-del {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: rgba(13, 15, 30, .68);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s;
}
.gallery-del:hover { background: #d92d20; }

/* foto-zid: dotjerana mreža slika (razmaci, zaobljenja, hover, redni broj) */
.wall-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; counter-reset: wallimg; }
.wall-grid .gallery-item {
    counter-increment: wallimg;
    border: 2px solid transparent;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wall-grid .gallery-item img { height: 112px; transition: transform .25s ease; }
.wall-grid .gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 24, 40, .18);
    border-color: var(--accent);
}
.wall-grid .gallery-item:hover img { transform: scale(1.045); }
.wall-grid .gallery-item::after {
    content: counter(wallimg);
    position: absolute;
    bottom: 6px;
    left: 6px;
    min-width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(13, 15, 30, .68);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}
.wall-grid .gallery-del { opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s, background .15s; }
.wall-grid .gallery-item:hover .gallery-del,
.wall-grid .gallery-del:focus-visible { opacity: 1; transform: scale(1); }
/* prvih 8 se stvarno prikazuje na naslovnici — zeleni broj; ostale su u pričuvi (prigušene) */
.wall-grid .gallery-item:nth-child(-n+8)::after { background: var(--accent); }
.wall-grid .gallery-item:nth-child(n+9) img { opacity: .55; }
.wall-grid .gallery-item:nth-child(n+9):hover img { opacity: 1; }

.danger-zone { border-color: #f1c0ba; }
.danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ============================================================
   Rich text editor
   ============================================================ */

.rte-wrap {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}
.rte-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.rte-bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px 8px;
    background: #fafbfd;
    border-bottom: 1px solid var(--border);
}

.rte-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font: 600 13px var(--font);
    cursor: pointer;
    transition: background .1s;
}
.rte-btn:hover { background: var(--gray-badge-bg); }
.rte-btn:active { background: var(--accent-soft); color: var(--accent); }
.rte-btn b { font-weight: 800; }
.rte-btn i { font-style: italic; }
.rte-btn u { text-decoration: underline; }
.rte-btn s { text-decoration: line-through; }

.rte-sep { width: 1px; background: var(--border); margin: 4px 5px; }

/* boja teksta */
.rte-a { font-weight: 800; padding: 0 1px; border-bottom: 3px solid #d92d20; line-height: 1.15; }
.rte-palette {
    position: absolute;
    top: calc(100% + 4px);
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    width: 232px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}
.rte-swatch {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .14);
    cursor: pointer;
    padding: 0;
    transition: transform .1s;
}
.rte-swatch:hover { transform: scale(1.14); }
.rte-swatch-custom { width: 52px; height: 26px; border: 1px dashed var(--border-strong); background: none; }

.rte-area {
    min-height: 280px;
    max-height: 640px;
    overflow-y: auto;
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.65;
}

/* dulje polje glavnog sadržaja (novosti) — raste s tekstom, bez unutarnjeg klizača */
.field-body-tall .rte-area {
    min-height: clamp(480px, 62vh, 900px);
    max-height: none;
}
.rte-area:focus { outline: none; }
.rte-area h2 { font-size: 1.35em; margin: 1em 0 .45em; }
.rte-area h3 { font-size: 1.15em; margin: 1em 0 .4em; }
/* gumb umetnut iz editora — u editoru izgleda kao gumb */
.rte-area a.btn { display: inline-block; padding: .45em 1.1em; border-radius: 8px; font-weight: 600; text-decoration: none; border: 2px solid var(--accent); }
.rte-area a.btn { cursor: pointer; }
.rte-area a.btn:hover { box-shadow: 0 0 0 3px var(--accent-ring, rgba(31,158,51,.25)); }
.rte-btn-remove { margin-top: 12px; }
.rte-area a.btn--primary { background: var(--accent); color: #fff; }
.rte-area a.btn--outline { background: transparent; color: var(--accent); }
.rte-btnfile { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rte-btnico { font-size: .8em; font-weight: 700; padding: 1px 6px; border: 1.5px solid currentColor; border-radius: 5px; }
.rte-area blockquote {
    margin: .8em 0;
    padding: .35em 1em;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 6px 6px 0;
    color: #3d3a6e;
}
.rte-area ul, .rte-area ol { padding-left: 1.5em; margin: .6em 0; }
.rte-area a { text-decoration: underline; }
.rte-area img { max-width: 100%; border-radius: 6px; }
.rte-area hr { border: none; border-top: 1px solid var(--border-strong); margin: 1.2em 0; }
.rte-area table { border-collapse: collapse; width: 100%; margin: .8em 0; }
.rte-area th, .rte-area td { border: 1px solid var(--border-strong); padding: 5px 9px; }

/* ============================================================
   Dropzones
   ============================================================ */

.dropzone {
    position: relative;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius);
    background: #fafbfd;
    padding: 26px 18px;
    text-align: center;
    color: var(--muted);
    transition: border-color .15s, background .15s;
}
.dropzone > svg { width: 30px; height: 30px; margin: 0 auto 8px; color: var(--accent); }
.dropzone p { margin: 0 0 3px; font-size: 13.5px; }
.dropzone strong { color: var(--text); }
.dropzone .hint { margin: 0; }

.dropzone input[type="file"] { margin-top: 12px; max-width: 100%; }
.dz-enhanced input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.dropzone.dz-over { border-color: var(--accent); background: var(--accent-soft); }

.dz-list {
    position: relative;
    z-index: 2;
    pointer-events: none;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    text-align: left;
    display: grid;
    gap: 5px;
}
.dz-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12.5px;
    color: var(--text);
    overflow: hidden;
}
.dz-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-list li .dz-size { margin-left: auto; color: var(--muted); flex: none; }
.dz-list li img { width: 30px; height: 24px; object-fit: cover; border-radius: 4px; flex: none; }

.dropzone-sm { padding: 18px 14px; }
.dropzone-sm > svg { width: 24px; height: 24px; }

/* upload card */
.upload-card { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; align-items: start; }
.upload-meta { display: flex; flex-direction: column; gap: 12px; }
.upload-meta .btn { justify-content: center; }

/* ============================================================
   Documents
   ============================================================ */

.docs-toolbar { align-items: center; }

.crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 600;
    min-width: 0;
}
.crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }
.crumbs a:last-child { color: var(--text); }
.crumbs svg { width: 15px; height: 15px; }
.crumb-sep { color: var(--border-strong); }

.popover { position: relative; }
.popover summary { list-style: none; }
.popover summary::-webkit-details-marker { display: none; }
.popover-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    width: 300px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px;
}
.popover-panel form { display: block; }  /* poništava .actions form { inline-flex } */
.popover-panel .field-row { grid-template-columns: 1fr auto; }

.folder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.folder-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: border-color .12s, box-shadow .12s;
}
.folder-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(31, 158, 51, .12); }

.folder-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 15px 16px;
    color: var(--text);
    text-decoration: none;
}
.folder-link:hover { text-decoration: none; }
.folder-link > svg { grid-row: 1 / span 2; width: 30px; height: 30px; color: #e8a33d; fill: #fdeecd; }
.folder-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 56px; }

.folder-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 2px;
}
.folder-actions form { margin: 0; }

.col-ext { width: 70px; }

.doc-edit-row td { background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.doc-edit-form {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto auto;
    gap: 14px;
    align-items: end;
    padding: 4px 6px;
}
.doc-edit-form .field { margin: 0; }
.doc-edit-form .actions { padding-bottom: 2px; }

/* ============================================================
   Menu builder
   ============================================================ */

.menu-tree, .menu-sub { list-style: none; margin: 0; padding: 0; }
.menu-tree { margin-top: 8px; }
.menu-sub { margin: 4px 0 4px 30px; border-left: 2px solid var(--border); padding-left: 10px; }

.menu-node { margin-bottom: 3px; }

.menu-row {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    transition: border-color .12s, box-shadow .12s;
}
.menu-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.menu-node.dragging { opacity: .45; }
.menu-node.dragging > .menu-row { border-style: dashed; border-color: var(--accent); }

.drag-handle {
    cursor: grab;
    color: var(--border-strong);
    font-size: 13px;
    letter-spacing: -2px;
    user-select: none;
    padding: 0 2px;
    flex: none;
}
.menu-row:hover .drag-handle { color: var(--muted); }

.menu-item-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.menu-item-url { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 40px; }
.menu-flag { color: var(--muted); font-size: 12px; flex: none; display: inline-flex; }
.menu-flag svg { width: 14px; height: 14px; }
/* oznaka stavke koja u meniju prikazuje samo ikonu */
.menu-flag--ico {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}
.menu-row .actions { flex: none; display: inline-flex; align-items: center; gap: 4px; }

/* kompaktan redak menija: ikona + naziv i poveznica u JEDNOM redu (upola niže, lakši drag & drop) */
.menu-row { padding: 4px 10px; border-radius: 9px; user-select: none; cursor: grab; gap: 8px; }
.menu-row:active { cursor: grabbing; }
.menu-ico {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent);
    flex: none;
}
.menu-ico svg { width: 13px; height: 13px; }
/* naziv + poveznica jedan pored drugoga */
.menu-item-main { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.menu-item-main .menu-item-title { white-space: nowrap; flex: none; }
.menu-item-main .menu-item-url { flex: 0 1 auto; min-width: 0; display: block; }
.menu-row--hidden { opacity: 0.55; }
.menu-row--hidden .menu-ico { background: var(--bg); color: var(--muted); }
.menu-eye-form { display: inline-flex; }
.menu-eye { color: var(--muted); }
.menu-eye:hover { color: var(--accent); }
.menu-eye.is-off { color: #b45309; }
.menu-sub { margin-left: 24px; padding-left: 14px; border-left: 2px dashed var(--border); }
.menu-sub:empty { display: none; margin: 0; padding: 0; border: 0; }
.menu-lvl { color: var(--muted); }
.menu-lvl:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
.menu-lvl:disabled { opacity: 0.25; cursor: default; }
.menu-ghost {
    position: fixed;
    z-index: 500;
    pointer-events: none;
    opacity: 0.95;
    background: var(--card, #fff);
    border-color: var(--accent);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1), 0 18px 44px -8px rgba(0, 0, 0, 0.3);
}
.menu-node.dragging > .menu-row { opacity: 0.45; border-style: dashed; border-color: var(--accent); }
.menu-row.menu-drop-into {
    position: relative;
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.menu-row.menu-drop-into::after {
    content: "⤵ podstavka";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    pointer-events: none;
}
.menu-tree .drag-handle { touch-action: none; }
.menu-savestate { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.menu-savestate.is-ok { color: var(--accent); }
.menu-savestate.is-err { color: #b91c1c; }

/* brzo dodavanje */
.menu-side { display: grid; gap: 20px; align-content: start; min-width: 0; }
.menu-qa-h {
    margin: 14px 0 7px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.menu-qa { display: grid; gap: 6px; }
.menu-qa--scroll { max-height: 300px; overflow-y: auto; padding-right: 4px; }
.menu-qa-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface);
}
.menu-qa-row:hover { border-color: var(--border-strong); }
.menu-qa-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.menu-qa-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-qa-url { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-qa-in { flex: none; }
.menu-qa-row form { flex: none; display: inline-flex; }

/* segmentirani tabovi "Dodaj u meni" */
.mtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 9px;
}
.mtab {
    flex: 1;
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: 600 12.5px/1.2 var(--font);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.mtab:hover { color: var(--text); }
.mtab.is-active { background: var(--card, #fff); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }

/* kompaktni jednoredni redci brzog dodavanja */
.menu-qa-row--sm { padding: 5px 6px 5px 10px; gap: 8px; }
.menu-qa-row--sm .menu-qa-title { flex: 1; min-width: 0; font-size: 12.5px; }
.menu-qa-plus {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card, #fff);
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.menu-qa-plus:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.menu-qa-check {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent);
    flex: none;
}

/* ============================================================
   Notices
   ============================================================ */

.notices-col { min-width: 0; }
.notices-col .card { margin-bottom: 14px; }

.notice-editing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring), var(--shadow); }

.notice-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.notice-title { font-size: 14.5px; margin: 0; }
.notice-title-ico { display: inline-flex; margin-right: 6px; vertical-align: -3px; color: var(--accent); }
.notice-body { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.notice-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

/* ============================================================
   Hours
   ============================================================ */

/* radno vrijeme: alati odjela (tabovi) u zaglavlju kartice */
.hours-unit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hours-unit-tools form { margin: 0; }

.hours-table .day-name { font-weight: 600; white-space: nowrap; }
.hours-table td { min-width: 0; }
.hours-table tr.is-closed td .input-time { opacity: .45; }
.hours-table tr.is-closed .day-name { color: var(--muted); }

/* ============================================================
   Messages
   ============================================================ */

.msg-list { display: grid; gap: 14px; }
.msg { margin-bottom: 0; }
.msg-unread { border-left: 4px solid var(--accent); }

.msg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.msg-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.msg-name { font-size: 14px; }
.msg-mail { font-size: 13px; }
.msg-subject { font-size: 14.5px; margin: 0 0 6px; }
.msg-unread .msg-subject { font-weight: 800; }
.msg-body { color: #3d4356; font-size: 13.5px; }
.msg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* ============================================================
   Settings
   ============================================================ */

.settings-save { margin: -6px 0 26px; }

.security-info {
    margin: 18px 0 0;
    padding: 14px 16px 14px 34px;
    background: var(--bg);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--muted);
}
.security-info li { margin-bottom: 4px; }
.security-info li:last-child { margin-bottom: 0; }

.pin-change { max-width: 640px; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
    .editor-grid { grid-template-columns: 1fr; }
    .split-grid, .split-grid-menu { grid-template-columns: 1fr; }
    .upload-card { grid-template-columns: minmax(0, 1fr); }
    .upload-meta { flex-direction: row; align-items: end; flex-wrap: wrap; }
    .upload-meta .field { flex: 1; margin: 0; }
}

/* ============================================================
   Predlošci dizajna kao harmonika + rastegnut builder (stranice)
   ============================================================ */

.tpl-details { padding: 0; overflow: hidden; }
.tpl-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .12s;
}
.tpl-summary::-webkit-details-marker { display: none; }
.tpl-summary:hover { background: var(--bg); }
.tpl-sum-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
.tpl-sum-hint {
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tpl-chev { flex: none; color: var(--muted); transition: transform .15s; }
.tpl-details[open] .tpl-chev { transform: rotate(180deg); }
.tpl-details[open] .tpl-summary { border-bottom: 1px solid var(--border); }
.tpl-body { padding: 14px 20px 18px; }

/* glavna kartica sadržaja rasteže se prema dolje — više prostora za rad */
.pb-main-card { display: flex; flex-direction: column; min-height: 62vh; }
.pb-main-card > .pb-list { flex: 1; align-content: start; }
.pb-main-card > .pb-list:empty { flex: 0; min-height: 0; margin: 0; }
.pb-main-card > [data-pb-empty] { flex: 1; display: grid; place-items: center; }

/* ============================================================
   Pregled izgleda u realnom vremenu (builder stranica)
   ============================================================ */

.pv-card { position: sticky; top: 20px; }

.pv-wrap {
    position: relative;
    height: 430px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}
.pv-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    transform-origin: 0 0;
    /* skrolanje pregleda je dopušteno; poveznice/gumbi unutar pregleda su blokirani u page-preview.php (.pv-doc) */
}

/* .bwork-right .pv-card (position: static) je kasnije u datoteci — jači selektor da „Povećaj” stvarno otvori preko ekrana */
.pv-card.pv-expanded,
.bwork-right .pv-card.pv-expanded {
    position: fixed;
    inset: 24px;
    z-index: 300;
    margin: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.pv-card.pv-expanded .pv-wrap { flex: 1; height: auto; }
.pv-card.pv-expanded .pv-wrap iframe { position: static; pointer-events: auto; }

/* sticky desni stupac stvara vlastiti sloj — mora biti iznad tamne pozadine */
body.pv-open .bwork-right { z-index: 300; }
body.pv-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 34, .5);
    z-index: 250;
}

/* ============================================================
   Slider naslovnice (admin)
   ============================================================ */

.slider-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.slider-toggle-row .check { display: flex; align-items: center; gap: 10px; margin: 0; }

.slider-mode-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 26px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.slider-mode-row .label { margin: 0; }
.slider-mode-row .check { display: flex; align-items: center; gap: 8px; margin: 0; }

.slide-thumb {
    width: 118px;
    aspect-ratio: 1920 / 900;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
    flex: none;
    background: var(--bg);
}

/* ============================================================
   Builder: blok Dokumenti (uredna polja)
   ============================================================ */

.pb-docs-fields { display: grid; gap: 12px; }
.pb-field-lbl { display: grid; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.pb-field-lbl .input { width: 100%; font-weight: 400; font-size: 14px; color: var(--text); }
.pb-docs-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.pb-docs-row .pb-field-lbl { flex: 1 1 240px; min-width: 0; }
.pb-docs-sub { margin: 0 0 9px; display: inline-flex; align-items: center; gap: 8px; }
.pb-docs-fields .hint { margin: 0; }
@media (max-width: 640px) {
    .pb-docs-sub { margin: 0; }
}

/* ============================================================
   Graditelj obrazaca (Obrasci)
   ============================================================ */

.ff-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.ff-row {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card, #fff);
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ff-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); }
.ff-row.dragging { opacity: 0.55; border-color: var(--accent); }
.ff-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.ff-head .drag-handle { cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; }
.ff-ico {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: var(--accent-soft);
    color: var(--accent);
    flex: none;
}
.ff-type-label { flex: 1; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.ff-body { display: grid; gap: 8px; padding: 11px 12px 12px; }
.ff-req-wrap { margin: 0; }
.ff-add { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-add-cols { border-style: dashed; }
/* ============================================================
   Izgled weba — dizajn-teme
   ============================================================ */

.skin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}
.skin-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.skin-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.skin-prev { padding: 12px 14px 0; }
.skin-prev-top {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 8px 8px 0 0;
}
.skin-prev-dot { width: 12px; height: 12px; border-radius: 50%; }
.skin-prev-nav { width: 26px; height: 5px; border-radius: 3px; }
.skin-prev-cta { margin-left: auto; width: 34px; height: 10px; border-radius: 5px; }
.skin-prev-hero { padding: 16px 12px 14px; display: grid; gap: 6px; justify-items: start; }
.skin-prev-h1 { width: 62%; height: 12px; border-radius: 6px; }
.skin-prev-h2 { width: 42%; height: 7px; border-radius: 4px; }
.skin-prev-btn { width: 52px; height: 12px; border-radius: 6px; margin-top: 4px; }
.skin-prev-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; padding: 10px 0 14px; }
.skin-prev-cards span { height: 34px; background: #fff; border: 2px solid; border-radius: 8px; }
/* motivi po temama */
.skin-prev--komunalno .skin-prev-hero,
.skin-prev--komunalno .skin-prev-top { border-radius: 0; }
.skin-prev--komunalno .skin-prev-h1,
.skin-prev--komunalno .skin-prev-h2,
.skin-prev--komunalno .skin-prev-btn,
.skin-prev--komunalno .skin-prev-cta,
.skin-prev--komunalno .skin-prev-nav { border-radius: 0; }
.skin-prev--komunalno .skin-prev-cards span { border-radius: 0; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.18); }
.skin-prev--maslacak .skin-prev-hero { border-radius: 0 0 22px 22px; }
.skin-prev--maslacak .skin-prev-cards span { border-radius: 16px; }
.skin-prev--maslacak .skin-prev-btn { border-radius: 999px; }
.skin-prev--zvoncici .skin-prev-hero { border-radius: 0 0 50% 50% / 0 0 18px 18px; }
.skin-prev--zvoncici .skin-prev-cards span { border-radius: 14px 14px 14px 4px; border-style: dashed; }
.skin-body { padding: 12px 14px 14px; display: grid; gap: 8px; align-content: start; flex: 1; }
.skin-head { display: flex; align-items: center; gap: 8px; }
.skin-name { margin: 0; font-size: 16px; flex: 1; }
.skin-desc { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.skin-meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.skin-swatches { display: flex; gap: 4px; padding-top: 3px; }
.skin-swatches span { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.12); }
.skin-body form, .skin-body .btn { margin-top: 4px; justify-self: start; }

/* birač izgleda podnožja + vlastiti stupci */
.fl-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.fl-pick input { position: absolute; opacity: 0; }
.fl-pick { position: relative; cursor: pointer; }
.fl-chip {
    display: grid;
    gap: 3px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card, #fff);
    transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.fl-chip strong { font-size: 13px; }
.fl-chip span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.fl-pick input:checked + .fl-chip {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px var(--accent);
}
.fl-prev {
    min-height: 90px; /* visinu postavlja JS prema skaliranom sadržaju */
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #16181c;
}
.fl-prev iframe {
    display: block;
    border: 0;
    transform-origin: top left;
    pointer-events: none;
}
.fl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
/* birači letećih hero ikona (Slider → Postavke) */
.hf-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.fl-col { display: grid; gap: 8px; align-content: start; }

/* mini builder stupca podnožja */
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 8px; }
.fb-row {
    display: grid;
    gap: 6px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
.fb-row.dragging { opacity: 0.5; border-color: var(--accent); }
.fb-head { display: flex; align-items: center; gap: 7px; }
.fb-head .drag-handle { cursor: grab; color: var(--muted); letter-spacing: -2px; user-select: none; }
.fb-label { flex: 1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.fb-x { font-size: 16px; line-height: 1; color: var(--muted); }
.fb-x:hover { color: #b91c1c; }
.fb-img-prev {
    display: grid;
    place-items: center;
    min-height: 54px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: #22262b;
    overflow: hidden;
}
.fb-img-prev img { max-width: 100%; max-height: 90px; display: block; }
.fb-img-prev span { font-size: 11.5px; color: var(--muted); padding: 8px; }
.fb-add { display: flex; flex-wrap: wrap; gap: 6px; }

/* blokovi podnožja — boje po tipu, isti jezik kao builder stranica */
.fb-row[data-type="heading"], .fb-add [data-fb-add="heading"] { --pbc: #7c3aed; }
.fb-row[data-type="text"],    .fb-add [data-fb-add="text"]    { --pbc: #65a30d; }
.fb-row[data-type="image"],   .fb-add [data-fb-add="image"]   { --pbc: #0284c7; }
.fb-row[data-type="link"],    .fb-add [data-fb-add="link"]    { --pbc: #2563eb; }
.fb-row[data-type="button"],  .fb-add [data-fb-add="button"]  { --pbc: #16a34a; }
.fb-row[data-type="contact"], .fb-add [data-fb-add="contact"] { --pbc: #ea580c; }
.fb-row[data-type="spacer"],  .fb-add [data-fb-add="spacer"]  { --pbc: #94a3b8; }
.fb-row[data-type] { border-left: 4px solid var(--pbc, var(--border)); }
.fb-row[data-type] > .fb-head {
    margin: -8px -9px 0;
    padding: 6px 9px 5px;
    background: color-mix(in srgb, var(--pbc, #64748b) 7%, var(--bg));
    border-bottom: 1px solid color-mix(in srgb, var(--pbc, #64748b) 14%, var(--border));
    border-radius: 9px 9px 0 0;
}
.fb-row[data-type="spacer"] { padding-bottom: 0; }
.fb-row[data-type="spacer"] > .fb-head { border-bottom: 0; border-radius: 9px; }
.fb-row[data-type] .fb-label { color: var(--pbc, var(--muted)); }
.fb-add .pb-col-add-btn svg { color: var(--pbc, currentColor); }
.fb-add .pb-col-add-btn:hover { border-color: color-mix(in srgb, var(--pbc, #64748b) 55%, var(--border)); }

/* veliki birač ikona: tražilica + skrolabilna mreža */
.hbi-search { margin-bottom: 8px; max-width: 320px; }
.hbi-grid--big {
    max-height: 224px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
.hbi[hidden] { display: none; }

.ff-tpls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}
.ff-tpl {
    display: grid;
    justify-items: start;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card, #fff);
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.ff-tpl:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.ff-tpl svg { width: 20px; height: 20px; color: var(--accent); }
.ff-tpl strong { font-size: 13px; }
.ff-tpl span { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ff-exts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; }
.ff-exts-lbl { font-size: 12px; font-weight: 600; color: var(--muted); }
.ff-ext-wrap { margin: 0; font-size: 12.5px; }
.ff-cbtn { display: inline-flex; align-items: center; gap: 5px; }
.ff-cbtn svg { flex: none; }
.ff-cols {
    border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 3%, var(--card, #fff));
    overflow: hidden;
}
.ff-cols.dragging { opacity: 0.55; }
.ff-cols > .ff-head { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); }
.ff-cols-edit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 11px 12px 12px;
}
.ff-col {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 10px;
    min-width: 0;
    background: var(--bg);
}
.ff-col-list { min-height: 12px; margin-bottom: 10px; }
.ff-col-add .pb-col-add-btn { font-size: 11.5px; padding: 4px 8px; }
@media (max-width: 900px) {
    .ff-cols-edit { grid-template-columns: 1fr; }
}

/* pregled obrasca uživo (bočni stupac) */
.ffp { display: grid; gap: 11px; }
.ffp-empty { margin: 0; font-size: 12.5px; color: var(--muted); }
.ffp-field { display: grid; gap: 4px; min-width: 0; }
.ffp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ffp-cols > div { display: grid; gap: 11px; align-content: start; min-width: 0; }
.ffp-label { font-size: 12px; font-weight: 600; color: var(--text); }
.ffp-noname { color: var(--muted); font-weight: 500; }
/* pregled polja "Samo tekst" */
.ffp-note {
    padding: 5px 9px;
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    line-height: 1.5;
}
.ffp-note--h {
    padding: 0 0 4px;
    border-left: 0;
    border-bottom: 2px solid var(--border);
    border-radius: 0;
    background: none;
    font-size: 13.5px;
    font-weight: 700;
}
.ffp-req { color: #b91c1c; }
.ffp-input {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 4px 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
    font-size: 12px;
    color: var(--muted);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ffp-area { min-height: 52px; align-items: flex-start; padding-top: 6px; }
.ffp-select { justify-content: space-between; }
.ffp-select svg { flex: none; color: var(--muted); }
.ffp-file { border-style: dashed; }
.ffp-file svg { flex: none; }
.ffp-opt { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: var(--text); }
.ffp-mark {
    flex: none;
    width: 13px;
    height: 13px;
    margin-top: 1px;
    border: 1.5px solid var(--muted);
    background: var(--card, #fff);
}
.ffp-mark--radio { border-radius: 50%; }
.ffp-mark--check { border-radius: 3px; }
.ffp-btn {
    justify-self: start;
    padding: 7px 16px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

/* ============================================================
   Radnje u retku tablice: ikone + ⋯ izbornik (rowmenu)
   ============================================================ */

.row-actions { display: inline-flex; align-items: center; gap: 2px; }
.ra-btn {
    display: inline-grid;
    place-items: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ra-btn svg { width: 16px; height: 16px; }
.ra-btn:hover, .ra-btn.is-open { background: var(--accent-soft); color: var(--accent); }
.rowmenu-wrap { display: inline-flex; }
.rowmenu {
    z-index: 420;
    min-width: 195px;
    padding: 5px;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 11px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06), 0 14px 38px -8px rgba(0, 0, 0, 0.18);
}
.rowmenu form { margin: 0; }
.rowmenu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: 500 13px/1.2 var(--font);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.rowmenu-item:hover { background: var(--bg); }
.rowmenu-item svg { flex: none; width: 15px; height: 15px; color: var(--muted); }
.rowmenu-item--danger { color: #b91c1c; }
.rowmenu-item--danger svg { color: #b91c1c; }
.rowmenu-item--danger:hover { background: #fef2f2; }
.rowmenu-sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* prijave obrazaca — kartice umjesto široke tablice */
.fe-list { display: grid; gap: 12px; }
.fe-card { padding: 0; overflow: hidden; }
.fe-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.fe-when { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.fe-when svg { color: var(--accent); }
.fe-time { color: var(--muted); font-weight: 500; }
.fe-num { flex: 1; font-size: 12px; color: var(--muted); }
.fe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 20px;
    padding: 14px;
}
.fe-item { min-width: 0; }
.fe-item--wide { grid-column: 1 / -1; }
.fe-label {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fe-value { font-size: 13.5px; overflow-wrap: anywhere; }
.fe-empty { color: var(--muted); }
.fe-file { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================
   Uvoz dokumenata (WPFD)
   ============================================================ */

.import-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.import-steps li { padding-left: 4px; }
.import-steps strong { color: var(--text); }

/* ============================================================
   Korisnici (uloge i ovlasti)
   ============================================================ */

.perm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}
.perm-check { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; }
/* administrator ima sve — popis ovlasti tada nije potreban */
.user-form:has(input[name="role"][value="admin"]:checked) .perm-field { display: none; }

.topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* ============================================================
   Kontakti odjela (admin lista)
   ============================================================ */

.cu-adm-hint { padding: 0 20px; }

.cu-adm-list {
    list-style: none;
    margin: 0;
    padding: 14px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cu-adm {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 11px 14px;
    transition: border-color .12s, box-shadow .12s;
}
.cu-adm-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cu-adm:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.cu-adm-row:hover .drag-handle { color: var(--muted); }
.cu-adm.dragging { opacity: .45; border-style: dashed; border-color: var(--accent); }
.cu-adm--editing { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.cu-adm-sublist {
    list-style: none;
    margin: 11px 0 0;
    padding: 11px 0 0 26px;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cu-adm--sub { background: var(--bg); padding: 8px 11px; border-radius: var(--radius-sm); }
.cu-adm--sub .cu-adm-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }

.cu-adm-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .5px;
    color: #fff;
    flex: none;
    background: linear-gradient(135deg, #14532d, #22a04a);
    box-shadow: inset 0 -10px 18px rgba(0, 0, 0, .14);
}
.cu-tone-1 .cu-adm-avatar { background: linear-gradient(135deg, #0e7490, #2ab6d0); }
.cu-tone-2 .cu-adm-avatar { background: linear-gradient(135deg, #5b21b6, #8b5cf6); }
.cu-tone-3 .cu-adm-avatar { background: linear-gradient(135deg, #b45309, #f59e0b); }
.cu-tone-4 .cu-adm-avatar { background: linear-gradient(135deg, #be185d, #ec6aa8); }

.cu-adm-main { flex: 1; min-width: 0; }
.cu-adm-name { font-weight: 700; font-size: 14px; line-height: 1.3; }

.cu-adm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.cu-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2.5px 9px;
    font-size: 12px;
    color: var(--muted);
    max-width: 240px;
}
.cu-chip svg { width: 12px; height: 12px; flex: none; }
.cu-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-chip-int { background: var(--accent-soft); border-color: transparent; color: var(--accent); font-weight: 600; }

.cu-adm .actions { flex: none; }

.cu-adm-empty { text-align: center; padding: 30px 20px 38px; color: var(--muted); }
.cu-adm-empty svg { width: 38px; height: 38px; margin: 0 auto 10px; color: var(--border-strong); }
.cu-adm-empty p { margin: 0 0 2px; }

@media (max-width: 720px) {
    .cu-adm { flex-wrap: wrap; }
    .cu-adm-main { flex-basis: calc(100% - 120px); }
    .cu-adm .actions { margin-left: auto; }
}

@media (max-width: 960px) {
    .sidebar { transform: translateX(-100%); box-shadow: none; }
    body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .main { margin-left: 0; }
    .nav-toggle { display: inline-flex; }
    .content { padding: 18px 14px; }
    .topbar { padding: 10px 14px; }
    .panel-grid { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 640px) {
    .field-row, .field-row-3 { grid-template-columns: 1fr; }
    .doc-edit-form { grid-template-columns: 1fr; align-items: stretch; }
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding: 13px 14px; }
    .stat-label { overflow-wrap: anywhere; }
    .banner { flex-wrap: wrap; }
    .topbar-actions .btn-ghost { display: none; }
    .topbar-actions .topbar-yt { display: inline-flex; gap: 0; padding: 8px 10px; font-size: 0; } /* na mobitelu samo YouTube ikona */
    .page-action { gap: 0; padding: 8px 11px; font-size: 0; }
    .topbar:has(.page-action) .topbar-user { display: none; }
    .danger-row { flex-direction: column; align-items: flex-start; }
    .popover-panel { position: fixed; left: 14px; right: 14px; width: auto; top: auto; }
    .popover-panel, .popover-panel--wide { min-width: 0; max-width: calc(100vw - 28px); }
}

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

/* ---- WP uvoz: progress bar ---- */
.wp-progress { margin-top: 16px; }
.wp-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.wp-progress-pct { font-weight: 700; font-variant-numeric: tabular-nums; color: #1f9e33; }
.wp-progress-track { height: 14px; border-radius: 999px; background: #e6ece4; overflow: hidden; }
.wp-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #1f9e33, #35c04b);
    transition: width 0.35s ease;
}

/* ---- skupno brisanje: checkbox stupac ---- */
.col-check { width: 36px; text-align: center; }
.col-check input {
    width: 17px;
    height: 17px;
    accent-color: #1f9e33;
    cursor: pointer;
    vertical-align: middle;
}

/* ---- galerija: sortiranje, WP oznaka, veliki pregled ---- */
.media-sort { width: auto; }
button.media-thumb {
    border: 0;
    padding: 0;
    background: none;
    display: block;
    width: 100%;
    cursor: zoom-in;
    position: relative;
}
.media-src-badge {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(10, 20, 12, 0.75);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 6px;
    pointer-events: none;
}
.mv-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(8, 12, 9, 0.82);
    display: grid;
    place-content: center;
    padding: 3vh 3vw;
    animation: mvIn 0.15s ease-out;
}
@keyframes mvIn { from { opacity: 0; } }
.mv-box { margin: 0; position: relative; text-align: center; }
.mv-box img {
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.mv-box figcaption { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; margin-top: 10px; }
.mv-x {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: #ffffff;
    color: #1a241c;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

/* ---- galerija: serversko stranicenje + picker info ---- */
.media-toolbar-form { display: flex; gap: 8px; align-items: center; }
.media-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
}
.media-pager-info { font-size: 0.88rem; color: #5b6b5d; font-variant-numeric: tabular-nums; }
.media-pager .is-disabled { opacity: 0.45; pointer-events: none; }
.mp-info {
    margin: 6px 2px 0;
    font-size: 0.82rem;
    color: #5b6b5d;
    text-align: center;
}

/* ---- naslovna slika: real-time pregled + X za uklanjanje ---- */
.cover-wrap { position: relative; display: block; }
.cover-wrap .cover-preview { display: block; margin-bottom: 10px; }
.cover-x {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(190, 28, 28, 0.92);
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: background 0.15s, transform 0.15s;
}
.cover-x:hover { background: #991b1b; transform: scale(1.08); }

/* ---- odabrane slike iz galerije (multi pick) — traka slicica s X ---- */
.mpk-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.mpk-item {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    overflow: visible;
}
.mpk-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid #e2e8e0;
    display: block;
}
.mpk-x {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background: #be1c1c;
    color: #ffffff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.mpk-x:hover { background: #991b1b; }

/* ---- dropzone: X za uklanjanje odabrane datoteke ---- */
.dz-enhanced .dz-list { position: relative; z-index: 2; }
.dz-x {
    flex: none;
    width: 20px;
    height: 20px;
    margin-left: 6px;
    border: 0;
    border-radius: 50%;
    background: #f1d7d7;
    color: #9f1a1a;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.dz-x:hover { background: #be1c1c; color: #ffffff; }

/* X u dz-listi mora biti klikabilan iako lista propusta klikove na input */
.dz-x { pointer-events: auto; position: relative; z-index: 3; }

/* ---- dogadanja: kalendar-cip datuma + relativna oznaka ---- */
.ev-when { display: flex; align-items: center; gap: 12px; }
.ev-cal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    padding: 7px 0 6px;
    border-radius: 12px;
    background: #e9f4ea;
    color: #1f6b2e;
    line-height: 1.05;
    flex: none;
}
.ev-cal b { font-size: 19px; font-weight: 800; }
.ev-cal i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; opacity: 0.75; }
.ev-cal--today { background: #fff1c2; color: #8a6a00; box-shadow: 0 0 0 2px #f2d980 inset; }
.ev-cal--past { background: #f0f1f3; color: #79837b; }
.ev-date-line { display: block; }
.ev-date-line b { font-weight: 700; }
.ev-rel { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--muted); }
tr.is-past td:not(:last-child) { opacity: 0.6; }

/* ---- dogadanja: modal obrasca ---- */
.ev-modal {
    max-width: min(680px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    text-align: left;
}
.ev-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

/* ---- dogadanja: kompaktna traka postavki modula ---- */
.ev-module { padding: 12px 18px; }
.ev-module-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* brzi gumbi: redak s tekstom iznad gumba + boja */
.hb-text-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hb-text-row .input { flex: 1; min-width: 240px; }
.hb-text-color { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); cursor: pointer; }
.ev-module-title { font-size: 0.95rem; }
.ev-module-row .check { margin: 0; white-space: nowrap; }
.ev-module-count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--muted);
    white-space: nowrap;
}
.ev-module-count .input { width: 74px; padding-top: 6px; padding-bottom: 6px; }
.ev-module-save { margin-left: auto; }

/* pregled loga podnozja na tamnoj podlozi (kakva je i na webu) */
.img-preview--dark { background: #141b2e; border-radius: 10px; padding: 12px; display: inline-block; }
.img-preview--dark img { max-height: 56px; display: block; }

/* ---- stablo mapa: sklopive glavne kategorije ---- */
.ftree-toggle {
    flex: none;
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-content: center;
    border: 0;
    background: none;
    color: var(--muted);
    cursor: pointer;
    border-radius: 5px;
    transition: transform 0.15s, background 0.15s, color 0.15s;
}
.ftree-toggle:hover { background: var(--accent-soft, #eef4ec); color: var(--accent, #1f9e33); }
.ftree-item.is-open > .ftree-row .ftree-toggle svg { transform: rotate(90deg); }
.ftree-toggle svg { transition: transform 0.15s; }
.ftree-toggle--spacer { cursor: default; }
.ftree-item.has-kids > .ftree-list { display: none; }
.ftree-item.is-open > .ftree-list { display: block; }

/* ---- brzi gumbi naslovnice: birac ikona + prikaz u listi ---- */
.hbi-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.hbi input { position: absolute; opacity: 0; pointer-events: none; }
.hbi-opt {
    width: 44px;
    height: 44px;
    display: grid;
    place-content: center;
    border: 1.5px solid var(--border-strong);
    border-radius: 11px;
    cursor: pointer;
    color: var(--muted);
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.hbi-opt:hover { border-color: var(--accent); color: var(--accent); }
.hbi input:checked + .hbi-opt {
    border-color: var(--accent);
    background: var(--accent-soft, #eef7ee);
    color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
/* meni → gumb „Katalog”: vlastite boje */
/* builder: blok "Tablica" - mreza polja */
.pb-tbl { display: grid; gap: 6px; margin: 8px 0 4px; }
.pb-tbl-row { display: grid; grid-template-columns: repeat(var(--tbl-cols, 3), minmax(0, 1fr)) 88px; gap: 6px; }
.pb-tbl-head .pb-tc { font-weight: 600; background: var(--bg); }
.pb-tbl .pb-tc { font-size: 13px; padding: 6px 8px; }
.pb-tbl-rowtools { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.pb-tbl-ins { font-weight: 700; color: var(--accent); }
.pb-tbl-x { color: var(--muted); font-size: 16px; line-height: 1; }
.pb-tbl-main { color: var(--border); }
.pb-tbl-main:hover { color: var(--accent); }
.pb-tbl-main.is-on { color: var(--accent); }
.pb-tbl-main.is-on svg { fill: currentColor; }
.pb-tbl-row.is-main .pb-tc { background: var(--accent-soft, #eef7ee); font-weight: 600; }
.pb-tbl-x:hover { color: #b91c1c; }
.pb-tbl-actions { display: flex; gap: 8px; margin-top: 2px; }

.cta-colors { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
.cta-colors[hidden] { display: none !important; }
.cta-color .label { display: block; margin-bottom: 4px; }

/* podnožje: blok „Društvene mreže” u mini builderu stupaca */
.fb-soc-hint { margin: 0 0 6px; }
.fb-soc-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 6px; }
.fb-soc-name { font-size: 12px; font-weight: 600; color: var(--muted); }
.fb-soc-row .input { font-size: 12px; padding: 5px 8px; }

/* naslovnica → sekcije odjela: postavke izgleda po odjelu */
.catsec-list { display: grid; gap: 12px; margin-bottom: 4px; }
.catsec {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}
.catsec[hidden] { display: none !important; }
.catsec-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.catsec .field-row { gap: 12px; }
.catsec .field { margin-bottom: 0; }

/* naslovnica → brze poveznice (pločice): odabir vrste odredišta i boje ikone */
.tile-kinds { display: flex; flex-wrap: wrap; gap: 16px; }
[data-tile-field][hidden] { display: none !important; }
.tile-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.tile-color input { position: absolute; opacity: 0; width: 0; height: 0; }
.tile-color-opt {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.tile-color input:checked + .tile-color-opt { border-color: var(--text); }
.tile-color input:focus-visible + .tile-color-opt { outline: 2px solid var(--accent); outline-offset: 2px; }
/* iste boje kakve pločica ima na webu */
.tile-sw--tamna  { background: linear-gradient(140deg, #1d4d2a, #0a140c); color: #f2e00a; }
.tile-sw--zelena { background: linear-gradient(140deg, #23b13a, #157a28); color: #ffffff; }
.tile-sw--zuta   { background: linear-gradient(140deg, #f2e00a, #e5d40c); color: #10130d; }
.row-muted td { opacity: .55; }

.hb-adm { display: inline-flex; align-items: center; gap: 10px; }
.hb-adm-ico {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-grid;
    place-content: center;
    background: var(--accent-soft, #eef7ee);
    color: var(--accent);
    flex: none;
}

/* builder: blok "Ikone i tekst" */
.pb-feat-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.pb-feat-row {
    display: grid;
    grid-template-columns: 190px 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
.pb-stat-row { grid-template-columns: 160px 1fr auto; }
.pb-hero-btnrows { display: grid; gap: 6px; margin: 6px 0; }
.pb-hero-btnrows .pb-stat-row { grid-template-columns: 1fr 1fr; }
.pb-hero-siderow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; }
.pb-hero-sideprev img { display: block; height: 48px; max-width: 140px; object-fit: contain; border-radius: 6px; background: #1f2a22; padding: 4px; }
@media (max-width: 860px) {
    .pb-feat-row { grid-template-columns: 1fr; }
}

/* builder: gumbi poravnanja u zaglavlju bloka */
.pb-align { display: inline-flex; gap: 2px; margin-right: 4px; }
.pb-align-btn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--card, #fff);
    color: var(--muted);
    cursor: pointer;
}
.pb-align-btn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* ============================================================
   Postavke: kartice (tabovi) + sigurnosne kopije
   ============================================================ */

.stabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 18px;
    padding: 5px;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.stab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: 600 13px/1 var(--font);
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    transition: background .12s, color .12s;
}
.stab svg { opacity: .75; }
.stab:hover { background: var(--bg); color: var(--text); }
.stab.is-active { background: var(--accent); color: #fff; }
.stab.is-active svg { opacity: 1; }

.bk-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.bk-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.bk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.bk-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--border);
}
.bk-name { font-size: 12.5px; color: var(--text); word-break: break-all; }
.bk-meta { font-size: 12px; color: var(--muted); }
.bk-btns { margin-left: auto; display: flex; gap: 6px; }
.bk-btns form { display: inline; }

/* crveni × za uklanjanje pregleda slike/priloga (pravilo CMS-a) */
.imgx { position: relative; }
.imgx-x {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: #d92d20;
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .35);
    transition: background .12s, transform .12s;
    z-index: 2;
}
.imgx-x:hover { background: #b42318; transform: scale(1.1); }
.imgx--inline .imgx-x {
    position: static;
    display: inline-grid;
    vertical-align: middle;
    margin-left: 6px;
    width: 20px;
    height: 20px;
    font-size: 13px;
}

/* točkica na tabu kad je vlastiti izgled naslovnice uključen */
.stab-dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; flex: none; }
.stab.is-active .stab-dot { background: #fff; }

/* gumb blok: stil/veličina + izbor ikone */
.pb-btn-opts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.pb-btn-opts .input { width: auto; display: inline-block; }
.pb-btn-ico { margin-top: 10px; }
.pb-btn-ico summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-soft, #6b7280); user-select: none; }
.pb-btn-ico summary:hover { color: var(--text); }
.pb-btn-ico-body { margin-top: 8px; }
.pb-ico-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-height: 170px;
    overflow: auto;
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.pb-ico-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card, #fff);
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.pb-ico-btn:hover { border-color: var(--accent); color: var(--accent); }
.pb-ico-btn.is-on { border-color: var(--accent); background: var(--accent); color: #fff; }
.pb-ico-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pb-ico-imgprev img { width: 26px; height: 26px; object-fit: contain; display: block; }

/* ============================================================
   Builder radni prostor: paleta lijevo · sadržaj · pregled desno
   ============================================================ */
.bwork {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
    margin-top: 6px;
}
.bwork-cap {
    margin: 0 0 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.bwork-left { position: sticky; top: 16px; }
.bwork-left .pb-add { flex-direction: column; gap: 5px; }
.bwork-left .pb-add-btn { width: 100%; justify-content: flex-start; text-align: left; }
.bwork-right { position: sticky; top: 16px; min-width: 0; }
.bwork-right .pv-card { position: static; padding: 12px; }
.bwork-right .pv-wrap { height: 400px; }
@media (max-width: 1280px) {
    .bwork { grid-template-columns: 168px minmax(0, 1fr); }
    .bwork-right { grid-column: 1 / -1; position: static; }
    .bwork-right .pv-wrap { height: 340px; }
}
@media (max-width: 820px) {
    .bwork { grid-template-columns: 1fr; }
    .bwork-left { position: static; }
    .bwork-left .pb-add { flex-direction: row; flex-wrap: wrap; }
    .bwork-left .pb-add-btn { width: auto; }
}

/* kloniranje stupca u bloku Stupci */
.pb-col-head { display: flex; align-items: center; gap: 6px; }
.pb-col-head .input { flex: 1; min-width: 0; }
.pb-col-clone {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--card, #fff);
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.pb-col-clone:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pb-col-del { font-size: 18px; line-height: 1; color: #d92d20; }
.pb-col-del:hover { border-color: #d92d20; color: #fff; background: #d92d20; }

/* dupliciranje bloka u zaglavlju (uz sklapanje) */
.pb-dup {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-soft, #9ca3af);
    cursor: pointer;
}
.pb-dup:hover { background: var(--accent-soft); color: var(--accent); }

/* sakriveni pregled: sadržaj dobiva punu širinu, ostaje chip za povratak */
.bwork.bwork--noprev { grid-template-columns: 168px minmax(0, 1fr) auto; }
.bwork-prev-show {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card, #fff);
    font: 600 12.5px/1 var(--font);
    color: var(--text-soft, #6b7280);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .1);
    transition: border-color .12s, color .12s;
    white-space: nowrap;
}
.bwork-prev-show:hover { border-color: var(--accent); color: var(--accent); }

/* stranice: traka blokova (ribbon) iznad platna — ikone bez teksta, naziv u tooltipu */
.pb-ribbon {
    position: sticky;
    top: 62px; /* ispod ljepljivog zaglavlja admina */
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    margin: 4px 0 14px;
    padding: 8px 6px 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
}
.pb-rgroup { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 10px; min-width: 0; }
.pb-rgroup + .pb-rgroup { border-left: 1px solid var(--border); }
.pb-rcap { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pb-ribbon .pb-add { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0; border: 0; }
.pb-ribbon .pb-add-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    border-color: transparent;
    background: transparent;
    font-size: 0; /* naziv ostaje za čitače ekrana, vizualno je u tooltipu */
    cursor: grab;
}
.pb-ribbon .pb-add-btn svg { width: 21px; height: 21px; color: var(--pbc, var(--accent)); }
.pb-ribbon .pb-add-btn:hover {
    border-color: color-mix(in srgb, var(--pbc, var(--accent)) 45%, var(--border));
    background: color-mix(in srgb, var(--pbc, var(--accent)) 10%, var(--surface));
    transform: translateY(-1px);
}
.pb-ribbon .pb-add-btn:active { cursor: grabbing; }
/* hover kartica trake: skica izgleda bloka + naziv + opis (gradi je admin.js) */
.pb-peek {
    position: fixed;
    z-index: 200;
    width: 230px;
    padding: 10px 10px 12px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--pbc, var(--accent));
    border-radius: 12px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    animation: pbPeekIn .14s ease-out;
}
.pb-peek[hidden] { display: none; }
.pb-peek::before {
    content: "";
    position: absolute;
    top: -9px;
    left: calc(var(--arrow, 50%) - 6px);
    border: 6px solid transparent;
    border-bottom-color: var(--pbc, var(--accent));
}
@keyframes pbPeekIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pb-peek svg { display: block; width: 100%; height: auto; margin-bottom: 8px; border-radius: 8px; background: var(--bg); }
.pb-peek-name { display: block; font-size: 13px; color: var(--text); }
.pb-peek-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--muted); }
.pb-peek .pk-a { fill: var(--pbc, var(--accent)); }
.pb-peek .pk-t { fill: color-mix(in srgb, var(--pbc, var(--accent)) 16%, #fff); }
.pb-peek .pk-l { fill: #e3e6ec; }
.pb-peek .pk-m { fill: #c5cbd6; }
.pb-peek .pk-d { fill: #1e293b; }
.pb-peek .pk-dl { fill: #475569; }
.pb-peek .pk-w { fill: #fff; }
.pb-peek .pk-o { fill: #fff; stroke: #cfd4dd; stroke-width: 1.2; }
.pb-peek .pk-q { fill: var(--pbc, var(--accent)); font: 700 44px/1 Georgia, serif; }
.pb-peek .pk-road { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.pb-peek .pk-ring { fill: none; stroke: #94a3b8; stroke-width: 2; }
.pb-peek .pk-hand { fill: none; stroke: var(--pbc, var(--accent)); stroke-width: 2.5; stroke-linecap: round; }
.bwork--ribbon { grid-template-columns: minmax(0, 1fr) 380px; }
.bwork--ribbon.bwork--noprev { grid-template-columns: minmax(0, 1fr) auto; }
.bwork--ribbon .bwork-right { top: 150px; }
.bwork--ribbon .bwork-right .pv-wrap { height: calc(100vh - 290px); min-height: 380px; }
@media (max-width: 1280px) {
    .bwork--ribbon, .bwork--ribbon.bwork--noprev { grid-template-columns: minmax(0, 1fr); }
    .bwork--ribbon .bwork-right { grid-column: 1 / -1; position: static; }
    .bwork--ribbon .bwork-right .pv-wrap { height: 420px; min-height: 0; }
}
@media (max-width: 820px) {
    .pb-ribbon { position: static; }
    .pb-rgroup { padding: 0 4px; }
    .pb-rgroup + .pb-rgroup { border-left: 0; border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; width: 100%; }
    .pb-rgroup:first-child { width: 100%; }
    .bwork--ribbon .pb-canvas { min-height: 50vh; }
}

/* blok "Naslov s ikonom" — boja tipa (indigo) */
.pb-block[data-type="icontext"], .pb-add-btn[data-pb-add="icontext"], .pb-col-add-btn[data-pb-ct="icontext"] { --pbc: #4f46e5; }

/* izgled bloka: kist u zaglavlju + red postavki */
.pb-stylebtn {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-soft, #9ca3af);
    cursor: pointer;
}
.pb-stylebtn:hover { background: var(--accent-soft); color: var(--accent); }
.pb-stylebtn.is-set { color: var(--accent); }
.pb-style-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 8px 10px;
    margin-bottom: 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.pb-style-row .input { width: auto; display: inline-block; }

/* blok "Novosti" — boja tipa (cijan) */
.pb-block[data-type="news"], .pb-add-btn[data-pb-add="news"], .pb-col-add-btn[data-pb-ct="news"] { --pbc: #0891b2; }

/* ============================================================
   Uređivanje stranice: kompaktni vrh bez praznog prostora
   (Naslov · Objava · SEO u jednom redu, predlošci ispod pune širine)
   ============================================================ */
.pgtop-wide { margin-bottom: 16px; }
.pgtop-wide .tpl-details { margin-bottom: 0; }

/* gornja traka: naslov (veliki, bez okvira) lijevo · status, podnožje, spremi desno — jedan niski red */
.pgbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
    margin-bottom: 16px;
    border-left: 4px solid var(--accent);
}
.pgbar-title { flex: 1; min-width: 0; }
.pgbar-label {
    display: block;
    margin: 0 0 2px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}
.pgbar-title .pgbar-label { color: var(--accent); margin-bottom: 6px; }
/* naslov = najvažnije polje: obojeno, veliko, s jasnim fokusom */
.pgbar-input {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: 2px solid color-mix(in srgb, var(--accent) 38%, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
    color: var(--text);
    font: 700 24px/1.25 var(--font);
    letter-spacing: -.015em;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pgbar-input::placeholder { color: color-mix(in srgb, var(--accent) 45%, var(--muted)); font-weight: 600; }
.pgbar-input:hover { border-color: color-mix(in srgb, var(--accent) 65%, var(--border)); }
.pgbar-input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-ring); }
.pgbar-slug { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 7px; padding-left: 4px; font-size: 12.5px; color: var(--muted); }
.pgbar-slug .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pgbar-slug a.mono { color: var(--accent); }
.pgbar-slug .btn-icon { width: 24px; height: 24px; flex: none; }
.pgbar-slug .btn-icon svg { width: 13px; height: 13px; }
.pgbar-note { white-space: nowrap; }
.pgbar-side { display: flex; align-items: flex-end; gap: 14px; flex: none; }
.pgbar-field .input { min-width: 150px; }
.pgbar-check { margin: 0 0 9px; white-space: nowrap; font-size: 13.5px; }
@media (max-width: 1100px) {
    .pgbar { flex-direction: column; align-items: stretch; gap: 14px; }
    .pgbar-side { flex-wrap: wrap; }
    .pgbar-note { display: none; }
}

/* platno bloka: iscrtana zona — jasno je da se ovamo povlače blokovi */
.pb-canvas {
    position: relative;
    align-self: stretch; /* barem visoko kao palete s obje strane */
    min-height: calc(100vh - 120px);
    padding: 14px;
    border: 2px dashed var(--border-strong);
    border-radius: 14px;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--muted) 22%, transparent) 1px, transparent 1.2px) 0 0 / 18px 18px,
        color-mix(in srgb, var(--bg, #f5f6fa) 60%, var(--surface));
    display: flex;
    flex-direction: column;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.pb-canvas > .pb-list { margin: 0; }
.pb-canvas.is-drag { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
.pb-canvas.is-over {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 5%, var(--surface));
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.pb-canvas-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 16vh 16px 40px; /* poruka u vidljivom dijelu, ne na sredini visokog platna */
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
}
.pb-canvas-empty[hidden] { display: none; }
.pb-canvas-empty strong { color: var(--text); font-size: 16px; }
.pb-canvas-ico {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent);
    transition: transform .2s;
}
.pb-canvas.is-over .pb-canvas-ico { transform: scale(1.1); }
/* „povucite ovamo” na dnu kad već ima blokova */
.pb-canvas-tail {
    margin: 12px 0 0;
    padding: 14px;
    border: 1.5px dashed var(--border-strong);
    border-radius: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--muted);
}
.pb-canvas-empty:not([hidden]) ~ .pb-canvas-tail { display: none; }
.pb-canvas.is-drag .pb-canvas-tail { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pb-drop-mark {
    position: absolute;
    left: 14px;
    right: 14px;
    height: 4px;
    border-radius: 4px;
    background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
    pointer-events: none;
}
.pb-drop-mark[hidden] { display: none; }
.pb-drop-mark::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
}
/* blokovi iz palete se mogu povući */
.bwork-left .pb-add-btn[draggable="true"] { cursor: grab; }
.bwork-left .pb-add-btn[draggable="true"]:active { cursor: grabbing; }

/* ============================================================
   Dokumenti: AJAX pretraga svih dokumenata (s putanjom mape)
   ============================================================ */
.docsearch {
    position: relative;
    flex: 1;
    max-width: 480px;
    min-width: 220px;
}
.docsearch-ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}
.docsearch .input { padding-left: 36px; }
.docsearch-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 90;
    max-height: 420px;
    overflow: auto;
    background: var(--card, #fff);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 40px -14px rgba(16, 24, 40, .3);
    padding: 6px;
}
.ds-empty { padding: 14px 12px; font-size: 13px; color: var(--muted); }
.ds-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
}
.ds-row:hover { background: var(--bg); text-decoration: none; }
.ds-row .ext { flex: none; }
.ds-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ds-title { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-path {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-path svg { flex: none; }
.ds-meta { flex: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ds-dl {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: var(--text-soft, #6b7280);
}
.ds-dl:hover { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 900px) {
    .docs-toolbar { flex-wrap: wrap; }
    .docsearch { order: 3; max-width: none; flex-basis: 100%; }
}

/* cilj pretrage: kratko istakni pronađeni redak dokumenta */
tr:target { animation: dok-hit 2.4s ease-out; }
@keyframes dok-hit {
    0%, 55% { background: color-mix(in srgb, var(--accent) 16%, transparent); }
    100% { background: transparent; }
}

/* hero gumbi (Slider): popis s crvenim × i forma za dodavanje */
.hg-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.hg-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
.hg-row .ext { flex: none; }
.hg-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hg-body strong { font-size: 13.5px; }
.hg-x {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: #d92d20;
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(16, 24, 40, .3);
    transition: background .12s, transform .12s;
}
.hg-x:hover { background: #b42318; transform: scale(1.1); }
.hg-add { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.hg-add .field { margin: 0; flex: 1; min-width: 220px; }
.hg-add .hg-add-btn { flex: none; min-width: 0; }

/* hero gumbi: uredivi redak (naziv + dokument s × + zamjena + spremi) */
.hg-edit { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.hg-label-in { width: 200px; flex: none; }
.hg-file { display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card, #fff); }
.hg-file-in { width: 230px; flex: none; }
.hg-row { flex-wrap: wrap; }

/* postavke slidera: uredne dvije grupe */
.sl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 24px;
    align-items: start;
}
.sl-col > .label { margin-bottom: 10px; }
.sl-check {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
}
.sl-check:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-soft); }
.sl-check > span { display: grid; gap: 2px; }
.sl-check small { color: var(--muted); font-size: 12px; line-height: 1.4; }
/* podpostavka koja pripada kvačici iznad (npr. stranica gumba „Kontakt”) */
.sl-sub {
    margin: -4px 0 12px 22px;
    padding: 10px 12px;
    border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--border));
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--accent-soft) 60%, transparent);
}
.sl-sub .label { margin-bottom: 6px; }
.sl-check:has(input:not(:checked)) + .sl-sub { opacity: 0.45; }
@media (max-width: 1000px) {
    .sl-grid { grid-template-columns: 1fr; }
}

/* facebook objava u kartici Objava */
.fbpub { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); display: grid; gap: 8px; }
.fbpub .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.fbpub-ok { color: #067647; font-weight: 600; }
.fbpub .hint { margin: 0; }

/* ---- boje tipova polja obrasca (kao blokovi buildera) ---- */
.ff-row[data-type="text"],     .pb-add-btn[data-ff-add="text"]     { --pbc: #7c3aed; }
.ff-row[data-type="textarea"], .pb-add-btn[data-ff-add="textarea"] { --pbc: #65a30d; }
.ff-row[data-type="email"],    .pb-add-btn[data-ff-add="email"]    { --pbc: #0284c7; }
.ff-row[data-type="tel"],      .pb-add-btn[data-ff-add="tel"]      { --pbc: #16a34a; }
.ff-row[data-type="number"],   .pb-add-btn[data-ff-add="number"]   { --pbc: #d97706; }
.ff-row[data-type="date"],     .pb-add-btn[data-ff-add="date"]     { --pbc: #db2777; }
.ff-row[data-type="select"],   .pb-add-btn[data-ff-add="select"]   { --pbc: #2563eb; }
.ff-row[data-type="radio"],    .pb-add-btn[data-ff-add="radio"]    { --pbc: #9333ea; }
.ff-row[data-type="checkbox"], .pb-add-btn[data-ff-add="checkbox"] { --pbc: #0d9488; }
.ff-row[data-type="file"],     .pb-add-btn[data-ff-add="file"]     { --pbc: #a16207; }
.ff-row[data-type="consent"],  .pb-add-btn[data-ff-add="consent"]  { --pbc: #059669; }
.ff-cols[data-type="cols"],    .pb-add-btn[data-ff-add="cols"]     { --pbc: #ea580c; }

.ff-row[data-type], .ff-cols[data-type] { border-left: 4px solid var(--pbc, var(--border)); }
.ff-row[data-type] > .ff-head, .ff-cols[data-type] > .ff-head {
    background: color-mix(in srgb, var(--pbc, #64748b) 6%, var(--bg));
}
.ff-row[data-type] > .ff-head .ff-type-label, .ff-cols[data-type] > .ff-head .ff-type-label,
.ff-row[data-type] > .ff-head .ff-ico, .ff-cols[data-type] > .ff-head .ff-ico { color: var(--pbc, var(--text-soft)); }
.pb-add-btn[data-ff-add] svg { color: var(--pbc, currentColor); }
.pb-add-btn[data-ff-add]:hover {
    border-color: color-mix(in srgb, var(--pbc, #64748b) 55%, var(--border));
    background: color-mix(in srgb, var(--pbc, #64748b) 7%, #fff);
    color: color-mix(in srgb, var(--pbc, #64748b) 80%, #000);
}

/* obojeni i mali gumbi za dodavanje polja unutar Dva stupca */
.pb-col-add-btn[data-ff-add] svg { color: var(--pbc, currentColor); }
.pb-col-add-btn[data-ff-add] { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pbc, #64748b) 65%, transparent); }
.pb-col-add-btn[data-ff-add]:hover {
    border-color: color-mix(in srgb, var(--pbc, #64748b) 55%, var(--border));
    color: color-mix(in srgb, var(--pbc, #64748b) 85%, #000);
    background: color-mix(in srgb, var(--pbc, #64748b) 7%, #fff);
}
.pb-col-add-btn[data-ff-add="text"]     { --pbc: #7c3aed; }
.pb-col-add-btn[data-ff-add="textarea"] { --pbc: #65a30d; }
.pb-col-add-btn[data-ff-add="email"]    { --pbc: #0284c7; }
.pb-col-add-btn[data-ff-add="tel"]      { --pbc: #16a34a; }
.pb-col-add-btn[data-ff-add="number"]   { --pbc: #d97706; }
.pb-col-add-btn[data-ff-add="date"]     { --pbc: #db2777; }
.pb-col-add-btn[data-ff-add="select"]   { --pbc: #2563eb; }
.pb-col-add-btn[data-ff-add="radio"]    { --pbc: #9333ea; }
.pb-col-add-btn[data-ff-add="checkbox"] { --pbc: #0d9488; }
.pb-col-add-btn[data-ff-add="file"]     { --pbc: #a16207; }
.pb-col-add-btn[data-ff-add="consent"]  { --pbc: #059669; }

/* InTeh CMS logo („i” + blokovi): žuta točka slova i lagano pulsira */
.bm-dot { animation: bmBlink 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes bmBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) { .bm-dot { animation: none; } }

/* ---- Župa ---- */
.zp-today { display: flex; align-items: center; gap: 14px; }
.zp-today strong { display: block; font-size: 1.05rem; }
.zp-today small { color: var(--muted); }
.zp-lit-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.zp-lit-dot--sm { width: 12px; height: 12px; display: inline-block; vertical-align: -1px; margin-right: 6px; }
.zp-feasts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.zp-feasts time { font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.zp-add { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.zp-days { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.zp-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.zp-row .field { flex: 1 1 180px; margin: 0; }
.zp-create { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.zp-create-item { display: grid; gap: 8px; justify-items: start; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.zp-create-item small { color: var(--muted); line-height: 1.45; }
.zp-actions { white-space: nowrap; }
.zp-actions form { display: inline; }
/* modal s obrascem (uređivanje retka) */
.modal.modal--form { max-width: 520px; }
.modal--form form { display: grid; gap: 12px; margin-bottom: 18px; }
.modal--form .field { margin: 0; }

/* ---- dokumenti: panel otvorene mape (explorer) ---- */
.folder-panel { display: grid; gap: 16px; }
.folder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.folder-head .actions form { display: inline; }
.folder-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 700; }
.folder-title svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.folder-title small { font-size: 13px; font-weight: 500; color: var(--muted); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.fgrid-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "ico name" "ico meta";
    align-items: center;
    column-gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fafbfd;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.fgrid-tile:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); background: var(--accent-soft); text-decoration: none; transform: translateY(-1px); }
.fgrid-ico { grid-area: ico; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); }
.fgrid-ico svg { width: 20px; height: 20px; }
.fgrid-name { grid-area: name; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fgrid-meta { grid-area: meta; font-size: 12px; color: var(--muted); }
.upload-bar { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 14px; align-items: stretch; }
.upload-bar .upload-meta { justify-content: flex-end; }
.upload-bar .upload-meta .btn { justify-content: center; }
.ftree-stats { margin: 12px 4px 0; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
@media (max-width: 700px) { .upload-bar { grid-template-columns: 1fr; } }
.fgrid-tile.dnd-over { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-ring); }
/* stablo mapa: ikone + (podmapa) i olovka uvijek vidljive (prigušene), jače na hover; na dodir uvijek pune */
.ftree-actions { opacity: .45; }
.ftree-actions .btn-icon { width: 26px; height: 26px; }
.ftree-actions .btn-icon svg, .ftree-add svg { width: 15px; height: 15px; }
@media (hover: none) { .ftree-actions { opacity: 1; } }
.ftree-card .card-head form { margin: 0; }
.ftree-add { color: var(--accent); background: var(--accent-soft); }
.ftree-hint { margin: 10px 4px 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.ftree-card .card-head { gap: 8px; }
.ftree-card .card-head .card-title { margin-right: auto; }
.ftree-all {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: #fff; color: var(--text-soft, #475467); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.ftree-all:hover { border-color: var(--accent); color: var(--accent); }
.ftree-all svg { width: 14px; height: 14px; }
.stab-count { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; line-height: 1.5; }
/* župa: popis lijevo, obrazac „Dodaj” desno (ljepljiv) */
.zp-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.zp-split[hidden] { display: none; }
.zp-split > .card { margin: 0; }
.zp-side { position: sticky; top: 20px; }
.zp-side .card-title { margin: 0 0 14px; }
.zp-form { display: grid; gap: 12px; }
.zp-form .field { margin: 0; }
.zp-form .zp-row .field { flex: 1 1 120px; }
.zp-form > .btn { justify-content: center; }
.zp-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
.zp-day { position: relative; cursor: pointer; }
.zp-day input { position: absolute; opacity: 0; pointer-events: none; }
.zp-day span {
    display: inline-block; min-width: 40px; padding: 6px 8px; text-align: center;
    border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600; background: #fff;
    transition: background .12s, border-color .12s, color .12s;
}
.zp-day:hover span { border-color: var(--accent); }
.zp-day input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.zp-day input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-ring); }
@media (max-width: 1100px) {
    .zp-split { grid-template-columns: minmax(0, 1fr); }
    .zp-side { position: static; order: -1; }
}

/* ---- galerija (picker): mjeseci, radnje na slici, datum ---- */
.mp-thumb { position: relative; }
.mp-actions {
    position: absolute; left: 8px; bottom: 8px; display: flex; gap: 5px;
    opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.mp-item:hover .mp-actions, .mp-item:focus-within .mp-actions { opacity: 1; transform: none; }
@media (hover: none) { .mp-actions { opacity: 1; transform: none; } }
.mp-act {
    display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 8px; background: rgba(255, 255, 255, .94); color: var(--text);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .22); cursor: pointer;
}
.mp-act svg { width: 15px; height: 15px; }
.mp-act:hover { background: var(--accent); color: #fff; }
.mp-act--danger:hover { background: #d92d20; }
.mp-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mp-date {
    position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 6px;
    background: rgba(16, 24, 40, .62); color: #fff; font-size: 11px; font-weight: 600; pointer-events: none;
}
.mp-filters { display: flex; gap: 8px; margin-right: auto; }
.mp-filters .input { width: auto; min-width: 150px; height: 38px; padding-top: 0; padding-bottom: 0; font-size: 13.5px; }
@media (max-width: 700px) { .mp-filters { width: 100%; order: 3; } .mp-filters .input { flex: 1; min-width: 0; } }
/* osvrti: podesivi naziv i tekstovi */
.rv-texts { padding: 0; }
.rv-texts-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.rv-texts-sum::-webkit-details-marker { display: none; }
.rv-texts-sum small { color: var(--muted); font-weight: 400; }
.rv-texts-sum svg { flex: none; color: var(--muted); transition: transform .15s; }
.rv-texts[open] .rv-texts-sum { border-bottom: 1px solid var(--border); }
.rv-texts[open] .rv-texts-sum svg { transform: rotate(180deg); }
.rv-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 20px 0; }
.rv-presets .label { margin: 0 4px 0 0; }
.rv-presets form { margin: 0; }
.rv-texts-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 20px 20px; }
.rv-texts-form .field { margin: 0; }
.rv-texts-form .rv-wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .rv-texts-form { grid-template-columns: minmax(0, 1fr); } }
.banner-danger { background: #fef3f2; border: 1px solid #f4b4ae; color: #912018; }

/* ---- uređivanje novosti: istaknut naslov + sadržaj do dna desnog stupca ---- */
.news-title-card { border-left: 4px solid var(--accent); }
.news-title-label {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.news-title-input {
    font-size: 22px; font-weight: 700; line-height: 1.3; padding: 12px 16px;
    background: #fbfcfe; border-width: 1.5px;
}
.news-title-input::placeholder { color: #b3b8c4; font-weight: 600; }
.news-title-input:focus { background: #fff; }
/* lijevi stupac se rasteže do visine desnog; kartica sadržaja i editor popune ostatak */
.editor-grid--fill { align-items: stretch; }
.editor-grid--fill .editor-main { display: flex; flex-direction: column; }
.editor-grid--fill .news-body-card { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 0; }
.editor-grid--fill .news-body-card .field-body-tall { flex: 1 1 auto; display: flex; flex-direction: column; margin-bottom: 0; }
.editor-grid--fill .news-body-card .rte-wrap { flex: 1 1 auto; display: flex; flex-direction: column; }
.editor-grid--fill .news-body-card .rte-area { flex: 1 1 auto; }
@media (max-width: 1100px) { .news-title-input { font-size: 19px; } }
/* poveznica članka ispod naslova (lijevo), brojač znakova desno u istom redu */
.news-title-card .field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; }
.news-title-card .field > .news-title-label, .news-title-card .field > .news-title-input { grid-column: 1 / -1; }
.news-title-card .field > .charcount { grid-column: 2; grid-row: 3; align-self: start; margin: 10px 0 0; }
.permalink { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin-top: 8px; font-size: 13px; color: var(--muted); }
.permalink > svg { flex: none; color: var(--accent); }
.permalink-url { min-width: 0; overflow-wrap: anywhere; line-height: 1.45; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.permalink-url strong { color: var(--text); font-weight: 700; }
.permalink.is-empty .permalink-url strong { color: #b3b8c4; font-weight: 500; font-style: italic; }
.permalink.is-empty .permalink-copy { opacity: .35; pointer-events: none; }
.permalink-copy { flex: none; width: 26px; height: 26px; }
.permalink-copy svg { width: 14px; height: 14px; }
.permalink-note { flex: none; padding: 1px 7px; border-radius: 999px; background: #fff7e8; color: #93500b; font-size: 11.5px; font-weight: 600; }

/* ---- uređivanje novosti: kartice desnog stupca razlikuju se bojom i ikonom ---- */
.side-card { --sc: #475467; --sc-soft: #f2f4f7; border-top: 3px solid var(--sc); }
.side-card--objava  { --sc: var(--accent); --sc-soft: var(--accent-soft); background: linear-gradient(180deg, var(--accent-soft) 0, var(--surface) 90px); }
.side-card--docs    { --sc: #2563eb; --sc-soft: #eaf1ff; }
.side-card--cover   { --sc: #7c3aed; --sc-soft: #f1eafe; }
.side-card--gallery { --sc: #d97706; --sc-soft: #fff4e2; }
.side-card--files   { --sc: #64748b; --sc-soft: #eef1f5; }
.side-card--video   { --sc: #dc2626; --sc-soft: #fdecec; }
.side-card > .card-title { display: flex; align-items: center; gap: 9px; }
.sc-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--sc-soft); color: var(--sc); }
.sc-ico svg { width: 15px; height: 15px; }
.side-card--objava .sc-ico { background: var(--accent); color: #fff; }
/* novost: izbor veličine galerije */
.gal-size { margin-bottom: 14px; }
.gal-size-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gal-size-opt { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px 7px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; text-align: center; background: #fff; transition: border-color .12s, background .12s; }
.gal-size-opt input { position: absolute; opacity: 0; pointer-events: none; }
.gal-size-opt strong { font-size: 12.5px; }
.gal-size-opt small { font-size: 11px; color: var(--muted); }
.gal-size-opt:hover { border-color: var(--sc, var(--accent)); }
.gal-size-opt:has(input:checked) { border-color: var(--sc, var(--accent)); background: var(--sc-soft, var(--accent-soft)); box-shadow: 0 0 0 1px var(--sc, var(--accent)); }
.gal-size-opt:has(input:focus-visible) { outline: 2px solid var(--sc, var(--accent)); outline-offset: 2px; }
.gal-size-ico { display: grid; gap: 2px; width: 34px; height: 20px; margin-bottom: 3px; }
.gal-size-ico i { border-radius: 2px; background: var(--sc, var(--accent)); opacity: .55; }
.gal-size-ico--s { grid-template-columns: repeat(5, 1fr); }
.gal-size-ico--m { grid-template-columns: repeat(3, 1fr); }
.gal-size-ico--m i:nth-child(n+4) { display: none; }
.gal-size-ico--l { grid-template-columns: repeat(2, 1fr); }
.gal-size-ico--l i:nth-child(n+3) { display: none; }
/* panel taba mora se sakriti i kad ima vlastiti display (grid/flex) */
[data-stab-panel][hidden] { display: none !important; }

/* traka „Spremi” pri dnu forme postavki (ljepljiva) + upute po tabovima */
.save-bar {
    position: sticky; bottom: 12px; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
    margin-top: 20px; padding: 12px 14px 12px 18px;
    border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
    box-shadow: 0 8px 24px -10px rgba(16, 24, 40, .25);
    transition: background .15s, border-color .15s;
}
.save-bar-state { font-size: 13px; color: var(--muted); }
.save-bar.is-dirty { background: #fff7e8; border-color: #f2ce8a; }
.save-bar.is-dirty .save-bar-state { color: #93500b; font-weight: 600; }
.save-now { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.tab-hint { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 13px; }

/* ---- Župa → Liturgija: napomena o automatici + kalendar cijele godine ---- */
.zp-auto { display: flex; gap: 12px; margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; line-height: 1.55; color: var(--text); }
.zp-auto > svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.zp-auto strong:first-child { display: block; margin-bottom: 2px; }
.zp-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.zp-cal-month { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.zp-cal-month.is-now { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.zp-cal-month h3 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.zp-cal-month.is-now h3 { color: var(--accent); }
.zp-cal-month ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.zp-cal-month li { display: grid; grid-template-columns: auto 3.4em minmax(0, 1fr); align-items: baseline; gap: 6px; font-size: 13px; font-weight: 600; }
.zp-cal-month li .zp-lit-dot--sm { margin: 0; align-self: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.zp-cal-month time { font-variant-numeric: tabular-nums; font-weight: 700; }
.zp-cal-month time small { font-weight: 500; color: var(--muted); font-size: 11px; }
.zp-cal-month li.is-memorial { font-weight: 400; color: var(--text-soft, #475467); }
.zp-cal-month li.is-past { opacity: .45; }
.zp-cal-month li.is-next { color: var(--accent); }
.zp-cal-month li.is-next em { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; }
.zp-cal-month li.is-patron span::before { content: "✣ "; color: #c9a227; }
.zp-cal-empty { margin: 0; color: var(--muted); }

/* ============================================================
   Prijava — velika podijeljena kartica (lijevo pozdrav, desno PIN)
   ============================================================ */
.auth-card--split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    max-width: 980px;
    min-height: 580px;
    padding: 0;
    overflow: hidden;
    text-align: left;
    border-radius: 26px;
}
.auth-show {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 36px 38px 30px;
    color: #eaf6ec;
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(41, 185, 143, .35), transparent 60%),
        radial-gradient(90% 70% at 100% 100%, rgba(56, 132, 255, .30), transparent 60%),
        linear-gradient(150deg, #0f3a1c 0%, #135c2a 45%, #0e2f3d 100%);
    overflow: hidden;
}
/* suptilna mreža točkica */
.auth-show::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .11) 1px, transparent 1.4px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}
.auth-show > * { position: relative; }
.auth-show .brand-text { color: #fff; }
.auth-show .auth-brand { margin: 0; }
.auth-site-logo { display: inline-flex; align-items: center; height: 58px; max-width: 220px; margin-bottom: 18px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .95); }
.auth-site-logo img { max-height: 42px; max-width: 196px; object-fit: contain; }
.auth-hello { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #a7e3b3; letter-spacing: .02em; }
.auth-site { margin: 0; font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.auth-date { margin: 10px 0 0; font-size: 14px; color: rgba(234, 246, 236, .72); }
.auth-date::first-letter { text-transform: uppercase; }
.auth-feats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-feats li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .9); }
.auth-feats li > span { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.auth-feats svg { width: 17px; height: 17px; color: #bdf0c7; }
.auth-secure { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: rgba(234, 246, 236, .65); }
.auth-secure svg { flex: none; width: 16px; height: 16px; color: #8fe0a0; }

.auth-main { display: flex; flex-direction: column; justify-content: center; padding: 48px 46px 30px; }
.auth-card--split .auth-title { font-size: 28px; margin-bottom: 6px; }
.auth-card--split .auth-sub { font-size: 14.5px; margin-bottom: 26px; }
.auth-card--split .pin-boxes { justify-content: flex-start; gap: 10px; margin: 8px 0 22px; }
.auth-card--split .pin-box { width: 56px; height: 66px; font-size: 26px; border-radius: 15px; }
.auth-card--split .pin-form .label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.auth-card--split .pin-form .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; font-size: 16px; }
.auth-card--split .pin-error { text-align: left; }
.auth-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 30px; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none; }
.auth-back:hover { color: var(--accent); }
.auth-card--split .auth-credit { margin: 0; }

@media (max-width: 860px) {
    .auth-card--split { grid-template-columns: minmax(0, 1fr); max-width: 480px; min-height: 0; }
    .auth-show { padding: 24px 24px 22px; gap: 14px; }
    .auth-feats, .auth-secure { display: none; }
    .auth-site-logo { height: 46px; margin-bottom: 10px; }
    .auth-site-logo img { max-height: 32px; }
    .auth-main { padding: 28px 24px 22px; }
    .auth-card--split .pin-boxes { justify-content: center; }
    .auth-card--split .auth-title { font-size: 24px; }
    .auth-bottom { padding-top: 22px; }
}
@media (max-width: 430px) {
    .auth-card--split { border-radius: 20px; }
    .auth-card--split .pin-boxes { gap: 6px; }
    .auth-card--split .pin-box { width: 44px; height: 56px; font-size: 22px; border-radius: 12px; }
    .auth-bottom { justify-content: center; text-align: center; }
}
/* builder, blok Gumb: datoteka umjesto poveznice */
.pb-btn-file { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pb-btn-file-lab { font-size: 13px; color: var(--muted); }
.pb-btn-file-state { font-size: 12.5px; font-weight: 700; color: var(--accent); }
.pb-btn-file-hint { margin: 4px 0 0; font-size: 12px; }
/* galerija (picker): dokument kao sličica */
.mp-doc { display: grid; place-items: center; width: 100%; height: 100%; font-size: 22px; font-weight: 800; letter-spacing: .04em; color: #fff; background: #64748b; }
.mp-doc--pdf { background: linear-gradient(135deg, #f04438, #b42318); }
.mp-doc--doc { background: linear-gradient(135deg, #2e90fa, #175cd3); }
.mp-doc--xls { background: linear-gradient(135deg, #32d583, #067647); }

/* ---- Postavke: stil trake podstranica (mini pregled u bojama teme) ---- */
.phs-field { margin-top: 6px; }
.phs-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.phs-pick { position: relative; display: grid; gap: 6px; padding: 7px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.phs-pick input { position: absolute; opacity: 0; pointer-events: none; }
.phs-pick:hover { border-color: var(--accent); }
.phs-pick:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.phs-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.phs-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.25; }
.phs-demo { position: relative; display: block; height: 54px; border-radius: 6px; overflow: hidden; background: var(--dpa); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.phs-demo i {
    position: absolute; left: 0; right: 0; top: 0; height: 28px;
    background: radial-gradient(130% 120% at 70% -20%, color-mix(in srgb, var(--dd) 72%, var(--dp)), var(--dd));
    clip-path: ellipse(140% 100% at 50% 0%);
}
.phs-demo::after { content: ""; position: absolute; left: 10px; right: 40%; bottom: 8px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--dd) 70%, transparent); }
.phs-demo--luk-dubok i { clip-path: ellipse(85% 100% at 50% 0%); background: linear-gradient(160deg, var(--dpd), var(--dd)); }
.phs-demo--val i { clip-path: none; background: linear-gradient(160deg, var(--dpd), var(--dd));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v72c-150 32-300 32-450 0S450 40 300 70 75 96 0 78z'/%3E%3C/svg%3E") 0 0 / 100% 100%;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1200v72c-150 32-300 32-450 0S450 40 300 70 75 96 0 78z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.phs-demo--kosi i { clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%); background: linear-gradient(115deg, var(--dd), var(--dpd), color-mix(in srgb, var(--dp) 70%, var(--da))); }
.phs-demo--kosi-lijevo i { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%); background: color-mix(in srgb, var(--dd) 92%, var(--dp)); }
.phs-demo--strelica i { clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); background: linear-gradient(115deg, var(--dd), var(--dpd), color-mix(in srgb, var(--dp) 70%, var(--da))); }
.phs-demo--cikcak i { clip-path: none; background: linear-gradient(120deg, var(--dp), var(--dpd));
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 5px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x;
            mask: linear-gradient(#000, #000) top / 100% calc(100% - 5px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 5px repeat-x; }
.phs-demo--kapi i { clip-path: none; background: linear-gradient(120deg, var(--dp), var(--dpd));
    -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 5px) no-repeat, radial-gradient(circle 5px at 50% 0, #000 98%, #0000) bottom / 12px 5px repeat-x;
            mask: linear-gradient(#000, #000) top / 100% calc(100% - 5px) no-repeat, radial-gradient(circle 5px at 50% 0, #000 98%, #0000) bottom / 12px 5px repeat-x; }
.phs-demo--ravni i { clip-path: none; background: color-mix(in srgb, var(--dd) 92%, var(--dp)); }
.phs-demo--kartica i { clip-path: none; left: 5px; right: 5px; top: 4px; height: 24px; border-radius: 6px; background: radial-gradient(90% 160% at 100% 0%, color-mix(in srgb, var(--da) 35%, transparent), transparent 60%), linear-gradient(120deg, var(--dd), var(--dpd)); }
.phs-demo--gradijent i { background: linear-gradient(115deg, var(--dd), var(--dpd), color-mix(in srgb, var(--dp) 70%, var(--da))); }
.phs-demo--akcent i { clip-path: none; background: linear-gradient(100deg, var(--da), color-mix(in srgb, var(--da) 70%, var(--dp))); }
.phs-demo--svijetla i { clip-path: none; background: color-mix(in srgb, var(--dp) 14%, var(--dpa)); border-bottom: 1px solid color-mix(in srgb, var(--dp) 20%, transparent); }
.phs-demo--dvobojni i { clip-path: none; background: linear-gradient(105deg, color-mix(in srgb, var(--dd) 92%, var(--dp)) 0 58%, var(--dp) 58% 78%, var(--da) 78% 100%); }
.phs-demo--aurora i { background: radial-gradient(60% 140% at 15% 0%, color-mix(in srgb, var(--dp) 75%, transparent), transparent 70%), radial-gradient(50% 130% at 85% 10%, color-mix(in srgb, var(--da) 55%, transparent), transparent 70%), var(--dd); }
.phs-demo--tockice i { clip-path: none; background: radial-gradient(rgba(255, 255, 255, .28) 1px, transparent 1.3px) 0 0 / 6px 6px, var(--dd); }
.phs-demo--linije i { clip-path: none; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 6px), var(--dd); }
.phs-demo--mreza i { clip-path: none; background: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px) 0 0 / 8px 8px, var(--dd); }
.phs-demo--tanka i { clip-path: none; height: 12px; background: color-mix(in srgb, var(--dd) 92%, var(--dp)); }
.phs-demo--visoka i { height: 38px; }
.phs-demo--traka i { clip-path: none; height: 4px; background: linear-gradient(100deg, var(--da), color-mix(in srgb, var(--da) 70%, var(--dp))); }

/* ---- jasno stanje prijelaza mišem na poljima (bijeli „I” kursor zna biti nevidljiv na bijelom polju) ---- */
.input { transition: border-color .12s, box-shadow .12s, background-color .12s; }
input.input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), textarea.input { cursor: text; }
.input:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
    background-color: color-mix(in srgb, var(--accent) 4%, var(--surface));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}
.rte-wrap { transition: border-color .12s, box-shadow .12s; }
.rte-wrap:hover:not(:focus-within) { border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.rte-area { cursor: text; }
.pin-box:hover:not(:focus) { border-color: color-mix(in srgb, var(--accent) 65%, var(--border-strong)); background: #fff; }

/* galerija: mape (putanja, kartice mapa) + skupno premještanje */
.media-folders { margin-bottom: 20px; }
.media-folders .ftree-hint { margin: 0; }
.media-move-form { display: inline-flex; gap: 6px; align-items: center; }
.media-move-form select { width: auto; max-width: 220px; padding-block: 6px; font-size: 13px; }
.media-bulkbar .actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.media-item[draggable="true"] { cursor: grab; }
.mp-filters select[hidden] { display: none; }
/* galerija na mobitelu: alati i statistika se prelamaju (bez vodoravnog pomaka) */
.media-toolbar { flex-wrap: wrap; min-width: 0; }
@media (max-width: 600px) {
    .media-toolbar, .media-toolbar-form { width: 100%; }
    .media-search { flex: 1; width: auto; min-width: 0; }
    .media-move-form { flex-wrap: wrap; }
    .media-move-form select { max-width: 100%; }
}
/* statistika (cijeli admin): kartica se smije suziti — dugi brojevi/datumi ne guraju stranicu u širinu */
.stat { grid-template-columns: auto minmax(0, 1fr); min-width: 0; }
.stat-num, .stat-label { overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .stat { padding: 12px; column-gap: 10px; }
    .stat-icon { width: 34px; height: 34px; }
    .stat-num { font-size: 17px; }
}

/* gumb u editoru teksta: veličine + ikona (maska iz --rte-ico) + mreža ikona u prozoru */
.rte-area a.btn--sm { padding: .3em .8em; font-size: .88em; }
.rte-area a.btn--lg { padding: .65em 1.5em; font-size: 1.1em; }
.rte-area a.btn[class*="ico-"]::before {
    content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .45em; vertical-align: -.17em;
    background: currentColor; -webkit-mask: var(--rte-ico) center / contain no-repeat; mask: var(--rte-ico) center / contain no-repeat;
}
.rte-ico-grid { max-height: 170px; overflow-y: auto; margin-top: 8px; }

/* ============================================================ nadzorna ploča: posjete + uvidi */
.dash-visits { margin-bottom: 20px; }
.dv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dv-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.dv-title { margin: 2px 0 0; font-size: 18px; }
.dv-nums { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 16px 0 6px; }
.dv-num { display: flex; flex-direction: column; }
.dv-n { font-size: 26px; font-weight: 800; line-height: 1.05; color: var(--text); }
.dv-num--muted .dv-n { color: var(--muted); }
.dv-l { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.dv-chart { margin-top: 10px; }
.dv-chart svg { display: block; width: 100%; height: 150px; }
.dv-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dv-peak { font-weight: 600; color: var(--accent); }

.dash-insights { margin-bottom: 20px; }
.dash-sub { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.dash-sub:first-of-type { margin-top: 0; }

/* rang-lista pretraga */
.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank-item { display: grid; grid-template-columns: minmax(0,1fr) 90px auto; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.rank-item:last-child { border-bottom: none; }
.rank-term { min-width: 0; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-term::before { counter-increment: r; content: counter(r) ". "; color: var(--muted); font-weight: 700; }
.rank-bar { position: relative; height: 7px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.rank-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 4px; }
.rank-n { font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; text-align: right; }
.rank-zero { color: #dc2626; font-weight: 600; }

@media (max-width: 560px) {
    .rank-item { grid-template-columns: minmax(0,1fr) auto; }
    .rank-bar { display: none; }
    .dv-n { font-size: 22px; }
}

/* meni: glavne (najviše) stavke vizualno istaknute — lakše snalaženje */
.menu-tree > .menu-node > .menu-row {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    border-left: 3px solid var(--accent);
}
.menu-tree > .menu-node > .menu-row:hover {
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    border-color: var(--accent);
}
.menu-tree > .menu-node > .menu-row .menu-item-title { font-weight: 700; }
.menu-tree > .menu-node > .menu-row .menu-ico { color: var(--accent); }
/* razine menija različitim bojama: 1. zelena (gore), 2. plava, 3.+ ljubičasta — boja retka + vodilica ispod */
.menu-tree > .menu-node > .menu-sub { border-left-color: color-mix(in srgb, #2563eb 45%, var(--border)); }
.menu-tree > .menu-node > .menu-sub > .menu-node > .menu-row {
    background: color-mix(in srgb, #2563eb 5%, var(--surface));
    border-color: color-mix(in srgb, #2563eb 18%, var(--border));
    border-left: 3px solid #2563eb;
}
.menu-tree > .menu-node > .menu-sub > .menu-node > .menu-row .menu-item-title { font-weight: 600; }
.menu-tree > .menu-node > .menu-sub > .menu-node > .menu-row .menu-ico { background: color-mix(in srgb, #2563eb 12%, var(--surface)); color: #2563eb; }
.menu-sub .menu-sub { border-left-color: color-mix(in srgb, #7c3aed 45%, var(--border)); }
.menu-sub .menu-sub .menu-row {
    background: color-mix(in srgb, #7c3aed 4%, var(--surface));
    border-color: color-mix(in srgb, #7c3aed 16%, var(--border));
    border-left: 3px solid #7c3aed;
}
.menu-sub .menu-sub .menu-row .menu-item-title { font-weight: 500; }
.menu-sub .menu-sub .menu-row .menu-ico { background: color-mix(in srgb, #7c3aed 12%, var(--surface)); color: #7c3aed; }
/* cilj povlačenja („⤵ podstavka”) mora pregaziti boje razina */
.menu-tree .menu-row.menu-drop-into { background: var(--accent-soft) !important; border-color: var(--accent) !important; }

/* meni: kompaktne akcije u retku (da gumbi ne dižu visinu retka) */
.menu-row .actions .btn-icon { width: 26px; height: 26px; }
.menu-row .actions .btn-icon svg { width: 14px; height: 14px; }
.menu-row .actions .btn-sm { padding: 3px 9px; font-size: 12px; }
.menu-row .drag-handle { font-size: 12px; padding: 0 1px; }
/* na užim ekranima sakrij poveznicu ispod naziva da redak ostane nizak i čist */
@media (max-width: 700px) {
    .menu-item-main .menu-item-url { display: none; }
}

/* meni: linija umetanja pri povlačenju (jasno pokazuje kamo i na koju razinu stavka ide) */
.menu-drop-line {
    position: absolute;
    height: 3px;
    background: var(--accent);
    border-radius: 3px;
    z-index: 480;
    pointer-events: none;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.menu-drop-line::before {
    content: "";
    position: absolute;
    left: -5px; top: 50%;
    width: 9px; height: 9px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--accent);
}
body.menu-dragging { cursor: grabbing; }
body.menu-dragging * { cursor: grabbing !important; }
.menu-node.dragging > .menu-row { opacity: .4; }

/* kontakti: kvačica za skupno brisanje + traka */
.cu-check { display: inline-flex; align-items: center; flex: none; cursor: pointer; padding: 0 2px; }
.cu-check input { width: 16px; height: 16px; cursor: pointer; }
.cu-bulkbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 8px 12px; margin-bottom: 12px;
    background: var(--accent-soft); border: 1px solid var(--accent); border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600;
}
.cu-bulkbar .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* događaji: dodatni termini u modalu ("+ Dodaj još termin") */
.ev-extra { display: grid; gap: 8px; margin: -4px 0 8px; }
.ev-extra:empty { display: none; }
.ev-extra-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr) 34px; gap: 10px; align-items: center; animation: evExtraIn .18s ease-out; }
@keyframes evExtraIn { from { opacity: 0; transform: translateY(-4px); } }
.ev-extra-n { font-size: 12px; font-weight: 700; color: var(--muted); text-align: right; }
.ev-extra-x {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--red);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.ev-extra-x:hover { border-color: var(--red); background: var(--red-bg); }
.ev-extra-add {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 9px 12px;
    border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    color: var(--accent);
    font: 600 13.5px/1.2 var(--font);
    cursor: pointer;
    transition: background-color .12s, border-color .12s;
}
.ev-extra-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.ev-extra-hint { margin: -8px 0 14px; }
@media (max-width: 560px) {
    .ev-extra-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px; }
    .ev-extra-n { display: none; }
}

/* gornja traka: video upute (YouTube) — crvena ikona */
.topbar-yt svg { color: #ff0000; }

/* gornja traka: Turnstile uključen — Cloudflare narančasta, pulsirajuća točka */
.topbar-shield {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(243, 128, 32, .35);
    background: linear-gradient(135deg, #fff7ef, #ffe9d5);
    color: #c2570c;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
.topbar-shield:hover { border-color: #f38020; box-shadow: 0 2px 10px rgba(243, 128, 32, .25); }
.topbar-shield svg { color: #f38020; flex: none; }
.topbar-shield small { margin-left: 3px; font-size: 11px; font-weight: 600; color: #e07a2a; }
.topbar-shield::after {
    content: "";
    position: absolute;
    top: 3px; right: 3px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px #fff;
    animation: shield-pulse 2s ease-in-out infinite;
}
@keyframes shield-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .topbar-shield::after { animation: none; } }
@media (max-width: 1100px) {
    .topbar-shield { padding: 7px 9px; }
    .topbar-shield-txt { display: none; } /* uska traka: samo štit */
}
@media (max-width: 480px) {
    .topbar-user { display: none; } /* naslov stranice ima prednost pred imenom korisnika */
}

/* graditelj: „U stupce” samo na glavnoj razini (blok premješten u stupac ga ne prikazuje) */
.pb-col-list .pb-tocols { display: none; }
/* prazan stupac je jasna zona za ispuštanje bloka */
.pb-col-list:empty { min-height: 64px; border: 1.5px dashed var(--border-strong); border-radius: 10px; }

/* blok Novosti: polja u mreži (popunjavaju širinu) + opcije kao kartice s opisom */
.pb-nw-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px 14px; }
.pb-nw-grid .pb-nw-half:nth-of-type(4) { grid-column: 1 / 2; }
.pb-nw-grid .pb-nw-half:nth-of-type(5) { grid-column: 2 / -1; }
.pb-nw-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-top: 14px; }
.pb-nw-opt {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
    cursor: pointer; transition: border-color .12s, background-color .12s;
}
.pb-nw-opt:hover { border-color: color-mix(in srgb, var(--pbc, var(--accent)) 45%, var(--border)); }
.pb-nw-opt:has(input:checked) { border-color: var(--pbc, var(--accent)); background: color-mix(in srgb, var(--pbc, var(--accent)) 7%, var(--surface)); }
.pb-nw-opt input { margin-top: 2px; flex: none; accent-color: var(--pbc, var(--accent)); }
.pb-nw-opt span { display: grid; gap: 2px; min-width: 0; }
.pb-nw-opt strong { font-size: 13px; color: var(--text); }
.pb-nw-opt small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
@media (max-width: 760px) {
    .pb-nw-grid { grid-template-columns: 1fr 1fr; }
    .pb-nw-grid .pb-nw-wide, .pb-nw-grid .pb-nw-half:nth-of-type(4), .pb-nw-grid .pb-nw-half:nth-of-type(5) { grid-column: 1 / -1; }
}

/* uvoz dizajna: izbor dodaj / zamijeni u modalu */
.pb-imp-choice { display: grid; gap: 10px; margin-top: 12px; }
.pb-imp-choice .check { align-items: flex-start; }

/* picker: kvačica „Izvorni format” uz „Prenesi novu” */
.mp-keep { font-size: 12.5px; white-space: nowrap; margin: 0; }

/* ---- Slider → Postavke: odabir izgleda heroja (minijature) ---- */
.hl-wrap { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.hl-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.hl-pick { position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 6px; border: 2px solid var(--border); border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.hl-pick:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.hl-pick input { position: absolute; opacity: 0; }
.hl-pick:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.hl-pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.hl-name { display: flex; flex-direction: column; line-height: 1.25; padding: 0 2px 2px; }
.hl-name strong { font-size: 12.5px; }
.hl-name small { font-size: 11px; color: var(--muted); }

.hl-thumb { --hl-bg: #13261a; --hl-fg: #f3f6ef; --hl-acc: #e9d40b; position: relative; display: flex; align-items: center; gap: 8%; aspect-ratio: 16 / 9; padding: 0 9%; overflow: hidden; border-radius: 7px; background: radial-gradient(120% 90% at 75% 0%, #2c5a35, var(--hl-bg) 60%); }
.hl-main { position: relative; z-index: 1; flex: 1.3; display: flex; flex-direction: column; gap: 4px; }
.hl-main i { display: block; height: 5px; border-radius: 3px; background: var(--hl-fg); }
.hl-main .hl-k { width: 40%; height: 3px; background: var(--hl-acc); }
.hl-main .hl-t { width: 92%; height: 8px; }
.hl-main .hl-t2 { width: 60%; }
.hl-main .hl-b { width: 34%; height: 7px; margin-top: 3px; background: var(--hl-acc); }
.hl-aside { position: relative; z-index: 1; flex: 0.8; height: 46%; border-radius: 5px; background: color-mix(in srgb, var(--hl-fg) 16%, transparent); border: 1px solid color-mix(in srgb, var(--hl-fg) 25%, transparent); }

.hl-thumb--centar, .hl-thumb--veliki { flex-direction: column; justify-content: center; gap: 7%; }
.hl-thumb--centar .hl-main, .hl-thumb--veliki .hl-main { flex: none; width: 70%; align-items: center; }
.hl-thumb--centar .hl-aside, .hl-thumb--veliki .hl-aside { flex: none; width: 50%; height: 20%; }
.hl-thumb--veliki .hl-main .hl-t { height: 13px; width: 100%; }
.hl-thumb--zrcalo { flex-direction: row-reverse; }
.hl-thumb--zrcalo .hl-main { align-items: flex-end; }
.hl-thumb--kompakt { aspect-ratio: 16 / 6.5; margin-block: 7%; }
.hl-thumb--traka { aspect-ratio: 16 / 6; margin-block: 8%; }
.hl-thumb--traka .hl-main .hl-b { display: none; }
.hl-thumb--traka .hl-aside { flex: 0 0 24%; height: 16%; border: 0; border-radius: 4px; background: var(--hl-acc); }
.hl-thumb--dno { align-items: flex-end; padding-bottom: 6%; }
.hl-thumb--svijetli { --hl-bg: #f3f5ee; --hl-fg: #1d2a20; --hl-acc: #1f9e33; background: radial-gradient(120% 90% at 75% 0%, #dbeed9, var(--hl-bg) 60%); }
.hl-thumb--kartica { margin: 5px; border-radius: 12px; }
.hl-thumb--staklo .hl-main { padding: 7px; border-radius: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); }
.hl-thumb--papir .hl-main { --hl-fg: #1d2a20; --hl-acc: #1f9e33; padding: 7px; border-radius: 5px; background: #fff; }
.hl-thumb--dijagonala { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }
.hl-thumb--val { -webkit-mask: linear-gradient(#000 0 0) top / 100% 84% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V28C1000 62 800 62 600 32S200 2 0 34Z'/%3E%3C/svg%3E") bottom / 100% 17% no-repeat; mask: linear-gradient(#000 0 0) top / 100% 84% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1200V28C1000 62 800 62 600 32S200 2 0 34Z'/%3E%3C/svg%3E") bottom / 100% 17% no-repeat; }
.hl-thumb--luk { clip-path: ellipse(120% 100% at 50% 0%); }
.hl-thumb--podijeljeno { background: linear-gradient(105deg, #0a140c 0 55%, #4f7d56 55%); }
.hl-thumb--okvir { box-shadow: inset 0 0 0 5px var(--hl-bg), inset 0 0 0 6px rgba(255,255,255,.35); }
.hl-thumb--minimal { background: #0a140c; }
.hl-thumb--kontrast { background: #050a06; }
.hl-thumb--kontrast .hl-main .hl-k { width: 30%; height: 6px; border-radius: 6px; }
.hl-thumb--kontrast .hl-main .hl-t2 { width: 22%; height: 3px; background: var(--hl-acc); }
.hl-thumb--gradijent { background: linear-gradient(125deg, #0a140c, #17602a, #3c4f1a); }
.hl-thumb--urednicki .hl-main { padding-left: 6px; border-left: 3px solid var(--hl-acc); }
.hl-thumb--urednicki { background: repeating-linear-gradient(#13261a 0 9px, #20392a 9px 10px); }
.hl-thumb--tockice { background: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--hl-bg); }
.hl-thumb--duotone { background: linear-gradient(135deg, #157a28, #0a140c 72%); }
.hl-thumb--kid { background: radial-gradient(circle at 18% 62%, #fff 0 9%, transparent 9.5%), radial-gradient(circle at 27% 58%, #fff 0 11%, transparent 11.5%), #9cc23a; }
.hl-thumb--kid .hl-aside { flex: 0 0 46%; height: auto; aspect-ratio: 1; margin-right: -14%; border: 0; border-radius: 50%; background: #fff; }
.hl-thumb--kid .hl-main .hl-b { width: 30%; border-radius: 4px; box-shadow: 14px 0 0 -1px #ff5a7e; }
.hl-group { margin-top: 18px; }
.hl-thumb--duga { background: radial-gradient(circle at 15% 125%, transparent 0 34%, #ff5a5a 34% 38%, #ffa53a 38% 42%, #ffe14d 42% 46%, #5fd068 46% 50%, #4aa8ff 50% 54%, transparent 54%), linear-gradient(#4fb6ec, #a9e1fb); }
.hl-thumb--baloni { background: radial-gradient(5px 6px at 14% 26%, #ff5a7e 95%, transparent), radial-gradient(4px 5px at 34% 74%, #ffd43b 95%, transparent), radial-gradient(5px 6px at 48% 18%, #a072ff 95%, transparent), #9cc23a; }
.hl-thumb--konfeti { background: radial-gradient(circle, #ff5a7e 0 1.5px, transparent 2px) 0 0 / 13px 13px, radial-gradient(circle, #ffd43b 0 1.5px, transparent 2px) 6px 7px / 13px 13px, #9cc23a; }
.hl-thumb--konfeti .hl-aside { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
.hl-thumb--livada { background: radial-gradient(ellipse 60% 30% at 20% 108%, #6cc04a 99%, transparent), radial-gradient(ellipse 75% 34% at 88% 112%, #4fa83a 99%, transparent), linear-gradient(#3ea7e0, #9fdcf8); }
.hl-thumb--bojice { --hl-fg: #1d2a20; background: linear-gradient(rgba(74,168,255,.2) 1px, transparent 1px) 0 0 / 100% 7px, linear-gradient(90deg, rgba(74,168,255,.2) 1px, transparent 1px) 0 0 / 7px 100%, #fffdf6; }
.hl-thumb--bojice .hl-aside { border-radius: 3px; transform: rotate(5deg); box-shadow: 0 4px 8px rgba(0,0,0,.25); margin-right: 0; flex-basis: 38%; }
.hl-thumb--zvjezdice { background: radial-gradient(circle, #fff 0 .8px, transparent 1.2px) 0 0 / 11px 11px, linear-gradient(#1b2457, #4a3a8c); }
.hl-thumb--zvjezdice .hl-aside { background: #fff6cf; box-shadow: 0 0 14px 4px rgba(255,236,150,.35); }
.hl-thumb--mjehurici { background: radial-gradient(circle at 20% 30%, transparent 0 5px, rgba(255,255,255,.8) 5.5px 6.5px, transparent 7px), radial-gradient(circle at 45% 75%, transparent 0 3px, rgba(255,255,255,.8) 3.5px 4.5px, transparent 5px), linear-gradient(#2ec4d6, #8ee6ee); }
.hl-thumb--kockice { background: linear-gradient(90deg, #ff5a7e 0 20%, #ffd43b 20% 40%, #4aa8ff 40% 60%, #5fd068 60% 80%, #a072ff 80%) bottom / 100% 5px no-repeat, #9cc23a; }
.hl-thumb--kockice .hl-aside { border-radius: 9px; transform: rotate(-6deg); margin-right: 0; flex-basis: 40%; }

.hl-thumb--maslacak { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 260'%3E%3Cpath d='M70 260L95 247.2L83.8 243.9L113.3 228.8L93.8 225.5L120 210.5L97.5 207.2L113.3 192.2L93.8 188.9L95 173.8L83.8 170.5L70 155.5L70 152.2L70 150L70 152.2L70 155.5L66.6 170.5L63.8 173.8L64 188.9L59.2 192.2L63.1 207.2L57.5 210.5L64 225.5L59.2 228.8L66.6 243.9L63.8 247.2Z' fill='%234f9a36'/%3E%3Cpath d='M80 260L57 249.5L67.3 246.8L40.2 234.5L58.1 231.8L34 219.5L54.7 216.8L40.2 204.5L58.1 201.8L57 189.5L67.3 186.8L80 174.5L80 171.8L80 170L80 171.8L80 174.5L83.2 186.8L85.8 189.5L85.5 201.8L90 204.5L86.3 216.8L91.5 219.5L85.5 231.8L90 234.5L83.2 246.8L85.8 249.5Z' fill='%234f9a36'/%3E%3Cpath d='M190 260L210 250.7L201 248.3L224.6 237.3L209.1 234.9L230 224L212 221.6L224.6 210.7L209.1 208.3L210 197.3L201 194.9L190 184L190 181.6L190 180L190 181.6L190 184L187.2 194.9L185 197.3L185.2 208.3L181.3 210.7L184.5 221.6L180 224L185.2 234.9L181.3 237.3L187.2 248.3L185 250.7Z' fill='%234f9a36'/%3E%3Cpath d='M60 260Q47 165 70 70' stroke='%235a9e3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M78.6 70L118 70M118 70L127.8 66.1M118 70L128.6 70M118 70L127.8 73.9M78.1 73.1L114.9 87M114.9 87L125.5 86.8M114.9 87L124.8 90.7M114.9 87L122.7 94.1M76.5 75.7L106 101.8M106 101.8L115.9 105.3M106 101.8L113.9 108.8M106 101.8L110.7 111.2M76.5 75.7L105.9 101.8M105.9 101.8L115.9 105.4M105.9 101.8L113.8 108.8M105.9 101.8L110.7 111.3M74 77.6L92.3 112.5M92.3 112.5L100.4 119.3M92.3 112.5L97.3 121.8M92.3 112.5L93.4 123M71.1 78.6L75.9 117.6M75.9 117.6L81 126.9M75.9 117.6L77.2 128.1M75.9 117.6L73.2 127.9M71 78.6L75.8 117.7M75.8 117.7L80.9 126.9M75.8 117.7L77.1 128.1M75.8 117.7L73.1 127.9M67.9 78.4L58.6 116.6M58.6 116.6L60 127.1M58.6 116.6L56 126.9M58.6 116.6L52.4 125.2M65.1 77.1L42.8 109.5M42.8 109.5L40.5 119.8M42.8 109.5L36.8 118.2M42.8 109.5L34 115.4M65.1 77.1L42.7 109.5M42.7 109.5L40.4 119.8M42.7 109.5L36.7 118.2M42.7 109.5L33.9 115.3M62.9 74.9L30.5 97.3M30.5 97.3L24.7 106.1M30.5 97.3L21.8 103.3M30.5 97.3L20.2 99.7M61.6 72.1L23.4 81.6M23.4 81.6L14.8 87.7M23.4 81.6L13.2 84.1M23.4 81.6L13 80.1M61.6 72.1L23.4 81.5M23.4 81.5L14.8 87.6M23.4 81.5L13.1 84M23.4 81.5L12.9 80M61.4 69L22.3 64.3M22.3 64.3L12.1 67M22.3 64.3L11.9 63M22.3 64.3L13.1 59.2M62.3 66L27.5 47.8M27.5 47.8L17 46.7M27.5 47.8L18.1 42.9M27.5 47.8L20.6 39.7M62.3 66L27.5 47.7M27.5 47.7L17 46.6M27.5 47.7L18.1 42.8M27.5 47.7L20.6 39.7M64.3 63.5L38.1 34.1M38.1 34.1L28.7 29.4M38.1 34.1L31.1 26.2M38.1 34.1L34.6 24.2M66.9 61.9L52.9 25.1M52.9 25.1L45.8 17.4M52.9 25.1L49.1 15.3M52.9 25.1L53.1 14.6M66.9 61.9L53 25.1M53 25.1L45.8 17.3M53 25.1L49.2 15.2M53 25.1L53.2 14.6M70 61.4L70 22M70 22L66 12.2M70 22L70 11.4M70 22L73.9 12.2M73.1 61.9L86.9 25.1M86.9 25.1L86.7 14.5M86.9 25.1L90.7 15.2M86.9 25.1L94.1 17.3M73.1 61.9L87 25.1M87 25.1L86.8 14.6M87 25.1L90.8 15.2M87 25.1L94.2 17.3M75.7 63.5L101.8 34M101.8 34L105.4 24.1M101.8 34L108.8 26.1M101.8 34L111.2 29.3M77.6 66L112.5 47.6M112.5 47.6L119.3 39.6M112.5 47.6L121.8 42.7M112.5 47.6L123 46.5M77.7 66L112.5 47.7M112.5 47.7L119.4 39.7M112.5 47.7L121.9 42.8M112.5 47.7L123 46.6M78.6 69L117.6 64.2M117.6 64.2L126.9 59.1M117.6 64.2L128.1 62.9M117.6 64.2L127.9 66.9' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' opacity='.95'/%3E%3Ccircle cx='70' cy='70' r='7.7' fill='%23d9c9a3'/%3E%3Cpath d='M130 260Q154 190 150 120' stroke='%235a9e3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M156.1 120L184 120M184 120L190.9 117.2M184 120L191.5 120M184 120L190.9 122.8M155.7 122.2L181.8 132M181.8 132L189.3 131.9M181.8 132L188.8 134.7M181.8 132L187.3 137.1M154.6 124.1L175.5 142.5M175.5 142.5L182.5 145M175.5 142.5L181.1 147.5M175.5 142.5L178.9 149.2M154.6 124.1L175.4 142.5M175.4 142.5L182.5 145.1M175.4 142.5L181 147.5M175.4 142.5L178.8 149.2M152.8 125.4L165.8 150.1M165.8 150.1L171.5 154.9M165.8 150.1L169.3 156.7M165.8 150.1L166.6 157.5M150.7 126.1L154.2 153.7M154.2 153.7L157.8 160.3M154.2 153.7L155.1 161.2M154.2 153.7L152.2 161M150.7 126.1L154.1 153.8M154.1 153.8L157.7 160.3M154.1 153.8L155 161.2M154.1 153.8L152.2 161M148.5 125.9L141.9 153M141.9 153L142.9 160.4M141.9 153L140.1 160.3M141.9 153L137.5 159.1M146.5 125L130.7 148M130.7 148L129.1 155.3M130.7 148L126.5 154.2M130.7 148L124.5 152.2M146.5 125L130.7 148M130.7 148L129 155.3M130.7 148L126.4 154.1M130.7 148L124.5 152.1M145 123.5L122 139.3M122 139.3L117.9 145.6M122 139.3L115.9 143.6M122 139.3L114.7 141M144.1 121.5L117 128.2M117 128.2L110.9 132.6M117 128.2L109.7 130M117 128.2L109.6 127.2M144.1 121.5L117 128.1M117 128.1L110.9 132.5M117 128.1L109.7 129.9M117 128.1L109.6 127.1M143.9 119.3L116.2 115.9M116.2 115.9L109 117.9M116.2 115.9L108.8 115M116.2 115.9L109.7 112.3M144.6 117.2L119.9 104.2M119.9 104.2L112.4 103.5M119.9 104.2L113.2 100.8M119.9 104.2L115 98.6M144.6 117.2L119.9 104.2M119.9 104.2L112.5 103.4M119.9 104.2L113.3 100.7M119.9 104.2L115 98.5M145.9 115.4L127.4 94.6M127.4 94.6L120.7 91.2M127.4 94.6L122.5 89M127.4 94.6L124.9 87.5M147.8 114.3L137.9 88.2M137.9 88.2L132.8 82.7M137.9 88.2L135.2 81.2M137.9 88.2L138 80.8M147.8 114.3L137.9 88.2M137.9 88.2L132.9 82.7M137.9 88.2L135.3 81.2M137.9 88.2L138.1 80.7M150 113.9L150 86M150 86L147.2 79.1M150 86L150 78.5M150 86L152.7 79.1M152.2 114.3L162 88.2M162 88.2L161.9 80.7M162 88.2L164.6 81.2M162 88.2L167.1 82.7M152.2 114.3L162.1 88.2M162.1 88.2L161.9 80.7M162.1 88.2L164.7 81.2M162.1 88.2L167.1 82.7M154.1 115.4L172.5 94.5M172.5 94.5L175 87.5M172.5 94.5L177.5 88.9M172.5 94.5L179.2 91.2M155.4 117.1L180.1 104.1M180.1 104.1L184.9 98.5M180.1 104.1L186.7 100.7M180.1 104.1L187.5 103.4M155.4 117.2L180.1 104.2M180.1 104.2L185 98.5M180.1 104.2L186.7 100.7M180.1 104.2L187.5 103.4M156.1 119.3L183.7 115.9M183.7 115.9L190.3 112.3M183.7 115.9L191.2 115M183.7 115.9L191 117.8' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' opacity='.95'/%3E%3Ccircle cx='150' cy='120' r='5.4' fill='%23d9c9a3'/%3E%3Cpath d='M205 260Q215.5 215 210 170' stroke='%235a9e3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(0 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(16.4 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(32.7 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(49.1 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(65.5 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(81.8 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(98.2 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(114.5 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(130.9 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(147.3 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(163.6 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(180 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(196.4 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(212.7 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(229.1 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(245.5 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(261.8 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(278.2 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(294.5 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(310.9 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(327.3 210 168)'/%3E%3Cellipse cx='210' cy='153.7' rx='3.4' ry='13' fill='%23ffd21f' transform='rotate(343.6 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(8 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(30.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(53 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(75.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(98 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(120.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(143 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(165.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(188 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(210.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(233 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(255.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(278 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(300.5 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(323 210 168)'/%3E%3Cellipse cx='210' cy='158.3' rx='2.3' ry='8.8' fill='%23ffbf00' transform='rotate(345.5 210 168)'/%3E%3Ccircle cx='210' cy='168' r='7.3' fill='%23f2a900'/%3E%3Cpath d='M255 260Q252.5 230 262 200' stroke='%235a9e3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(0 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(16.4 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(32.7 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(49.1 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(65.5 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(81.8 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(98.2 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(114.5 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(130.9 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(147.3 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(163.6 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(180 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(196.4 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(212.7 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(229.1 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(245.5 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(261.8 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(278.2 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(294.5 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(310.9 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(327.3 262 198)'/%3E%3Cellipse cx='262' cy='188.1' rx='2.3' ry='9' fill='%23ffd21f' transform='rotate(343.6 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(8 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(30.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(53 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(75.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(98 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(120.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(143 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(165.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(188 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(210.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(233 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(255.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(278 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(300.5 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(323 262 198)'/%3E%3Cellipse cx='262' cy='191.3' rx='1.6' ry='6.1' fill='%23ffbf00' transform='rotate(345.5 262 198)'/%3E%3Ccircle cx='262' cy='198' r='5' fill='%23f2a900'/%3E%3Cpath d='M28 260Q31 225 22 190' stroke='%235a9e3a' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(0 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(16.4 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(32.7 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(49.1 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(65.5 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(81.8 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(98.2 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(114.5 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(130.9 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(147.3 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(163.6 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(180 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(196.4 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(212.7 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(229.1 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(245.5 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(261.8 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(278.2 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(294.5 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(310.9 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(327.3 22 188)'/%3E%3Cellipse cx='22' cy='179.2' rx='2.1' ry='8' fill='%23ffd21f' transform='rotate(343.6 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(8 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(30.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(53 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(75.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(98 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(120.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(143 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(165.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(188 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(210.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(233 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(255.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(278 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(300.5 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(323 22 188)'/%3E%3Cellipse cx='22' cy='182' rx='1.4' ry='5.4' fill='%23ffbf00' transform='rotate(345.5 22 188)'/%3E%3Ccircle cx='22' cy='188' r='4.5' fill='%23f2a900'/%3E%3C/svg%3E") left -4px bottom 0 / 46px auto no-repeat, linear-gradient(#5cb8ea, #a8dcf3 62%, #9fd27a); }
.hl-thumb--maslacak .hl-aside { box-shadow: 0 0 0 3px #ffd21f; }
.hl-thumb--zvoncici { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 280'%3E%3Cpath d='M36.5 280Q47.2 190 58 130Q56 197.5 43.5 280Z' fill='%234b8f45'/%3E%3Cpath d='M66.5 280Q65.2 166 58 90Q71 175.5 73.5 280Z' fill='%234b8f45'/%3E%3Cpath d='M146.5 280Q158.8 202 172 150Q168 208.5 153.5 280Z' fill='%234b8f45'/%3E%3Cpath d='M196.5 280Q192 178 180 110Q197 186.5 203.5 280Z' fill='%234b8f45'/%3E%3Cpath d='M246.5 280Q255.6 208 264 160Q264 214 253.5 280Z' fill='%234b8f45'/%3E%3Cpath d='M60 280C60 140 80.8 80 86 80S97.7 78 97.7 88' stroke='%233f7d3a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='97.7' cy='92' rx='3.4' ry='4.6' fill='%235fa04a'/%3E%3Cpath d='M97.7 95c-12 6 -13 18 -4.2 26c8.1 -8 2.2 -20 4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(14 97.7 94)'/%3E%3Cpath d='M97.7 95c2 6 1 18 4.2 26c3.9 -8 7.8 -20 -4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(-14 97.7 94)'/%3E%3Cpath d='M97.7 95c-5 6 -6 18 0 26c6 -8 5 -20 0 -26z' fill='%23ffffff' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(0 97.7 94)'/%3E%3Cpath d='M95.2 110q2.5 3 5 0' stroke='%237cbf5c' stroke-width='1.6' fill='none'/%3E%3Cpath d='M110 280C110 168 90.8 120 86 120S75.2 118 75.2 128' stroke='%233f7d3a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='75.2' cy='132' rx='3.4' ry='4.6' fill='%235fa04a'/%3E%3Cpath d='M75.2 135c-12 6 -13 18 -4.2 26c8.1 -8 2.2 -20 4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(14 75.2 134)'/%3E%3Cpath d='M75.2 135c2 6 1 18 4.2 26c3.9 -8 7.8 -20 -4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(-14 75.2 134)'/%3E%3Cpath d='M75.2 135c-5 6 -6 18 0 26c6 -8 5 -20 0 -26z' fill='%23ffffff' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(0 75.2 134)'/%3E%3Cpath d='M72.7 150q2.5 3 5 0' stroke='%237cbf5c' stroke-width='1.6' fill='none'/%3E%3Cpath d='M170 280C170 129.5 187.6 65 192 65S201.9 63 201.9 73' stroke='%233f7d3a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='201.9' cy='77' rx='3.4' ry='4.6' fill='%235fa04a'/%3E%3Cpath d='M201.9 80c-12 6 -13 18 -4.2 26c8.1 -8 2.2 -20 4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(14 201.9 79)'/%3E%3Cpath d='M201.9 80c2 6 1 18 4.2 26c3.9 -8 7.8 -20 -4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(-14 201.9 79)'/%3E%3Cpath d='M201.9 80c-5 6 -6 18 0 26c6 -8 5 -20 0 -26z' fill='%23ffffff' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(0 201.9 79)'/%3E%3Cpath d='M199.4 95q2.5 3 5 0' stroke='%237cbf5c' stroke-width='1.6' fill='none'/%3E%3Cpath d='M225 280C225 175 209 130 205 130S196 128 196 138' stroke='%233f7d3a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='196' cy='142' rx='3.4' ry='4.6' fill='%235fa04a'/%3E%3Cpath d='M196 145c-12 6 -13 18 -4.2 26c8.1 -8 2.2 -20 4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(14 196 144)'/%3E%3Cpath d='M196 145c2 6 1 18 4.2 26c3.9 -8 7.8 -20 -4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(-14 196 144)'/%3E%3Cpath d='M196 145c-5 6 -6 18 0 26c6 -8 5 -20 0 -26z' fill='%23ffffff' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(0 196 144)'/%3E%3Cpath d='M193.5 160q2.5 3 5 0' stroke='%237cbf5c' stroke-width='1.6' fill='none'/%3E%3Cpath d='M270 280C270 196 282.8 160 286 160S293.2 158 293.2 168' stroke='%233f7d3a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='293.2' cy='172' rx='3.4' ry='4.6' fill='%235fa04a'/%3E%3Cpath d='M293.2 175c-12 6 -13 18 -4.2 26c8.1 -8 2.2 -20 4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(14 293.2 174)'/%3E%3Cpath d='M293.2 175c2 6 1 18 4.2 26c3.9 -8 7.8 -20 -4.2 -26z' fill='%23f4f7f2' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(-14 293.2 174)'/%3E%3Cpath d='M293.2 175c-5 6 -6 18 0 26c6 -8 5 -20 0 -26z' fill='%23ffffff' stroke='%23d7e2d3' stroke-width='.6' transform='rotate(0 293.2 174)'/%3E%3Cpath d='M290.7 190q2.5 3 5 0' stroke='%237cbf5c' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") left -2px bottom 0 / 48px auto no-repeat, radial-gradient(120% 90% at 70% 0%, #2f6d4a, #143826 75%); }
.hl-thumb--zvoncici .hl-aside { box-shadow: 0 0 10px 2px rgba(220,245,225,.35); }
.hl-thumb--maslacak::after, .hl-thumb--zvoncici::after { content: ''; position: absolute; z-index: 2; left: 40%; bottom: 2px; width: 26px; height: 34px; background: no-repeat center / contain; }
.hl-thumb--maslacak::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg transform='translate(0 0) scale(1.0)'%3E%3Cpath d='M54 92L44 122L34 146' stroke='%235fd068' stroke-width='10' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='30' cy='149' rx='8' ry='4.5' fill='%232e2a3a'/%3E%3Cpath d='M66 92L76 122L86 146' stroke='%235fd068' stroke-width='10' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='90' cy='149' rx='8' ry='4.5' fill='%232e2a3a'/%3E%3Cpath d='M47 54L36 30L24 6' stroke='%238a5a3c' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='6' r='4.6' fill='%238a5a3c'/%3E%3Cpath d='M73 54L84 30L96 6' stroke='%238a5a3c' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='96' cy='6' r='4.6' fill='%238a5a3c'/%3E%3Cpath d='M46 50q14-6 28 0l3 44q-17 5-34 0z' fill='%23ffd43b'/%3E%3Cpath d='M47 54L42 43.2' stroke='%23ffd43b' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M73 54L78 43.2' stroke='%23ffd43b' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M53 70h14' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3Crect x='56' y='42' width='8' height='9' rx='3' fill='%238a5a3c'/%3E%3Ccircle cx='60' cy='31' r='16' fill='%238a5a3c'/%3E%3Ccircle cx='46' cy='24' r='7' fill='%231f1a17'/%3E%3Ccircle cx='53' cy='17' r='7' fill='%231f1a17'/%3E%3Ccircle cx='61' cy='15' r='7' fill='%231f1a17'/%3E%3Ccircle cx='69' cy='17' r='7' fill='%231f1a17'/%3E%3Ccircle cx='75' cy='24' r='7' fill='%231f1a17'/%3E%3Ccircle cx='44' cy='31' r='5' fill='%231f1a17'/%3E%3Ccircle cx='77' cy='31' r='5' fill='%231f1a17'/%3E%3Ccircle cx='54' cy='30' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='66' cy='30' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M54 36q6 6 12 0' stroke='%237a2e1f' stroke-width='2' fill='%23fff' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='35' r='2.6' fill='%23ff8fa3' opacity='.6'/%3E%3Ccircle cx='70' cy='35' r='2.6' fill='%23ff8fa3' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); }
.hl-thumb--zvoncici::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160'%3E%3Cg transform='translate(0 0) scale(1.0)'%3E%3Cpath d='M54 92L44 122L34 146' stroke='%23ff5a7e' stroke-width='10' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='30' cy='149' rx='8' ry='4.5' fill='%232e2a3a'/%3E%3Cpath d='M66 92L76 122L86 146' stroke='%23ff5a7e' stroke-width='10' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cellipse cx='90' cy='149' rx='8' ry='4.5' fill='%232e2a3a'/%3E%3Cpath d='M47 54L36 30L24 6' stroke='%23f1d1b5' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='24' cy='6' r='4.6' fill='%23f1d1b5'/%3E%3Cpath d='M73 54L84 30L96 6' stroke='%23f1d1b5' stroke-width='7' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='96' cy='6' r='4.6' fill='%23f1d1b5'/%3E%3Cpath d='M46 50q14-6 28 0l3 44q-17 5-34 0z' fill='%23a072ff'/%3E%3Cpath d='M47 54L42 43.2' stroke='%23a072ff' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M73 54L78 43.2' stroke='%23a072ff' stroke-width='10' stroke-linecap='round'/%3E%3Cpath d='M53 70h14' stroke='%23fff' stroke-width='3' stroke-linecap='round' opacity='.7'/%3E%3Crect x='56' y='42' width='8' height='9' rx='3' fill='%23f1d1b5'/%3E%3Ccircle cx='60' cy='31' r='16' fill='%23f1d1b5'/%3E%3Cpath d='M43 31c0-11 7-18 17-18s17 7 17 18c-6-6-11-8-17-8s-11 2-17 8z' fill='%23a0522d'/%3E%3Cpath d='M76 22c10 2 14 12 10 22-2-7-6-11-11-13z' fill='%23a0522d'/%3E%3Ccircle cx='77' cy='22' r='3' fill='%23ff5a7e'/%3E%3Ccircle cx='54' cy='30' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='66' cy='30' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M54 36q6 6 12 0' stroke='%237a2e1f' stroke-width='2' fill='%23fff' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='35' r='2.6' fill='%23ff8fa3' opacity='.6'/%3E%3Ccircle cx='70' cy='35' r='2.6' fill='%23ff8fa3' opacity='.6'/%3E%3C/g%3E%3C/svg%3E"); }
.hl-thumb--grozdek { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 170'%3E%3Cpath d='M-10 20C60 50 120 10 190 40S320 30 430 60' stroke='%237a5230' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cg transform='rotate(10 40 40)'%3E%3Cpath d='M40 18 47.1 30.2 60.9 33.2 51.5 43.7 51 55.1 40 52.1 29 55.1 28.5 43.7 19.1 33.2 32.9 30.2Z' fill='%235fa04a' stroke='%235fa04a' stroke-width='6.6' stroke-linejoin='round'/%3E%3Cpath d='M40 40L40 22.4M40 40L56.7 34.6M40 40L50.3 54.2M40 40L29.7 54.2M40 40L23.3 34.6' stroke='%233f7d3a' stroke-width='1.3' opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(-15 150 30)'%3E%3Cpath d='M150 10 156.5 21.1 169 23.8 160.5 33.4 160 43.8 150 41 140 43.8 139.5 33.4 131 23.8 143.5 21.1Z' fill='%236cb04f' stroke='%236cb04f' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M150 30L150 14M150 30L165.2 25.1M150 30L159.4 42.9M150 30L140.6 42.9M150 30L134.8 25.1' stroke='%233f7d3a' stroke-width='1.2' opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(20 250 50)'%3E%3Cpath d='M250 28 257.1 40.2 270.9 43.2 261.5 53.7 261 65.1 250 62.1 239 65.1 238.5 53.7 229.1 43.2 242.9 40.2Z' fill='%235fa04a' stroke='%235fa04a' stroke-width='6.6' stroke-linejoin='round'/%3E%3Cpath d='M250 50L250 32.4M250 50L266.7 44.6M250 50L260.3 64.2M250 50L239.7 64.2M250 50L233.3 44.6' stroke='%233f7d3a' stroke-width='1.3' opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(-10 360 48)'%3E%3Cpath d='M360 30 365.8 40 377.1 42.4 369.4 51.1 369 60.4 360 57.9 351 60.4 350.6 51.1 342.9 42.4 354.2 40Z' fill='%236cb04f' stroke='%236cb04f' stroke-width='5.4' stroke-linejoin='round'/%3E%3Cpath d='M360 48L360 33.6M360 48L373.7 43.6M360 48L368.5 59.6M360 48L351.5 59.6M360 48L346.3 43.6' stroke='%233f7d3a' stroke-width='1.1' opacity='.6'/%3E%3C/g%3E%3Cpath d='M95 43V61' stroke='%237a5230' stroke-width='2.4'/%3E%3Ccircle cx='77.9' cy='70' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='74.8' cy='66.8' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='95' cy='70' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='91.8' cy='66.8' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='112.1' cy='70' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='108.9' cy='66.8' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='86.5' cy='84.4' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='83.3' cy='81.2' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='103.5' cy='84.4' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='100.4' cy='81.2' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='86.5' cy='98.8' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='83.3' cy='95.6' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='103.5' cy='98.8' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='100.4' cy='95.6' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='95' cy='113.2' r='9' fill='%237d4cc2'/%3E%3Ccircle cx='91.8' cy='110' r='2.2' fill='%23fff' opacity='.4'/%3E%3Cpath d='M205 48V64' stroke='%237a5230' stroke-width='2.4'/%3E%3Ccircle cx='189.8' cy='72' r='8' fill='%238fc45a'/%3E%3Ccircle cx='187' cy='69.2' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='205' cy='72' r='8' fill='%238fc45a'/%3E%3Ccircle cx='202.2' cy='69.2' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='220.2' cy='72' r='8' fill='%238fc45a'/%3E%3Ccircle cx='217.4' cy='69.2' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='197.4' cy='84.8' r='8' fill='%238fc45a'/%3E%3Ccircle cx='194.6' cy='82' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='212.6' cy='84.8' r='8' fill='%238fc45a'/%3E%3Ccircle cx='209.8' cy='82' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='197.4' cy='97.6' r='8' fill='%238fc45a'/%3E%3Ccircle cx='194.6' cy='94.8' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='212.6' cy='97.6' r='8' fill='%238fc45a'/%3E%3Ccircle cx='209.8' cy='94.8' r='2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='205' cy='110.4' r='8' fill='%238fc45a'/%3E%3Ccircle cx='202.2' cy='107.6' r='2' fill='%23fff' opacity='.4'/%3E%3Cpath d='M310 55V73' stroke='%237a5230' stroke-width='2.4'/%3E%3Ccircle cx='292.9' cy='82' r='9' fill='%239466d6'/%3E%3Ccircle cx='289.8' cy='78.8' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='310' cy='82' r='9' fill='%239466d6'/%3E%3Ccircle cx='306.9' cy='78.8' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='327.1' cy='82' r='9' fill='%239466d6'/%3E%3Ccircle cx='324' cy='78.8' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='301.4' cy='96.4' r='9' fill='%239466d6'/%3E%3Ccircle cx='298.3' cy='93.2' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='318.6' cy='96.4' r='9' fill='%239466d6'/%3E%3Ccircle cx='315.4' cy='93.2' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='301.4' cy='110.8' r='9' fill='%239466d6'/%3E%3Ccircle cx='298.3' cy='107.6' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='318.6' cy='110.8' r='9' fill='%239466d6'/%3E%3Ccircle cx='315.4' cy='107.6' r='2.2' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='310' cy='125.2' r='9' fill='%239466d6'/%3E%3Ccircle cx='306.9' cy='122' r='2.2' fill='%23fff' opacity='.4'/%3E%3Cpath d='M120 30c10 -4 16 6 10 12s-12 2 -8 -6' stroke='%235fa04a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M280 44c-10 -4 -16 6 -10 12s12 2 8 -6' stroke='%235fa04a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") left -4px top -2px / 70px auto no-repeat, linear-gradient(#7b5bbf, #a68ae0 62%, #9bcf73); }
.hl-thumb--grozdek .hl-aside { box-shadow: 0 0 0 3px #9466d6; }
.hl-thumb--grozdek::after { content: ''; position: absolute; z-index: 2; left: 42%; bottom: 2px; width: 30px; height: 33px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 220'%3E%3Cpath d='M100 8Q104 30 100 52' stroke='%237a5230' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cg transform='rotate(-20 70 34)'%3E%3Cpath d='M70 10 77.8 23.3 92.8 26.6 82.6 38.1 82 50.5 70 47.2 58 50.5 57.4 38.1 47.2 26.6 62.2 23.3Z' fill='%235fa04a' stroke='%235fa04a' stroke-width='7.2' stroke-linejoin='round'/%3E%3Cpath d='M70 34L70 14.8M70 34L88.3 28.1M70 34L81.3 49.5M70 34L58.7 49.5M70 34L51.7 28.1' stroke='%233f7d3a' stroke-width='1.4' opacity='.6'/%3E%3C/g%3E%3Cg transform='rotate(25 132 30)'%3E%3Cpath d='M132 10 138.5 21.1 151 23.8 142.5 33.4 142 43.8 132 41 122 43.8 121.5 33.4 113 23.8 125.5 21.1Z' fill='%236cb04f' stroke='%236cb04f' stroke-width='6' stroke-linejoin='round'/%3E%3Cpath d='M132 30L132 14M132 30L147.2 25.1M132 30L141.4 42.9M132 30L122.6 42.9M132 30L116.8 25.1' stroke='%233f7d3a' stroke-width='1.2' opacity='.6'/%3E%3C/g%3E%3Cpath d='M108 18c10 -4 16 6 10 12s-12 2 -8 -6' stroke='%235fa04a' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='50.3' cy='70' r='17' fill='%237d4cc2'/%3E%3Cellipse cx='43.1' cy='62.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 43.1 62.4)'/%3E%3Ccircle cx='44.8' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='55.7' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M45.5 73.7q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='40.9' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='59.6' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Cpath d='M57.9 56.1l-6.8 -3.7v7.5zM57.9 56.1l6.8 -3.7v7.5z' fill='%23ff5a7e'/%3E%3Ccircle cx='57.9' cy='56.1' r='1.7' fill='%23ff5a7e'/%3E%3Ccircle cx='83.4' cy='70' r='17' fill='%239466d6'/%3E%3Cellipse cx='76.3' cy='62.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 76.3 62.4)'/%3E%3Ccircle cx='78' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='88.9' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M78.7 73.4q4.8 7.1 9.5 0z' fill='%235a1f2e'/%3E%3Ccircle cx='74.1' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='92.8' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='116.6' cy='70' r='17' fill='%238fc45a'/%3E%3Cellipse cx='109.4' cy='62.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 109.4 62.4)'/%3E%3Ccircle cx='111.1' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='122' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M111.8 73.7q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='107.2' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='125.9' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Cpath d='M114 53q-1.7 -5.9 -5.4 -6.8M117.4 53q0 -6.8 3.1 -8.2' stroke='%233b2a1e' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='149.7' cy='70' r='17' fill='%237d4cc2'/%3E%3Cellipse cx='142.6' cy='62.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 142.6 62.4)'/%3E%3Ccircle cx='144.3' cy='68.6' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M153.1 68.6q2 -2 4.1 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M145 73.7q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='140.4' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='159.1' cy='73.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='140.4' cy='57.8' r='2.9' fill='%23ffd43b'/%3E%3Ccircle cx='70.8' cy='97.5' r='17' fill='%239466d6'/%3E%3Cellipse cx='63.7' cy='89.9' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 63.7 89.9)'/%3E%3Ccircle cx='65.4' cy='96.2' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='76.3' cy='96.2' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M66.1 101.3q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='61.5' cy='100.6' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='80.2' cy='100.6' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='104' cy='97.5' r='17' fill='%236a3fb0'/%3E%3Cellipse cx='96.9' cy='89.9' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 96.9 89.9)'/%3E%3Ccircle cx='98.6' cy='96.2' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='109.4' cy='96.2' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M99.2 101.3q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='94.7' cy='100.6' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='113.3' cy='100.6' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Cpath d='M111.7 83.6l-6.8 -3.7v7.5zM111.7 83.6l6.8 -3.7v7.5z' fill='%23ff5a7e'/%3E%3Ccircle cx='111.7' cy='83.6' r='1.7' fill='%23ff5a7e'/%3E%3Ccircle cx='137.2' cy='97.5' r='17' fill='%237d4cc2'/%3E%3Cellipse cx='130' cy='89.9' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 130 89.9)'/%3E%3Ccircle cx='131.7' cy='96.2' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='142.6' cy='96.2' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M132.4 100.9q4.8 7.1 9.5 0z' fill='%235a1f2e'/%3E%3Ccircle cx='127.8' cy='100.6' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='146.5' cy='100.6' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Cpath d='M134.6 80.5q-1.7 -5.9 -5.4 -6.8M138 80.5q0 -6.8 3.1 -8.2' stroke='%233b2a1e' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='66.8' cy='125.1' r='17' fill='%23a3d16c'/%3E%3Cellipse cx='59.7' cy='117.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 59.7 117.4)'/%3E%3Ccircle cx='61.4' cy='123.7' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='72.3' cy='123.7' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M62.1 128.8q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='57.5' cy='128.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='76.2' cy='128.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='100' cy='125.1' r='17' fill='%236a3fb0'/%3E%3Cellipse cx='92.9' cy='117.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 92.9 117.4)'/%3E%3Ccircle cx='94.6' cy='123.7' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M103.4 123.7q2 -2 4.1 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M95.2 128.8q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='90.7' cy='128.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='109.3' cy='128.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='90.7' cy='112.8' r='2.9' fill='%23ffd43b'/%3E%3Ccircle cx='133.2' cy='125.1' r='17' fill='%237d4cc2'/%3E%3Cellipse cx='126' cy='117.4' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 126 117.4)'/%3E%3Ccircle cx='127.7' cy='123.7' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='138.6' cy='123.7' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M128.4 128.8q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='123.8' cy='128.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='142.5' cy='128.1' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Cpath d='M140.8 111.1l-6.8 -3.7v7.5zM140.8 111.1l6.8 -3.7v7.5z' fill='%23ff5a7e'/%3E%3Ccircle cx='140.8' cy='111.1' r='1.7' fill='%23ff5a7e'/%3E%3Ccircle cx='87.4' cy='152.6' r='17' fill='%239466d6'/%3E%3Cellipse cx='80.3' cy='145' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 80.3 145)'/%3E%3Ccircle cx='82' cy='151.3' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='92.9' cy='151.3' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M82.7 156q4.8 7.1 9.5 0z' fill='%235a1f2e'/%3E%3Ccircle cx='78.1' cy='155.7' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='96.8' cy='155.7' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='120.6' cy='152.6' r='17' fill='%23a3d16c'/%3E%3Cellipse cx='113.4' cy='145' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 113.4 145)'/%3E%3Ccircle cx='115.1' cy='151.3' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='126' cy='151.3' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M115.8 156.4q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='111.2' cy='155.7' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='129.9' cy='155.7' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Cpath d='M118 135.6q-1.7 -5.9 -5.4 -6.8M121.4 135.6q0 -6.8 3.1 -8.2' stroke='%233b2a1e' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='180.2' r='17' fill='%237d4cc2'/%3E%3Cellipse cx='92.9' cy='172.5' rx='3.7' ry='2.4' fill='%23fff' opacity='.45' transform='rotate(-35 92.9 172.5)'/%3E%3Ccircle cx='94.6' cy='178.8' r='1.9' fill='%232e2a3a'/%3E%3Ccircle cx='105.4' cy='178.8' r='1.9' fill='%232e2a3a'/%3E%3Cpath d='M95.2 183.9q4.8 5.1 9.5 0' stroke='%232e2a3a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='90.7' cy='183.2' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3Ccircle cx='109.3' cy='183.2' r='2.4' fill='%23ff8fa3' opacity='.7'/%3E%3C/svg%3E") no-repeat center / contain; }

/* dokumenti: kvačica za skupnu promjenu datuma + polje datuma u traci */
.docs-table .col-check { width: 34px; padding-right: 0; }
.cu-bulkbar .input-sm { width: auto; height: 32px; padding: 4px 8px; font-size: 13px; }

/* Izgled weba: prekidač razigranog vrtićkog paketa */
.kidfun-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; }
.kidfun-card .sl-check { flex: 1 1 420px; margin: 0; }
.hl-thumb--rudarski { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 210'%3E%3Crect x='0' y='176' width='54' height='34' rx='3' fill='%23c9563c'/%3E%3Cpath d='M-2 178h58l-6-12H4z' fill='%237a3b2a'/%3E%3Crect x='10' y='186' width='10' height='10' rx='2' fill='%23ffe9a8'/%3E%3Crect x='30' y='186' width='10' height='10' rx='2' fill='%23ffe9a8'/%3E%3Cpath d='M40 210L50 40M80 210L70 40' stroke='%234a3a33' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M42 200L78 180M78 200L42 180M42.8 180L77.2 160M77.2 180L42.8 160M43.6 160L76.4 140M76.4 160L43.6 140M44.4 140L75.6 120M75.6 140L44.4 120M45.2 120L74.8 100M74.8 120L45.2 100M46 100L74 80M74 100L46 80M46.8 80L73.2 60M73.2 80L46.8 60M47.6 60L72.4 40M72.4 60L47.6 40' stroke='%234a3a33' stroke-width='2.2'/%3E%3Cpath d='M128 210L74 66' stroke='%234a3a33' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M118 210L84 120' stroke='%234a3a33' stroke-width='2.4'/%3E%3Crect x='40' y='34' width='40' height='8' rx='2' fill='%23f2a413'/%3E%3Cpath d='M60 34v-6' stroke='%234a3a33' stroke-width='4'/%3E%3Cpath d='M60 46v140' stroke='%23a99a8c' stroke-width='1.4' stroke-dasharray='3 3'/%3E%3C/svg%3E") right 30% bottom 8px / auto 34px no-repeat, linear-gradient(#4fb3ef, #1f78c8) bottom / 100% 9px no-repeat, linear-gradient(#5cb8ea, #a8dcf3 62%, #9fd27a); }
.hl-thumb--rudarski .hl-aside { box-shadow: 0 0 0 3px #ffd21f; }

/* ============================================================ PRIJAVA — urednički „impresum” izgled (.lg)
   tamni stupac s podacima ustanove (oznake za rez, okomiti natpis) + papirnati obrazac; bez gradijenata i sjaja */
body.auth:has(.lg) { background: #efebe2; overflow: auto; }
body.auth:has(.lg)::before, body.auth:has(.lg)::after { display: none; }
body.auth:has(.lg) .auth-wrap { padding: 0; align-items: stretch; }
.lg {
    --ink: #17181c;
    --paper: #efebe2;
    --rule: rgba(23, 24, 28, 0.045);
    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    width: 100%;
    min-height: 100vh;
    color: var(--ink);
}

/* --- lijevi stupac --- */
.lg-mast {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    padding: 56px 72px 52px 72px;
    background: var(--ink);
    color: #e9e5dc;
    overflow: hidden;
}
.lg-crop { position: absolute; width: 18px; height: 18px; border-color: rgba(233, 229, 220, 0.35); border-style: solid; border-width: 0; }
.lg-crop--tl { top: 22px; left: 22px; border-top-width: 1px; border-left-width: 1px; }
.lg-crop--tr { top: 22px; right: 22px; border-top-width: 1px; border-right-width: 1px; }
.lg-crop--bl { bottom: 22px; left: 22px; border-bottom-width: 1px; border-left-width: 1px; }
.lg-crop--br { bottom: 22px; right: 22px; border-bottom-width: 1px; border-right-width: 1px; }
.lg-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(233, 229, 220, 0.18);
    font: 500 11px/1.4 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(233, 229, 220, 0.6);
}
.lg-logo {
    display: inline-flex;
    margin-bottom: 30px;
    padding: 10px 14px;
    background: var(--paper);
    border-radius: 2px;
}
.lg-logo img { display: block; max-height: 40px; width: auto; }
.lg-kicker {
    margin: 0 0 14px;
    font: 500 11px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9fbf6a;
}
.lg-site {
    margin: 0;
    max-width: 13ch;
    font: 500 clamp(40px, 4.6vw, 68px)/1.02 var(--serif);
    letter-spacing: -0.02em;
    color: #f4f1ea;
    text-wrap: balance;
}
.lg-host { margin: 18px 0 0; font: 400 13px/1 var(--mono); color: rgba(233, 229, 220, 0.5); }
.lg-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid rgba(233, 229, 220, 0.18);
}
.lg-facts > div { padding: 16px 18px 0 0; }
.lg-facts > div + div { padding-left: 18px; border-left: 1px solid rgba(233, 229, 220, 0.12); }
.lg-facts dt { margin-bottom: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(233, 229, 220, 0.5); }
.lg-facts dd { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(233, 229, 220, 0.85); }
.lg-spine {
    position: absolute;
    top: 50%;
    right: 28px;
    margin: 0;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(233, 229, 220, 0.28);
    white-space: nowrap;
}

/* --- desni stupac (obrazac na papiru s tankim linijama) --- */
.lg-desk {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px clamp(28px, 6vw, 96px) 36px;
    background: repeating-linear-gradient(var(--paper) 0 31px, var(--rule) 31px 32px);
}
.lg-form-wrap { width: 100%; max-width: 400px; margin: auto 0; padding: 40px 0; }
.lg-label { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(23, 24, 28, 0.6); }
.lg-sq { width: 8px; height: 8px; background: #1f9e33; }
.lg-title { margin: 0 0 10px; font: 500 46px/1.05 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.lg-sub { margin: 0 0 34px; font-size: 14.5px; line-height: 1.55; color: rgba(23, 24, 28, 0.66); max-width: 32ch; }
.lg-lock { margin: -10px 0 26px; padding: 14px 16px; border-left: 3px solid #b3261e; background: #f7e3df; font-size: 13.5px; line-height: 1.5; color: #5c1712; }
.lg-lock strong { display: block; margin-bottom: 2px; }
.lg-field { display: block; margin-bottom: 10px; font: 600 12px/1 var(--font); letter-spacing: 0.02em; color: var(--ink); }

/* PIN: monospace ćelije, razmak 3 + 3, bez zaobljenih „mjehurića” i bez skakanja */
.lg .pin-boxes { justify-content: flex-start; gap: 8px; margin: 0 0 22px; }
.lg .pin-box {
    width: 54px;
    height: 64px;
    border: 1px solid rgba(23, 24, 28, 0.32);
    border-radius: 3px;
    background: #fbfaf6;
    font: 600 26px var(--mono);
    color: var(--ink);
    caret-color: #1f9e33;
    animation: none;
    box-shadow: inset 0 -3px 0 transparent;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.lg .pin-box:nth-child(3) { margin-right: 14px; }
.lg .pin-box:focus { transform: none; border-color: var(--ink); background: #fff; box-shadow: inset 0 -3px 0 #1f9e33; }
.lg .pin-box.filled { background: #fff; border-color: var(--ink); animation: none; }
.lg .pin-fallback { text-align: left; font-family: var(--mono); border-radius: 3px; background: #fbfaf6; }
.lg .pin-error { text-align: left; margin: -12px 0 16px; }
.lg-turnstile { margin: 0 0 18px; }
.lg-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 382px;
    padding: 17px 20px;
    border: 0;
    border-radius: 3px;
    background: var(--ink);
    color: #f4f1ea;
    font: 600 15px/1 var(--font);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s;
}
.lg-submit:hover { background: #000; }
.lg-submit:focus-visible { outline: 2px solid #1f9e33; outline-offset: 3px; }
.lg-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.lg-submit kbd { font: 500 11px/1 var(--mono); padding: 5px 7px; border: 1px solid rgba(244, 241, 234, 0.3); border-radius: 3px; color: rgba(244, 241, 234, 0.75); background: none; }
.lg-help { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: rgba(23, 24, 28, 0.55); }
.lg-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(23, 24, 28, 0.14); }
.lg-back { font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; }
.lg-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg .auth-credit { margin: 0; font: 400 11px/1.4 var(--mono); color: rgba(23, 24, 28, 0.5); }

@media (max-width: 960px) {
    .lg { grid-template-columns: minmax(0, 1fr); }
    .lg-mast { gap: 28px; padding: 30px 24px 28px; }
    .lg-facts, .lg-spine, .lg-crop { display: none; }
    .lg-logo { margin-bottom: 18px; }
    .lg-site { font-size: clamp(30px, 8vw, 44px); max-width: none; }
    .lg-desk { padding: 8px 20px 24px; }
    .lg-form-wrap { padding: 28px 0 32px; }
    .lg-title { font-size: 36px; }
}
@media (max-width: 400px) {
    .lg .pin-boxes { gap: 6px; }
    .lg .pin-box { width: 44px; height: 56px; font-size: 22px; }
    .lg .pin-box:nth-child(3) { margin-right: 8px; }
    .lg-meta span:last-child { display: none; }
}

.hl-thumb--church { background: linear-gradient(180deg, #3a1520, #6b1e2e); }
.hl-thumb--church .hl-aside { flex: 0 0 26%; height: auto; aspect-ratio: 100 / 140; border: 0; border-radius: 0; background: linear-gradient(160deg, #f3dc8a, #c9a227); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V58C0 26 24 6 50 0 76 6 100 26 100 58V140Z'/%3E%3C/svg%3E") center / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V58C0 26 24 6 50 0 76 6 100 26 100 58V140Z'/%3E%3C/svg%3E") center / 100% 100%; }
.hl-thumb--church .hl-main .hl-k { background: #c9a227; }
.hl-thumb--church .hl-main .hl-b { background: #c9a227; border-radius: 1px; }
.hl-thumb--vitraj .hl-aside { background: conic-gradient(from 0deg at 50% 60%, #9b1d2e, #1f4e8c, #c9a227, #2e7d4f, #6b3fa0, #9b1d2e); }
.hl-thumb--svijece { background: radial-gradient(40% 50% at 18% 100%, rgba(255,179,71,.45), transparent 70%), linear-gradient(180deg, #1c0d10, #3a1520); }
.hl-thumb--golubica { --hl-fg: #6b1e2e; background: linear-gradient(180deg, #fbf3e0, #f0dfb0); }
.hl-thumb--rukopis { --hl-fg: #6b1e2e; background: radial-gradient(#fbf3df, #efe0bd); box-shadow: inset 0 0 0 3px #f6ecd5, inset 0 0 0 4px #c9a227; }
.hl-thumb--zvonik { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 200'%3E%3Cpath fill-rule='evenodd' d='M120 186V82h50v104zM136 98h18v24h-18z'/%3E%3Cpath d='M114 84L145 22 176 84z'/%3E%3Cpath d='M143 0h4v24h-4zM137 7h16v4h-16z'/%3E%3Cpath fill-rule='evenodd' d='M170 186V114l80-48 80 48v72zM238 122a12 12 0 1 0 24 0 12 12 0 1 0-24 0zM240 186v-26a10 10 0 0 1 20 0v26z'/%3E%3Cpath d='M248 66V50h4v16zM243 55h14v4h-14z'/%3E%3Cpath d='M330 186v-46h72v46zM402 186v-32a32 32 0 0 1 64 0v32z'/%3E%3Cpath d='M40 186c-10-30-6-70 8-98 14 28 18 68 8 98zM74 186c-8-24-5-56 6-78 11 22 14 54 6 78z'/%3E%3Cpath d='M512 186c-12-28-8-66 10-92 18 26 22 64 10 92zM548 186v-32l22-15 22 15v32zM600 186v-24l16-11 16 11v24z'/%3E%3Cpath d='M0 200v-16h640v16z'/%3E%3C/svg%3E") left bottom / 70% auto no-repeat, linear-gradient(180deg, #1c1430, #5b2a4a 60%, #c97a4a); }

/* uređivač stranica: strelice gore/dolje i kratki bljesak premještenog bloka */
.pb-move svg { display: block; }
.pb-block.pb-moved { animation: pbMoved .6s ease; }
@keyframes pbMoved { 0% { box-shadow: 0 0 0 3px var(--accent-ring); } 100% { box-shadow: 0 0 0 0 transparent; } }
.pb-dragmode .pb-block { transition: none; }

/* radno vrijeme: alati odjela (kloniranje, kopiranje rasporeda) */
.hours-unit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hours-copyto { display: flex; align-items: center; gap: 6px; }
.hours-copyto .input-sm { width: auto; height: 32px; padding: 4px 8px; font-size: 13px; }

/* galerija: brojevi stranica + skok na stranicu */
.media-pager { flex-wrap: wrap; }
.media-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.media-page { min-width: 34px; height: 34px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s; }
.media-page:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.media-page.is-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.media-page-gap { padding: 0 2px; color: var(--muted); }
.media-jump { display: flex; align-items: center; gap: 6px; margin-left: 8px; font-size: 13px; color: var(--muted); }
.media-jump .input { width: 70px; height: 34px; padding: 4px 8px; text-align: center; }
.media-pager-total { margin: 6px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* dokumenti: mapa skrivena s javnog weba — prekriženo oko (crveno, uvijek vidljivo), prigušen i precrtan naziv */
.ftree-eye .ico-off { display: none; }
.ftree-eye.is-off .ico-on { display: none; }
.ftree-eye.is-off .ico-off { display: block; }
.ftree-eye.is-off { color: #c0392b; }
.ftree-item.is-hidden > .ftree-row .ftree-name { opacity: 0.5; text-decoration: line-through; text-decoration-thickness: 1px; }
.ftree-item.is-hidden > .ftree-row .ftree-actions { opacity: 1; visibility: visible; }

/* dokumenti — stablo mapa: dugi nazivi se prelamaju (do 2 reda) umjesto da se režu;
   ikone (+, olovka, oko) ne zauzimaju mjesto — pojave se preko desnog kraja retka tek pri prelasku mišem */
.ftree-row { position: relative; }
.ftree-name { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.ftree-count { flex: none; }
@media (hover: hover) {
    .ftree-actions {
        position: absolute;
        right: 4px;
        top: 50%;
        translate: 0 -50%;
        padding: 2px 2px 2px 14px;
        border-radius: 8px;
        background: linear-gradient(90deg, transparent, var(--bg) 12px);
        opacity: 0;
        pointer-events: none;
    }
    .ftree-row:hover .ftree-actions, .ftree-actions:focus-within { opacity: 1; pointer-events: auto; }
    .ftree-row.is-active .ftree-actions { background: linear-gradient(90deg, transparent, var(--accent-soft) 12px); }
    /* skrivena mapa: crveno prekriženo oko stalno vidljivo (bez ostalih ikona) */
    .ftree-item.is-hidden > .ftree-row .ftree-actions { opacity: 1; pointer-events: auto; background: none; position: static; translate: none; padding: 0; }
    .ftree-item.is-hidden > .ftree-row:not(:hover) .ftree-actions form:not(:has(.ftree-eye)) { display: none; }
}

/* dokumenti: napredni drag & drop u stablu mapa */
.ftree-row.dnd-before, .ftree-row.dnd-after { position: relative; }
.ftree-row.dnd-before::before, .ftree-row.dnd-after::after {
    content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 3px; background: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring); pointer-events: none; z-index: 2;
}
.ftree-row.dnd-before::before { top: -3px; }
.ftree-row.dnd-after::after { bottom: -3px; }
.ftree-row.dnd-before::after, .ftree-row.dnd-after::before { content: ""; position: absolute; left: 2px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; z-index: 3; }
.ftree-row.dnd-before::after { top: -6px; }
.ftree-row.dnd-after::before { bottom: -6px; }
.ftree-rootzone { display: none; }
body.dnd-folder-mode .ftree-rootzone {
    display: grid; place-items: center; margin: 0 0 8px; padding: 14px 10px; border: 2px dashed var(--accent);
    border-radius: 10px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; text-align: center;
}
body.dnd-folder-mode .ftree-rootzone.dnd-over { background: var(--accent); color: #fff; }
body.dnd-folder-mode .ftree-list .ftree-list { min-height: 4px; }
.dnd-tip {
    position: fixed; z-index: 9999; padding: 6px 10px; border-radius: 8px; background: #111827; color: #fff;
    font-size: 12.5px; font-weight: 600; pointer-events: none; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

/* zona glavne razine preko retka „Sve datoteke” (bez pomicanja stabla ispod pokazivača) */
.ftree-card { position: sticky; }
.ftree-rootzone { position: relative; }
body.dnd-folder-mode .ftree-rootzone { position: relative; z-index: 3; margin: 0 0 6px; min-height: 52px; }

/* builder: blok „Osobe i funkcije” */
.pb-pp-list { display: grid; gap: 8px; margin: 8px 0; }
.pb-pp-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
.pb-pp-photo { width: 84px; height: 100px; padding: 0; border: 1px dashed var(--border-strong); border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 600; }
.pb-pp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pb-pp-photo:hover { border-color: var(--accent); color: var(--accent); }
.pb-pp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pb-pp-tools { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 700px) { .pb-pp-fields { grid-template-columns: 1fr; } }

/* ↻ zakreni sliku (galerija uz novost + naslovna) — tamni kvadratić kao ×, lijevo od njega */
.img-rot {
    position: absolute;
    top: 6px;
    right: 36px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(13, 15, 30, .68);
    color: #fff;
    cursor: pointer;
    transition: background .12s;
}
.img-rot:hover { background: var(--accent); }
.img-rot--cover { top: 8px; right: 46px; width: 30px; height: 30px; border-radius: 50%; }

/* picker galerije: od ruba do ruba (kao WordPress „Dodaj medijski zapis”) — mreža puni sav prostor, gušće sličice */
.modal.modal--wide {
    display: flex;
    flex-direction: column;
    max-width: none;
    width: 100%;
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
}
.modal--wide .mp-grid {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-auto-rows: 168px;
    gap: 10px;
}
@media (max-width: 720px) {
    .modal--wide .mp-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 140px; gap: 8px; }
}
/* mobitel: ćelija backdropa (grid) se inače širi do sadržaja filtera → prozor viri izvan ekrana */
.modal-backdrop:has(> .modal--wide) { grid-template-columns: minmax(0, 1fr); }
.modal.modal--wide { min-width: 0; }
.modal--wide .mp-head > *, .modal--wide .mp-filters .input { min-width: 0; }
@media (max-width: 720px) {
    .modal-backdrop:has(> .modal--wide) { padding: 10px; }
    .modal.modal--wide { padding: 14px; height: calc(100dvh - 20px); }
}

/* picker: povuci & ispusti slike s računala — natuknica u zaglavlju + istaknuta mreža dok se vuče */
.mp-drop-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mp-drop-hint svg { color: var(--accent); flex: none; }
.modal--wide .mp-grid { position: relative; transition: background-color .15s, outline-color .15s; outline: 2px dashed transparent; outline-offset: -6px; }
.modal--wide.is-drop .mp-grid { outline-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.modal--wide.is-drop .mp-grid::after {
    content: "Pustite slike — prenose se u galeriju";
    position: sticky;
    bottom: 45%;
    grid-column: 1 / -1;
    justify-self: center;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .25);
    pointer-events: none;
}
.modal--wide.is-drop .mp-grid > * { pointer-events: none; }
@media (max-width: 900px) { .mp-drop-hint { display: none; } }

/* picker: traka napretka prijenosa (Prenosim 5 od 17 · ime — 42 %) */
.mp-progress { display: grid; gap: 6px; margin: -4px 0 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 6%, var(--card, #fff)); }
.mp-progress[hidden] { display: none; }
.mp-progress-text { font-size: 13px; font-weight: 600; color: var(--text, #101828); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-progress-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); overflow: hidden; }
.mp-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #4ade80)); transition: width .25s ease; }


/* ---- modul Prodaja vozila (admin) ---- */
.field-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .field-row--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .field-row--3, .field-row--4 { grid-template-columns: minmax(0, 1fr); } }
.car-form .card-title { margin-bottom: 14px; }
.car-price { font-size: 20px; font-weight: 700; }
.car-imgs { margin-bottom: 14px; }
.car-imgs .gallery-item img { height: 120px; }
.car-star {
    position: absolute; top: 6px; right: 36px;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
    background: rgba(13, 15, 30, .68); color: #fff; font-size: 14px; line-height: 1; cursor: pointer;
}
.car-star:hover { background: #f59e0b; }
.car-imgs .is-cover { outline: 3px solid #f59e0b; outline-offset: -3px; }
.car-imgs .is-cover .car-star { background: #f59e0b; }
.car-imgs .is-cover::after {
    content: "Naslovna"; position: absolute; left: 6px; bottom: 6px;
    padding: 2px 7px; border-radius: 6px; background: #f59e0b; color: #1a1205; font-size: 11px; font-weight: 700;
}
.car-imgs .is-removed img { opacity: .25; filter: grayscale(1); }
.car-imgs .is-removed .gallery-del { background: #d92d20; }
.car-eq { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 22px; margin-bottom: 16px; }
.car-eq-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.car-eq-group legend { margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.car-eq-group .check { margin: 0 0 4px; font-size: 13.5px; }
.cars-search { margin-left: auto; }
.cars-search .input { min-width: 220px; }
.cars-thumb { display: block; width: 72px; height: 50px; border-radius: 6px; overflow: hidden; background: var(--bg); }
.cars-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cars-name { color: inherit; text-decoration: none; }
.cars-name:hover strong { color: var(--accent); }
.cars-status { margin: 0; }
.input-sm { padding: 5px 8px; font-size: 13px; min-height: 0; height: auto; }
.badge-select { font-weight: 700; border-color: transparent; cursor: pointer; }

/* automatski predložena polja (iz modela/verzije) — žuto dok ih korisnik ne potvrdi/promijeni */
.car-form .is-guessed { background: #fffbea; border-color: #f2c94c; box-shadow: 0 0 0 3px rgba(242, 201, 76, .18); }
.car-guess-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #fffbea; border: 1px solid #f2c94c; color: #7a5b00; font-size: 13px; font-weight: 600; }

.car-vin-row { display: flex; gap: 8px; }
.car-vin-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.hint-inline { font-weight: 400; color: var(--muted); font-size: 12.5px; }

/* obrazac vozila: kartice (isti stil kao Postavke) */
.car-tabs { margin-bottom: 16px; }
.stab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: 11.5px; font-weight: 800; }

.car-eq-bulk { display: flex; gap: 6px; margin-left: auto; }
.car-eq-group .check { display: flex; align-items: flex-start; } /* svaka stavka u svom redu */
.car-eq-group .check input { margin-top: 2px; flex: none; }

/* ============================================================ Slider → izgled heroja: „Za auto salone — dinamično”
   (skupina 'auto', vidljiva samo uz modul Prodaja vozila) — mali pregledi; scena u ::before */
.hl-thumb--auto { --hl-bg: #0b0e13; --hl-fg: #f2f3f5; --hl-acc: #e3122c; background: radial-gradient(90% 100% at 85% 0%, #3a1218, var(--hl-bg) 62%); }
.hl-thumb--auto::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.hl-thumb--auto .hl-aside { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.18); }
.hl-thumb--showroom::before {
    background:
        radial-gradient(30% 60% at 70% -6%, rgb(255 255 255 / 0.32), transparent 72%),
        linear-gradient(90deg, transparent, rgb(255 255 255 / 0.4), transparent) 0 70% / 100% 1px no-repeat,
        linear-gradient(180deg, transparent 70%, #050608 70%);
}
.hl-thumb--brzina::before {
    background:
        linear-gradient(90deg, transparent, #e3122c 70%, transparent) 10% 26% / 60% 2px no-repeat,
        linear-gradient(90deg, transparent, rgb(255 255 255 / 0.6), transparent) 60% 46% / 50% 1px no-repeat,
        linear-gradient(90deg, transparent, #e3122c 80%, transparent) 30% 66% / 70% 2px no-repeat,
        linear-gradient(90deg, transparent, rgb(255 255 255 / 0.5), transparent) 80% 84% / 40% 1px no-repeat;
    transform: rotate(-12deg) scale(1.3);
}
.hl-thumb--karbon::before {
    background:
        linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.16) 50%, transparent 60%),
        linear-gradient(27deg, #0c0d10 3px, transparent 3px) 0 3px,
        linear-gradient(207deg, #0c0d10 3px, transparent 3px) 6px 0,
        linear-gradient(27deg, #23262c 3px, transparent 3px) 0 6px,
        linear-gradient(207deg, #23262c 3px, transparent 3px) 6px 3px,
        linear-gradient(90deg, #191b20 6px, transparent 6px),
        #121418;
    background-size: 100% 100%, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, auto;
}
.hl-thumb--cesta::before {
    left: 20%; right: -10%; top: auto; height: 62%;
    background:
        linear-gradient(#f5c542 0 50%, transparent 50%) center top / 3px 14px repeat-y,
        linear-gradient(90deg, transparent 6%, #ffffff 6% 8%, transparent 8% 92%, #ffffff 92% 94%, transparent 94%),
        #3a3e45;
    transform: perspective(60px) rotateX(55deg);
    transform-origin: bottom;
    opacity: 0.85;
}
.hl-thumb--brojcanik::before {
    left: auto; right: 6%; top: 12%; bottom: auto; width: 46%; aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from -135deg, rgb(255 255 255 / 0.4) 0 205deg, #e3122c 205deg 270deg, transparent 270deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000000 calc(100% - 3px));
}
.hl-thumb--brojcanik::after {
    content: ""; position: absolute; right: 29%; top: 35%; width: 18%; height: 2px;
    background: #e3122c; transform: rotate(-60deg); transform-origin: 0 50%; pointer-events: none;
}
.hl-thumb--nocna { background: linear-gradient(180deg, #16223f, #0b0e13); }
.hl-thumb--nocna::before {
    background:
        radial-gradient(circle at 64% 24%, rgb(245 197 66 / 0.7) 0 5px, transparent 6px),
        radial-gradient(circle at 80% 38%, rgb(255 255 255 / 0.45) 0 8px, transparent 9px),
        radial-gradient(circle at 90% 18%, rgb(227 18 44 / 0.7) 0 4px, transparent 5px),
        radial-gradient(circle at 72% 54%, rgb(245 197 66 / 0.4) 0 9px, transparent 10px),
        linear-gradient(90deg, transparent, #e3122c, transparent) 20% 82% / 60% 2px no-repeat,
        linear-gradient(90deg, transparent, #ffffff, transparent) 70% 90% / 50% 1px no-repeat;
    filter: blur(0.6px);
}

/* uvoz vozila iz WordPressa: traka napretka */
.cwp-bar { height: 10px; margin: 12px 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 15%, transparent); overflow: hidden; }
.cwp-bar span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.cwp-err { margin: 10px 0; font-size: 13px; color: var(--red, #b42318); }