/* MM Atlas – radna površina. Raspored: tamna navigacija lijevo, radni prostor desno; na telefonu navigacija klizi preko sadržaja.
   Boje su izvedene iz logotipa MM Real Estate (--ink i --nav-bg = boja znaka, --silver = njegov svijetli dio); --signal je jedini akcenat.
   Grafikoni koriste --c1…--c4 i rampu --seq-1…--seq-6; mapa direktora i video studio koriste tamnu "scenu" (--stage…). */
:root {
  --bg: #F4F5F7; --surface: #FFFFFF; --surface-2: #ECEEF2; --ink: #1C2433; --ink-2: #485164; --ink-3: #6C7587; --line: #DFE2E8; --line-2: #C9CDD6;
  --nav-bg: #1C2433; --nav-ink: #B4BAC6; --nav-strong: #FFFFFF; --nav-active: #2A3448; --nav-line: #2E384B;
  --accent: #2460D8; --accent-ink: #FFFFFF; --accent-soft: #E4ECFD; --signal: #2F6FED; --silver: #C6C8CC; --logo-soft: .25;
  --good: #0A7A3D; --good-bg: #E3F3EA; --warn: #8A5A00; --warn-bg: #FCF1D6; --crit: #B3261E; --crit-bg: #FBE9E7;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --grid: #E6E9EE; --axis: #BCC2CD;
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #104281; --nodata: #E4E7EC;
  --stage: #121824; --stage-2: #1A2232; --stage-line: #2B3447; --stage-ink: #E9ECF2; --stage-mut: #97A0B2; --land: #252F42; --land-line: #36425A;
  --shadow: 0 1px 2px rgba(28, 36, 51, .06), 0 8px 24px rgba(28, 36, 51, .09);
  --f-head: Archivo, "IBM Plex Sans", system-ui, sans-serif; --f-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D121C; --surface: #151B28; --surface-2: #1D2535; --ink: #E9ECF2; --ink-2: #B7BECC; --ink-3: #8891A3; --line: #283144; --line-2: #37425A;
    --nav-bg: #0A0E16; --nav-ink: #A5ADBC; --nav-strong: #FFFFFF; --nav-active: #1A2233; --nav-line: #1E2738;
    --accent: #7AA5FF; --accent-ink: #0A0E16; --accent-soft: #1A2B4F; --signal: #6E9BFF; --silver: #C6C8CC; --logo-soft: .42;
    --good: #5BCB94; --good-bg: #113322; --warn: #F0B83E; --warn-bg: #3A2C0C; --crit: #F28B82; --crit-bg: #3D1714;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --grid: #222B3C; --axis: #3C475C;
    --seq-1: #173A66; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #86b6ef; --seq-6: #cde2fb; --nodata: #1C2434;
    --stage: #0A0E16; --stage-2: #121824; --stage-line: #232C3E; --stage-ink: #E9ECF2; --stage-mut: #8F98AA; --land: #1C2434; --land-line: #2C374C;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0D121C; --surface: #151B28; --surface-2: #1D2535; --ink: #E9ECF2; --ink-2: #B7BECC; --ink-3: #8891A3; --line: #283144; --line-2: #37425A;
  --nav-bg: #0A0E16; --nav-ink: #A5ADBC; --nav-strong: #FFFFFF; --nav-active: #1A2233; --nav-line: #1E2738;
  --accent: #7AA5FF; --accent-ink: #0A0E16; --accent-soft: #1A2B4F; --signal: #6E9BFF; --silver: #C6C8CC; --logo-soft: .42;
  --good: #5BCB94; --good-bg: #113322; --warn: #F0B83E; --warn-bg: #3A2C0C; --crit: #F28B82; --crit-bg: #3D1714;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --grid: #222B3C; --axis: #3C475C;
  --seq-1: #173A66; --seq-2: #1c5cab; --seq-3: #2a78d6; --seq-4: #5598e7; --seq-5: #86b6ef; --seq-6: #cde2fb; --nodata: #1C2434;
  --stage: #0A0E16; --stage-2: #121824; --stage-line: #232C3E; --stage-ink: #E9ECF2; --stage-mut: #8F98AA; --land: #1C2434; --land-line: #2C374C;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35); color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--f-body); }
h1, h2, h3 { font-family: var(--f-head); font-stretch: 108%; font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: 26px; } h2 { font-size: 17px; } h3 { font-size: 14px; }
p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.mono { font-family: var(--f-mono); } .num { font-variant-numeric: tabular-nums; } .mut { color: var(--ink-3); } .sm { font-size: 12.5px; } .strong { font-weight: 600; }
.right { text-align: right; } .nowrap { white-space: nowrap; } .grow { flex: 1; min-width: 0; }

/* ---------- okvir aplikacije ---------- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--nav-bg); color: var(--nav-ink); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 18px 12px 14px; gap: 4px; }
.brand { padding: 2px 8px 16px; border-bottom: 1px solid var(--nav-line); margin-bottom: 10px; display: flex; gap: 11px; align-items: center; color: var(--nav-strong); --logo-soft: .42; }
.brand b { display: block; font: 700 18px/1.1 var(--f-head); font-stretch: 112%; color: var(--nav-strong); }
.brand span { font-size: 12px; color: var(--nav-ink); }
.logo { display: block; flex: none; } .logo .la { fill-opacity: var(--logo-soft, .25); }
.nav-group { font-size: 12px; font-weight: 500; padding: 14px 10px 4px; color: var(--nav-ink); opacity: .65; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--nav-ink); font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--nav-strong); background: var(--nav-line); }
.nav a.on { background: var(--nav-active); color: var(--nav-strong); box-shadow: inset 2px 0 0 var(--silver); }
.nav a svg { flex: none; opacity: .9; } .nav a .cnt { margin-left: auto; font-size: 11.5px; background: var(--signal); color: #fff; border-radius: 10px; padding: 0 7px; font-weight: 600; font-variant-numeric: tabular-nums; }
.side-foot { margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--nav-line); font-size: 12.5px; display: grid; gap: 8px; }
.side-foot select { width: 100%; background: var(--nav-active); border: 1px solid var(--nav-line); color: var(--nav-strong); border-radius: 6px; padding: 6px 8px; }
.side-foot button { background: none; border: 0; color: var(--nav-ink); text-align: left; padding: 0; cursor: pointer; }
.side-tools { display: flex; gap: 6px; margin-bottom: 6px; } .side-tools button { background: none; cursor: pointer; flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 8px; border: 1px solid var(--nav-line); border-radius: 7px; color: var(--nav-ink); font-size: 12.5px; }
.side-tools button:hover { color: var(--nav-strong); background: var(--nav-line); } .side-tools kbd { font: 500 11px var(--f-body); opacity: .7; margin-left: auto; } .side-tools button span { font-weight: 500; }
.main { min-width: 0; padding-block: 22px 48px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.topbar { display: none; }
.demo-bar { background: var(--warn-bg); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 16px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw); z-index: 40; transform: translateX(-102%); transition: transform .18s ease; padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); }
  body.nav-open .side { transform: none; box-shadow: var(--shadow); }
  body.nav-open .scrim { display: block; }
  .topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--nav-bg); color: var(--nav-strong); margin: -22px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 16px calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
  .topbar b { font: 700 16px var(--f-head); } .topbar button { background: none; border: 0; color: inherit; padding: 4px; display: flex; cursor: pointer; }
  .main { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }
.scrim { display: none; position: fixed; inset: 0; background: rgba(8, 16, 28, .5); z-index: 35; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--nav-bg); }

/* ---------- gradivni elementi ---------- */
.page-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 16px; }
.page-head .sub { color: var(--ink-2); margin-top: 4px; max-width: 78ch; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tabs button.on { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .g12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .g32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 1100px) { .g3, .g21, .g12, .g32 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .g2 { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 14px; align-content: start; min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; overflow-x: auto; }
.main p, .main li, .main dd { overflow-wrap: anywhere; }
.panel > h2 { margin-bottom: 4px; } .panel > .hint { color: var(--ink-3); font-size: 12.5px; margin-bottom: 12px; max-width: 80ch; }
.panel-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tiles.t8 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .tiles.t8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.tile .l { font-size: 12.5px; color: var(--ink-2); } .tile .v { font-size: 23px; font-weight: 600; line-height: 1.25; margin-top: 2px; overflow-wrap: anywhere; } .tile .s { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.tile.alert { border-color: color-mix(in srgb, var(--crit) 45%, var(--line)); } .tile.alert .v { color: var(--crit); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 7px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--ink); }
.btn:hover { background: var(--surface-2); text-decoration: none; } .btn[disabled] { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; } .btn.ghost { border-color: transparent; background: none; color: var(--accent); } .btn.danger { color: var(--crit); }
.field { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); font-weight: 500; min-width: 0; }
.field input, .field select, .field textarea, .inp { background: var(--surface); border: 1px solid var(--line-2); border-radius: 7px; padding: 7px 10px; font-size: 14px; color: var(--ink); width: 100%; min-width: 0; }
.field textarea { resize: vertical; } .form { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink); font-weight: 400; } .check input { margin-top: 3px; flex: none; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.badge.good { background: var(--good-bg); color: var(--good); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.crit { background: var(--crit-bg); color: var(--crit); } .badge.info { background: var(--accent-soft); color: var(--accent); }
.chip { font: 500 11.5px/1 var(--f-mono); padding: 3px 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); letter-spacing: .02em; }
.arrow { color: var(--ink-3); padding: 0 2px; }
.note { border-radius: 8px; padding: 10px 12px; font-size: 13px; background: var(--accent-soft); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); max-width: 100%; }
.note.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } .note b { font-weight: 600; }
.empty { padding: 28px 16px; text-align: center; color: var(--ink-3); }
.list { display: grid; } .list > * { padding: 9px 0; border-top: 1px solid var(--line); } .list > *:first-child { border-top: 0; padding-top: 2px; }
.kv { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; } .kv dt { color: var(--ink-3); } .kv dd { margin: 0; overflow-wrap: anywhere; }
ul.clean { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
pre.msg { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 var(--f-body); background: var(--surface-2); border-radius: 8px; padding: 12px; margin: 0; max-height: 320px; overflow: auto; }
code.copy { display: block; font: 12px/1.5 var(--f-mono); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; }

/* tabele */
.tw { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
.t th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12px; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line-2); white-space: nowrap; vertical-align: bottom; }
.t td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t tr:last-child td { border-bottom: 0; } .t th.right, .t td.right { padding-right: 14px; } .t td.num, .t th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t tr[data-act], .t tr[data-href] { cursor: pointer; } .t tr[data-act]:hover td, .t tr[data-href]:hover td { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.t th[data-sort] { cursor: pointer; } .t th[data-sort]:hover { color: var(--ink); } .t th.sorted { color: var(--ink); }
.rank { font-weight: 500; font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-3); width: 30px; white-space: nowrap; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }

