/* ===================== Kroj – zajednički elementi i moduli ===================== */
:root { --kr-hrast: #C8893B; --kr-zelena: #2F5D50; --kr-zelena-2: #3F7A68; --kr-tamna: #16201F; }

.sp-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .82em; }
.sp-oznaka { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.sp-osoba { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: .68rem; font-weight: 700; flex-shrink: 0; }
.sp-provjera { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(160deg, #0E1615, #16201F 50%, #2F5D50); }
.sp-traka { height: 10px; border-radius: 999px; background: var(--mud-palette-lines-default); overflow: hidden; }
.sp-traka > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2F5D50, #5FB096); }
.sp-vodic { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sp-vodic-korak { display: flex; gap: 10px; align-items: center; padding: 8px 14px; flex: 0 0 auto; white-space: nowrap; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: inherit; text-decoration: none; transition: all .15s ease; }
.sp-vodic-korak:hover { border-color: var(--kr-hrast); transform: translateY(-1px); box-shadow: var(--sp-sjena-hover); }
.sp-vodic-korak b { display: block; font-size: .88rem; }
.sp-vodic-korak small { display: none; }
.sp-vodic-broj { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: .78rem; color: #fff; background: linear-gradient(135deg, #C8893B, #9A6424); }
.kr-vodic-okvir { border-color: rgba(200, 137, 59, .55) !important; background: linear-gradient(135deg, rgba(200, 137, 59, .08), transparent 60%) !important; }
.sp-logo > div:last-child { min-width: 0; flex: 1; }
.sp-logo-podnaslov { white-space: normal !important; line-height: 1.3; }
.kr-logo-znak { background: linear-gradient(135deg, #C8893B, #8A5A1F); }
@media (max-width: 600px) {
    .sp-kpi-vrijednost { font-size: 1.15rem !important; letter-spacing: -.02em; }
    .sp-kpi-ikona { width: 36px; height: 36px; }
    .sp-zaglavlje-ikona { display: none; }
}

/* Hero (kontrolna tabla, portal) */
.sp-hero { background: radial-gradient(700px 260px at 85% 120%, rgba(224, 167, 94, .38), transparent 60%),
                       radial-gradient(500px 300px at 0% -40%, rgba(95, 176, 150, .22), transparent 60%),
                       linear-gradient(120deg, #16201F 0%, #2F5D50 58%, #3F7A68 100%); }
.sp-hero-pod { color: #D6E2DE; }
.sp-hero-brojka span { color: #B9CCC6; }

/* Grafikon (stubići) */
.gp-okvir { position: relative; padding-left: 38px; height: var(--gp-visina, 180px); }
.gp-osa { position: absolute; left: 0; right: 0; top: 20px; bottom: 20px; pointer-events: none; }
.gp-linija { position: absolute; left: 38px; right: 0; border-top: 1px dashed var(--mud-palette-lines-default); }
.gp-linija span { position: absolute; left: -38px; width: 33px; top: -8px; text-align: right; font-size: 11px; line-height: 1; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.gp-stubici { position: relative; display: flex; gap: 12px; height: 100%; padding-top: 20px; }
.gp-stubic { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 20px; outline-offset: 2px; border-radius: 6px; }
.gp-stub { position: relative; flex-shrink: 0; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--gp-boja, #2F5D50) 78%, #fff), var(--gp-boja, #2F5D50)); transform-origin: bottom; animation: gpRast .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--kasni, 0ms); min-height: 2px; transition: filter .12s; }
.gp-stubic.danas .gp-stub { opacity: .8; background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px), var(--gp-boja, #2F5D50); }
.gp-stubic:hover .gp-stub, .gp-stubic:focus-visible .gp-stub { filter: brightness(1.15); }
.gp-povrat { text-align: center; font-size: 11px; font-weight: 600; color: var(--mud-palette-text-secondary); white-space: nowrap; margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.gp-oznaka { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 11px; line-height: 14px; color: var(--mud-palette-text-secondary); white-space: nowrap; }
.gp-tip { display: none; position: absolute; bottom: calc(100% - 14px); left: 50%; transform: translateX(-50%); z-index: 5; min-width: 180px; padding: 8px 10px; border-radius: 10px; background: #13201D; color: #EAF2EF; font-size: .74rem; line-height: 1.55; box-shadow: 0 10px 24px -8px rgba(0,0,0,.45); pointer-events: none; white-space: nowrap; }
.gp-tip b { display: block; }
.gp-stubic:hover .gp-tip, .gp-stubic:focus-visible .gp-tip { display: block; }
.gp-stubic:nth-child(-n+2) .gp-tip { left: 0; transform: none; }
.gp-stubic:nth-last-child(-n+2) .gp-tip { left: auto; right: 0; transform: none; }
@keyframes gpRast { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 600px) { .gp-stubici { gap: 4px; } .gp-povrat { font-size: 9px; } }

/* Status projekta */
.kr-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 7px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap;
    color: color-mix(in srgb, var(--kr-s) 88%, #000); background: color-mix(in srgb, var(--kr-s) 13%, transparent); }
.gr-tamna .kr-status { color: color-mix(in srgb, var(--kr-s) 55%, #fff); background: color-mix(in srgb, var(--kr-s) 26%, transparent); }

/* Lista projekata (kartice) */
.kr-projekti { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.kr-projekt-kartica { cursor: pointer; padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.kr-projekt-kartica:hover { transform: translateY(-2px); box-shadow: var(--sp-sjena-hover) !important; }
.kr-projekt-skica { height: 150px; background: linear-gradient(180deg, #F5F3EE, #ECEFEC); border-bottom: 1px solid var(--mud-palette-lines-default); display: grid; place-items: center; padding: 8px; }
.kr-projekt-skica svg { width: 100%; height: 100%; }
.gr-tamna .kr-projekt-skica { background: linear-gradient(180deg, #1A2523, #141C1B); }
.kr-projekt-tijelo { padding: 14px 16px 16px; display: grid; gap: 6px; }
.kr-projekt-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--mud-palette-text-secondary); }
.kr-projekt-meta span { display: inline-flex; align-items: center; gap: 4px; }
.kr-filteri { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.kr-filter { border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); color: inherit; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.kr-filter b { font-variant-numeric: tabular-nums; color: var(--mud-palette-text-secondary); font-weight: 700; }
.kr-filter.aktivan { background: var(--mud-palette-primary); color: #fff; border-color: transparent; }
.kr-filter.aktivan b { color: rgba(255,255,255,.8); }

/* Glava projekta */
.kr-glava { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.kr-glava h1 { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.kr-glava-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--mud-palette-text-secondary); margin-top: 4px; align-items: center; }
.kr-glava-akcije { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-tabovi .mud-tabs-tabbar-content { flex-wrap: wrap; }

/* Radni prostor projektovanja: katalog | platno | svojstva */
.kr-radni { display: grid; grid-template-columns: 236px minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
@media (max-width: 1560px) { .kr-radni { grid-template-columns: 220px minmax(0, 1fr); } .kr-radni > .kr-desno { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; } }
@media (max-width: 900px) { .kr-radni { grid-template-columns: minmax(0, 1fr); } .kr-radni > .kr-katalog { order: 2; } }
.kr-katalog { padding: 10px !important; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 900px) { .kr-katalog { position: static; max-height: none; } }
.kr-katalog-grupa { font-size: .66rem; text-transform: uppercase; letter-spacing: .09em; color: var(--mud-palette-text-secondary); font-weight: 700; padding: 10px 6px 4px; }
.kr-predlozak { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 10px; cursor: grab; border: 1px solid transparent; transition: background .12s, border-color .12s, transform .12s; user-select: none; }
.kr-predlozak:hover { background: var(--mud-palette-action-default-hover); border-color: var(--mud-palette-lines-default); }
.kr-predlozak:active { cursor: grabbing; transform: scale(.98); }
.kr-predlozak-ikona { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(47, 93, 80, .1); color: var(--kr-zelena); flex-shrink: 0; }
.gr-tamna .kr-predlozak-ikona { background: rgba(127, 201, 176, .14); color: #7FC9B0; }
.kr-predlozak b { display: block; font-size: .82rem; line-height: 1.2; }
.kr-predlozak small { display: block; font-size: .7rem; color: var(--mud-palette-text-secondary); line-height: 1.25; }
@media (max-width: 900px) { .kr-katalog-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px; } }

.kr-platno { padding: 0 !important; overflow: hidden; }
.kr-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }
.kr-alat .mud-toggle-group { background: var(--mud-palette-surface); }
.kr-alat-razmak { flex: 1; }
.kr-pogledi-izbor { display: inline-flex; background: var(--mud-palette-surface); border: 1px solid var(--mud-palette-lines-default); border-radius: 10px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.kr-pogledi-izbor button { border: 0; background: transparent; color: inherit; font: inherit; font-size: .82rem; font-weight: 600; padding: 5px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.kr-pogledi-izbor button.aktivan { background: var(--mud-palette-primary); color: #fff; }
.kr-pogledi-izbor button:not(.aktivan):hover { background: var(--mud-palette-action-default-hover); }
.kr-crtez { position: relative; padding: 14px; min-height: 360px; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(47, 93, 80, .04), transparent 70%); }
.kr-crtez.ispusti { outline: 3px dashed var(--kr-hrast); outline-offset: -10px; background: rgba(200, 137, 59, .06); }
.kr-crtez > svg { width: 100%; max-height: 62vh; }
.kr-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 14px 12px; font-size: .74rem; color: var(--mud-palette-text-secondary); border-top: 1px solid var(--mud-palette-lines-default); }
.kr-legenda span { display: inline-flex; gap: 6px; align-items: center; }
.kr-legenda i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.25); }
.kr-ostatak-zida { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.kr-ostatak-zida span { font-size: .74rem; padding: 3px 9px; border-radius: 999px; background: var(--mud-palette-background-gray); font-variant-numeric: tabular-nums; }
.kr-ostatak-zida span.malo { background: rgba(194, 65, 12, .12); color: #9A3412; }

/* Tlocrt */
.kr-tlocrt { touch-action: none; }
.kr-tlocrt .kr-el { cursor: grab; outline: none; }
.kr-tlocrt .kr-el.vuce { cursor: grabbing; opacity: .85; }
.kr-tlocrt .kr-el:hover .kr-el-korpus, .kr-tlocrt .kr-el:focus-visible .kr-el-korpus { stroke: #C8893B; stroke-width: 14; }
.kr-tlocrt .kr-el.odabran .kr-el-korpus { stroke: #C8893B; stroke-width: 20; }
.kr-tlocrt .kr-el.greska .kr-el-korpus { stroke: #DC2626; stroke-width: 16; stroke-dasharray: 40 20; }
.kr-tlocrt .kr-el-gornji .kr-el-korpus { fill-opacity: .55; stroke-dasharray: 34 18; }
.kr-tlocrt .kr-el-gornji .kr-el-lice { opacity: .6; }
.kr-tlocrt .kr-el-visoki .kr-el-korpus { stroke-width: 12; }
.gr-tamna .kr-tlocrt .kr-pod { fill: #1B2523; }
.gr-tamna .kr-tlocrt .kr-pod-linija { stroke: #24312E; }
.gr-tamna .kr-tlocrt .kr-zid { fill: #8DA39C; }
.gr-tamna .kr-tlocrt .kr-kota { fill: #B9CCC6; }
.gr-tamna .kr-pogled rect:first-of-type { fill: #1B2523; }
.gr-tamna .kr-pogled-kota { fill: #B9CCC6; }

/* Svojstva i provjere */
.kr-desno { display: grid; gap: 14px; position: sticky; top: 76px; }
@media (max-width: 1560px) { .kr-desno { position: static; } }
.kr-panel { padding: 14px 16px !important; }
.kr-panel-naslov { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.kr-panel-naslov h2 { font-size: .98rem; font-weight: 700; margin: 0; display: flex; gap: 8px; align-items: center; }
.kr-mreza2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; }
.kr-mreza3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kr-mreza2 > *, .kr-mreza3 > *, .kr-radni > *, .kr-desno > * { min-width: 0; }
.kr-provjere { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.kr-provjera { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 9px; font-size: .8rem; line-height: 1.35; cursor: pointer; border: 1px solid transparent; text-align: left; background: transparent; color: inherit; font-family: inherit; width: 100%; }
.kr-provjera:hover { border-color: var(--mud-palette-lines-default); }
.kr-provjera.t0 { background: rgba(220, 38, 38, .08); }
.kr-provjera.t1 { background: rgba(217, 119, 6, .09); }
.kr-provjera.t2 { background: rgba(3, 105, 161, .07); }
.kr-provjera .mud-icon-root { font-size: 1.05rem; margin-top: 1px; flex-shrink: 0; }
.kr-provjera.t0 .mud-icon-root { color: #DC2626; } .kr-provjera.t1 .mud-icon-root { color: #D97706; } .kr-provjera.t2 .mud-icon-root { color: #0369A1; }
.kr-sve-ok { display: flex; gap: 8px; align-items: center; color: #15803D; font-size: .84rem; background: rgba(22, 163, 74, .09); padding: 8px 10px; border-radius: 9px; }
.gr-tamna .kr-sve-ok { color: #4ADE80; }

/* Živi sažetak (parametarski proračun) */
.kr-sazetak { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.kr-sazetak > div { padding: 10px 12px; border-radius: 12px; background: var(--mud-palette-background-gray); position: relative; }
.kr-sazetak b { display: block; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-sazetak span { font-size: .72rem; color: var(--mud-palette-text-secondary); }
.kr-promijenjeno { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; color: #9A6424; background: rgba(200, 137, 59, .14); padding: 2px 8px; border-radius: 999px; animation: krPuls 1.6s ease-out 1; }
@keyframes krPuls { 0% { box-shadow: 0 0 0 0 rgba(200, 137, 59, .55); } 100% { box-shadow: 0 0 0 10px rgba(200, 137, 59, 0); } }
.kr-osvjezeno { animation: krBljesak 1s ease-out 1; }
@keyframes krBljesak { 0% { background: rgba(200, 137, 59, .28); } 100% { background: var(--mud-palette-background-gray); } }

/* 3D */
.kr-3d-okvir { position: relative; width: 100%; }
.kr-3d { width: 100%; border-radius: 0 0 12px 12px; overflow: hidden; background: #E9EEEB; touch-action: none; }
.gr-tamna .kr-3d { background: #0F1716; }
.kr-3d canvas { display: block; }
.kr-3d-poruka { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .9rem; color: var(--mud-palette-text-secondary); pointer-events: none; }
.kr-3d-pogledi { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-radius: 10px; padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.kr-3d-pogledi button { border: 0; background: transparent; font: inherit; font-size: .78rem; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; color: #16201F; }
.kr-3d-pogledi button:hover { background: rgba(47, 93, 80, .12); }
.gr-tamna .kr-3d-pogledi { background: rgba(22, 33, 32, .88); }
.gr-tamna .kr-3d-pogledi button { color: #E2E8F0; }

/* Rastavljeni prikaz */
.kr-rast { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0; }
@media (max-width: 900px) { .kr-rast { grid-template-columns: 1fr; } }
.kr-rast-lista { border-left: 1px solid var(--mud-palette-lines-default); max-height: 520px; overflow-y: auto; }
.kr-rast-red { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); cursor: pointer; font-size: .82rem; }
.kr-rast-red:hover { background: var(--mud-palette-action-default-hover); }
.kr-rast-red.oznacen { background: rgba(224, 123, 18, .14); box-shadow: inset 3px 0 0 #E07B12; }
.kr-broj { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #16201F; color: #fff; font-weight: 800; font-size: .72rem; box-shadow: inset 0 0 0 2px #E0A75E; }

/* Krojna lista */
.kr-mat-glava { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; background: var(--mud-palette-background-gray); border-bottom: 1px solid var(--mud-palette-lines-default); }
.kr-uzorak { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(0,0,0,.18); flex-shrink: 0; box-shadow: inset 0 0 0 2px rgba(255,255,255,.35); }
.kr-uzorak.god { background-image: repeating-linear-gradient(90deg, rgba(70,40,20,.16) 0 2px, transparent 2px 6px); }
.kr-tabela { width: 100%; border-collapse: collapse; font-size: .84rem; }
.kr-tabela th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--mud-palette-text-secondary); padding: 8px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); white-space: nowrap; font-weight: 700; position: sticky; top: 0; background: var(--mud-palette-surface); }
.kr-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--mud-palette-lines-default); vertical-align: middle; }
.kr-tabela td.d, .kr-tabela th.d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-tabela td.c, .kr-tabela th.c { text-align: center; }
.kr-tabela tr.oznacen td { background: rgba(224, 123, 18, .14); }
.kr-tabela tbody tr:hover td { background: var(--mud-palette-action-default-hover); }
.kr-tabela-okvir { overflow-x: auto; }
.kr-kant-skica { width: 46px; height: 27px; display: block; }
.kr-mjera { font-weight: 700; font-variant-numeric: tabular-nums; }
.kr-mjera small { font-weight: 500; color: var(--mud-palette-text-secondary); margin-left: 4px; font-size: .72rem; }
@media (max-width: 700px) {
    .kr-tabela.kartice thead { display: none; }
    .kr-tabela.kartice tr { display: grid; grid-template-columns: 30px 1fr auto; gap: 2px 8px; padding: 10px 12px; border-bottom: 1px solid var(--mud-palette-lines-default); }
    .kr-tabela.kartice td { border: 0; padding: 0; }
    .kr-tabela.kartice td.skri { display: none; }
    .kr-tabela.kartice td.mob-naziv { grid-column: 2; }
    .kr-tabela.kartice td.mob-mjera { grid-column: 3; grid-row: 1 / span 2; text-align: right; }
    .kr-tabela.kartice td.mob-pod { grid-column: 2; font-size: .74rem; color: var(--mud-palette-text-secondary); }
}

/* Optimizacija krojenja */
.kr-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kr-stat > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); }
.kr-stat b { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-stat span { font-size: .74rem; color: var(--mud-palette-text-secondary); }
.kr-stat > div.isticanje { background: linear-gradient(135deg, rgba(47, 93, 80, .12), rgba(200, 137, 59, .1)); border-color: rgba(47, 93, 80, .3); }
.kr-usporedba { display: grid; gap: 10px; }
.kr-usporedba-red { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: center; font-size: .84rem; }
.kr-usporedba-traka { height: 26px; border-radius: 8px; background: var(--mud-palette-background-gray); overflow: hidden; }
.kr-usporedba-traka > div { height: 100%; border-radius: 8px; display: flex; align-items: center; padding: 0 10px; color: #fff; font-weight: 700; font-size: .78rem; white-space: nowrap; transform-origin: left; animation: spPuni .9s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 600px) { .kr-usporedba-red { grid-template-columns: 1fr auto; } .kr-usporedba-traka { grid-column: 1 / -1; } }
.kr-ploce { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 16px; }
.kr-ploca-kartica { padding: 0 !important; overflow: hidden; }
.kr-ploca-glava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.kr-ploca-crtez { padding: 10px; background: var(--mud-palette-background-gray); }
.kr-ploca { width: 100%; height: auto; display: block; }
.kr-ploca .kr-dio { cursor: pointer; transition: opacity .2s; }
.kr-ploca .kr-dio:hover rect { stroke: #C8893B; stroke-width: 12; }
.kr-ploca .kr-dio.oznacen rect { stroke: #E07B12; stroke-width: 18; }
.kr-puta { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--kr-hrast); color: #fff; font-weight: 800; font-size: .74rem; }
.kr-rezovi { font-size: .78rem; columns: 2 160px; column-gap: 18px; padding: 10px 14px; }
.kr-rezovi div { break-inside: avoid; display: flex; gap: 8px; padding: 2px 0; border-bottom: 1px dotted var(--mud-palette-lines-default); font-variant-numeric: tabular-nums; }
.kr-rezovi div b { width: 26px; color: var(--mud-palette-text-secondary); }
.kr-rezovi div span { margin-left: auto; font-weight: 700; }
.kr-parametri { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; align-items: end; }

/* Usporedba dobavljača */
.kr-dobavljaci { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.kr-dobavljac { padding: 16px !important; position: relative; }
.kr-dobavljac.najbolji { border-color: rgba(22, 163, 74, .55) !important; box-shadow: 0 0 0 3px rgba(22, 163, 74, .12) !important; }
.kr-dobavljac-iznos { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kr-oznaka-najbolji { position: absolute; top: 12px; right: 12px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #15803D; background: rgba(22, 163, 74, .12); padding: 3px 8px; border-radius: 999px; }
.gr-tamna .kr-oznaka-najbolji { color: #4ADE80; }

/* Kalkulacija */
.kr-obracun { display: grid; gap: 4px; }
.kr-obracun > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .9rem; }
.kr-obracun > div.ukupno { border-top: 2px solid var(--kr-hrast); margin-top: 6px; padding-top: 10px; font-size: 1.15rem; font-weight: 800; }
.kr-obracun > div span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Pravila radionice: opcije sa sličicom */
.kr-opcije { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.kr-opcija { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 2px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s; }
.kr-opcija:hover { border-color: rgba(47, 93, 80, .45); }
.kr-opcija.aktivna { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(47, 93, 80, .14); }
.kr-opcija b { font-size: .86rem; }
.kr-opcija small { font-size: .74rem; color: var(--mud-palette-text-secondary); line-height: 1.35; }
.kr-skica { width: 100%; height: 86px; background: var(--mud-palette-background-gray); border-radius: 8px; }
.kr-skica .p { fill: #E8D7BE; stroke: #6B5B45; stroke-width: 1.2; }
.kr-skica .f { fill: #C9A27A; stroke: #6B5B45; stroke-width: 1.2; }
.kr-skica .l { fill: #F1EEE8; stroke: #8A8A80; stroke-width: 1; }
.kr-skica .n { fill: #44504D; }
.gr-tamna .kr-skica .p { fill: #8C7A60; }
.kr-pravila-grupa { margin-bottom: 18px; }
.kr-pravila-grupa h3 { font-size: .95rem; font-weight: 700; margin: 0 0 8px; }
.kr-formula { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .78rem; background: var(--mud-palette-background-gray); padding: 2px 6px; border-radius: 5px; }

/* Čarobnjak */
.kr-oblici { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kr-oblik { padding: 14px; border-radius: 14px; border: 2px solid var(--mud-palette-lines-default); background: var(--mud-palette-surface); cursor: pointer; text-align: center; font: inherit; color: inherit; transition: all .15s; }
.kr-oblik:hover { border-color: rgba(47, 93, 80, .5); transform: translateY(-1px); }
.kr-oblik.aktivan { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px rgba(47, 93, 80, .14); }
.kr-oblik svg { width: 100%; height: 74px; }
.kr-oblik b { display: block; margin-top: 6px; font-size: .9rem; }
.kr-koraci-carobnjaka { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.kr-koraci-carobnjaka span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); padding: 4px 10px 4px 4px; border-radius: 999px; background: var(--mud-palette-background-gray); }
.kr-koraci-carobnjaka span i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; background: var(--mud-palette-lines-default); }
.kr-koraci-carobnjaka span.aktivan { color: var(--mud-palette-text-primary); background: rgba(47, 93, 80, .12); }
.kr-koraci-carobnjaka span.aktivan i, .kr-koraci-carobnjaka span.gotov i { background: var(--mud-palette-primary); color: #fff; }

/* Montaža i portal */
.kr-montaza { display: grid; gap: 14px; }
.kr-montaza-kartica { padding: 16px !important; }
.kr-okov-red { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mud-palette-lines-default); font-size: .88rem; }
.kr-okov-red b { min-width: 46px; font-variant-numeric: tabular-nums; }
.kr-portal-hero { border-radius: 20px; padding: 26px; color: #fff; background: radial-gradient(600px 240px at 90% 120%, rgba(224, 167, 94, .45), transparent 60%), linear-gradient(130deg, #16201F, #2F5D50 60%, #3F7A68); }
.kr-portal-hero .sp-koraci .sp-korak-naziv { color: #D6E2DE; }
.kr-portal-hero .sp-koraci .sp-korak.trenutni .sp-korak-naziv { color: #fff; }
.kr-portal-hero .sp-korak-krug { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #D6E2DE; }

/* Skladište ploča */
.kr-ploca-mini { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.kr-ploca-oblik { flex-shrink: 0; border-radius: 4px; border: 1px solid rgba(0,0,0,.2); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

@media print { .kr-alat, .kr-katalog, .kr-desno { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .kr-promijenjeno, .kr-osvjezeno, .kr-usporedba-traka > div { animation: none !important; } }
.sp-termin { display: flex; gap: 14px; align-items: flex-start; padding: 12px 20px; border-top: 1px solid var(--mud-palette-lines-default); cursor: pointer; transition: background .12s; }
.sp-termin:hover { background: var(--mud-palette-action-default-hover); }
.sp-termin-vrijeme { min-width: 58px; text-align: center; }
.sp-termin-vrijeme b { display: block; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-termin-vrijeme span { font-size: .68rem; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.sp-termin-traka { width: 4px; align-self: stretch; border-radius: 4px; flex-shrink: 0; }
.sp-termin.zavrsen { opacity: .75; }
.sp-oznaka { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }

/* Rok: brojač dana */
.sp-rok-dani { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; text-align: center; line-height: 1; }
.sp-rok-dani b { font-size: 1.25rem; font-weight: 800; display: block; }
.sp-rok-dani span { font-size: .6rem; text-transform: uppercase; letter-spacing: .05em; }
.kr-tabovi .mud-tabs-scroll-button { display: none; }
.kr-tabovi .mud-tabs-tabbar-wrapper { flex-wrap: wrap; transform: none !important; width: 100%; }
.kr-tabovi .mud-tab-slider { display: none; }
.kr-tabovi .mud-tab { flex: 0 0 auto; border-bottom: 3px solid transparent; }
.kr-tabovi .mud-tab.mud-tab-active { border-bottom-color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent); }
@media (max-width: 600px) { .kr-tabovi .mud-tab { padding: 8px 10px; font-size: .85rem; } }
.kr-tabovi .mud-tabs-tabbar-wrapper { justify-content: flex-start; }
.kr-tabovi .mud-tab { width: auto; max-width: none; justify-content: flex-start; }
.gr-tamna .kr-ostatak-zida span.malo { background: rgba(251, 146, 60, .18); color: #FDBA74; }
.gr-tamna .kr-promijenjeno { color: #FCD34D; }
.kr-cek { width: 22px; height: 22px; accent-color: #15803D; flex-shrink: 0; cursor: pointer; }
.kr-okov-red:has(.kr-cek:checked) span { text-decoration: line-through; color: var(--mud-palette-text-secondary); }