/* mjerači i grafikoni */
.meter { display: flex; align-items: center; gap: 8px; min-width: 96px; } .meter i { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; display: block; min-width: 40px; }
.meter i b { display: block; height: 100%; border-radius: 3px; background: var(--c1); } .meter span { font-variant-numeric: tabular-nums; width: 26px; text-align: right; font-weight: 500; }
.meter.na i b { background: transparent; } .meter.lo i b { background: var(--axis); }
.bars { display: grid; gap: 9px; } .bar-row { display: grid; grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.bar-row .tr { height: 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; overflow: hidden; } .bar-row .tr b { display: block; height: 100%; background: var(--c1); border-radius: 0 4px 4px 0; }
.bar-row .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-row .vl { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
svg.chart { display: block; width: 100%; height: auto; overflow: visible; } .ct { font: 11px var(--f-body); fill: var(--ink-3); } .ct.v { fill: var(--ink); font-weight: 600; }
.gridl { stroke: var(--grid); stroke-width: 1; } .axisl { stroke: var(--axis); stroke-width: 1; } .hit { fill: transparent; } .hit:hover + .mark, .mark:hover { filter: brightness(1.15); }
.seg { display: flex; gap: 2px; height: 28px; } .seg > div { min-width: 0; border-radius: 4px; font-size: 12px; font-weight: 600; color: #fff; padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.map-wrap { position: relative; } .map path.c { stroke: var(--surface); stroke-width: .5; cursor: pointer; } .map path.c:hover, .map circle.c:hover { stroke: var(--ink); stroke-width: 1; }
.map path.nd { fill: var(--nodata); stroke: var(--surface); stroke-width: .5; } .map circle.c { stroke: var(--surface); stroke-width: 1; cursor: pointer; }
.map .arc { fill: none; stroke: var(--c2); stroke-width: 1.6; stroke-linecap: round; opacity: .85; } .map .arc-end { fill: var(--c2); stroke: var(--surface); stroke-width: 1.5; }
.ramp { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; color: var(--ink-3); margin-top: 6px; } .ramp span { white-space: nowrap; } .ramp i { width: 22px; height: 8px; display: block; } .ramp i:first-of-type { border-radius: 4px 0 0 4px; } .ramp i:last-of-type { border-radius: 0 4px 4px 0; }
#tip { position: fixed; z-index: 90; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; line-height: 1.45; padding: 6px 9px; border-radius: 6px; max-width: 260px; white-space: pre-line; box-shadow: var(--shadow); }

/* kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--surface-2); border-radius: 10px; padding: 10px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.col-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 13px; } .col-head span { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 6px; cursor: pointer; font-size: 13px; text-align: left; width: 100%; color: inherit; }
.card:hover { border-color: var(--accent); } .card.late { border-left: 3px solid var(--crit); }
.card .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* bočni panel, dijalog, obavijest */
.overlay { position: fixed; inset: 0; background: rgba(8, 16, 28, .45); z-index: 60; display: flex; justify-content: flex-end; }
.drawer { background: var(--surface); width: min(600px, 100%); height: 100%; overflow-y: auto; padding: calc(18px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); box-shadow: var(--shadow); display: grid; gap: 16px; align-content: start; }
.overlay.center { justify-content: center; align-items: center; padding: 16px; } .modal.wide { width: min(1060px, 100%); } .modal { background: var(--surface); border-radius: 12px; width: min(640px, 100%); max-height: 92%; overflow-y: auto; padding: 20px; box-shadow: var(--shadow); display: grid; gap: 14px; }
.drawer > .row.between:first-child, .modal > .row.between:first-child { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.x { background: none; border: 0; cursor: pointer; color: var(--ink-3); padding: 4px; display: flex; border-radius: 6px; } .x:hover { background: var(--surface-2); color: var(--ink); }
.sec > h3 { font-size: 13px; color: var(--ink-3); font-family: var(--f-body); font-stretch: normal; font-weight: 600; letter-spacing: 0; margin-bottom: 8px; }
#toast { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; z-index: 95; font-size: 13.5px; box-shadow: var(--shadow); max-width: min(520px, 92vw); }
.tl { display: grid; gap: 0; } .tl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; } .tl > div:first-child { border-top: 0; }
.slider { display: grid; grid-template-columns: minmax(0, 1fr) 34px; gap: 4px 8px; align-items: center; font-size: 13px; } .slider label { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; } .slider input { width: 100%; accent-color: var(--accent); }
.creative { background: var(--surface-2); border-radius: 8px; padding: 10px; display: grid; gap: 8px; justify-items: center; } .creative svg, .creative img { max-width: 100%; height: auto; border-radius: 4px; display: block; }
.steps { counter-reset: s; display: grid; gap: 10px; } .steps > div { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; } .steps > div::before { counter-increment: s; content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 12.5px/24px var(--f-body); font-variant-numeric: tabular-nums; text-align: center; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; position: relative; overflow: hidden; } .login .panel { width: min(390px, 100%); display: grid; gap: 14px; position: relative; padding: 26px; }
.login .logo { margin: 2px auto 6px; color: var(--ink); } .login h1 { text-align: center; font-size: 20px; } .login .mut { text-align: center; }
.login::before { content: ""; position: absolute; inset: -20% -10%; background: linear-gradient(119.4deg, transparent 46%, color-mix(in srgb, var(--silver) 34%, transparent) 46% 58%, transparent 58%), linear-gradient(119.4deg, transparent 60%, color-mix(in srgb, var(--ink) 9%, transparent) 60% 78%, transparent 78%); pointer-events: none; }

/* ---------- nadogradnja: ponuda mreže, agenti mreže, komandna paleta ---------- */
.tile, .spot { position: relative; overflow: hidden; isolation: isolate; }
.tile::after, .spot::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(240px circle at var(--mx, -300px) var(--my, -300px), color-mix(in srgb, var(--signal) 14%, transparent), transparent 65%); }
.tile:hover::after, .spot:hover::after { opacity: 1; }
.lgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.lcard { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: grid; align-content: start; cursor: pointer; text-align: left; color: inherit; padding: 0; width: 100%; font-size: 13px; }
.lcard:hover, .lcard:focus-visible { border-color: var(--accent); }
.ph { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; } .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.lcard:hover .ph img { transform: scale(1.045); }
.ph small { position: absolute; right: 8px; bottom: 8px; background: rgba(18, 24, 36, .72); color: #fff; font-size: 11px; line-height: 1.5; padding: 0 7px; border-radius: 99px; }
.pwrap { position: relative; } .ptag { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; z-index: 1; } .ptag .badge { background: rgba(255, 255, 255, .93); color: #1C2433; } .ptag .badge.good { background: #DDF3E6; color: #0A6B36; } .ptag .badge.warn { background: #FCEFCB; color: #7A4F00; } .ptag .badge.info { background: #E0EAFD; color: #1D4FBB; } .ptag .badge.crit { background: #FBE3E0; color: #A3221B; }
.lcard .bd { padding: 12px 14px 14px; display: grid; gap: 4px; } .lcard .ttl { font: 700 15.5px/1.25 var(--f-head); font-stretch: 106%; } .lcard .pr { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lcard .earn { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .lcard .earn b { font-variant-numeric: tabular-nums; color: var(--good); }
.gal { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; } .gal > .ph { border-radius: 8px; } .gal .side { display: grid; gap: 6px; grid-template-rows: 1fr 1fr; } .gal .side .ph { aspect-ratio: auto; border-radius: 8px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; } .thumbs .ph { border-radius: 6px; } .thumbs .rm { position: absolute; top: 3px; right: 3px; background: rgba(18, 24, 36, .75); color: #fff; border: 0; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.checks { display: grid; gap: 7px; } .chk { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; font-size: 13px; align-items: start; }
.chk i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; font-style: normal; background: var(--good-bg); color: var(--good); } .chk.blok i { background: var(--crit-bg); color: var(--crit); } .chk.upozorenje i { background: var(--warn-bg); color: var(--warn); }
.chk b { font-weight: 600; display: block; } .chk span { color: var(--ink-2); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--surface); display: grid; place-items: center; font: 700 13.5px/1 var(--f-head); flex: none; } .avatar.sm { width: 28px; height: 28px; font-size: 11px; } .avatar.soft { background: var(--surface-2); color: var(--ink-2); }
.who { display: flex; gap: 10px; align-items: center; min-width: 0; } .who > div { min-width: 0; }
.board { display: grid; } .board > div { display: grid; grid-template-columns: 26px minmax(0, 1.6fr) minmax(90px, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); cursor: pointer; } .board > div:first-child { border-top: 0; }
.board .pos { font: 700 15px var(--f-head); color: var(--ink-3); text-align: center; font-variant-numeric: tabular-nums; } .board > div:nth-child(-n+3) .pos { color: var(--ink); }
.steps2 { display: grid; gap: 6px; } .steps2 label { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; } .steps2 input { margin-top: 3px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } .split.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .split.c3 > div { padding: 7px 9px; } .split.c3 b { font-size: 17px; } .split > div { background: var(--surface-2); border-radius: 8px; padding: 9px 11px; } .split b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; line-height: 1.2; } .split span { font-size: 12px; color: var(--ink-2); }
.drop { border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 16px; text-align: center; color: var(--ink-2); font-size: 13px; cursor: pointer; display: grid; gap: 4px; justify-items: center; } .drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-soft); } .drop input { display: none; }
.ring { display: block; flex: none; }
.match { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); } .match:first-child { border-top: 0; } .match .ph { border-radius: 6px; aspect-ratio: 1; }
.tape { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 14px; display: flex; align-items: stretch; font-size: 13px; }
.tape > b { flex: none; padding: 8px 12px; border-right: 1px solid var(--line); display: flex; gap: 8px; align-items: center; font-weight: 600; background: var(--surface); z-index: 1; }
.tape .run { display: flex; gap: 30px; padding: 8px 16px; white-space: nowrap; width: max-content; } .tape .run span { color: var(--ink-2); } .tape .run span b { color: var(--ink); font-weight: 600; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--c3); flex: none; }
.cmd { position: fixed; inset: 0; z-index: 99; background: rgba(10, 14, 22, .5); display: grid; justify-items: center; align-content: start; padding: 12vh 16px 16px; backdrop-filter: blur(3px); }
.cmd-box { width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.cmd input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 15px 18px; font-size: 16px; outline: none; color: var(--ink); }
.cmd-list { max-height: 52vh; overflow-y: auto; padding: 6px; display: grid; }
.cmd-list button { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: left; background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.cmd-list button.on, .cmd-list button:hover { background: var(--accent-soft); } .cmd-list .g { color: var(--ink-3); font-size: 12px; } .cmd-list .l { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmd-list .h { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cmd-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); } .cmd-empty { padding: 22px; text-align: center; color: var(--ink-3); }
@media (max-width: 560px) { .cmd-list button { grid-template-columns: 84px minmax(0, 1fr); } .cmd-list .h { display: none; } .gal { grid-template-columns: 1fr; } .gal .side { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .gal .side .ph { aspect-ratio: 4 / 3; } .board > div { grid-template-columns: 22px minmax(0, 1fr) auto; } .board .prog { display: none; } }

/* ---------- pokret (miruje uz "smanji animacije") ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes flow { to { stroke-dashoffset: -24; } }
@keyframes tape { to { transform: translateX(-50%); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c3) 60%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes logo-a { from { opacity: 0; transform: translate(-26px, 46px); } } @keyframes logo-m { from { opacity: 0; transform: translate(26px, -46px); } } @keyframes logo-w { from { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  #view.enter > * { animation: rise .42s cubic-bezier(.2, .7, .2, 1) both; }
  #view.enter > *:nth-child(2) { animation-delay: .04s; } #view.enter > *:nth-child(3) { animation-delay: .08s; } #view.enter > *:nth-child(4) { animation-delay: .12s; } #view.enter > *:nth-child(5) { animation-delay: .16s; } #view.enter > *:nth-child(n+6) { animation-delay: .2s; }
  #view.enter .meter i b, #view.enter .bar-row .tr b { animation: grow .75s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
  .map .arc { stroke-dasharray: 5 7; animation: flow 1.5s linear infinite; }
  .tape .run { animation: tape 70s linear infinite; } .tape:hover .run { animation-play-state: paused; }
  .live { animation: pulse 1.8s ease-out infinite; }
  .shimmer { background: linear-gradient(90deg, var(--ink-3) 0%, var(--ink) 40%, var(--ink-3) 80%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.6s linear infinite; }
  .login .logo .la { animation: logo-a .7s cubic-bezier(.2, .7, .2, 1) both; } .login .logo path:nth-of-type(2) { animation: logo-m .7s .12s cubic-bezier(.2, .7, .2, 1) both; } .login .logo path:nth-of-type(3) { animation: logo-w .6s .5s both; }
}

/* ---------- mapa aktivnosti: tamna "scena" u obje teme ---------- */
.map-bar { --m0: var(--ink-3); --m1: var(--c1); --m2: var(--c2); --m3: var(--c3); --m4: var(--c4); display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 12px; align-items: center; }
.pills { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.pills button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pills button:hover { color: var(--ink); } .pills button.on { background: var(--ink); color: var(--surface); } .pills button i { width: 8px; height: 8px; border-radius: 50%; display: block; }
.stage { --m0: #C6C8CC; --m1: #3987e5; --m2: #d95926; --m3: #199e70; --m4: #c98500; background: var(--stage); color: var(--stage-ink); border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 590px; border: 1px solid var(--stage-line); }
.stage-map { position: relative; min-height: 420px; touch-action: none; cursor: grab; user-select: none; } .stage-map.drag { cursor: grabbing; }
.stage-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage .ld { fill: var(--land); stroke: var(--land-line); stroke-width: .6; vector-effect: non-scaling-stroke; } .stage .ld.act { fill: color-mix(in srgb, var(--land) 72%, #8A94AA); cursor: pointer; }
.stage .ld[data-act]:hover { fill: color-mix(in srgb, var(--land) 55%, #9AA4BA); cursor: pointer; } .stage .ld.sel { fill: #46557A; stroke: #FFFFFF; stroke-width: 1.3; }
.stage .bub { fill-opacity: .88; stroke: var(--stage); cursor: pointer; } .stage .bub:hover, .stage .bub.sel { fill-opacity: 1; stroke: #FFFFFF; }
.stage .lbl { font-family: var(--f-body); font-weight: 600; fill: var(--stage-ink); paint-order: stroke; stroke: var(--stage); stroke-linejoin: round; pointer-events: none; }
.stage .beam { fill: none; stroke: var(--m1); stroke-linecap: round; opacity: .62; vector-effect: non-scaling-stroke; stroke-dasharray: 4 6; } .stage .beam.deal { stroke: var(--m3); opacity: .95; } .stage .beam:hover { opacity: 1; }
.stage .camp { fill: none; stroke: var(--m2); pointer-events: stroke; } .stage .fx { fill: none; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.stage-kpi { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.stage-kpi div { background: color-mix(in srgb, var(--stage-2) 88%, transparent); border: 1px solid var(--stage-line); border-radius: 10px; padding: 7px 12px; backdrop-filter: blur(6px); }
.stage-kpi b { display: block; font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; } .stage-kpi span { font-size: 11.5px; color: var(--stage-mut); }
.stage-tools { position: absolute; right: 12px; bottom: 54px; display: flex; gap: 4px; } .stage-tools button, .stage-time button { background: var(--stage-2); border: 1px solid var(--stage-line); color: var(--stage-ink); border-radius: 8px; padding: 6px 10px; cursor: pointer; display: flex; align-items: center; font-size: 12.5px; }
.stage-tools button:hover, .stage-time button:hover { border-color: var(--stage-mut); } .stage-tools button.on { background: var(--stage-ink); color: var(--stage); border-color: var(--stage-ink); }
.stage-time { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--stage-mut); } .stage-time input { flex: 1; accent-color: var(--m1); min-width: 60px; } .stage-time #map-date { font-variant-numeric: tabular-nums; min-width: 84px; text-align: right; color: var(--stage-ink); }
.stage-legend { position: absolute; left: 12px; bottom: 54px; display: flex; gap: 4px 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--stage-mut); pointer-events: none; max-width: calc(100% - 250px); }
.stage-legend span { display: inline-flex; gap: 6px; align-items: center; } .stage-legend .dot { width: 9px; height: 9px; border-radius: 50%; display: block; } .stage-legend .ln { width: 18px; height: 0; border-top: 2px dashed var(--m1); display: block; } .stage-legend .ln.deal { border-color: var(--m3); } .stage-legend .rg { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--m2); display: block; }
.stage-side { background: var(--stage-2); border-left: 1px solid var(--stage-line); padding: 16px 14px; overflow-y: auto; max-height: 660px; display: grid; gap: 16px; align-content: start; font-size: 13px; }
.stage-side h2 { font-size: 19px; color: var(--stage-ink); } .stage-side h3 { color: var(--stage-mut); font: 600 12.5px var(--f-body); font-stretch: normal; letter-spacing: 0; margin-bottom: 7px; } .s-mut { color: var(--stage-mut); font-size: 12.5px; }
.stage-side a { color: #8FB4FF; } .stage-side button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; }
.s-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; } .s-x { padding: 4px !important; border-radius: 6px; color: var(--stage-mut) !important; } .s-x:hover { background: var(--stage-line) !important; color: var(--stage-ink) !important; }
.s-rank { display: grid; gap: 2px; } .s-rank button { display: grid; grid-template-columns: minmax(0, 2fr) minmax(32px, 1fr) 30px 34px; gap: 8px; align-items: center; padding: 5px 6px !important; border-radius: 6px; } .s-rank button:hover, .s-feed button:hover, .s-list > *:hover { background: var(--stage-line); }
.s-rank span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-rank i { height: 6px; background: var(--stage-line); border-radius: 3px; display: block; overflow: hidden; } .s-rank i b { display: block; height: 100%; border-radius: 3px; }
.s-rank em { font-style: normal; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .s-rank small { color: var(--stage-mut); text-align: right; font-variant-numeric: tabular-nums; }
.s-list { display: grid; gap: 2px; margin-top: 4px; } .s-list > * { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 6px !important; border-radius: 6px; color: var(--stage-ink) !important; text-decoration: none !important; align-items: center; }
.s-list small, .s-feed small, .s-kv small { display: block; color: var(--stage-mut); font-size: 11.5px; } .s-list .r { text-align: right; } .s-list .r b { font-variant-numeric: tabular-nums; }
.s-feed { display: grid; gap: 1px; } .s-feed button { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 5px 6px !important; border-radius: 6px; } .s-feed i { width: 8px; height: 8px; border-radius: 50%; display: block; } .s-feed time { color: var(--stage-mut); font-size: 11.5px; white-space: nowrap; }
.s-feed span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .s-kv div { background: var(--stage); border: 1px solid var(--stage-line); border-radius: 8px; padding: 7px 10px; } .s-kv span { display: block; font-size: 11.5px; color: var(--stage-mut); } .s-kv b { font-size: 17px; font-variant-numeric: tabular-nums; }
.s-hint { background: color-mix(in srgb, var(--m4) 16%, var(--stage)); border: 1px solid color-mix(in srgb, var(--m4) 40%, transparent); border-radius: 8px; padding: 8px 10px; } .s-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
@keyframes ring { from { transform: scale(.55); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } @keyframes fx { from { transform: scale(1); opacity: 1; } to { transform: scale(5); opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { .stage .beam { animation: flow 1.6s linear infinite; } .stage .camp { animation: ring 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; } .stage .fx { animation: fx 1.1s ease-out forwards; } }
@media (max-width: 1100px) { .stage { grid-template-columns: minmax(0, 1fr); } .stage-map { min-height: 380px; } .stage-side { border-left: 0; border-top: 1px solid var(--stage-line); max-height: none; } .stage-legend { display: none; } }
@media (max-width: 560px) { .stage-map { min-height: 330px; } .stage-kpi div { padding: 5px 9px; } .stage-kpi b { font-size: 15px; } .stage-kpi div:nth-child(n+4) { display: none; } }

/* ---------- video studio ---------- */
.studio { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 16px; align-items: start; }
.studio-prev { position: sticky; top: 14px; display: grid; gap: 10px; justify-items: center; }
.phone { background: var(--stage); border-radius: 24px; padding: 8px; border: 1px solid var(--line-2); box-shadow: var(--shadow); width: 100%; max-width: 292px; } .phone.kvadrat, .phone.pejzaz { max-width: 330px; border-radius: 14px; }
.phone canvas { width: 100%; height: auto; display: block; border-radius: 17px; background: var(--stage); } .phone.kvadrat canvas, .phone.pejzaz canvas { border-radius: 8px; }
.vid-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; max-width: 330px; } .vid-ctl input { width: 100%; accent-color: var(--accent); }
.exp { width: 100%; max-width: 330px; display: grid; gap: 6px; } .exp .meter span { display: none; }
.concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-top: 10px; }
.concepts button { text-align: left; border: 1px solid var(--line-2); background: var(--surface); border-radius: 10px; padding: 10px 12px; cursor: pointer; display: grid; gap: 3px; color: inherit; align-content: start; }
.concepts button.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); } .concepts button[disabled] { opacity: .55; cursor: default; } .concepts span { font-size: 12.5px; color: var(--ink-2); }
.hooks { display: grid; gap: 6px; } .hooks button { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 8px 10px; cursor: pointer; color: inherit; }
.hooks button.on { border-color: var(--accent); background: var(--accent-soft); } .hooks b { font-weight: 600; } .hooks .badge { justify-self: start; } .hooks em { font-style: normal; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .hooks em.ok { color: var(--good); }
.scenes { display: grid; } .scene { border-top: 1px solid var(--line); } .scene:first-child { border-top: 0; } .scene.open { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); margin: 0 -8px; padding: 0 8px; border-radius: 8px; }
.sc-h { display: grid; grid-template-columns: 22px 116px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; padding: 9px 0; cursor: pointer; color: inherit; }
.sc-h .n { color: var(--ink-3); font-variant-numeric: tabular-nums; } .sc-h .k { font-weight: 600; } .sc-h .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); } .sc-h .d { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.sc-b { padding: 2px 0 14px 32px; display: grid; gap: 10px; }
.stackx { display: grid; gap: 12px; margin-top: 10px; } .stackx > div { display: grid; gap: 2px; } .stackx b { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .stackx span:not(.badge) { color: var(--ink-2); font-size: 13px; }
@media (max-width: 900px) { .studio { grid-template-columns: minmax(0, 1fr); } .studio-prev { position: static; } .sc-h { grid-template-columns: 20px 88px minmax(0, 1fr) auto; } .hooks button { grid-template-columns: minmax(0, 1fr) auto; } .hooks .badge { display: none; } .sc-b { padding-left: 0; } }

/* Forma nekretnine: provjera standarda ostaje u vidnom polju dok se popunjava duga forma. */
@media (min-width: 1101px) { .lf-side { position: sticky; top: 2px; } }