/* LexDigital OS — stilovi shell-a i aplikacija. Bez build koraka. */
:root {
  --accent: #c9a84c;
  --accent-ink: #14120f;
  --bg: #0e0c09;
  --surface: #171512;
  --surface-2: #1b1916;
  --surface-3: #22201d;
  --line: #292724;
  --line-2: #32302d;
  --text: #e8dcc8;
  --text-2: #b8ae9c;
  --muted: #a39a8a;
  --ok: #8fd1a8;
  --ok-bg: #1f2e26;
  --warn: #e3c56e;
  --warn-bg: #2a2518;
  --bad: #f0a29a;
  --bad-bg: #331c1c;
  --radius: 12px;
  --taskbar: 56px;
  --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #2f2d2a; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Login ---------- */
.lx-login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.lx-login__card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.lx-login__brand { display: flex; align-items: center; gap: 14px; }
.lx-login__title { font-size: 18px; font-weight: 700; }
.lx-login__sub { color: var(--muted); font-size: 13px; }
.lx-logo { width: 44px; height: 44px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: -.5px; flex-shrink: 0; }

/* ---------- Forme ---------- */
.lx-form { display: flex; flex-direction: column; gap: 14px; }
.lx-field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.lx-field > span { letter-spacing: .3px; }
.lx-input, .lx-field input, .lx-field select, .lx-field textarea {
  width: 100%; background: #12100d; border: 1px solid var(--line-2); border-radius: 8px; padding: 9px 11px; color: var(--text); font-size: 14px;
}
.lx-field textarea { resize: vertical; min-height: 70px; }
.lx-input:focus, .lx-field input:focus, .lx-field select:focus, .lx-field textarea:focus { outline: none; border-color: var(--accent); }
.lx-check { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.lx-error { background: var(--bad-bg); color: var(--bad); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.lx-row { display: flex; gap: 10px; }
.lx-row > * { flex: 1; min-width: 0; }

.lx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-3); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lx-btn:hover { border-color: #403e3b; background: #272522; }
.lx-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lx-btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.lx-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.lx-btn--ghost:hover { background: var(--surface-3); border-color: transparent; }
.lx-btn--danger { color: var(--bad); }
.lx-btn--block { width: 100%; min-height: 42px; }
.lx-btn--icon { width: 36px; padding: 0; }
.lx-btn[disabled] { opacity: .45; cursor: not-allowed; }
.lx-btn svg { width: 16px; height: 16px; }

/* ---------- Desktop ---------- */
.lx-body { overflow: hidden; }
.lx-desktop { position: fixed; inset: 0 0 var(--taskbar) 0; overflow: hidden; user-select: none; }
.wallpaper-grid .lx-desktop { background-image: linear-gradient(#171512 1px, transparent 1px), linear-gradient(90deg, #171512 1px, transparent 1px); background-size: 40px 40px; }
.lx-wordmark { position: absolute; right: 64px; bottom: 56px; display: none; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
.wallpaper-wordmark .lx-wordmark { display: flex; }
.lx-wordmark div { font-size: clamp(56px, 9vw, 128px); font-weight: 700; letter-spacing: -.04em; line-height: 1; color: #191714; }
.lx-wordmark span { font-size: 16px; letter-spacing: 8px; color: #22201d; font-weight: 600; }

.lx-icons { position: absolute; top: 16px; left: 14px; bottom: 16px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 96px); gap: 2px; align-content: start; }
.lx-icon { width: 92px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 9px 4px; background: transparent; border: 1px solid transparent; border-radius: 10px; color: var(--text); font-size: 12px; font-weight: 500; cursor: pointer; text-align: center; }
.lx-icon:hover { background: rgba(255,255,255,.04); border-color: #252320; }
.lx-icon__tile { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: #191714; border: 1px solid #2d2b28; border-radius: 12px; color: var(--accent); }
.lx-icon__tile svg { width: 22px; height: 22px; }

/* ---------- Prozori ---------- */
.lx-win { position: absolute; display: flex; flex-direction: column; min-width: 280px; min-height: 160px; background: var(--surface); border: 1px solid #2d2b28; border-radius: var(--radius); box-shadow: 0 24px 60px rgba(0,0,0,.55); overflow: hidden; user-select: text; }
.lx-win.is-focused { border-color: color-mix(in srgb, var(--accent) 30%, #2d2b28); box-shadow: 0 30px 70px rgba(0,0,0,.65); }
.lx-win.is-max { border-radius: 0; border-width: 0; }
.lx-win.is-min { display: none; }
.lx-win.is-dragging { user-select: none; opacity: .97; }
@keyframes lx-pop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.lx-win__bar { height: 42px; flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: default; touch-action: none; user-select: none; }
.lx-win.is-focused .lx-win__bar { background: #1b1a17; border-bottom-color: #2e2a22; }
.lx-win__icon { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; display: flex; }
.lx-win.is-focused .lx-win__icon { color: var(--accent); }
.lx-win__icon svg { width: 16px; height: 16px; }
.lx-win__title { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-win.is-focused .lx-win__title { color: var(--text); }
.lx-win__ctrl { width: 38px; height: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 7px; color: var(--muted); cursor: pointer; }
.lx-win__ctrl:hover { background: #292724; color: var(--text); }
.lx-win__ctrl--close:hover { background: #4a1f1f; color: #ffd6d0; }
.lx-win__ctrl svg { width: 15px; height: 15px; }
.lx-win__body { flex: 1; min-height: 0; overflow: auto; position: relative; display: flex; flex-direction: column; }
.lx-rz { position: absolute; z-index: 2; touch-action: none; }
.lx-rz--n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.lx-rz--s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
.lx-rz--e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.lx-rz--w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
.lx-rz--ne { top: -3px; right: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.lx-rz--nw { top: -3px; left: -3px; width: 12px; height: 12px; cursor: nwse-resize; }
.lx-rz--se { bottom: -3px; right: -3px; width: 14px; height: 14px; cursor: nwse-resize; }
.lx-rz--sw { bottom: -3px; left: -3px; width: 12px; height: 12px; cursor: nesw-resize; }
.lx-win.is-max .lx-rz { display: none; }
.lx-snap { position: absolute; z-index: 99990; border: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 10px; pointer-events: none; transition: all .08s; }

/* ---------- Taskbar ---------- */
.lx-taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--taskbar); display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #14120f; border-top: 1px solid var(--line); z-index: 100000; }
.lx-start-btn { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--accent); border: 0; border-radius: 10px; color: var(--accent-ink); font-weight: 700; font-size: 15px; letter-spacing: -.5px; cursor: pointer; }
.lx-tb-search { width: 260px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
.lx-tb-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-size: 13px; color: var(--text); }
.lx-tb-search svg { width: 15px; height: 15px; flex-shrink: 0; }
.lx-tb-apps { display: flex; gap: 4px; overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: none; }
.lx-tb-app { position: relative; height: 44px; min-width: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: transparent; border: 0; border-radius: 10px; color: var(--text); cursor: pointer; font-size: 13px; flex-shrink: 0; }
.lx-tb-app:hover { background: #1f1d1a; }
.lx-tb-app.is-focused { background: #1f1d18; }
.lx-tb-app svg { width: 19px; height: 19px; }
.lx-tb-app::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 6px; height: 3px; margin-left: -3px; border-radius: 2px; background: var(--muted); }
.lx-tb-app.is-focused::after { width: 16px; margin-left: -8px; background: var(--accent); }
.lx-tb-app__label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-tray { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lx-tray__btn { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 10px; color: var(--text); cursor: pointer; }
.lx-tray__btn:hover { background: #1f1d1a; }
.lx-tray__btn svg { width: 19px; height: 19px; }
.lx-badge { position: absolute; top: 7px; right: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.lx-clock { display: flex; flex-direction: column; align-items: flex-end; padding: 0 10px; line-height: 1.25; }
.lx-clock b { font-size: 13px; }
.lx-clock span { font-size: 11px; color: var(--muted); }
.lx-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }

/* ---------- Start meni ---------- */
.lx-start { position: fixed; left: 10px; bottom: calc(var(--taskbar) + 10px); width: 440px; max-width: calc(100vw - 20px); max-height: calc(100vh - var(--taskbar) - 20px); overflow: auto; display: flex; flex-direction: column; gap: 18px; padding: 20px; background: #181613; border: 1px solid #2e2a22; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); z-index: 100001; animation: lx-rise .14s ease-out; }
@keyframes lx-rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.lx-start__search { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; background: #12100d; border: 1px solid #2d2b28; border-radius: 10px; color: var(--muted); }
.lx-start__search input { flex: 1; background: transparent; border: 0; outline: none; font-size: 14px; color: var(--text); }
.lx-start__search svg { width: 16px; height: 16px; }
.lx-label { color: var(--muted); font-size: 11px; font-weight: 600; }
.lx-start__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.lx-start__app { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px; background: transparent; border: 0; border-radius: 10px; color: var(--text); font-size: 12px; cursor: pointer; text-align: center; }
.lx-start__app:hover, .lx-start__app.is-active { background: #23211e; }
.lx-start__app svg { width: 22px; height: 22px; color: var(--accent); }
.lx-start__foot { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.lx-start__user { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lx-start__user b { font-size: 13px; }
.lx-start__user span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Toasts i panel obaveštenja ---------- */
.lx-toasts { position: absolute; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 99999; width: 340px; max-width: calc(100vw - 32px); }
.lx-toast { display: flex; flex-direction: column; gap: 8px; padding: 13px 15px; background: #1a1815; border: 1px solid #2f2d2a; border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); animation: lx-rise .16s ease-out; user-select: text; }
.lx-toast__head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.lx-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.lx-toast--warn .lx-toast__dot { background: var(--warn); }
.lx-toast--error .lx-toast__dot { background: var(--bad); }
.lx-toast--ok .lx-toast__dot { background: var(--ok); }
.lx-toast__body { color: var(--text-2); font-size: 13px; }
.lx-toast__actions { display: flex; gap: 8px; }
.lx-panel { position: fixed; right: 10px; bottom: calc(var(--taskbar) + 10px); width: 360px; max-width: calc(100vw - 20px); max-height: 60vh; overflow: auto; background: #181613; border: 1px solid #2d2b28; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.7); z-index: 100001; padding: 14px; display: flex; flex-direction: column; gap: 8px; animation: lx-rise .14s ease-out; }
.lx-panel__item { padding: 10px 12px; border-radius: 10px; background: #1d1b18; border: 1px solid #272522; cursor: pointer; text-align: left; color: var(--text); }
.lx-panel__item:hover { border-color: #3a3326; }
.lx-panel__item b { display: block; font-size: 13px; }
.lx-panel__item span { font-size: 12px; color: var(--muted); }

/* ---------- Zajedničke komponente aplikacija ---------- */
.lx-toolbar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; flex-shrink: 0; }
.lx-spacer { flex: 1; }
.lx-tabs { display: flex; gap: 4px; }
.lx-tab { padding: 7px 13px; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font-size: 13px; cursor: pointer; }
.lx-tab.is-active { background: #252320; border-color: #363431; color: var(--text); font-weight: 600; }
.lx-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; flex-shrink: 0; }
.lx-chip { padding: 5px 11px; border-radius: 999px; border: 1px solid #2f2d2a; background: transparent; color: var(--text-2); font-size: 12px; cursor: pointer; }
.lx-chip.is-active { background: var(--warn-bg); border-color: transparent; color: var(--warn); font-weight: 600; }
.lx-status { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.lx-status--draft { background: #262421; color: var(--text-2); }
.lx-status--sent { background: var(--warn-bg); color: var(--warn); }
.lx-status--accepted, .lx-status--paid { background: var(--ok-bg); color: var(--ok); }
.lx-status--rejected { background: var(--bad-bg); color: var(--bad); }
.lx-status--cancelled { background: #1f1d1a; color: var(--muted); text-decoration: line-through; }
.lx-table-wrap { flex: 1; overflow: auto; margin: 0 16px 12px; border: 1px solid #272522; border-radius: 10px; }
.lx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lx-table th { position: sticky; top: 0; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 600; text-align: left; padding: 10px 12px; white-space: nowrap; }
.lx-table td { padding: 10px 12px; border-top: 1px solid #24221f; vertical-align: middle; }
.lx-table tbody tr { cursor: pointer; }
.lx-table tbody tr:hover { background: #191714; }
.lx-table .num { text-align: right; font-family: var(--mono); white-space: nowrap; }
.lx-table .mono { font-family: var(--mono); }
.lx-empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.lx-statusbar { padding: 8px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.lx-pad { padding: 16px; }
.lx-split { flex: 1; display: flex; min-height: 0; }
.lx-side { width: 190px; flex-shrink: 0; overflow: auto; background: #151310; border-right: 1px solid #252320; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; }
.lx-side__item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; background: transparent; border: 0; color: var(--text-2); font-size: 13px; cursor: pointer; text-align: left; width: 100%; }
.lx-side__item:hover { background: #1e1c19; }
.lx-side__item.is-active { background: var(--warn-bg); color: var(--warn); font-weight: 600; }
.lx-side__item svg { width: 15px; height: 15px; flex-shrink: 0; }
.lx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 12px 16px 0; }
.lx-kpi { background: #1a1815; border: 1px solid #272522; border-radius: 10px; padding: 10px 12px; }
.lx-kpi span { display: block; font-size: 11px; color: var(--muted); }
.lx-kpi b { font-family: var(--mono); font-size: 15px; font-weight: 500; }

/* ---------- Modal (unutar prozora) ---------- */
.lx-modal { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow: auto; z-index: 5; }
.lx-modal__card { width: 100%; max-width: 560px; background: #1a1815; border: 1px solid #2f2d2a; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.lx-modal__card--wide { max-width: 860px; }
.lx-modal__title { font-size: 16px; font-weight: 700; margin: 0; }
.lx-modal__actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Explorer ---------- */
.lx-crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); min-width: 0; flex-wrap: wrap; }
.lx-crumbs button { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.lx-crumbs button:hover { color: var(--text); background: #22201d; }
.lx-crumbs button:last-child { color: var(--text); font-weight: 600; }
.lx-files { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; align-content: start; }
.lx-files.is-drop { outline: 2px dashed var(--accent); outline-offset: -8px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.lx-file { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--text); font-size: 12px; text-align: center; cursor: pointer; }
.lx-file:hover { background: #1d1b18; }
.lx-file.is-selected { background: #1d1a14; border-color: #3a3326; }
.lx-file svg { width: 36px; height: 36px; color: var(--text-2); }
.lx-file--folder svg { color: var(--accent); }
.lx-file__name { word-break: break-word; line-height: 1.3; max-height: 3.9em; overflow: hidden; }
.lx-file__meta { font-size: 11px; color: var(--muted); }
.lx-ctx { position: fixed; z-index: 100002; min-width: 180px; background: #1d1b18; border: 1px solid #312f2c; border-radius: 10px; padding: 5px; box-shadow: 0 16px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; }
.lx-ctx button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; background: transparent; border: 0; border-radius: 7px; color: var(--text); font-size: 13px; cursor: pointer; text-align: left; }
.lx-ctx button:hover { background: #292724; }
.lx-ctx button.is-danger { color: var(--bad); }
.lx-ctx svg { width: 15px; height: 15px; color: var(--muted); }
.lx-ctx hr { border: 0; border-top: 1px solid #2d2b28; margin: 4px 2px; }

/* ---------- Fakture: editor ---------- */
.lx-items { display: flex; flex-direction: column; gap: 6px; }
.lx-item-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px 64px 110px 74px 110px 36px; gap: 6px; align-items: center; }
.lx-item-row--head { font-size: 11px; color: var(--muted); }
.lx-item-row .lx-input { padding: 7px 9px; font-size: 13px; }
.lx-item-row .lx-line { text-align: right; font-family: var(--mono); font-size: 13px; }
.lx-totals { display: flex; flex-direction: column; gap: 4px; margin-left: auto; width: 260px; font-size: 13px; }
.lx-totals div { display: flex; justify-content: space-between; }
.lx-totals .grand { border-top: 1px solid #363431; padding-top: 6px; font-weight: 700; font-size: 15px; }
.lx-totals span:last-child { font-family: var(--mono); }

/* ---------- Beleške ---------- */
.lx-notes-list { width: 230px; flex-shrink: 0; border-right: 1px solid #252320; overflow: auto; background: #151310; }
.lx-note-item { display: block; width: 100%; text-align: left; padding: 11px 14px; background: transparent; border: 0; border-bottom: 1px solid #201e1b; color: var(--text); cursor: pointer; }
.lx-note-item:hover { background: #1b1916; }
.lx-note-item.is-active { background: #1d1a14; }
.lx-note-item b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-note-item span { font-size: 12px; color: var(--muted); }
.lx-note-editor { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lx-note-title { background: transparent; border: 0; outline: none; padding: 16px 18px 6px; font-size: 20px; font-weight: 700; color: var(--text); }
.lx-note-body { flex: 1; background: transparent; border: 0; outline: none; resize: none; padding: 8px 18px 18px; font: 14px/1.6 var(--font); color: var(--text); }

/* ---------- Terminal ---------- */
.lx-term { flex: 1; background: #0f0d0a; font: 13px/1.55 var(--mono); padding: 12px 14px; overflow: auto; cursor: text; }
.lx-term__line { white-space: pre-wrap; word-break: break-word; }
.lx-term__line--error { color: var(--bad); }
.lx-term__line--ok { color: var(--text); }
.lx-term__line--cmd { color: var(--text); }
.lx-term__prompt { color: var(--accent); }
.lx-term__input-row { display: flex; gap: 8px; }
.lx-term__input { flex: 1; background: transparent; border: 0; outline: none; color: var(--text); font: inherit; padding: 0; caret-color: var(--accent); }

/* ---------- Podešavanja ---------- */
.lx-swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.lx-swatch { width: 40px; height: 40px; border-radius: 10px; border: 2px solid transparent; cursor: pointer; }
.lx-swatch.is-active { border-color: var(--text); }
.lx-section { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.lx-section h3 { margin: 0; font-size: 14px; }

/* ---------- Pošta ---------- */
.lx-count { margin-left: auto; min-width: 20px; padding: 0 6px; height: 18px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.lx-side__item.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.lx-mail-col { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 1px solid #252320; min-height: 0; }
.lx-mail-list { flex: 1; overflow: auto; }
.lx-mail-item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid #201e1b; color: var(--text-2); cursor: pointer; }
.lx-mail-item:hover { background: #1b1916; }
.lx-mail-item.is-active { background: #1d1a14; box-shadow: inset 3px 0 0 var(--accent); }
.lx-mail-item.is-unread { color: var(--text); }
.lx-mail-item.is-unread .lx-mail-item__from, .lx-mail-item.is-unread .lx-mail-item__subject { font-weight: 700; }
.lx-mail-item__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lx-mail-item__from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.lx-mail-item__date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lx-mail-item__subject { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-mail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.lx-mail-flag { color: var(--warn); display: flex; }
.lx-mail-ans { color: var(--muted); display: flex; }
.lx-mail-reader { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: auto; }
.lx-mail-actions { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; position: sticky; top: 0; background: var(--surface); z-index: 1; }
.lx-btn.is-on { color: var(--warn); }
.lx-mail-head { padding: 16px 18px 10px; display: flex; flex-direction: column; gap: 10px; }
.lx-mail-subject { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.lx-mail-meta { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.lx-mail-to { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-mail-atts, .lx-compose-atts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.lx-att { display: inline-flex; align-items: center; gap: 8px; max-width: 320px; padding: 4px 4px 4px 10px; background: #1d1b18; border: 1px solid #2d2b28; border-radius: 8px; font-size: 13px; color: var(--text-2); }
.lx-att__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); text-decoration: none; }
a.lx-att__name:hover { text-decoration: underline; }
.lx-att__size { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lx-att .lx-btn--icon { width: 30px; min-height: 30px; }
.lx-mail-body { flex: 1; display: flex; flex-direction: column; min-height: 320px; padding: 0 18px 18px; }
.lx-mail-banner { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 8px 12px; margin-bottom: 10px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13px; flex-wrap: wrap; }
.lx-mail-frame { flex: 1; width: 100%; min-height: 300px; border: 0; border-radius: 10px; background: #fff; }
.lx-mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; color: var(--text); }
.lx-mail-setup { flex: 1; overflow: auto; display: flex; justify-content: center; padding: 28px 16px; }
.lx-mail-setup__card { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.lx-details { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lx-details summary { cursor: pointer; color: var(--text-2); font-size: 13px; font-weight: 600; }
.lx-ok { background: var(--ok-bg); color: var(--ok); padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.lx-account-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #292724; border-radius: 10px; background: #181613; }
.lx-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow: auto; border: 1px solid #292724; border-radius: 10px; padding: 4px; }
.lx-pick-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; text-align: left; font-size: 13px; }
.lx-pick-item:hover { background: #22201d; }
.lx-pick-item.is-selected { background: var(--warn-bg); color: var(--warn); }
.lx-compose { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lx-compose-row { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid #22201d; }
.lx-compose-row label { width: 56px; flex-shrink: 0; color: var(--muted); font-size: 13px; }
.lx-compose-row .lx-input { border-color: transparent; background: transparent; padding-left: 4px; }
.lx-compose-row .lx-input:focus { border-color: var(--line-2); background: #12100d; }
.lx-compose-body { flex: 1; min-height: 160px; resize: none; border: 0; outline: none; background: transparent; color: var(--text); padding: 14px 18px; font: 14px/1.6 var(--font); }
.lx-compose-atts { padding: 8px 14px; border-top: 1px solid #22201d; }
.lx-compose .lx-error { margin: 0 14px 8px; }
.lx-only-mobile { display: none !important; }
.lx-compose-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }

/* ---------- Telefon / uski ekrani: prozori preko celog ekrana ---------- */
@media (max-width: 760px) {
  .lx-win { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; border-width: 0; }
  .lx-rz { display: none; }
  .lx-tb-search, .lx-clock span, .lx-tb-app__label { display: none; }
  .lx-icons { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 92px); grid-template-rows: none; right: 14px; }
  .lx-side, .lx-notes-list { width: 150px; }
  .lx-item-row { grid-template-columns: minmax(0, 1fr) 60px 90px 36px; }
  .lx-only-mobile { display: inline-flex !important; }
  .lx-mail { flex-direction: column; }
  .lx-mail > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #252320; padding: 6px; flex-shrink: 0; }
  .lx-mail > .lx-side .lx-side__item { width: auto; flex-shrink: 0; white-space: nowrap; }
  .lx-mail > .lx-side .lx-count { margin-left: 4px; }
  .lx-mail .lx-mail-col, .lx-mail .lx-mail-reader { min-height: 0; }
  .lx-mail-meta { flex-wrap: wrap; }
  .lx-mail-meta > div:last-child { width: 100%; padding-left: 42px; }
  .lx-win[aria-label="Pošta"] .lx-toolbar input[type="search"] { flex: 1; width: auto !important; }
  .lx-mail-col { width: 100%; border-right: 0; }
  .lx-mail-col + .lx-mail-reader, .lx-mail-col { flex: 1; }
  .lx-mail-head, .lx-mail-actions { padding-left: 12px; padding-right: 12px; }
  .lx-mail-col:has(+ .lx-mail-reader .lx-mail-head) { display: none; }
  .lx-mail-reader:not(:has(.lx-mail-head)) { display: none; }
  .lx-item-row > :nth-child(3), .lx-item-row > :nth-child(5), .lx-item-row > :nth-child(6) { display: none; }
}

a.lx-btn { text-decoration: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* =================== 1.1: sistem, korisnici, kalendar, pregled, SEF =================== */
.lx-error:empty, .lx-ok:empty { display: none; }
.lx-t-ok { color: var(--ok); }
.lx-t-bad { color: var(--bad); }
.lx-hint { color: var(--muted); font-size: 12px; font-weight: 400; }
.lx-mono { font-family: var(--mono); }
.lx-scroll { overflow: auto; }
.lx-pre { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 12px; color: var(--text-2); background: #13110e; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto; }
.lx-kv { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: 6px 18px; margin: 0; font-size: 13px; }
.lx-kv dt { color: var(--muted); }
.lx-kv dd { margin: 0; word-break: break-all; }
.lx-banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: #1d1b18; border: 1px solid var(--line-2); color: var(--text); }
.lx-banner--ok { background: var(--ok-bg); border-color: transparent; }
.lx-banner--warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.lx-banner--bad { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.lx-banner .lx-pre { background: rgba(0, 0, 0, .25); border-color: transparent; color: inherit; }
.lx-chip.is-bad { color: var(--bad); border-color: #4a2a2a; }
.lx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; }

/* dnevnik grešaka */
.lx-log { flex: 1; overflow: auto; padding: 0 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.lx-log__item { border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 8px; padding: 8px 10px; background: #161411; }
.lx-log__item--error, .lx-log__item--critical, .lx-log__item--alert, .lx-log__item--emergency { border-left-color: var(--bad); }
.lx-log__item--warning { border-left-color: var(--warn); }
.lx-log__item summary { display: flex; gap: 10px; align-items: baseline; cursor: pointer; list-style: none; font-size: 13px; min-width: 0; }
.lx-log__item summary::-webkit-details-marker { display: none; }
.lx-log__lvl { font-size: 10px; font-weight: 700; color: var(--muted); width: 64px; flex-shrink: 0; }
.lx-log__item--error .lx-log__lvl, .lx-log__item--critical .lx-log__lvl { color: var(--bad); }
.lx-log__item--warning .lx-log__lvl { color: var(--warn); }
.lx-log__date { font-family: var(--mono); font-size: 12px; color: var(--muted); flex-shrink: 0; }
.lx-log__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lx-log__item[open] .lx-log__msg { white-space: normal; word-break: break-word; }

/* kalendar */
.lx-cal { flex: 1; display: flex; min-height: 0; }
.lx-cal__title { font-size: 15px; margin-left: 6px; }
.lx-cal__month { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 0 12px 12px; }
.lx-cal__head { display: grid; grid-template-columns: repeat(7, 1fr); padding: 8px 0 6px; }
.lx-cal__head span { color: var(--muted); font-size: 11px; font-weight: 600; padding-left: 6px; }
.lx-cal__grid { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(64px, 1fr)); gap: 4px; }
.lx-cal__cell { display: flex; flex-direction: column; gap: 2px; align-items: stretch; text-align: left; padding: 5px 6px; border: 1px solid #252320; border-radius: 8px; background: #171512; cursor: pointer; min-width: 0; overflow: hidden; }
.lx-cal__cell:hover { background: #191714; }
.lx-cal__cell.is-out { opacity: .45; }
.lx-cal__cell.is-selected { border-color: var(--accent); }
.lx-cal__num { font-size: 12px; color: var(--text-2); font-family: var(--mono); }
.lx-cal__cell.is-today .lx-cal__num { color: var(--accent-ink); background: var(--accent); border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-weight: 600; }
.lx-cal__ev { font-size: 11px; line-height: 1.35; padding: 1px 6px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #252320; color: var(--text-2); }
.lx-cal__ev--rok { background: var(--warn-bg); color: var(--warn); }
.lx-cal__ev--sastanak { background: #1b2430; color: #9cc0e0; }
.lx-cal__ev--podsetnik { background: #252018; color: var(--text); }
.lx-cal__ev--invoice { background: #1f2a22; color: var(--ok); }
.lx-cal__ev--overdue { background: var(--bad-bg); color: var(--bad); }
.lx-cal__ev.is-done, .lx-cal__item.is-done b { text-decoration: line-through; opacity: .6; }
.lx-cal__more { font-size: 11px; color: var(--muted); padding-left: 6px; }
.lx-cal__day { width: 270px; flex-shrink: 0; border-left: 1px solid var(--line); overflow: auto; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.lx-cal__dayhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 6px; }
.lx-cal__item { display: flex; gap: 10px; text-align: left; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 8px; background: #181613; cursor: pointer; width: 100%; }
.lx-cal__item:hover { background: #1a1815; }
.lx-cal__item--rok { border-left-color: var(--warn); }
.lx-cal__item--sastanak { border-left-color: #8fb3d1; }
.lx-cal__item--invoice { border-left-color: var(--ok); }
.lx-cal__item--overdue { border-left-color: var(--bad); }
.lx-cal__time { font-family: var(--mono); font-size: 12px; color: var(--muted); width: 52px; flex-shrink: 0; padding-top: 1px; }
.lx-cal__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.lx-cal__body > span { color: var(--muted); font-size: 12px; }
.lx-cal__note { white-space: pre-line; color: var(--text-2) !important; }

/* pregled */
.lx-dash { flex: 1; overflow: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.lx-dash__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.lx-card { background: #171512; border: 1px solid #272522; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lx-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lx-card__head h3 { margin: 0; font-size: 14px; }
.lx-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.lx-legend__sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.lx-kpi small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.lx-kpi--ok b { color: var(--ok); }
.lx-kpi--bad b { color: var(--bad); }
.lx-chart { width: 100%; height: auto; display: block; }
.lx-chart__grid { stroke: #262421; stroke-width: 1; }
.lx-chart__axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.lx-chart__bar { fill: var(--accent); }
.lx-chart__bar--ok { fill: var(--ok); }
.lx-chart__hit { fill: transparent; }
.lx-chart__group:hover .lx-chart__hit { fill: rgba(255, 255, 255, .03); }
.lx-hbars { display: flex; flex-direction: column; gap: 6px; }
.lx-hbar { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; gap: 10px; align-items: center; font-size: 13px; background: transparent; border: 0; padding: 4px 2px; border-radius: 6px; text-align: left; color: inherit; }
button.lx-hbar { cursor: pointer; }
button.lx-hbar:hover { background: #1a1815; }
.lx-hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-hbar__track { height: 8px; background: #22201d; border-radius: 999px; overflow: hidden; }
.lx-hbar__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.lx-hbar__val { font-family: var(--mono); font-size: 12px; color: var(--text-2); white-space: nowrap; }

/* SEF u detaljima fakture */
.lx-sef { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; background: #161411; }
.lx-sef__head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lx-sef__head svg { width: 16px; height: 16px; color: var(--accent); }

@media (max-width: 760px) {
  .lx-cal { flex-direction: column; }
  .lx-cal__day { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 40%; }
  .lx-cal__grid { grid-template-rows: repeat(6, minmax(44px, 1fr)); }
  .lx-cal__ev { display: none; }
  .lx-cal__cell:has(.lx-cal__ev)::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
  .lx-kv { grid-template-columns: 1fr; gap: 2px; }
  .lx-kv dd { margin-bottom: 8px; }
}

/* =================== 1.2: Lex Chat =================== */
.lx-badge.is-dot { min-width: 9px; width: 9px; height: 9px; padding: 0; }
.lx-tb-badge { position: absolute; top: 3px; right: 3px; transform: scale(.85); }
.lx-tb-app { position: relative; }
.lx-win__body.lc-host { overflow: hidden; }
.lc { --lc-side: #111110; --lc-hover: #1a1916; --lc-mention: #e5534b; flex: 1; display: flex; min-height: 0; background: var(--surface); }
.lc-spacer { flex: 1; }
.lc-muted { color: var(--muted); font-size: 13px; margin: 4px 0; }
.lc-tag { font-size: 10px; padding: 2px 6px; border-radius: 5px; background: #272522; color: var(--muted); font-weight: 600; }
.lc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; flex-shrink: 0; text-decoration: none; }
.lc-icon-btn:hover { background: #252320; color: var(--text); }
.lc-icon-btn.is-on { color: var(--accent); }

/* avatar i prisutnost */
.lc-av { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 8px; color: #171512; font-weight: 700; user-select: none; }
.lc-av img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.lc-presence { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--lc-side, #171512); background: #555; }
.lc-presence--online { background: #3fb27f; }
.lc-presence--away { background: transparent; box-shadow: inset 0 0 0 2px #8a8a8a; }
.lc-presence--offline { background: transparent; box-shadow: inset 0 0 0 2px #555; }
.lc-presence.is-dnd::after { content: ''; position: absolute; inset: 2px 1px; background: var(--lc-side, #171512); border-radius: 1px; }
.lc-presence.is-dnd { background: var(--lc-mention); box-shadow: none; }

/* sidebar */
.lc-side { width: 250px; flex-shrink: 0; background: var(--lc-side); border-right: 1px solid #22201d; display: flex; flex-direction: column; gap: 1px; padding: 0 8px 12px; overflow-y: auto; }
.lc-ws { display: flex; align-items: center; gap: 8px; padding: 12px 4px 10px; border-bottom: 1px solid #22201d; margin: 0 -8px 8px; padding-left: 14px; padding-right: 12px; position: sticky; top: 0; background: var(--lc-side); z-index: 1; }
.lc-ws__name { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
.lc-ws__name b { font-size: 15px; }
.lc-ws__name span { font-size: 11px; color: var(--muted); }
.lc-ws__me { border: 0; background: transparent; padding: 0; cursor: pointer; border-radius: 8px; }
.lc-jump { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; border: 1px solid #292724; background: #191714; color: var(--muted); font-size: 13px; cursor: pointer; margin-bottom: 8px; }
.lc-jump__t { flex: 1; text-align: left; }
.lc-jump kbd { font: 10px var(--mono); border: 1px solid #363431; border-radius: 4px; padding: 1px 5px; color: var(--muted); }
.lc-jump svg { width: 15px; height: 15px; }
.lc-nav { display: flex; flex-direction: column; gap: 1px; padding-bottom: 6px; }
.lc-sec { display: flex; align-items: center; justify-content: space-between; padding: 12px 6px 4px 10px; color: var(--muted); font-size: 11px; font-weight: 600; }
.lc-sec__add { width: 22px; height: 22px; border-radius: 6px; border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.lc-sec__add:hover { background: #252320; color: var(--text); }
.lc-ch { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; border: 0; border-radius: 7px; background: transparent; color: #a8a090; font-size: 14px; cursor: pointer; text-align: left; min-height: 30px; }
.lc-ch:hover { background: var(--lc-hover); }
.lc-ch.is-unread { color: #fff; font-weight: 600; }
.lc-ch.is-muted { opacity: .55; }
.lc-ch.is-active { background: color-mix(in srgb, var(--accent) 22%, #181613); color: #fff; }
.lc-ch--hint { color: var(--muted); font-size: 13px; }
.lc-ch__ico { display: inline-flex; width: 20px; justify-content: center; flex-shrink: 0; opacity: .8; }
.lc-ch__group { font-size: 10px; font-weight: 700; background: #2d2b28; border-radius: 6px; height: 20px; align-items: center; }
.lc-ch__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-ch .lc-av { border-radius: 6px; }
.lc-count { background: var(--lc-mention); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; min-width: 20px; text-align: center; line-height: 16px; }

/* glavni deo */
.lc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lc-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--line); min-height: 52px; flex-shrink: 0; }
.lc-head__title { display: flex; align-items: center; gap: 6px; min-width: 0; flex-shrink: 0; max-width: 45%; }
.lc-head__ico { display: inline-flex; color: var(--text-2); }
.lc-head__name { border: 0; background: transparent; color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; padding: 2px 4px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-head__name:hover { background: #22201d; }
.lc-head__topic { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; border: 0; background: transparent; cursor: pointer; text-align: left; padding: 2px 4px; border-left: 1px solid #2d2b28; padding-left: 10px; }
span.lc-head__topic { cursor: default; }
.lc-members-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #2d2b28; background: transparent; color: var(--text-2); border-radius: 7px; padding: 4px 9px; cursor: pointer; font-size: 13px; }
.lc-members-btn svg { width: 15px; height: 15px; }
.lc-banner { background: var(--warn-bg); color: var(--warn); font-size: 12px; padding: 6px 16px; }
.lc-msgs-wrap { position: relative; flex: 1; min-height: 0; display: flex; }
.lc-msgs { flex: 1; overflow-y: auto; padding: 8px 0 12px; overflow-anchor: none; }
.lc-newbelow { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; padding: 6px 14px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.lc-older { display: block; margin: 8px auto; border: 1px solid #2d2b28; background: transparent; color: var(--text-2); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-size: 12px; }
.lc-intro { padding: 28px 20px 16px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lc-intro h3 { margin: 6px 0 0; font-size: 20px; }
.lc-intro p { margin: 0; color: var(--muted); }
.lc-intro__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #22201d; color: var(--accent); }
.lc-intro__avs { display: flex; gap: 6px; }
.lc-empty-ch { padding: 6px 20px; color: var(--muted); font-size: 13px; }
.lc-day { position: sticky; top: 0; z-index: 2; display: flex; justify-content: center; margin: 10px 0 2px; pointer-events: none; }
.lc-day::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #272522; z-index: -1; }
.lc-day span { background: var(--surface); border: 1px solid #2d2b28; border-radius: 999px; padding: 2px 12px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.lc-newline { display: flex; align-items: center; gap: 8px; margin: 6px 16px; color: var(--lc-mention); font-size: 11px; font-weight: 700; }
.lc-newline::before, .lc-newline::after { content: ''; flex: 1; border-top: 1px solid color-mix(in srgb, var(--lc-mention) 60%, transparent); }
.lc-newline::before { flex: 0 0 0; }

/* poruka */
.lc-msg { position: relative; display: flex; gap: 10px; padding: 6px 20px 6px 16px; outline: none; }
.lc-msg.is-cont { padding-top: 1px; padding-bottom: 1px; }
.lc-msg.is-hover, .lc-msg:focus-within { background: #171614; }
.lc-msg.is-pinned { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.lc-msg.is-highlight { background: color-mix(in srgb, var(--accent) 18%, transparent); transition: background 1.5s; }
.lc-msg__gutter { width: 38px; flex-shrink: 0; display: flex; justify-content: center; }
.lc-av-btn { border: 0; background: transparent; padding: 0; cursor: pointer; height: 36px; border-radius: 8px; margin-top: 2px; }
.lc-msg__content { flex: 1; min-width: 0; }
.lc-msg__meta { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.lc-name { border: 0; background: transparent; padding: 0; color: var(--text); font-weight: 700; font-size: 14px; cursor: pointer; }
.lc-name:hover { text-decoration: underline; }
.lc-time { color: var(--muted); font-size: 11px; }
.lc-time--side { visibility: hidden; font-size: 10px; padding-top: 4px; }
.lc-msg.is-hover .lc-time--side { visibility: visible; }
.lc-body { color: var(--text); font-size: 14.5px; line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; white-space: normal; }
.lc-body--deleted { color: var(--muted); font-style: italic; font-size: 13px; }
.lc-edited { color: var(--muted); font-size: 11px; }
.lc-body strong { font-weight: 700; }
.lc-code { font-family: var(--mono); font-size: 12.5px; background: #22201d; border: 1px solid #2f2d2a; color: #e8a87c; padding: 1px 5px; border-radius: 5px; }
.lc-pre { font-family: var(--mono); font-size: 12.5px; background: #13110e; border: 1px solid #2d2b28; border-radius: 8px; padding: 10px 12px; margin: 4px 0; white-space: pre-wrap; overflow-x: auto; }
.lc-quote { border-left: 3px solid #474542; margin: 2px 0; padding: 0 0 0 10px; color: var(--text-2); }
.lc-list-md { margin: 2px 0; padding-left: 22px; }
.lc-link { color: #8fb3d1; }
.lc-mention { display: inline; border: 0; padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, #8fb3d1 18%, transparent); color: #a9c8e3; font: inherit; font-weight: 600; cursor: pointer; }
.lc-mention.is-me { background: color-mix(in srgb, var(--accent) 28%, transparent); color: #f1d98a; }
.lc-jumbo { font-size: 34px; line-height: 1.25; }
.lc-system { color: var(--muted); font-size: 13px; }
.lc-system b { color: var(--text-2); }
.lc-msg--system { padding-top: 3px; padding-bottom: 3px; }
.lc-sysdot { width: 6px; height: 6px; border-radius: 50%; background: #363431; margin-top: 7px; }
.lc-pinned-tag { font-size: 11px; color: var(--accent); margin-bottom: 1px; }
.lc-reply-of { border: 0; background: transparent; color: var(--muted); font-size: 11px; padding: 0; cursor: pointer; }
.lc-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lc-img img { max-width: min(360px, 100%); max-height: 300px; height: auto; border-radius: 8px; border: 1px solid #2d2b28; display: block; object-fit: cover; background: #1d1b18; }
.lc-file { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid #2d2b28; border-radius: 10px; background: #191714; max-width: 360px; min-width: 220px; }
.lc-file__ico { color: var(--accent); display: inline-flex; }
.lc-file__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.lc-file__meta a { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.lc-file__meta span { color: var(--muted); font-size: 11px; }
.lc-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.lc-react { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #2f2d2a; background: #1d1b18; border-radius: 999px; padding: 1px 9px 1px 7px; cursor: pointer; font-size: 14px; color: var(--text-2); height: 26px; }
.lc-react b { font-size: 12px; font-weight: 600; }
.lc-react.is-mine { border-color: color-mix(in srgb, var(--accent) 70%, #363431); background: color-mix(in srgb, var(--accent) 16%, #1d1b18); color: var(--text); }
.lc-react--add { color: var(--muted); opacity: 0; padding: 1px 7px; }
.lc-msg.is-hover .lc-react--add, .lc-react--add:focus { opacity: 1; }
.lc-thread-sum { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 3px 8px 3px 4px; cursor: pointer; color: var(--text-2); font-size: 12px; }
.lc-thread-sum:hover { border-color: #2f2d2a; background: #1c1a17; }
.lc-thread-sum b { color: #8fb3d1; }
.lc-thread-sum__avs { display: inline-flex; gap: 2px; }
.lc-thread-sum__avs .lc-av { border-radius: 5px; }
.lc-actions { position: absolute; right: 16px; top: -14px; display: none; gap: 1px; background: #1f1d1a; border: 1px solid #32302d; border-radius: 9px; padding: 2px; box-shadow: 0 6px 18px rgba(0,0,0,.4); z-index: 3; }
.lc-msg.is-hover .lc-actions, .lc-msg:focus-within .lc-actions { display: flex; }
.lc-act { width: 30px; height: 28px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--text-2); display: grid; place-items: center; font-size: 15px; }
.lc-act:hover { background: #2d2b28; color: var(--text); }
.lc-act.is-on { color: var(--accent); }
.lc-edit { width: 100%; resize: none; background: #151310; border: 1px solid var(--accent); border-radius: 8px; color: var(--text); padding: 8px 10px; font: inherit; }
.lc-edit__bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.lc-edit__bar span { flex: 1; }
.lc.is-compact .lc-msg { padding-top: 2px; padding-bottom: 2px; }
.lc.is-compact .lc-msg:not(.is-cont) { padding-top: 6px; }

/* kucanje i pisanje */
.lc-typing { height: 18px; padding: 0 20px; font-size: 12px; color: var(--muted); font-style: italic; flex-shrink: 0; }
.lc-composer-host { padding: 0 16px 14px; flex-shrink: 0; }
.lc-archived { padding: 12px; border: 1px dashed #363431; border-radius: 10px; color: var(--muted); text-align: center; font-size: 13px; }
.lc-composer { position: relative; }
.lc-composer.is-sending { opacity: .7; }
.lc-box { border: 1px solid #363431; border-radius: 12px; background: #191714; display: flex; flex-direction: column; }
.lc-box:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, #363431); }
.lc-composer.is-drop .lc-box { border: 2px dashed var(--accent); }
.lc-tools { display: flex; gap: 2px; padding: 4px 6px 0; }
.lc-tool { min-width: 28px; height: 26px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; font-size: 13px; }
.lc-tool:hover { background: #272522; color: var(--text); }
.lc-tool code { font-family: var(--mono); font-size: 11px; }
.lc-input { border: 0; background: transparent; color: var(--text); resize: none; padding: 8px 12px 6px; font: 14.5px/1.45 var(--font); outline: none; max-height: 220px; min-height: 38px; }
.lc-input::placeholder { color: #6f6a60; }
.lc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 6px; }
.lc-chip { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.lc-chip svg { width: 13px; height: 13px; }
.lc-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; display: inline-flex; padding: 0; }
.lc-box__bar { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; }
.lc-hint { font-size: 11px; color: #6f6a60; margin-right: 8px; }
.lc-also { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-left: 6px; }
.lc-send { width: 34px; height: 30px; border-radius: 8px; border: 0; background: var(--accent); color: var(--accent-ink); cursor: pointer; display: grid; place-items: center; }
.lc-send:disabled { opacity: .5; }
.lc-suggest { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: #1e1c19; border: 1px solid #363431; border-radius: 10px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 5; max-height: 260px; overflow: auto; }
.lc-suggest__item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: transparent; color: var(--text); border-radius: 7px; cursor: pointer; text-align: left; font-size: 13px; }
.lc-suggest__item span { color: var(--muted); font-size: 12px; }
.lc-suggest__item.is-active { background: color-mix(in srgb, var(--accent) 25%, #1e1c19); }

/* emoji i kartica korisnika */
.lc-emoji-pop { position: fixed; z-index: 3000; width: 300px; background: #1e1c19; border: 1px solid #363431; border-radius: 12px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 8px; }
.lc-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 210px; overflow-y: auto; }
.lc-emoji-grid button { border: 0; background: transparent; font-size: 20px; height: 34px; border-radius: 6px; cursor: pointer; }
.lc-emoji-grid button:hover { background: #2d2b28; }
.lc-card-pop { position: fixed; z-index: 3000; width: 260px; background: #1e1c19; border: 1px solid #363431; border-radius: 12px; padding: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 10px; }
.lc-card-pop__top { display: flex; gap: 12px; align-items: center; }
.lc-card-pop__top > div { display: flex; flex-direction: column; min-width: 0; }
.lc-card-pop__top small { color: var(--muted); }
.lc-card-pop__pres { font-size: 12px; color: var(--text-2); }
.lc-card-pop__status { font-size: 13px; color: var(--text-2); background: #252320; border-radius: 8px; padding: 6px 8px; }

/* desni panel */
.lc-pane { width: 380px; flex-shrink: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: #161411; }
.lc-pane__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); min-height: 52px; }
.lc-pane__head > div { display: flex; flex-direction: column; min-width: 0; }
.lc-pane__head span { font-size: 12px; color: var(--muted); }
.lc-pane__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
.lc-pane__body > .lx-input, .lc-pane__body > .lc-results, .lc-pane__body > .lc-det, .lc-pane__body > .lx-empty, .lc-pane__body > .lc-result { margin: 0 12px; }
.lc-thread { display: flex; flex-direction: column; }
.lc-pane .lc-msg { padding-left: 12px; padding-right: 12px; }
.lc-pane .lc-actions { right: 8px; }
.lc-thread__count { display: flex; align-items: center; gap: 8px; margin: 6px 12px; color: var(--muted); font-size: 12px; }
.lc-thread__count::after { content: ''; flex: 1; border-top: 1px solid #292724; }
.lc-pane .lc-composer { margin: 4px 12px 0; }
.lc-pane .lc-typing { padding: 0 14px; }
.lc-result { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid #272522; background: #1a1815; border-radius: 10px; padding: 8px 10px; cursor: pointer; color: inherit; width: calc(100% - 24px); }
.lc-result:hover { border-color: #363431; background: #1b1a17; }
.lc-result.is-unread { border-left: 3px solid var(--accent); }
.lc-result__where { font-size: 11px; color: var(--muted); }
.lc-result__msg { display: flex; gap: 8px; align-items: flex-start; }
.lc-result__msg .lc-body { font-size: 13px; max-height: 6.5em; overflow: hidden; }
.lc-results { display: flex; flex-direction: column; gap: 6px; }
.lc-results .lc-result { width: 100%; }
.lc-det { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #252320; }
.lc-det h4 { margin: 4px 0; font-size: 12px; color: var(--muted); }
.lc-det__row { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid #272522; background: #1a1815; border-radius: 8px; padding: 7px 10px; color: inherit; font-size: 13px; }
button.lc-det__row { cursor: pointer; }
.lc-det__row span { color: var(--muted); font-size: 11px; }
.lc-det__members { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.lc-det__member { display: flex; align-items: center; }
.lc-det__who { flex: 1; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; color: inherit; padding: 4px; border-radius: 7px; cursor: pointer; text-align: left; font-size: 13px; }
.lc-det__who:hover { background: #1f1d1a; }
.lc-det__files { display: flex; flex-direction: column; gap: 2px; }
.lc-det__file { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 13px; padding: 4px; border-radius: 6px; }
.lc-det__file:hover { background: #1f1d1a; }
.lc-det__file span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-det__file small { color: var(--muted); }
.lc-det__file svg { width: 15px; height: 15px; }
.lc-det__btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* modali chata */
.lc-people { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.lc-person { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.lc-person:hover { background: #1f1d1a; }
.lc-person small { color: var(--muted); margin-left: auto; }
.lc-browse { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; }
.lc-browse__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid #272522; border-radius: 10px; }
.lc-browse__row > div { display: flex; flex-direction: column; min-width: 0; }
.lc-browse__row small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-switch { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; }
.lc-switch__item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; color: var(--text); padding: 7px 10px; border-radius: 8px; cursor: pointer; text-align: left; font-size: 14px; }
.lc-switch__item span:first-of-type { flex: 1; }
.lc-switch__item small { color: var(--muted); }
.lc-switch__item.is-active { background: color-mix(in srgb, var(--accent) 22%, #1e1c19); }
.lc-status-row { display: flex; gap: 8px; }
.lc-status-emoji { width: 44px; border: 1px solid #363431; background: #191714; border-radius: 8px; font-size: 20px; cursor: pointer; }
.lc-presets { display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 760px) {
  .lc-side { position: absolute; inset: 0; width: auto; z-index: 4; }
  .lc:not(.is-mobile-side) .lc-side { display: none; }
  .lc-pane { position: absolute; inset: 0; width: auto; z-index: 5; }
  .lc-head__topic, .lc-hint, .lc-tools { display: none; }
  .lc-head__title { max-width: 60%; }
  .lc-back { display: inline-flex !important; }
  .lc-actions { right: 8px; }
  .lc-msg { padding-left: 10px; padding-right: 10px; }
}
.lc-back { display: none; }
.lc-pane .lc-hint { display: none; }
.lc-also { white-space: nowrap; }

/* Podešavanja 1.2 */
.lx-check--block { align-items: flex-start; }
.lx-check--block input { margin-top: 3px; }
.lx-profile-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.lx-avatar-big { width: 96px; height: 96px; border-radius: 18px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-size: 34px; font-weight: 700; overflow: hidden; flex-shrink: 0; }
.lx-avatar-big img { width: 100%; height: 100%; object-fit: cover; }
.lx-steps { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 13px; line-height: 1.7; }
.lx-qr { align-self: center; background: #fff; border-radius: 10px; padding: 0; line-height: 0; }
.lx-qr img { image-rendering: pixelated; display: block; }
.lx-codes { font-size: 15px; letter-spacing: 1px; columns: 2; text-align: center; }
.lx-kbd { font: 11px var(--mono); border: 1px solid #363431; border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--text); background: #1d1b18; }

/* =================== 1.3: LexBot, kartice, integracije =================== */
.lc-av--bot { background: linear-gradient(135deg, #2a2620, #1c1a16); border: 1px solid #3a342a; color: inherit; font-weight: 400; }
.lc-name--bot { cursor: default; }
.lc-name--bot:hover { text-decoration: none; }
.lc-tag--app { background: color-mix(in srgb, var(--accent) 18%, #201e1b); color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 10px; }
.lc-msg--ephemeral { background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 3px solid var(--accent); }
.lc-dismiss { border: 0; background: transparent; color: var(--muted); font-size: 12px; cursor: pointer; text-decoration: underline; margin-left: auto; }
.lc-cards { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-width: 460px; }
.lc-card { border: 1px solid #2f2d2a; border-left: 3px solid var(--accent); border-radius: 10px; background: #191714; padding: 9px 12px; display: flex; flex-direction: column; gap: 6px; }
.lc-card--mail { border-left-color: #8fb3d1; }
.lc-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.lc-card__head > span[html], .lc-card__head > span:first-child { display: inline-flex; color: var(--accent); }
.lc-card__head a { color: var(--text); font-weight: 700; }
.lc-card__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 14px; }
.lc-card__row { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.lc-card__row span { color: var(--muted); font-size: 11px; }
.lc-card__row b { font-weight: 500; overflow-wrap: anywhere; }
.lc-card__snippet { margin: 0; color: var(--text-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lc-card .lx-btn { align-self: flex-start; padding: 4px 10px; font-size: 12px; }
.lc-hooks { display: flex; flex-direction: column; gap: 6px; }
.lc-hook { display: flex; align-items: center; gap: 10px; border: 1px solid #272522; border-radius: 8px; padding: 6px 8px; }
.lc-hook__ico { font-size: 18px; }
.lc-hook__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; }
.lc-hook__meta small { color: var(--muted); }

/* =================== 1.4: radna površina, „Danas“, traka, start, paleta, prazna stanja, telefon =================== */
:root { --hair: #2c2924; --leader: #3b362e; }
.lx-label { font-size: 12px; }
kbd { display: inline-flex; align-items: center; font: 500 10.5px/1 var(--mono); padding: 3px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
kbd + kbd { margin-left: 3px; }
.lx-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--accent); animation: lx-rot .8s linear infinite; flex-shrink: 0; }
@keyframes lx-rot { to { transform: rotate(360deg); } }

/* padajući meniji u istom tonu kao polja */
select.lx-input, .lx-field select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
select.lx-input:hover, .lx-field select:hover { border-color: #46413a; }
select option { background: #1b1916; color: var(--text); }
.lx-input { font-size: 13.5px; }
.lx-btn { transition: background-color .12s, border-color .12s; }

/* pozadina: blaga topla svetlost umesto ravne crne */
.wallpaper-plain .lx-desktop, .wallpaper-wordmark .lx-desktop {
  background:
    radial-gradient(1100px 680px at 88% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%),
    radial-gradient(900px 640px at -5% 105%, rgba(255, 236, 200, .025), transparent 60%);
}

/* ikonice */
.lx-icons { top: 18px; left: 12px; grid-template-rows: repeat(auto-fill, 98px); }
.lx-icon { width: 88px; gap: 8px; padding: 10px 4px; }
.lx-icon:hover { background: rgba(255, 240, 210, .04); border-color: transparent; }
.lx-icon:focus-visible { outline-offset: -2px; }
.lx-icon__tile { position: relative; width: 48px; height: 48px; border-radius: 13px; background: #1a1814; border-color: #2f2b25; box-shadow: inset 0 1px 0 rgba(255, 240, 210, .04); transition: border-color .12s, transform .12s; }
.lx-icon:hover .lx-icon__tile { border-color: color-mix(in srgb, var(--accent) 35%, #2f2b25); }
.lx-icon:active .lx-icon__tile { transform: scale(.96); }
.lx-icon__label { line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lx-icon__tile .lx-badge { top: -5px; right: -6px; }
.lx-badge.is-dot { min-width: 9px; width: 9px; height: 9px; padding: 0; top: 4px; right: 4px; }

/* ---------- Panel „Danas“: knjiga dana, ne kartice ---------- */
.lx-today { position: absolute; top: 18px; right: 18px; width: 312px; max-height: calc(100% - 36px); overflow: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; padding: 22px 22px 16px; background: color-mix(in srgb, #15130f 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--hair); border-radius: 16px; user-select: none; animation: lx-today-in .35s ease-out; }
@keyframes lx-today-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lx-today__head { display: flex; align-items: flex-start; gap: 8px; padding-bottom: 16px; }
.lx-today__head > div { flex: 1; min-width: 0; }
.lx-today__day { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.lx-today__date { font-size: 30px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; margin-top: 2px; }
.lx-today__greet { margin: 6px 0 0; color: var(--text-2); font-size: 13px; }
.lx-today__hide { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin: -6px -8px 0 0; background: transparent; border: 0; border-radius: 7px; color: var(--muted); cursor: pointer; }
.lx-today__hide:hover { background: var(--surface-3); color: var(--text); }
.lx-today__hide svg { width: 15px; height: 15px; }
.lx-today__sec { border-top: 1px solid var(--hair); padding: 12px 0 10px; }
.lx-today__sec h3 { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lx-today__sec h3.is-sub { margin-top: 10px; }
.lx-today__row { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 5px 0; background: none; border: 0; color: var(--text); font-size: 13px; text-align: left; }
button.lx-today__row { cursor: pointer; }
button.lx-today__row:hover .lx-today__label { color: var(--accent); }
.lx-today__label { flex-shrink: 1; min-width: 0; }
.lx-today__label small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.lx-today__leader { flex: 1; min-width: 10px; border-bottom: 1px dotted var(--leader); transform: translateY(-4px); }
.lx-today__fig { font: 500 12.5px var(--mono); white-space: nowrap; }
.lx-today__fig.is-accent { color: var(--accent); }
.lx-today__fig.is-bad { color: var(--bad); }
.lx-today__fig.is-ok { color: var(--ok); }
.lx-today__fig.is-quiet { color: var(--muted); }
.lx-today__entry { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; width: calc(100% + 12px); margin: 0 -6px; padding: 5px 6px; background: none; border: 0; border-radius: 7px; color: var(--text); font-size: 13px; text-align: left; cursor: pointer; }
.lx-today__entry:hover { background: rgba(255, 240, 210, .05); }
.lx-today__entry.is-inv { grid-template-columns: auto minmax(0, 1fr) auto; }
.lx-today__entry.is-plain { grid-template-columns: minmax(0, 1fr); }
.lx-today__num { font: 12px var(--mono); color: var(--muted); }
.lx-today__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-today__late { font: 12px var(--mono); color: var(--bad); }
.lx-today__none { margin: 2px 0 2px; color: var(--muted); font-size: 13px; }
.lx-today__more { margin-top: 4px; padding: 3px 0; background: none; border: 0; color: var(--accent); font-size: 12.5px; cursor: pointer; }
.lx-today__more:hover { text-decoration: underline; }
.lx-today__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 2px; }
.lx-today__quick > span { width: 100%; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.lx-today__quick button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; background: transparent; border: 1px solid var(--line-2); border-radius: 8px; color: var(--text); font-size: 12.5px; cursor: pointer; }
.lx-today__quick button:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-2)); }
.lx-today__quick svg { width: 14px; height: 14px; color: var(--accent); }
.lx-today__loading { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--hair); padding: 16px 0; }
.lx-today__loading span { height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-3), #2c2924, var(--surface-3)); background-size: 200% 100%; animation: lx-shimmer 1.2s linear infinite; }
.lx-today__loading span:nth-child(2) { width: 70%; } .lx-today__loading span:nth-child(3) { width: 45%; }
@media (min-width: 761px) { .lx-desktop:has(> .lx-today) .lx-toasts { right: 346px; } }
.lx-today-pill { position: absolute; top: 16px; right: 18px; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; background: color-mix(in srgb, #15130f 80%, transparent); border: 1px solid var(--hair); border-radius: 16px; color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.lx-today-pill:hover { color: var(--text); border-color: var(--line-2); }
.lx-today-pill svg { width: 14px; height: 14px; }

/* ---------- Traka ---------- */
.lx-taskbar { background: color-mix(in srgb, #100e0b 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top-color: #24211d; gap: 6px; }
.lx-start-btn { position: relative; }
.lx-start-btn:hover { filter: brightness(1.07); }
.lx-start-btn__home { display: none; }
.lx-start-btn__home svg { width: 21px; height: 21px; }
.lx-tb-search { width: 210px; cursor: pointer; color: var(--muted); font-size: 13px; text-align: left; transition: border-color .12s; margin-right: 6px; }
.lx-tb-search:hover { border-color: var(--line-2); color: var(--text-2); }
.lx-tb-search__text { flex: 1; }
.lx-tb-app { width: 44px; padding: 0; justify-content: center; }
.lx-tb-app__icon { display: flex; }
.lx-tb-app__icon svg { width: 20px; height: 20px; }
.lx-tb-app::after { display: none; }
.lx-tb-app.is-running::after { display: block; width: 5px; height: 3px; margin-left: -2.5px; bottom: 4px; background: var(--muted); }
.lx-tb-app.is-focused::after { width: 16px; margin-left: -8px; background: var(--accent); }
.lx-tb-app:not(.is-running) { color: var(--text-2); }
.lx-tb-app .lx-tb-badge { top: 4px; right: 3px; }
.lx-tb-sep { width: 1px; height: 22px; align-self: center; background: var(--line-2); margin: 0 4px; flex-shrink: 0; }
.lx-clock { background: none; border: 0; border-radius: 8px; color: var(--text); cursor: pointer; height: 42px; justify-content: center; }
.lx-clock:hover { background: #1f1c18; }
button.lx-avatar { background: none; color: var(--text); cursor: pointer; margin: 0 4px; }
button.lx-avatar:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.lx-show-desk { width: 7px; height: 40px; margin-left: 4px; margin-right: -6px; background: transparent; border: 0; border-left: 1px solid var(--line-2); cursor: pointer; }
.lx-show-desk:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---------- Start meni ---------- */
.lx-start { width: 640px; padding: 18px; gap: 16px; background: #171511; border-color: #322d25; }
.lx-start__search { gap: 10px; }
.lx-start__search input::-webkit-search-cancel-button { display: none; }
.lx-start__body { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; min-height: 0; }
.lx-start__apps { display: flex; flex-direction: column; gap: 12px; }
.lx-start__group h3, .lx-start__recent h3 { margin: 0 0 4px 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lx-start__grid { margin-top: 0; gap: 2px; }
.lx-start__app { padding: 9px 4px 10px; gap: 6px; }
.lx-start__tile { position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #1f1c18; border: 1px solid #2f2b25; color: var(--accent); }
.lx-start__app svg { width: 19px; height: 19px; }
.lx-start__app.is-running .lx-start__tile::after { content: ""; position: absolute; bottom: -5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.lx-start__recent { border-left: 1px solid var(--line); padding-left: 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lx-start__rec { display: flex; align-items: center; gap: 10px; padding: 6px; background: none; border: 0; border-radius: 8px; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.lx-start__rec:hover { background: #23211e; }
.lx-start__rec .lx-finder__icon { width: 28px; height: 28px; }
.lx-start__hint { margin: 2px 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.lx-start__results { max-height: min(460px, calc(100vh - 260px)); overflow: auto; margin: -6px -6px 0; }
.lx-start__me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; margin-left: -6px; background: none; border: 0; border-radius: 9px; color: var(--text); text-align: left; cursor: pointer; }
.lx-start__me:hover { background: #23211e; }
.lx-start__me .lx-avatar { border-width: 1.5px; }
.lx-start__ver { font: 11px var(--mono); color: var(--muted); }

/* ---------- Pretraga (zajednička za Start i Ctrl+K) ---------- */
.lx-finder { display: flex; flex-direction: column; }
.lx-finder__group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lx-finder__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: 11px; padding: 6px 10px; background: none; border: 0; border-radius: 9px; color: var(--text); text-align: left; cursor: pointer; }
.lx-finder__item.is-active { background: color-mix(in srgb, var(--accent) 13%, #1b1916); }
.lx-finder__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 8px; background: #22201c; color: var(--accent); }
.lx-finder__icon svg { width: 16px; height: 16px; }
.lx-finder__text { display: flex; flex-direction: column; min-width: 0; }
.lx-finder__text b { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-finder__text span { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-finder__text mark { background: none; color: var(--accent); font-weight: 600; }
.lx-finder__enter { display: flex; color: var(--muted); opacity: 0; }
.lx-finder__enter svg { width: 15px; height: 15px; }
.lx-finder__item.is-active .lx-finder__enter { opacity: 1; }
.lx-finder__note { display: flex; align-items: center; gap: 10px; padding: 14px 10px; color: var(--muted); font-size: 13px; }

.lx-palette { position: fixed; inset: 0; z-index: 100003; display: flex; justify-content: center; align-items: flex-start; padding: 13vh 12px 12px; background: rgba(8, 7, 5, .55); animation: lx-fade .12s ease-out; }
@keyframes lx-fade { from { opacity: 0; } to { opacity: 1; } }
.lx-palette__card { width: 640px; max-width: 100%; max-height: min(560px, 72vh); display: flex; flex-direction: column; background: #181612; border: 1px solid #36312a; border-radius: 16px; box-shadow: 0 40px 100px rgba(0,0,0,.65); overflow: hidden; animation: lx-rise .14s ease-out; }
.lx-palette__search { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--muted); flex-shrink: 0; }
.lx-palette__search svg { width: 18px; height: 18px; }
.lx-palette__input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-size: 16px; color: var(--text); }
.lx-palette__input::-webkit-search-cancel-button { display: none; }
.lx-palette .lx-finder { flex: 1; overflow: auto; padding: 4px 8px 8px; }
.lx-palette__foot { display: flex; align-items: center; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; flex-shrink: 0; }
.lx-palette__foot kbd { margin-right: 2px; }

/* ---------- Obaveštenja ---------- */
.lx-panel__title { margin: 2px 4px 4px; font-size: 13px; font-weight: 600; }
.lx-panel__item.is-warn { box-shadow: inset 2px 0 0 var(--warn); }

/* ---------- Prazna stanja i kostur učitavanja ---------- */
.lx-emptystate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--text-2); flex: 1; }
.lx-emptystate__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px dashed #3a352d; border-radius: 13px; color: var(--muted); margin-bottom: 4px; }
.lx-emptystate__icon svg { width: 22px; height: 22px; }
.lx-emptystate b { font-size: 14.5px; color: var(--text); font-weight: 600; }
.lx-emptystate p { margin: 0; max-width: 340px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.lx-emptystate .lx-btn { margin-top: 8px; }
.lx-emptystate.is-compact { padding: 24px 12px; gap: 6px; }
.lx-emptystate.is-compact .lx-emptystate__icon { width: 38px; height: 38px; }
.lx-skeleton { display: flex; flex-direction: column; padding: 6px 14px; }
.lx-skeleton__row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.lx-skeleton__dot { width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; }
.lx-skeleton__lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.lx-skeleton__lines span, .lx-skeleton__dot { display: block; height: 9px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-3), #2b2823, var(--surface-3)); background-size: 200% 100%; animation: lx-shimmer 1.3s linear infinite; }
.lx-skeleton__dot { height: 28px; }
@keyframes lx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Podešavanja: radna površina ---------- */
.lx-applist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lx-applist__row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 110px; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.lx-applist__row:first-child { border-top: 0; }
.lx-applist__row.is-head { background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 600; }
.lx-applist__row > span:not(.lx-applist__name) { display: flex; align-items: center; gap: 8px; }
.lx-applist__name { display: flex; align-items: center; gap: 10px; }
.lx-applist__name svg { width: 17px; height: 17px; color: var(--accent); }
.lx-applist input[type=checkbox] { width: 16px; height: 16px; }
.lx-keys { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0; align-items: center; }
.lx-keys dt { display: flex; align-items: center; gap: 3px; color: var(--muted); }
.lx-keys dd { margin: 0; color: var(--text-2); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .lx-today, .lx-palette, .lx-palette__card, .lx-start, .lx-win.is-opening { animation: none; }
  .lx-skeleton__lines span, .lx-skeleton__dot, .lx-today__loading span { animation: none; }
}

/* dodir: veće mete */
@media (pointer: coarse) {
  .lx-win__ctrl { width: 44px; height: 40px; }
  .lx-btn { min-height: 40px; }
  .lx-btn--icon { width: 40px; }
  .lx-finder__item { padding: 9px 10px; }
}

/* ---------- Telefon: početni ekran + donja traka ---------- */
@media (max-width: 760px) {
  .lx-desktop { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; user-select: none; }
  .lx-win { position: fixed; inset: 0 0 var(--taskbar) 0 !important; width: auto !important; height: auto !important; }
  .lx-today { position: relative; order: -1; top: auto; right: auto; width: auto; max-height: none; overflow: visible; margin: 16px 16px 4px; padding: 18px 18px 12px; flex-shrink: 0; }
  .lx-today__date { font-size: 26px; }
  .lx-today-pill { position: relative; order: -1; top: auto; right: auto; align-self: flex-end; margin: 14px 16px 0; flex-shrink: 0; }
  .lx-icons { position: static; display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; gap: 6px 4px; padding: 12px 10px 24px; flex-shrink: 0; }
  .lx-icon { width: auto; padding: 8px 2px; font-size: 11.5px; }
  .lx-icon__tile { width: 56px; height: 56px; border-radius: 16px; }
  .lx-icon__tile svg { width: 25px; height: 25px; }
  .lx-taskbar { gap: 4px; padding: 0 8px; }
  .lx-start-btn__mark { display: none; }
  .lx-start-btn__home { display: flex; }
  .lx-tb-search { display: flex; width: 44px; height: 44px; padding: 0; justify-content: center; margin: 0; flex-shrink: 0; }
  .lx-tb-search__text, .lx-tb-search kbd { display: none; }
  .lx-tb-search svg { width: 19px; height: 19px; }
  .lx-clock { display: none; }
  .lx-show-desk { display: none; }
  .lx-tray__btn, .lx-tb-app { width: 44px; height: 44px; }
  button.lx-avatar { width: 40px; height: 40px; }
  .lx-start { left: 0; right: 0; bottom: var(--taskbar); width: 100%; max-width: none; max-height: calc(100dvh - var(--taskbar) - 24px); border-radius: 18px 18px 0 0; border-bottom: 0; padding: 16px; }
  .lx-start__search kbd { display: none; }
  .lx-start__body { grid-template-columns: 1fr; }
  .lx-start__recent { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .lx-start__results { max-height: none; }
  .lx-palette { padding: 10px 8px calc(var(--taskbar) + 8px); }
  .lx-palette__card { max-height: 100%; }
  .lx-palette__foot { display: none; }
  .lx-palette__search kbd { display: none; }
  .lx-applist__row { grid-template-columns: minmax(0, 1fr) 70px 70px; }
  .lx-applist__row.is-head span:nth-child(2)::after { content: ""; }
  .lx-applist kbd { display: none; }
  .lx-panel { left: 8px; right: 8px; width: auto; }
}
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; cursor: pointer; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39a8a' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px no-repeat; }
input[type=search]::-webkit-search-cancel-button:hover { opacity: 1; }

/* =================== 1.5: Vreme, Zadaci, Ponude =================== */
.lx-dotc { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.lx-mono, .mono { font-family: var(--mono); }
tr.is-muted td { opacity: .55; }

/* tajmer na traci */
.lx-timer { width: auto; min-width: 42px; gap: 7px; padding: 0 10px; }
.lx-timer__icon { display: flex; }
.lx-timer__time { font: 600 13px var(--mono); }
.lx-timer__label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-2); }
.lx-timer__time:empty, .lx-timer__label:empty { display: none; }
.lx-timer.is-running { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lx-timer.is-running .lx-timer__icon { color: var(--accent); animation: lx-breathe 2.4s ease-in-out infinite; }
@keyframes lx-breathe { 50% { opacity: .45; } }
.lx-timerpop { position: fixed; right: 150px; bottom: calc(var(--taskbar) + 10px); width: 320px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 10px; padding: 16px;
  background: #1a1814; border: 1px solid #34302a; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); z-index: 100002; animation: lx-rise .14s ease-out; }
.lx-timerpop__title { font-size: 13px; }
.lx-timerpop__now { display: flex; gap: 10px; align-items: flex-start; }
.lx-timerpop__now .lx-dotc { margin-top: 5px; }
.lx-timerpop__now div { display: flex; flex-direction: column; min-width: 0; }
.lx-timerpop__now span { color: var(--muted); font-size: 12.5px; }
.lx-timerpop__clock { font: 600 30px/1 var(--mono); letter-spacing: -.02em; padding: 4px 0; }
.lx-timerpop__actions { display: flex; gap: 8px; }

/* Vreme */
.lx-time .lx-pad { max-width: 980px; }
.lx-timerbar { display: flex; align-items: center; gap: 10px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.lx-timerbar > .lx-input:first-child { flex: 1; min-width: 0; }
.lx-timerbar > select { width: 220px; }
.lx-timerbar.is-running { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); padding-left: 16px; }
.lx-timerbar__what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx-timerbar__what span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-timerbar__clock { font: 600 22px var(--mono); letter-spacing: -.02em; }
.lx-timerbar__go { min-width: 118px; }
.lx-timehead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-timehead__range { font-weight: 600; margin-left: 4px; }
.lx-timehead .lx-mono { font-size: 15px; }
.lx-timeweek { display: flex; flex-direction: column; gap: 16px; }
.lx-timeday header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lx-timeday header .lx-mono { color: var(--text-2); }
.lx-timerow { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto 52px 36px; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #1f1d19; cursor: pointer; border-radius: 6px; }
.lx-timerow:hover { background: rgba(255, 240, 210, .03); }
.lx-timerow__what { display: flex; flex-direction: column; min-width: 0; }
.lx-timerow__what b { font-weight: 500; font-size: 13.5px; }
.lx-timerow__what small { color: var(--muted); font-weight: 400; }
.lx-timerow__what span { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-timerow__span { color: var(--muted); font-size: 12px; }
.lx-timerow__dur { text-align: right; font-size: 13px; }
.lx-timerow__flag { display: flex; color: var(--muted); font-size: 11.5px; }
.lx-timerow__flag svg { width: 14px; height: 14px; }
.lx-timerow.is-running .lx-timerow__dur { color: var(--accent); }
.lx-timerow:not(:hover) .lx-btn--icon { opacity: .35; }
.lx-budget { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lx-budget__bar { width: 110px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.lx-budget__bar i { display: block; height: 100%; background: var(--ok); }
.lx-budget__bar.is-warn i { background: var(--warn); }
.lx-budget__bar.is-over i { background: var(--bad); }
.lx-report .lx-hbar { display: block; padding: 0; height: 8px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.lx-report .lx-hbar i { display: block; height: 100%; border-radius: 3px; opacity: .85; }

/* Zadaci */
.lx-side__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.lx-side__add { color: var(--muted); margin-top: 4px; }
.lx-board__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.lx-board__title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lx-board__title b { font-size: 15px; }
.lx-board { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 12px; padding: 14px 16px; overflow: auto; }
.lx-board > .lx-emptystate { grid-column: 1 / -1; }
.lx-col { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 10px; background: #13110e; border: 1px solid #211e1a; border-radius: 12px; transition: border-color .12s, background-color .12s; }
.lx-col.is-over { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 4%, #13110e); }
.lx-col header { display: flex; align-items: center; gap: 8px; padding: 2px 4px 4px; font-size: 13px; }
.lx-col header::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.lx-col--doing header::before { background: var(--accent); }
.lx-col--done header::before { background: var(--ok); }
.lx-col__list { display: flex; flex-direction: column; gap: 8px; min-height: 40px; overflow: auto; }
.lx-col__add { background: transparent; border-style: dashed; }
.lx-col__add:focus { background: var(--surface); border-style: solid; }
.lx-col__empty { margin: 0; padding: 10px 6px; color: var(--muted); font-size: 12.5px; text-align: center; }
.lx-card { display: flex; flex-direction: column; gap: 8px; padding: 11px 12px; background: #1c1915; border: 1px solid #2c2823; border-radius: 10px; cursor: grab; user-select: none; }
.lx-card:hover { border-color: #3c372f; }
.lx-card:focus-visible { outline-offset: 1px; }
.lx-card.is-dragging { opacity: .4; }
.lx-card.is-timing { border-color: color-mix(in srgb, var(--accent) 55%, #2c2823); box-shadow: inset 3px 0 0 var(--accent); }
.lx-col--done .lx-card__title { color: var(--text-2); font-weight: 500; }
.lx-card__title { font-size: 13.5px; font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.lx-card__project { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.lx-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); min-height: 22px; }
.lx-card__due, .lx-card__time { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; }
.lx-card__due.is-late { color: var(--bad); }
.lx-card__due.is-soon { color: var(--warn); }
.lx-card__time.is-over { color: var(--bad); }
.lx-card__play { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); background: transparent; border-radius: 50%; color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .12s; }
.lx-card__play svg { width: 12px; height: 12px; }
.lx-card:hover .lx-card__play, .lx-card:focus-within .lx-card__play, .lx-card__play.is-on { opacity: 1; }
.lx-card__play.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lx-card__who { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-2); font-size: 10.5px; font-weight: 700; }
.lx-card__who.is-me { background: color-mix(in srgb, var(--accent) 22%, var(--surface-3)); color: var(--text); }
.lx-card__drop { height: 3px; border-radius: 2px; background: var(--accent); margin: -2px 0; }
@media (pointer: coarse) { .lx-card__play { opacity: 1; } }

/* panel „Danas“: tajmer i zadaci */
.lx-today__entry.is-running { color: var(--accent); }
.lx-today__entry.is-running .lx-today__num { color: var(--accent); }
.lx-today__pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; animation: lx-breathe 2.4s ease-in-out infinite; }
.lx-today__num.is-bad { color: var(--bad); }

@media (max-width: 760px) {
  .lx-timer__label { display: none; }
  .lx-timerpop { left: 8px; right: 8px; width: auto; }
  .lx-timerbar { flex-wrap: wrap; }
  .lx-timerbar > .lx-input:first-child, .lx-timerbar > select { width: 100%; flex: 1 1 100%; }
  .lx-timerbar__go { flex: 1; }
  .lx-timerow { grid-template-columns: 9px minmax(0, 1fr) 46px 36px; }
  .lx-timerow__span, .lx-timerow__flag { display: none; }
  .lx-board { grid-template-columns: repeat(3, 84%); scroll-snap-type: x mandatory; padding: 12px; }
  .lx-win[aria-label="Zadaci"] .lx-split > .lx-side { display: none; }
  .lx-win[aria-label="Vreme"] .lx-split { flex-direction: column; }
  .lx-win[aria-label="Vreme"] .lx-split > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; flex-shrink: 0; }
  .lx-win[aria-label="Vreme"] .lx-split > .lx-side .lx-side__item { width: auto; flex-shrink: 0; white-space: nowrap; }
  .lx-win[aria-label="Vreme"] .lx-main { flex: 1; min-height: 0; }
  .lx-time .lx-pad { padding: 12px; }
  .lx-board__head { flex-wrap: wrap; padding: 10px 12px; }
  .lx-board__title, .lx-board__head > .lx-hint, .lx-board__head > .lx-spacer { display: none; }
  .lx-board__pick { flex: 1; min-width: 0; }
  .lx-board__addlabel { display: none; }
  .lx-board__head .lx-btn--primary { width: 44px; padding: 0; }
  .lx-col { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .lx-timer.is-running .lx-timer__icon, .lx-today__pulse { animation: none; } }

/* =================== 1.5.1: ikonice se slobodno pomeraju =================== */
.lx-icons.is-free { position: absolute; inset: 0; display: block; pointer-events: none; }
.lx-icons.is-free .lx-icon { position: absolute; pointer-events: auto; transition: left .16s ease, top .16s ease; touch-action: none; }
.lx-icons.is-free .lx-icon.is-dragging { transition: none; z-index: 5; cursor: grabbing; }
.lx-icons.is-free .lx-icon.is-dragging .lx-icon__tile { border-color: var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.lx-icon-ghost { position: absolute; width: 88px; height: 92px; border: 1.5px dashed color-mix(in srgb, var(--accent) 70%, transparent); border-radius: 12px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lx-icons.is-free .lx-icon { transition: none; } }

/* =================== 1.5.2: Explorer =================== */
.lx-explorer { position: relative; }
.lx-tree { width: 220px; }
.lx-tree__row { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
.lx-tree__chev { display: flex; width: 16px; height: 16px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 4px; color: var(--muted); }
.lx-tree__chev:hover { background: var(--surface-3); color: var(--text); }
.lx-tree__chev svg { width: 12px !important; height: 12px !important; }
.lx-tree__chev.is-leaf { visibility: hidden; }
.lx-tree__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-tree__row svg { color: var(--accent); }
.lx-files { position: relative; user-select: none; }
.lx-file { position: relative; }
.lx-file__icon { width: 72px; height: 60px; display: flex; align-items: center; justify-content: center; }
.lx-file__icon img { max-width: 72px; max-height: 60px; border-radius: 6px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,240,210,.08); background: #181613; }
.lx-file--image .lx-file__icon svg, .lx-file--video svg { color: #8fb3d1; }
.lx-file--pdf svg { color: #e09a8f; }
.lx-file--audio svg { color: #b49ad6; }
.lx-file--archive svg { color: var(--warn); }
.lx-file.is-focus:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lx-file.is-selected { background: color-mix(in srgb, var(--accent) 12%, #1d1a14); border-color: color-mix(in srgb, var(--accent) 40%, #3a3326); }
.lx-file.is-drop, .lx-crumbs button.is-drop, .lx-tree__row.is-drop { outline: 2px dashed var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lx-files.is-dragging-items .lx-file.is-selected { opacity: .55; }
.lx-band { position: absolute; border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 3px; pointer-events: none; z-index: 2; }
.lx-selbar { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 16px; background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); font-size: 13px; }
.lx-upbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 13px; }
.lx-upbar__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.lx-upbar__bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
/* pregled fajla */
.lx-viewer { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #0d0c0a; outline: none; animation: lx-fade .12s ease-out; }
.lx-viewer__bar { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); }
.lx-viewer__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.lx-viewer__stage { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.lx-viewer__body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.lx-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lx-viewer__frame { width: 100%; height: 100%; border: 0; border-radius: 6px; background: #fff; }
.lx-viewer__media { max-width: 100%; max-height: 100%; border-radius: 6px; background: #000; }
.lx-viewer__audio { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--muted); }
.lx-viewer__audio > span svg { width: 64px; height: 64px; }
.lx-viewer__text { align-self: stretch; width: 100%; margin: 0; padding: 16px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font: 12.5px/1.55 var(--mono); color: var(--text-2); white-space: pre-wrap; word-break: break-word; user-select: text; }
.lx-viewer__nav { width: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; }
.lx-viewer__nav:hover { color: var(--text); background: rgba(255,240,210,.04); }
.lx-viewer__nav svg { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .lx-win[aria-label="Explorer"] .lx-split > .lx-tree { display: none; }
  .lx-viewer__nav { width: 36px; }
  .lx-selbar .lx-btn { padding: 0 8px; }
}

/* =================== 1.6: Muzika =================== */
.lx-music { position: relative; display: flex; flex-direction: column; min-height: 0; }
.lx-music.is-drop::after { content: "Pusti fajlove ili folder da ih ubaciš"; position: absolute; inset: 8px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, rgba(12, 11, 9, .85)); color: var(--text); font-weight: 600; z-index: 20; pointer-events: none; }
.lx-mcontent { flex: 1; min-height: 0; overflow: auto; padding: 0 20px 24px; outline: none; }
.lx-mside { width: 210px; }
.lx-mside__label { padding: 14px 10px 6px; }
.lx-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.lx-link:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.lx-input--sm { height: 34px; width: auto; }
.lx-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* omoti */
.lx-art { position: relative; width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: #1f1c18; display: flex; align-items: center; justify-content: center; }
.lx-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-art__ph { display: flex; color: var(--muted); opacity: .7; }
.lx-art__ph svg { width: 45%; height: 45%; min-width: 16px; min-height: 16px; }
.lx-art.is-big { width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #24201b, #161410); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.lx-art.is-big .lx-art__ph svg { width: 34%; height: 34%; }

/* zaglavlje albuma / plejliste / izvođača */
.lx-mhead { display: flex; align-items: flex-end; gap: 22px; padding: 22px 0 18px; }
.lx-mhead > .lx-art.is-big { width: 168px; flex-shrink: 0; }
.lx-mhead__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lx-mhead__kicker { font-size: 12px; font-weight: 600; color: var(--accent); }
.lx-mhead h2 { margin: 0; font-size: 28px; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
.lx-mhead p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.lx-mhead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.lx-msec { margin: 22px 0 10px; font-size: 14px; }

/* lista pesama */
.lx-tracks { display: flex; flex-direction: column; }
.lx-trow { display: grid; grid-template-columns: 40px minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 32px 52px 36px; align-items: center; gap: 12px;
  padding: 5px 8px; border-radius: 8px; font-size: 13px; content-visibility: auto; contain-intrinsic-size: auto 48px; }
.lx-tracks.is-compact .lx-trow { grid-template-columns: 40px minmax(0, 3fr) minmax(0, 1.4fr) 32px 52px 36px; }
.lx-trow:not(.is-head):hover, .lx-trow:focus-visible { background: rgba(255, 240, 210, .045); outline: none; }
.lx-trow:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent); }
.lx-trow.is-head { color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 4px; padding-top: 0; position: sticky; top: 0; background: var(--surface); z-index: 1; content-visibility: visible; }
.lx-trow.is-head svg { width: 14px; height: 14px; }
.lx-trow__n { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; color: var(--muted); font: 12.5px var(--mono); }
.lx-trow__play { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: none; border: 0; color: var(--text); cursor: pointer; }
.lx-trow__play svg { width: 16px; height: 16px; }
.lx-trow:hover .lx-trow__num, .lx-trow:focus-within .lx-trow__num, .lx-trow:hover .lx-eq, .lx-trow:focus-within .lx-eq { visibility: hidden; }
.lx-trow:hover .lx-trow__play, .lx-trow:focus-within .lx-trow__play { display: flex; }
.lx-trow__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lx-trow__text { display: flex; flex-direction: column; min-width: 0; }
.lx-trow__text b { font-weight: 500; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-trow__text span { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-trow__artist, .lx-trow__album { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-tracks:not(.is-compact) .lx-trow__text span { display: none; }
.lx-trow__dur { color: var(--muted); text-align: right; display: flex; justify-content: flex-end; }
.lx-trow__more { opacity: 0; }
.lx-trow:hover .lx-trow__more, .lx-trow:focus-within .lx-trow__more { opacity: 1; }
.lx-trow.is-current .lx-trow__text b, .lx-trow.is-current .lx-trow__title b { color: var(--accent); }
.lx-trow.is-dragging { opacity: .4; }
.lx-trow.drop-above { box-shadow: inset 0 2px 0 var(--accent); }
.lx-trow.drop-below { box-shadow: inset 0 -2px 0 var(--accent); }
.lx-trow[draggable="true"] { cursor: grab; }
/* „ekvilajzer“ uz pesmu koja svira */
.lx-eq { display: none; position: absolute; inset: 0; align-items: flex-end; justify-content: center; gap: 2px; padding: 9px 0; }
.lx-eq i { width: 3px; height: 30%; background: var(--accent); border-radius: 1px; }
.lx-trow.is-current .lx-trow__num { visibility: hidden; }
.lx-trow.is-current .lx-eq { display: flex; }
.is-playing .lx-trow.is-current .lx-eq i { animation: lx-eq .9s ease-in-out infinite; }
.lx-eq i:nth-child(2) { animation-delay: -.3s !important; height: 70%; }
.lx-eq i:nth-child(3) { animation-delay: -.6s !important; height: 50%; }
@keyframes lx-eq { 0%, 100% { height: 25%; } 50% { height: 95%; } }
.lx-heart { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--muted); cursor: pointer; }
.lx-heart svg { width: 16px; height: 16px; }
.lx-heart:not(.is-on) { opacity: 0; }
.lx-trow:hover .lx-heart, .lx-trow:focus-within .lx-heart, .lx-now .lx-heart { opacity: 1; }
.lx-heart.is-on { color: #e07a72; opacity: 1; }
.lx-heart:hover { color: var(--text); }
.lx-now .lx-heart:not(.is-on) { opacity: 1; }

/* mreža albuma i izvođača */
.lx-agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 16px; }
.lx-acard { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; margin: -8px; background: none; border: 0; border-radius: 12px; color: var(--text); text-align: left; cursor: pointer; }
.lx-acard:hover, .lx-acard:focus-visible { background: rgba(255, 240, 210, .04); }
.lx-acard b { font-weight: 600; font-size: 13.5px; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-acard > span:last-child { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-acard__cover { position: relative; display: block; }
.lx-acard__cover.is-round .lx-art, .lx-acard__cover.is-round .lx-initials { border-radius: 50%; }
.lx-initials { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #2b2620, #191612); color: var(--accent); font-size: 34px; font-weight: 600; letter-spacing: .02em; }
.lx-acard__play { position: absolute; right: 8px; bottom: 8px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink, #17130b); box-shadow: 0 8px 20px rgba(0,0,0,.45); opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s; }
.lx-acard__play svg { width: 18px; height: 18px; margin-left: 2px; }
.lx-acard:hover .lx-acard__play, .lx-acard:focus-visible .lx-acard__play { opacity: 1; transform: none; }

/* Sada svira */
.lx-now { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding: 20px 0; min-height: 100%; }
.lx-now__stage { gap: 12px !important; }
.lx-now__stage { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.lx-now__cover { width: min(220px, 100%) !important; }
.lx-now__meta { position: relative; width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lx-now__meta h2 { margin: 2px 0 0; font-size: 24px; letter-spacing: -.02em; overflow-wrap: anywhere; }
.lx-now__meta p { margin: 0; color: var(--text-2); }
.lx-now__ctl .lx-heart { width: 40px; height: 40px; }
.lx-now__ctl .lx-heart svg { width: 19px; height: 19px; }
.lx-now__seek { width: min(460px, 100%); display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.lx-now__seek span:last-child { text-align: right; }
.lx-now__ctl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; max-width: 100%; }
.lx-ctl { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--text-2); cursor: pointer; }
.lx-ctl svg { width: 20px; height: 20px; }
.lx-ctl:hover { color: var(--text); background: rgba(255, 240, 210, .05); }
.lx-ctl.is-on { color: var(--accent); }
.lx-ctl.is-on::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateY(15px); }
.lx-ctl { position: relative; }
.lx-ctl.is-main { width: 58px; height: 58px; background: var(--accent); color: var(--accent-ink, #17130b); }
.lx-ctl.is-main svg { width: 24px; height: 24px; }
.lx-ctl.is-main:hover { filter: brightness(1.08); background: var(--accent); color: var(--accent-ink, #17130b); }
.lx-now__vol { display: flex; align-items: center; gap: 6px; width: 240px; }
.lx-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 18px; background: transparent; cursor: pointer; --p: 0%; }
.lx-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--accent) var(--p), var(--surface-3) var(--p)); }
.lx-seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-3); }
.lx-seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
.lx-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--text); border: 0; }
.lx-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--text); border: 0; }
.lx-vol { --p: 100%; }
.lx-vol::-webkit-slider-runnable-track { background: var(--surface-3); }
.lx-now__queue { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); padding-left: 18px; }
.lx-now__qhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px; }
.lx-queue { display: flex; flex-direction: column; gap: 2px; overflow: auto; }
.lx-qrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 26px; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.lx-qrow:hover, .lx-qrow:focus-visible { background: rgba(255, 240, 210, .045); outline: none; }
.lx-qrow__x { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; opacity: 0; }
.lx-qrow__x svg { width: 14px; height: 14px; }
.lx-qrow:hover .lx-qrow__x, .lx-qrow:focus-within .lx-qrow__x { opacity: 1; }
.lx-qrow__x:hover { color: var(--text); background: var(--surface-3); }

/* izbor plejliste */
.lx-plpick { display: flex; flex-direction: column; gap: 4px; min-width: min(380px, 80vw); }
.lx-plpick__item { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; background: none; border: 0; border-radius: 8px; color: var(--text); text-align: left; cursor: pointer; }
.lx-plpick__item:hover, .lx-plpick__item:focus-visible { background: rgba(255, 240, 210, .05); }
.lx-plpick__item svg { color: var(--accent); }
.lx-plpick__new { display: flex; gap: 8px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }

/* mali plejer na traci */
.lx-mini { position: relative; display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 4px 0 4px; margin-right: 4px; border-radius: 10px; background: rgba(255, 240, 210, .035); overflow: hidden; }
.lx-mini[hidden] { display: none; }
.lx-mini__info { display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 210px; height: 100%; padding: 0 6px 0 2px; background: none; border: 0; color: var(--text); cursor: pointer; text-align: left; }
.lx-mini__art { width: 30px; height: 30px; flex-shrink: 0; border-radius: 5px; overflow: hidden; background: #24201b; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.lx-mini__art img { width: 100%; height: 100%; object-fit: cover; }
.lx-mini__art svg { width: 16px; height: 16px; }
.lx-mini__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lx-mini__title { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-mini__artist { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-mini__btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 50%; color: var(--text-2); cursor: pointer; }
.lx-mini__btn svg { width: 15px; height: 15px; }
.lx-mini__btn:hover { color: var(--text); background: rgba(255, 240, 210, .06); }
.lx-mini__btn.is-main { color: var(--text); }
.lx-mini__btn.is-main svg { width: 17px; height: 17px; }
.lx-mini__bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); opacity: .8; transition: width .25s linear; }
.lx-mini.is-playing .lx-mini__art { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }

@media (prefers-reduced-motion: reduce) { .is-playing .lx-trow.is-current .lx-eq i { animation: none; } .lx-acard__play { transition: none; } }

@media (max-width: 980px) {
  .lx-now { grid-template-columns: 1fr; }
  .lx-now__queue { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; }
  .lx-trow { grid-template-columns: 40px minmax(0, 2fr) minmax(0, 1.2fr) 32px 52px 36px; }
  .lx-trow__album { display: none; }
}
@media (max-width: 760px) {
  .lx-win[aria-label^="Muzika"] .lx-split { flex-direction: column; }
  .lx-win[aria-label^="Muzika"] .lx-split > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; flex-shrink: 0; }
  .lx-win[aria-label^="Muzika"] .lx-side__item { width: auto; flex-shrink: 0; white-space: nowrap; }
  .lx-win[aria-label^="Muzika"] .lx-mside__label { display: none; }
  .lx-mcontent { padding: 0 12px 20px; }
  .lx-music .lx-toolbar input[type=search] { max-width: none !important; }
  .lx-mlabel { display: none; }
  .lx-mhead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lx-mhead > .lx-art.is-big { width: 132px; }
  .lx-mhead h2 { font-size: 22px; }
  .lx-trow, .lx-tracks.is-compact .lx-trow { grid-template-columns: 32px minmax(0, 1fr) 30px 44px 32px; gap: 8px; }
  .lx-trow__artist, .lx-trow__album { display: none; }
  .lx-tracks:not(.is-compact) .lx-trow__text span { display: block; }
  .lx-heart:not(.is-on) { opacity: .6; }
  .lx-trow__more { opacity: 1; }
  .lx-agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lx-acard__play { opacity: 1; transform: none; width: 38px; height: 38px; }
  .lx-mini__info { width: 44px; max-width: 44px; justify-content: center; padding: 0; }
  .lx-mini { padding: 0 2px; gap: 0; }
  .lx-mini__text, .lx-mini__btn.is-side { display: none; }
  .lx-mini__btn { width: 40px; height: 40px; }
  .lx-now__vol { display: none; }
}

/* 1.6.1: nacrt poruke u bočnoj traci Lex Chata */
.lc-ch__draft { display: inline-flex; margin-left: auto; color: var(--muted); }
.lc-ch__draft + .lc-count { margin-left: 6px; }

/* 1.7: Sastanci (Jitsi) */
.lx-meet { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; }
.lx-meet__list { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 18px; }
.lx-meet__info { display: flex; gap: 12px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--accent) 35%, #2f2d2a); background: color-mix(in srgb, var(--accent) 7%, #191714); border-radius: 12px; padding: 12px 14px; }
.lx-meet__info > span { color: var(--accent); display: inline-flex; margin-top: 1px; }
.lx-meet__info b { display: block; margin-bottom: 4px; }
.lx-meet__info p { margin: 0 0 4px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.lx-linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }
.lx-meet__sec h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lx-meet__sec .lx-hint { margin: 0; }
.lx-meet__rows { display: flex; flex-direction: column; gap: 6px; }
.lx-meet__row { display: flex; align-items: center; gap: 12px; border: 1px solid #2a2825; border-radius: 10px; padding: 10px 12px; background: #181613; }
.lx-meet__row:hover { border-color: #3a3730; }
.lx-meet__row.is-soon { border-color: color-mix(in srgb, var(--accent) 60%, #2a2825); box-shadow: inset 3px 0 0 var(--accent); }
.lx-meet__ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, #201e1b); color: var(--accent); }
.lx-meet__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx-meet__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-meet__text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-meet__text .lx-meet__note { color: var(--text-2); }
.lx-meet__acts { display: flex; gap: 6px; align-items: center; flex: none; }
.lx-meet__stage { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0f0e0b; }
.lx-meet__stage[hidden] { display: none; }
.lx-meet__bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #2a2825; background: #171512; }
.lx-meet__bar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lx-meet__live { width: 9px; height: 9px; border-radius: 50%; background: #6b665c; flex: none; }
.lx-meet__stage.is-joined .lx-meet__live { background: #e5534b; box-shadow: 0 0 0 4px rgba(229, 83, 75, .18); }
.lx-meet__frame { flex: 1; min-height: 0; display: flex; }
.lx-meet__frame iframe { flex: 1; width: 100%; height: 100%; border: 0; }
.lx-meet__frame > .lx-empty, .lx-meet__frame > .lx-emptystate { margin: auto; }
.lc-card--meeting { border-left-color: #5fb37b; }
.lc-card--meeting .lc-card__head > span:first-child { color: #5fb37b; }
.lc-card__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lc-card__actions .lx-btn { align-self: auto; }
.lc-call-btn { color: var(--accent); }
.lx-cal__join { margin: -2px 0 8px; align-self: flex-start; font-size: 12px; padding: 4px 10px; }
@media (max-width: 760px) {
  .lx-meet__row { flex-wrap: wrap; }
  .lx-meet__acts { width: 100%; justify-content: flex-end; }
  .lx-meet__list { padding: 12px; }
  .lx-meet .lx-toolbar { flex-wrap: wrap; }
  .lx-meet .lx-toolbar .lx-spacer { display: none; }
  .lx-meet .lx-toolbar .lx-input { flex: 1 1 160px !important; max-width: none !important; }
}

/* 1.8: Kontakti u Pošti */
.lx-compose { position: relative; }
.lx-rcpt { position: absolute; z-index: 60; max-height: 320px; overflow: auto; background: #1d1b17; border: 1px solid #34312b; border-radius: 10px; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); padding: 4px; }
.lx-rcpt__item { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.lx-rcpt__item.is-active { background: color-mix(in srgb, var(--accent) 16%, #23211c); }
.lx-rcpt__ico { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #2a2722; color: var(--text-2); }
.lx-rcpt__ico--group { background: color-mix(in srgb, var(--accent) 22%, #23211c); color: var(--accent); }
.lx-rcpt__ico--client { color: #8fb3d1; }
.lx-rcpt__ico--user { color: #5fb37b; }
.lx-rcpt__text { display: flex; flex-direction: column; min-width: 0; }
.lx-rcpt__text b { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-rcpt__text small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-cpick { max-height: 340px; min-height: 120px; overflow: auto; border: 1px solid #2a2825; border-radius: 10px; padding: 4px; display: flex; flex-direction: column; }
.lx-cpick__head { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 8px 4px; }
.lx-cpick__row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.lx-cpick__row:hover { background: #1f1d19; }
.lx-mail-contacts { flex: 1; min-width: 0; display: flex; min-height: 0; }
.lx-side__sep { height: 1px; background: #2a2825; margin: 8px 6px; flex: none; }
.lx-mail-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lx-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.lx-ct__chips { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; flex: none; border-bottom: 1px solid #22201d; }
.lx-ct__chips .lx-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lx-ct__n { font-size: 11px; color: var(--muted); }
.lx-chip.is-active .lx-ct__n { color: inherit; opacity: .8; }
.lx-ct__gchip { display: inline-flex; align-items: center; gap: 4px; }
.lx-ct__ghead, .lx-ct__bulk { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #22201d; flex: none; flex-wrap: wrap; }
.lx-ct__bulk { background: color-mix(in srgb, var(--accent) 7%, #171512); }
.lx-ct__gico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 16%, #201e1b); color: var(--accent); }
.lx-ct__gtext { display: flex; flex-direction: column; min-width: 0; }
.lx-ct__gtext small { color: var(--muted); font-size: 12px; }
.lx-ct__list { flex: 1; overflow: auto; min-height: 0; }
.lx-ct__row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid #1f1d1a; cursor: pointer; }
.lx-ct__row:hover, .lx-ct__row:focus-visible { background: #1b1916; outline: none; }
.lx-ct__row.is-sel { background: color-mix(in srgb, var(--accent) 8%, #191714); }
.lx-ct__star { border: 0; background: none; color: #5d584e; padding: 2px; cursor: pointer; display: inline-flex; border-radius: 6px; }
.lx-ct__star.is-on { color: var(--accent); }
.lx-ct__star:disabled { cursor: default; }
.lx-ct__av { flex: none; }
.lx-ct__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lx-ct__main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-ct__main small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-ct__tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 40%; }
.lx-tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: #262420; color: var(--text-2); white-space: nowrap; }
.lx-tag--shared { background: color-mix(in srgb, #5fb37b 18%, #1d1b18); color: #8fd0a4; }
.lx-tag--auto { background: transparent; border: 1px dashed #3a372f; color: var(--muted); }
@media (max-width: 760px) {
  .lx-ct__tags { display: none; }
  .lx-ct__row { padding: 8px 10px; }
  .lx-ct__tools { flex-wrap: wrap; }
  .lx-mail.is-contacts > .lx-side { display: none; }
}

/* 1.9: Saradnici, poslovi i prijava saradnika */
.lx-reg { align-items: start; padding: 32px 16px; }
.lx-reg__card { max-width: 640px; }
.lx-reg__card .lx-row { display: flex; gap: 12px; }
.lx-reg__card .lx-row > * { flex: 1; min-width: 0; }
.lx-reg__card select, .lx-reg__card textarea { width: 100%; }
.lx-reg__perks { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: 13px; }
.lx-reg__perks li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.lx-reg__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lx-reg__done { display: flex; flex-direction: column; gap: 10px; }
.lx-reg__done p { margin: 0; color: var(--text-2); line-height: 1.5; }
.lx-reg__foot { margin: 0; text-align: center; color: var(--muted); font-size: 13px; }
.lx-reg__foot a { color: var(--accent); }
@media (max-width: 560px) { .lx-reg__card .lx-row { flex-direction: column; gap: 0; } }

.lx-count.is-accent { background: var(--accent); color: #17140d; }
.lx-btn.is-off { color: var(--muted); }
.lx-pt { display: flex; flex-direction: column; min-height: 0; }
.lx-pt__grid { flex: 1; overflow: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-content: start; }
.lx-pt__card { border: 1px solid #2a2825; border-radius: 12px; background: #181613; padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.lx-pt__card:hover, .lx-pt__card:focus-visible { border-color: #3d392f; outline: none; }
.lx-pt__card.is-pending { border-color: color-mix(in srgb, var(--accent) 45%, #2a2825); }
.lx-pt__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lx-pt__av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--accent) 18%, #201e1b); color: var(--accent); object-fit: cover; }
.lx-pt__av.is-lg { width: 56px; height: 56px; font-size: 20px; }
.lx-pt__who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lx-pt__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-pt__who small { color: var(--muted); font-size: 12px; }
.lx-pt__badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #262420; color: var(--text-2); white-space: nowrap; align-self: flex-start; }
.lx-pt__badge.is-pending { background: color-mix(in srgb, var(--accent) 20%, #1d1b18); color: var(--accent); }
.lx-pt__badge.is-approved { background: color-mix(in srgb, #5fb37b 18%, #1d1b18); color: #8fd0a4; }
.lx-pt__badge.is-rejected, .lx-pt__badge.is-suspended { background: color-mix(in srgb, #e5534b 14%, #1d1b18); color: #f09a94; }
.lx-pt__bio { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lx-pt__bio.is-full { display: block; white-space: pre-wrap; }
.lx-pt__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12px; }
.lx-pt__meta span { display: inline-flex; align-items: center; gap: 4px; }
.lx-pt__acts { display: flex; gap: 6px; }
.lx-pt__detail { display: flex; flex-direction: column; gap: 14px; }
.lx-pt__rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.lx-pt__row { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.lx-pt__row span { color: var(--muted); font-size: 11px; }
.lx-pt__row b { font-weight: 500; overflow-wrap: anywhere; }
.lx-pt__links { display: flex; flex-direction: column; gap: 4px; }
.lx-pt__h { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lx-pt__link { color: var(--accent); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }

.lx-jb { flex: 1; display: flex; min-height: 0; }
.lx-jb__col { width: 340px; flex: none; display: flex; flex-direction: column; border-right: 1px solid #252320; min-height: 0; }
.lx-jb__chips { display: flex; gap: 6px; padding: 8px 10px; overflow-x: auto; border-bottom: 1px solid #22201d; flex: none; }
.lx-jb__chips .lx-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.lx-jb__list { flex: 1; overflow: auto; }
.lx-jb__item { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid #201e1b; color: var(--text); cursor: pointer; }
.lx-jb__item:hover { background: #1b1916; }
.lx-jb__item.is-active { background: #1d1a14; box-shadow: inset 3px 0 0 var(--accent); }
.lx-jb__item.is-new b { color: var(--accent); }
.lx-jb__item small { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-jb__itop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lx-jb__itop b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lx-jb__late { color: #f09a94 !important; }
.lx-jb__st { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #262420; color: var(--text-2); white-space: nowrap; }
.lx-jb__st.is-offered { background: color-mix(in srgb, var(--accent) 20%, #1d1b18); color: var(--accent); }
.lx-jb__st.is-accepted { background: color-mix(in srgb, #8fb3d1 16%, #1d1b18); color: #a9c8e2; }
.lx-jb__st.is-delivered { background: color-mix(in srgb, #b48ee0 18%, #1d1b18); color: #cbb1ec; }
.lx-jb__st.is-done { background: color-mix(in srgb, #5fb37b 18%, #1d1b18); color: #8fd0a4; }
.lx-jb__st.is-declined, .lx-jb__st.is-cancelled { background: color-mix(in srgb, #e5534b 14%, #1d1b18); color: #f09a94; }
.lx-jb__detail { flex: 1; min-width: 0; overflow: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.lx-jb__head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.lx-jb__htext { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lx-jb__htext h2 { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.lx-jb__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lx-jb__banner { padding: 9px 12px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 10%, #191714); color: var(--text); font-size: 13px; }
.lx-jb__banner.is-bad { background: color-mix(in srgb, #e5534b 12%, #191714); }
.lx-jb__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; }
.lx-jb__fact { display: flex; gap: 10px; align-items: flex-start; }
.lx-jb__fact > span { color: var(--accent); display: inline-flex; margin-top: 2px; }
.lx-jb__fact small { display: block; color: var(--muted); font-size: 11px; }
.lx-jb__fact b { font-weight: 500; font-size: 13px; overflow-wrap: anywhere; }
.lx-jb__desc { white-space: pre-wrap; line-height: 1.55; font-size: 14px; color: var(--text); border-left: 3px solid #2f2c26; padding-left: 12px; overflow-wrap: anywhere; }
.lx-jb__files h4, .lx-jb__thread h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lx-jb__files .lx-hint { margin: 0; }
.lx-jb__file { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid #24221e; border-radius: 9px; margin-bottom: 6px; }
.lx-jb__file img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none; background: #0f0e0b; }
.lx-jb__fico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; background: #1f1d19; color: var(--text-2); flex: none; }
.lx-jb__fname { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.lx-jb__file small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lx-jb__drop { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px dashed #3a372f; border-radius: 10px; padding: 12px; color: var(--text-2); font-size: 13px; }
.lx-jb__drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lx-jb__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #2a2825; border-radius: 0 0 10px 10px; overflow: hidden; }
.lx-jb__progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.lx-jb__thread { display: flex; flex-direction: column; gap: 8px; }
.lx-jb__c { border-radius: 10px; padding: 8px 10px; background: #1a1815; }
.lx-jb__c.is-partner { background: color-mix(in srgb, #8fb3d1 8%, #1a1815); }
.lx-jb__c.is-event { background: transparent; padding: 2px 10px; font-size: 12px; color: var(--muted); }
.lx-jb__c.is-event .lx-jb__cmeta b { font-weight: 500; }
.lx-jb__c.is-event .lx-jb__cmeta { display: inline-flex; margin-right: 6px; }
.lx-jb__c.is-event .lx-jb__cbody { display: inline; }
.lx-jb__cmeta { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.lx-jb__cmeta small { color: var(--muted); font-size: 11px; }
.lx-jb__cbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; }
.lx-jb__cform { display: flex; gap: 8px; align-items: flex-end; }
.lx-jb__cform textarea { flex: 1; }
.lx-jb__profile { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; }
.lx-jb__pform { width: 100%; max-width: 640px; }
.lc-card--job { border-left-color: #b48ee0; }
.lc-card--job .lc-card__head > span:first-child { color: #b48ee0; }
.lc-card--partner .lc-card__head > span:first-child { color: var(--accent); }
@media (max-width: 760px) {
  .lx-pt__grid { padding: 10px; grid-template-columns: 1fr; }
  .lx-jb__col { width: 100%; border-right: 0; }
  .lx-jb__detail { display: none; padding: 12px; }
  .lx-jb.has-detail .lx-jb__col { display: none; }
  .lx-jb.has-detail .lx-jb__detail { display: flex; }
  .lx-jb__cform { flex-direction: column; align-items: stretch; }
}

/* 1.10: pozadine, efekti i podešavanje radne površine */
/* pregled u Podešavanjima koristi iste klase (.lx-wp.is-…) */
.lx-wp.is-plain { background: radial-gradient(70% 60% at 88% -10%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%), #14120f; }
.lx-wp.is-grid { background: linear-gradient(#1d1a16 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, #1d1a16 1px, transparent 1px) 0 0 / 14px 14px, #14120f; }
.lx-wp.is-wordmark { background: #14120f; }
.lx-wp.is-wordmark::after { content: 'LexDigital'; position: absolute; right: 8px; bottom: 6px; font-weight: 700; font-size: 15px; letter-spacing: -.04em; color: #24211c; }
.wallpaper-dots .lx-desktop, .lx-wp.is-dots { background: radial-gradient(900px 600px at 85% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), radial-gradient(rgba(255, 236, 200, .12) 1.1px, transparent 1.8px) 0 0 / 22px 22px, #12100d; }
.wallpaper-aurora .lx-desktop, .lx-wp.is-aurora { background: radial-gradient(60% 50% at 15% 20%, rgba(64, 196, 170, .22), transparent 70%), radial-gradient(55% 45% at 80% 15%, rgba(140, 100, 220, .22), transparent 70%), radial-gradient(50% 50% at 60% 90%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(180deg, #0b0d14, #0d0f12); }
.wallpaper-sunset .lx-desktop, .lx-wp.is-sunset { background: radial-gradient(70% 55% at 75% 105%, rgba(236, 140, 70, .45), transparent 70%), radial-gradient(60% 50% at 20% 100%, rgba(200, 80, 90, .35), transparent 70%), linear-gradient(180deg, #120d18 0%, #241322 45%, #3b1c26 75%, #4d2620 100%); }
.wallpaper-midnight .lx-desktop, .lx-wp.is-midnight { background: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55), transparent 60%), radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1.2px 1.2px at 40% 70%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,.3), transparent 60%), radial-gradient(80% 60% at 70% 0%, rgba(70, 100, 200, .28), transparent 70%), linear-gradient(180deg, #070a16, #0c1226 60%, #121a33); }
.wallpaper-forest .lx-desktop, .lx-wp.is-forest { background: radial-gradient(60% 50% at 80% 10%, rgba(180, 220, 140, .12), transparent 70%), radial-gradient(70% 60% at 10% 100%, rgba(40, 110, 70, .35), transparent 70%), linear-gradient(170deg, #0a120e, #0f1d16 55%, #142a1d); }
.wallpaper-ocean .lx-desktop, .lx-wp.is-ocean { background: radial-gradient(70% 55% at 85% 0%, rgba(80, 200, 220, .22), transparent 70%), radial-gradient(70% 60% at 0% 100%, rgba(20, 90, 140, .4), transparent 70%), linear-gradient(180deg, #061016, #0a1c26 55%, #0c2733); }
.wallpaper-waves .lx-desktop, .lx-wp.is-waves { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22280%22 height=%2284%22 viewBox=%220 0 280 84%22%3E%3Cg fill=%22none%22 stroke=%22%23ffecc8%22 stroke-opacity=%22.09%22 stroke-width=%221.3%22%3E%3Cpath d=%22M0 14 C35 0 105 28 140 14 S245 0 280 14%22/%3E%3Cpath d=%22M0 42 C35 28 105 56 140 42 S245 28 280 42%22/%3E%3Cpath d=%22M0 70 C35 56 105 84 140 70 S245 56 280 70%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 280px 84px, radial-gradient(1000px 700px at 90% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), #110f0c; }
.wallpaper-topo .lx-desktop, .lx-wp.is-topo { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22480%22 height=%22480%22 viewBox=%220 0 480 480%22%3E%3Cg fill=%22none%22 stroke=%22%23ffecc8%22 stroke-opacity=%22.085%22 stroke-width=%221.2%22%3E%3Cpath d=%22M439.7 234.0C445 258 412 296 389 315C365 334 327 342 296 348C265 354 237 355 202 351C168 348 103 348 88 328C73 309 104 262 110 234C115 206 107 182 122 159C136 137 164 107 194 97C225 87 277 88 304 100C331 113 332 151 355 173C378 195 434 210 440 234Z%22/%3E%3Cpath d=%22M405.2 234.0C410 253 383 284 363 300C344 315 313 322 288 327C263 332 239 333 211 330C183 327 130 327 118 311C105 295 131 257 135 234C140 211 133 192 145 173C156 154 180 130 204 122C229 114 272 114 294 125C316 135 317 166 336 184C354 202 401 215 405 234Z%22/%3E%3Cpath d=%22M371.9 234.0C375 249 354 274 339 286C324 298 300 303 280 307C260 311 242 312 219 309C197 307 156 307 146 294C136 282 156 252 160 234C163 216 158 201 168 186C177 171 195 152 214 146C234 140 268 140 285 148C302 156 303 180 317 195C332 209 368 219 372 234Z%22/%3E%3Cpath d=%22M339.7 234.0C342 245 327 263 316 272C304 281 287 285 272 288C257 291 244 291 227 290C211 288 181 288 173 278C166 269 181 247 184 234C186 221 183 210 189 199C196 188 209 174 224 169C238 165 263 165 276 171C288 177 289 195 300 205C310 216 337 223 340 234Z%22/%3E%3Cpath d=%22M309.8 234.0C312 241 301 253 294 259C286 265 274 268 265 270C255 272 246 272 235 271C224 270 204 270 199 264C194 257 204 243 206 234C208 225 205 218 210 210C214 203 223 194 232 191C242 188 259 188 267 192C276 196 276 208 283 215C290 222 308 227 310 234Z%22/%3E%3Cpath d=%22M282.2 234.0C283 238 278 244 274 248C269 251 263 252 258 253C253 254 248 255 242 254C236 253 225 253 223 250C220 247 225 239 226 234C227 229 226 225 228 221C231 217 235 212 241 211C246 209 255 209 259 211C264 213 264 220 268 224C272 227 281 230 282 234Z%22/%3E%3Cpath d=%22M138.6 0.0C136 19 109 39 92 53C75 68 58 76 35 86C12 96 -24 118 -46 113C-68 108 -84 74 -95 55C-106 36 -109 20 -111 0C-114 -20 -122 -47 -110 -64C-99 -81 -66 -102 -42 -104C-19 -106 6 -84 31 -77C56 -70 90 -75 108 -62C125 -50 141 -19 139 0Z%22/%3E%3Cpath d=%22M138.6 480.0C136 499 109 519 92 533C75 548 58 556 35 566C12 576 -24 598 -46 593C-68 588 -84 554 -95 535C-106 516 -109 500 -111 480C-114 460 -122 433 -110 416C-99 399 -66 378 -42 376C-19 374 6 396 31 403C56 410 90 405 108 418C125 430 141 461 139 480Z%22/%3E%3Cpath d=%22M618.6 0.0C616 19 589 39 572 53C555 68 538 76 515 86C492 96 456 118 434 113C412 108 396 74 385 55C374 36 371 20 369 0C366 -20 358 -47 370 -64C381 -81 414 -102 438 -104C461 -106 486 -84 511 -77C536 -70 570 -75 588 -62C605 -50 621 -19 619 0Z%22/%3E%3Cpath d=%22M618.6 480.0C616 499 589 519 572 533C555 548 538 556 515 566C492 576 456 598 434 593C412 588 396 554 385 535C374 516 371 500 369 480C366 460 358 433 370 416C381 399 414 378 438 376C461 374 486 396 511 403C536 410 570 405 588 418C605 430 621 461 619 480Z%22/%3E%3Cpath d=%22M108.7 0.0C107 15 86 31 72 42C59 53 45 60 27 68C9 75 -19 93 -36 89C-53 85 -66 58 -74 43C-83 28 -85 16 -87 0C-89 -16 -95 -37 -86 -50C-77 -64 -52 -80 -33 -82C-15 -83 5 -66 25 -61C44 -55 70 -59 84 -49C98 -39 111 -15 109 0Z%22/%3E%3Cpath d=%22M108.7 480.0C107 495 86 511 72 522C59 533 45 540 27 548C9 555 -19 573 -36 569C-53 565 -66 538 -74 523C-83 508 -85 496 -87 480C-89 464 -95 443 -86 430C-77 416 -52 400 -33 398C-15 397 5 414 25 419C44 425 70 421 84 431C98 441 111 465 109 480Z%22/%3E%3Cpath d=%22M588.7 0.0C587 15 566 31 552 42C539 53 525 60 507 68C489 75 461 93 444 89C427 85 414 58 406 43C397 28 395 16 393 0C391 -16 385 -37 394 -50C403 -64 428 -80 447 -82C465 -83 485 -66 505 -61C524 -55 550 -59 564 -49C578 -39 591 -15 589 0Z%22/%3E%3Cpath d=%22M588.7 480.0C587 495 566 511 552 522C539 533 525 540 507 548C489 555 461 573 444 569C427 565 414 538 406 523C397 508 395 496 393 480C391 464 385 443 394 430C403 416 428 400 447 398C465 397 485 414 505 419C524 425 550 421 564 431C578 441 591 465 589 480Z%22/%3E%3Cpath d=%22M79.9 0.0C78 11 63 23 53 31C43 39 33 44 20 50C7 55 -14 68 -26 65C-39 62 -48 43 -55 32C-61 21 -63 11 -64 0C-66 -11 -70 -27 -64 -37C-57 -47 -38 -59 -24 -60C-11 -61 4 -48 18 -44C32 -40 52 -43 62 -36C72 -29 81 -11 80 0Z%22/%3E%3Cpath d=%22M79.9 480.0C78 491 63 503 53 511C43 519 33 524 20 530C7 535 -14 548 -26 545C-39 542 -48 523 -55 512C-61 501 -63 491 -64 480C-66 469 -70 453 -64 443C-57 433 -38 421 -24 420C-11 419 4 432 18 436C32 440 52 437 62 444C72 451 81 469 80 480Z%22/%3E%3Cpath d=%22M559.9 0.0C558 11 543 23 533 31C523 39 513 44 500 50C487 55 466 68 454 65C441 62 432 43 425 32C419 21 417 11 416 0C414 -11 410 -27 416 -37C423 -47 442 -59 456 -60C469 -61 484 -48 498 -44C512 -40 532 -43 542 -36C552 -29 561 -11 560 0Z%22/%3E%3Cpath d=%22M559.9 480.0C558 491 543 503 533 511C523 519 513 524 500 530C487 535 466 548 454 545C441 542 432 523 425 512C419 501 417 491 416 480C414 469 410 453 416 443C423 433 442 421 456 420C469 419 484 432 498 436C512 440 532 437 542 444C552 451 561 469 560 480Z%22/%3E%3Cpath d=%22M51.0 0.0C50 7 40 14 34 20C27 25 21 28 13 32C4 35 -9 44 -17 42C-25 40 -31 27 -35 20C-39 13 -40 7 -41 0C-42 -7 -45 -17 -41 -24C-36 -30 -24 -37 -16 -38C-7 -39 2 -31 12 -28C21 -26 33 -28 40 -23C46 -18 52 -7 51 0Z%22/%3E%3Cpath d=%22M51.0 480.0C50 487 40 494 34 500C27 505 21 508 13 512C4 515 -9 524 -17 522C-25 520 -31 507 -35 500C-39 493 -40 487 -41 480C-42 473 -45 463 -41 456C-36 450 -24 443 -16 442C-7 441 2 449 12 452C21 454 33 452 40 457C46 462 52 473 51 480Z%22/%3E%3Cpath d=%22M531.0 0.0C530 7 520 14 514 20C507 25 501 28 493 32C484 35 471 44 463 42C455 40 449 27 445 20C441 13 440 7 439 0C438 -7 435 -17 439 -24C444 -30 456 -37 464 -38C473 -39 482 -31 492 -28C501 -26 513 -28 520 -23C526 -18 532 -7 531 0Z%22/%3E%3Cpath d=%22M531.0 480.0C530 487 520 494 514 500C507 505 501 508 493 512C484 515 471 524 463 522C455 520 449 507 445 500C441 493 440 487 439 480C438 473 435 463 439 456C444 450 456 443 464 442C473 441 482 449 492 452C501 454 513 452 520 457C526 462 532 473 531 480Z%22/%3E%3Cpath d=%22M24.4 0.0C24 3 19 7 16 9C13 12 10 13 6 15C2 17 -4 21 -8 20C-12 19 -15 13 -17 10C-19 6 -19 3 -20 0C-20 -3 -21 -8 -19 -11C-17 -14 -12 -18 -7 -18C-3 -19 1 -15 6 -14C10 -12 16 -13 19 -11C22 -9 25 -3 24 0Z%22/%3E%3Cpath d=%22M24.4 480.0C24 483 19 487 16 489C13 492 10 493 6 495C2 497 -4 501 -8 500C-12 499 -15 493 -17 490C-19 486 -19 483 -20 480C-20 477 -21 472 -19 469C-17 466 -12 462 -7 462C-3 461 1 465 6 466C10 468 16 467 19 469C22 471 25 477 24 480Z%22/%3E%3Cpath d=%22M504.4 0.0C504 3 499 7 496 9C493 12 490 13 486 15C482 17 476 21 472 20C468 19 465 13 463 10C461 6 461 3 460 0C460 -3 459 -8 461 -11C463 -14 468 -18 473 -18C477 -19 481 -15 486 -14C490 -12 496 -13 499 -11C502 -9 505 -3 504 0Z%22/%3E%3Cpath d=%22M504.4 480.0C504 483 499 487 496 489C493 492 490 493 486 495C482 497 476 501 472 500C468 499 465 493 463 490C461 486 461 483 460 480C460 477 459 472 461 469C463 466 468 462 473 462C477 461 481 465 486 466C490 468 496 467 499 469C502 471 505 477 504 480Z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 480px 480px, radial-gradient(1000px 700px at 10% 110%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), #110f0c; }
.wallpaper-grain .lx-desktop, .lx-wp.is-grain { background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22220%22 height=%22220%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 1  0 0 0 0 .93  0 0 0 0 .8  0 0 0 .09 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E") 0 0 / 220px 220px, radial-gradient(80% 70% at 75% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), linear-gradient(160deg, #17130e, #0e0c0a); }
.wallpaper-accent .lx-desktop, .lx-wp.is-accent { background: radial-gradient(80% 70% at 85% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%), radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, #0e0d0b), #0c0b09); }
.wallpaper-solid .lx-desktop, .lx-wp.is-solid { background: var(--wp-color, #1c1915); }
/* sopstvena slika: zamućenje i zatamnjenje na slojevima ispod ikonica i prozora */
.wallpaper-image .lx-desktop, .wp-photo .lx-desktop { background: #0e0d0b; }
.wp-photo .lx-desktop::before { content: ''; position: fixed; inset: calc(var(--wp-blur, 0px) * -2); z-index: -1; pointer-events: none; background-position: center; background-size: cover; filter: blur(var(--wp-blur, 0px)); }
.wp-photo .lx-desktop::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(8, 7, 5, var(--wp-dim, .25)); }
.wallpaper-dusk .lx-desktop::before { background-image: url("wallpapers/dusk.webp"); }
.wallpaper-lake .lx-desktop::before { background-image: url("wallpapers/lake.webp"); }
.wallpaper-dunes .lx-desktop::before { background-image: url("wallpapers/dunes.webp"); }
.wallpaper-silk .lx-desktop::before { background-image: url("wallpapers/silk.webp"); }
.wallpaper-night .lx-desktop::before { background-image: url("wallpapers/night.webp"); }
.lx-wp.is-dusk { background: url("wallpapers/dusk-mini.webp") center / cover; }
.lx-wp.is-lake { background: url("wallpapers/lake-mini.webp") center / cover; }
.lx-wp.is-dunes { background: url("wallpapers/dunes-mini.webp") center / cover; }
.lx-wp.is-silk { background: url("wallpapers/silk-mini.webp") center / cover; }
.lx-wp.is-night { background: url("wallpapers/night-mini.webp") center / cover; }
.wallpaper-image .lx-desktop::before { content: ''; position: fixed; inset: calc(var(--wp-blur, 0px) * -2); z-index: -1; pointer-events: none; background-image: var(--wp-image, none); background-position: center; background-repeat: no-repeat; background-size: cover; filter: blur(var(--wp-blur, 0px)); }
.wallpaper-image .lx-desktop::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(8, 7, 5, var(--wp-dim, .25)); }
.wallpaper-image.wp-contain .lx-desktop::before { background-size: contain; }
.wallpaper-image.wp-center .lx-desktop::before { background-size: auto; }
.wallpaper-image.wp-tile .lx-desktop::before { background-size: auto; background-repeat: repeat; background-position: 0 0; }
.lx-wp.is-image { background-size: cover; background-position: center; }

/* staklo: public/os/glass.css (1.17) */

/* bez animacija */
.fx-nomotion *, .fx-nomotion *::before, .fx-nomotion *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }

/* veličina ikonica i natpisi (računar; telefon ima svoj početni ekran) */
@media (min-width: 761px) {
  .icons-sm .lx-icon { width: 74px; padding: 7px 2px; gap: 6px; font-size: 11px; }
  .icons-sm .lx-icon__tile { width: 38px; height: 38px; border-radius: 10px; }
  .icons-sm .lx-icon__tile svg { width: 18px; height: 18px; }
  .icons-lg .lx-icon { width: 108px; padding: 11px 4px; gap: 9px; font-size: 13px; }
  .icons-lg .lx-icon__tile { width: 62px; height: 62px; border-radius: 17px; }
  .icons-lg .lx-icon__tile svg { width: 28px; height: 28px; }
  .icons-nolabels .lx-icon__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .icons-nolabels .lx-icon { padding-bottom: 6px; }
  /* kompaktna traka */
  .taskbar-compact { --taskbar: 46px; }
  .taskbar-compact .lx-start-btn { width: 36px; height: 36px; border-radius: 9px; font-size: 13px; }
  .taskbar-compact .lx-tb-app, .taskbar-compact .lx-tray__btn { width: 38px; height: 38px; }
  .taskbar-compact .lx-tb-search { height: 34px; }
  .taskbar-compact .lx-clock { height: 36px; }
  .taskbar-compact .lx-clock b { font-size: 12px; }
  .taskbar-compact button.lx-avatar { width: 30px; height: 30px; }
}
.clock-nodate .lx-clock span { display: none; }

/* galerija pozadina u Podešavanjima */
.lx-wps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.lx-wps__item { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; cursor: pointer; text-align: left; }
.lx-wp { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 9px; border: 1px solid #2c2924; overflow: hidden; }
.lx-wps__item:hover .lx-wp { border-color: #4a443a; }
.lx-wps__item.is-active .lx-wp { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); }
.lx-wps__item.is-active { color: var(--text); }
.lx-wps__item:focus-visible { outline: none; }
.lx-wps__item:focus-visible .lx-wp { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx-wp__mini { position: absolute; left: 7px; top: 7px; display: grid; grid-template-columns: repeat(1, 9px); gap: 4px; }
.lx-wp__mini i { width: 9px; height: 9px; border-radius: 3px; background: rgba(255, 245, 225, .18); }
.lx-wp__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: rgba(10, 9, 7, .7); }
.lx-wp__add { display: grid; place-items: center; color: var(--muted); background: repeating-linear-gradient(45deg, #17150f, #17150f 6px, #1b1914 6px, #1b1914 12px); }
.lx-wp__add svg { width: 22px; height: 22px; }
.lx-look-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lx-look-row input[type=range] { flex: 1; min-width: 140px; max-width: 280px; accent-color: var(--accent); }
.lx-look-row output { min-width: 42px; color: var(--text-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.lx-color { width: 40px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface-3); cursor: pointer; }
.lx-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.lx-seg button { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; padding: 7px 14px; cursor: pointer; }
.lx-seg button + button { border-left: 1px solid var(--line-2); }
.lx-seg button.is-active { background: color-mix(in srgb, var(--accent) 18%, #1f1c17); color: var(--text); }
.lx-swatch--custom { position: relative; background: conic-gradient(#e06c6c, #e0c56c, #8fd1a8, #6cb6e0, #b49ad6, #e06c6c); }
.lx-swatch--custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (max-width: 760px) {
  .lx-wps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lx-seg { flex-wrap: wrap; }
}

/* 1.11: potpisi u Pošti */
.lx-compose-body { min-height: 120px; }
.lx-compose-sig { padding: 0 18px 4px; display: flex; flex-direction: column; gap: 2px; }
.lx-compose-sig__label { font: 12px/1 var(--mono, monospace); color: var(--muted); }
.lx-sigframe { width: 100%; border: 0; border-radius: 8px; background: #fff; display: block; min-height: 24px; }
.lx-compose-sig .lx-sigframe { max-height: 260px; }
.lx-compose-quotebtn { align-self: flex-start; margin: 4px 18px; border: 1px solid var(--line-2); background: var(--surface-3); color: var(--text-2); border-radius: 6px; padding: 0 8px; height: 18px; font-size: 11px; line-height: 16px; letter-spacing: 1px; cursor: pointer; }
.lx-compose-quotebtn.is-open { background: color-mix(in srgb, var(--accent) 16%, #1f1c17); color: var(--text); }
.lx-compose-quote { margin: 0 18px 8px; min-height: 120px; resize: vertical; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); padding: 8px 10px; font: 13px/1.5 var(--mono, monospace); }
.lx-compose-sigsel { width: auto; max-width: 220px; min-height: 34px; font-size: 12.5px; }
.lx-sig { flex: 1; min-width: 0; display: flex; min-height: 0; }
.lx-sig__side { width: 220px; flex: none; border-right: 1px solid var(--line); padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.lx-sig__list { display: flex; flex-direction: column; gap: 4px; }
.lx-sig__item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); cursor: pointer; font: inherit; }
.lx-sig__item small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-sig__item:hover { background: #1b1916; }
.lx-sig__item.is-active { background: color-mix(in srgb, var(--accent) 12%, #1b1915); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lx-sig__editor { flex: 1; min-width: 0; overflow: auto; padding: 14px 18px 24px; display: flex; flex-direction: column; gap: 12px; }
.lx-sig__editor > * { flex-shrink: 0; }
.lx-sig__head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lx-sig__visual { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.lx-sig__tools { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.lx-sig__tools .lx-btn--icon { width: 32px; min-height: 32px; }
.lx-sig__sep { width: 1px; height: 20px; background: var(--line-2); margin: 0 4px; }
.lx-sig__color { width: 30px; height: 26px; padding: 1px; border: 1px solid var(--line-2); border-radius: 6px; background: transparent; cursor: pointer; }
.lx-sig__area { min-height: 160px; max-height: 420px; overflow: auto; padding: 14px 16px; background: #fff; color: #222; font: 14px/1.5 Arial, Helvetica, sans-serif; outline: none; user-select: text; }
.lx-sig__area img { max-width: 100%; }
.lx-sig__area:empty::before { content: 'Nalepi potpis iz generatora (Ctrl+V) ili ga napiši ovde…'; color: #999; }
.lx-sig__code { min-height: 220px; font: 12.5px/1.5 var(--mono, monospace); resize: vertical; }
.lx-sig__actions { display: flex; align-items: center; gap: 8px; }
.lx-sig__h { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lx-sig__preview { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; min-height: 60px; }
.lx-sig__text { margin: 8px 0 0; white-space: pre-wrap; font: 12.5px/1.5 var(--mono, monospace); color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; }
.lx-sig__details summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.lx-sig__help ol { margin: 8px 0; padding-left: 20px; line-height: 1.7; color: var(--text-2); font-size: 13px; }
.lx-sig__help { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.lx-sig__defaults { display: flex; flex-direction: column; gap: 10px; }
.lx-sig__acc { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 760px) {
  .lx-sig { flex-direction: column; }
  .lx-sig__side { width: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: 40%; }
  .lx-compose-sigsel { max-width: 130px; }
}

/* ---------- 1.12 Korisnici: uloge, sektori, dnevnik ---------- */
.lx-t-warn { color: var(--warn); }
.lx-readonly-note { margin: 8px 12px 0; flex-shrink: 0; }
.lx-users .lx-main { display: flex; flex-direction: column; }
.lx-users .lx-toolbar { flex-wrap: wrap; }
.lx-uavatar { display: inline-grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 22%, #24211c); color: var(--text); font-weight: 700; flex-shrink: 0; }
.lx-uname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lx-uname > div { display: flex; flex-direction: column; min-width: 0; }
.lx-uname small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-users__table td { vertical-align: middle; }
.lx-users__table tr.is-muted td { opacity: .55; }
.lx-rolechips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.lx-rolechip { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #24211c; border: 1px solid var(--line-2); white-space: nowrap; }
.lx-rolechip.is-owner { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: transparent; color: var(--accent); font-weight: 600; }
.lx-depchip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lx-depchip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lx-badge2fa { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; margin-left: 6px; background: var(--warn-bg); color: var(--warn); vertical-align: 2px; }
.lx-rolepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.lx-rolepick__item { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.lx-rolepick__item:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lx-rolepick__item span { display: flex; flex-direction: column; gap: 2px; }
.lx-rolepick__item small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.lx-rolepick__item.is-locked { opacity: .5; cursor: not-allowed; }
.lx-uapps { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #1b1916); font-size: 12.5px; }
.lx-appchip { padding: 2px 8px; border-radius: 6px; background: #26231e; }
.lx-appchip.is-ro { color: var(--warn); }
.lx-uabil { flex-basis: 100%; margin-top: 6px; color: var(--text-2); font-size: 12px; line-height: 1.55; }
.lx-rolecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.lx-rolecard { text-align: left; font: inherit; color: var(--text); background: #1b1916; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.lx-rolecard:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lx-rolecard.is-fixed { cursor: default; border-style: dashed; }
.lx-rolecard__head { display: flex; align-items: center; gap: 4px; }
.lx-rolecard p { margin: 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; flex: 1; }
.lx-matrix { font-size: 12px; }
.lx-matrix th, .lx-matrix td { padding: 5px 8px; white-space: nowrap; }
.lx-matrix thead th { position: sticky; top: 0; background: #181613; z-index: 1; }
.lx-matrix tbody th { text-align: left; font-weight: 500; color: var(--text-2); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.lx-matrix td { text-align: center; }
.lx-matrix td.is-yes { color: var(--ok); }
.lx-matrix td.is-no { color: #4a463e; }
.lx-matrix td.is-ro { color: var(--warn); }
.lx-matrix__group td { text-align: left !important; font-weight: 600; color: var(--accent); background: #171512; padding-top: 10px; }
.lx-roleapps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 14px; }
.lx-roleapps__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lx-roleapps__row select { width: 110px; }
.lx-abilgroup { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px 10px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lx-abilgroup legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.lx-orgtree { display: flex; flex-direction: column; gap: 12px; }
.lx-dep { border: 1px solid var(--line); border-left: 4px solid var(--dep); border-radius: 12px; background: #1a1815; }
.lx-dep__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.lx-dep__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dep); flex-shrink: 0; }
.lx-dep__title { display: flex; flex-direction: column; min-width: 0; }
.lx-dep__title small { color: var(--muted); font-size: 12px; }
.lx-dep__actions { display: flex; gap: 6px; }
.lx-dep__body { display: flex; gap: 18px; padding: 10px 12px; flex-wrap: wrap; align-items: flex-start; }
.lx-dep__lead { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.lx-dep__lead > small { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.lx-dep__people { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-items: center; padding-top: 18px; }
.lx-dep__person { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; color: var(--text); background: #24211c; border: 1px solid transparent; border-radius: 999px; padding: 2px 10px 2px 2px; cursor: pointer; }
.lx-dep__person:hover { border-color: var(--line-2); }
.lx-dep__teams { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 0 28px; }
.lx-dep__teams:not(:empty) { padding-bottom: 12px; }
.lx-activity { display: flex; flex-direction: column; }
.lx-activity__row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 13px; }
.lx-activity__row time { color: var(--muted); font-size: 12px; padding-top: 1px; }
.lx-activity__row.is-denied { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.lx-activity__details { margin-top: 4px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 1px; }
.lx-activity__details s { color: var(--muted); }
@media (max-width: 760px) {
  .lx-users { flex-direction: column; }
  .lx-users > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #252320; padding: 6px; flex-shrink: 0; }
  .lx-users > .lx-side .lx-side__item { white-space: nowrap; }
  .lx-activity__row { grid-template-columns: 1fr; gap: 2px; }
  .lx-dep__teams { padding-left: 12px; }
  .lx-users__table th:nth-child(4), .lx-users__table td:nth-child(4) { display: none; }
}
/* samo čitanje: dugmad za pravljenje i brisanje se ne prikazuju (server ionako odbija izmene) */
.lx-win.is-readonly .lx-win__body .lx-btn--primary, .lx-win.is-readonly .lx-win__body .lx-btn--danger { display: none; }
.lx-readonly-note { color: var(--text-2); }

/* ---------- 1.13 HR ---------- */
.lx-hr .lx-main { display: flex; flex-direction: column; }
.lx-side__badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink, #17140d); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.lx-hr-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.lx-hr-dot.is-pending { background: repeating-linear-gradient(45deg, #8a8270 0 2px, transparent 2px 4px); border: 1px solid #8a8270; }
.lx-hr-type { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lx-hr-h { margin: 22px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lx-hr-h4 { margin: 10px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lx-hr-bals { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.lx-hr-bal, .lx-hr-hol { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: #1b1916; display: flex; flex-direction: column; gap: 10px; }
.lx-hr-bal__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lx-hr-bal__top small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.lx-hr-bal__top b { font-size: 34px; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.lx-hr-bal__top span { color: var(--text-2); }
.lx-hr-bar { height: 6px; border-radius: 3px; background: #2a2722; overflow: hidden; }
.lx-hr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.lx-hr-bal__kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; font-size: 12.5px; }
.lx-hr-bal__kv dt { color: var(--muted); }
.lx-hr-bal__kv dd { margin: 0; }
.lx-hr-hol small { color: var(--muted); font-size: 12px; }
.lx-hr-hol div { font-size: 12.5px; display: flex; gap: 8px; }
.lx-hr-hol div b { min-width: 96px; white-space: nowrap; }
.lx-hr-actions { text-align: right; }
.lx-hr-actions > * { margin: 2px 0 2px 4px; }
.lx-hr-types { flex-wrap: wrap; }
.lx-hr-types .lx-chip { display: inline-flex; align-items: center; gap: 6px; }
.lx-hr-preview { min-height: 22px; padding: 10px 12px; border-radius: 10px; background: #1b1916; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.lx-hr-preview:empty { display: none; }
.lx-hr-reqs { display: flex; flex-direction: column; gap: 10px; }
.lx-hr-req { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #1b1916; }
.lx-hr-req__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lx-hr-req__when { color: var(--text-2); font-size: 13px; }
.lx-hr-req__note { color: var(--text-2); font-size: 12.5px; font-style: italic; }
.lx-hr-req__btns { display: flex; gap: 8px; }
.lx-hr-month { min-width: 130px; text-align: center; }
.lx-hrcal-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; max-height: calc(100vh - 260px); }
.lx-hrcal { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.lx-hrcal th, .lx-hrcal td { border-bottom: 1px solid #24211c; border-right: 1px solid #24211c; padding: 0; text-align: center; }
.lx-hrcal thead th { position: sticky; top: 0; background: #181613; z-index: 2; padding: 4px 0; min-width: 26px; }
.lx-hrcal thead th small { display: block; color: var(--muted); font-size: 9.5px; font-weight: 400; }
.lx-hrcal thead th b { font-size: 11.5px; }
.lx-hrcal__name { position: sticky; left: 0; background: #181613; z-index: 1; text-align: left !important; padding: 6px 10px !important; white-space: nowrap; font-weight: 500; min-width: 140px; }
.lx-hrcal thead .lx-hrcal__name { z-index: 3; }
.lx-hrcal tr.is-me .lx-hrcal__name { color: var(--accent); }
.lx-hrcal .is-off { background: #151310; }
.lx-hrcal thead th.is-off { background: #141210; color: var(--muted); }
.lx-hrcal .is-today { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.lx-hrcal__d { height: 30px; }
.lx-hrcal__d.has-leave i { display: block; height: 16px; margin: 0 1px; border-radius: 4px; }
.lx-hrcal__d.is-pending i { opacity: .45; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.35) 0 3px, transparent 3px 6px) !important; }
.lx-hr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 12px; color: var(--text-2); }
.lx-hr-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lx-hr-dossier { width: min(780px, 80vw); max-width: 100%; }
.lx-hr-dossier .lx-seg { flex-wrap: wrap; align-self: flex-start; }
.lx-hr-pane { display: flex; flex-direction: column; gap: 10px; }
.lx-hr-who { display: flex; flex-direction: column; gap: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.lx-hr-contracts, .lx-hr-docs { display: flex; flex-direction: column; gap: 8px; }
.lx-hr-contract { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.lx-hr-contract.is-expired { opacity: .65; }
.lx-hr-contract__head { display: flex; align-items: center; gap: 8px; }
.lx-hr-doc { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; flex-wrap: wrap; }
.lx-hr-doc a { color: var(--text); }
.lx-hr-upload { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 10px; }
.lx-hr-upload .lx-input { width: auto; flex: 1 1 160px; }
.lx-hr-hollist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.lx-hr-hollist > div { display: grid; grid-template-columns: 110px 30px 1fr auto; gap: 8px; align-items: center; padding: 7px 12px; border-bottom: 1px solid #24211c; font-size: 13px; }
.lx-hr-hollist > div:last-child { border-bottom: 0; }
.lx-hr-hollist small { color: var(--muted); }
.lx-hr-hollist .is-weekend { color: var(--muted); }
.lx-hr-hollist .is-company { background: color-mix(in srgb, var(--accent) 6%, transparent); }
@media (max-width: 760px) {
  .lx-hr { flex-direction: column; }
  .lx-hr > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #252320; padding: 6px; flex-shrink: 0; }
  .lx-hr > .lx-side .lx-side__item { white-space: nowrap; }
  .lx-hr-dossier { width: auto; }
  .lx-hrcal__name { min-width: 100px; }
  .lx-hr-req__btns { width: 100%; }
  .lx-hr-req__btns .lx-btn { flex: 1; }
}
.lx-cal__ev--praznik { background: #2a1f1f; color: #e3a99c; }
.lx-cal__ev--odsustvo { background: #1c2a2b; color: #8fd0d3; }
.lx-cal__item--praznik { border-left-color: #e3a99c; cursor: default; }
.lx-cal__item--odsustvo { border-left-color: #6cc5c9; }

/* ---------- 1.14 mejl iz Lex Chat-a ---------- */
.lc-card--mail.is-openable { cursor: pointer; }
.lc-card--mail.is-openable:hover { border-color: color-mix(in srgb, #8fb3d1 50%, transparent); }
.lx-mailview { display: flex; flex-direction: column; gap: 10px; width: min(860px, 82vw); max-width: 100%; }
.lx-mailview__date { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lx-mailview__by { color: var(--muted); font-size: 12px; }
.lx-mailview__atts { padding: 0; }
.lx-mailview__body { display: flex; flex-direction: column; }
.lx-mailview__frame { height: min(60vh, 620px); }
.lx-mailview__text { max-height: 60vh; overflow: auto; white-space: pre-wrap; background: #1b1916; border-radius: 10px; padding: 14px; }
.lx-att.is-missing { opacity: .6; }
@media (max-width: 760px) { .lx-mailview { width: auto; } .lx-mailview__frame { height: 55vh; } }

/* ---------- 1.15 Ugovori ---------- */
.lx-ug .lx-main { display: flex; flex-direction: column; }
.lx-ug-h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lx-ug-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.lx-ug-card { text-align: left; font: inherit; color: var(--text); background: #1b1916; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.lx-ug-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.lx-ug-card small { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.lx-ug-card.is-blank { border-style: dashed; }
.lx-ug-card.is-archived { opacity: .6; }
.lx-ug-pick { width: min(820px, 82vw); max-width: 100%; }
.lx-ug-actions { flex-wrap: wrap; position: sticky; top: 0; z-index: 2; background: var(--surface, #161411); }
.lx-ug-edit { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 16px; padding: 0 16px 20px; align-items: start; }
.lx-ug-form { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lx-ug-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lx-ug-party__name { font-size: 14px; }
.lx-ug-picker { position: relative; }
.lx-ug-picklist { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; background: #1e1b17; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); max-height: 280px; overflow: auto; }
.lx-ug-pick__item { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; padding: 8px 12px; cursor: pointer; }
.lx-ug-pick__item:hover, .lx-ug-pick__item:focus { background: #2a2620; }
.lx-ug-pick__item small { color: var(--muted); font-size: 11.5px; }
.lx-ug-details summary { cursor: pointer; color: var(--text-2); font-size: 13px; margin: 2px 0 6px; }
.lx-ug-party__fields { display: flex; flex-direction: column; gap: 6px; }
.lx-ug-missing { font-size: 12.5px; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); }
.lx-ug-missing:empty { display: none; }
.lx-paper { background: #fff; color: #111; border-radius: 6px; padding: 36px 44px; font: 13px/1.6 "Times New Roman", Georgia, serif; box-shadow: 0 2px 18px rgba(0,0,0,.35); max-width: 820px; width: 100%; margin: 0 auto; overflow-wrap: anywhere; }
.lx-paper h1 { font-size: 19px; margin: 0 0 4px; letter-spacing: .5px; }
.lx-paper h2 { font-size: 16px; }
.lx-paper h3 { font-size: 13.5px; margin: 16px 0 4px; }
.lx-paper p { margin: 0 0 8px; text-align: justify; }
.lx-paper table { width: 100%; }
.lx-paper .lx-ph { background: #fff3c4; color: #8a5a00; border-radius: 3px; padding: 0 3px; font-family: Arial, sans-serif; font-size: 11.5px; }
.lx-doc { display: flex; flex-direction: column; gap: 8px; }
.lx-doc__tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #1b1916; position: sticky; top: 52px; z-index: 1; }
.lx-doc__tools select { max-width: 220px; }
.lx-doc__area { min-height: 420px; outline: none; }
.lx-doc__area:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 2px 18px rgba(0,0,0,.35); }
.lx-ug-fields { display: flex; flex-direction: column; gap: 6px; }
.lx-ug-fieldrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
.lx-ug-fieldrow > :nth-child(3), .lx-ug-fieldrow > :nth-child(4) { grid-column: 1 / -1; }
.lx-ug-fieldrow > :nth-child(5), .lx-ug-fieldrow > :nth-child(6) { justify-self: start; }
.lx-ug-key { font-size: 11px; color: var(--accent); align-self: center; white-space: nowrap; }
.lc-card--contract { border-left-color: var(--accent); }
@media (max-width: 900px) {
  .lx-ug-edit { grid-template-columns: 1fr; }
  .lx-paper { padding: 20px 16px; }
}
@media (max-width: 760px) {
  .lx-ug { flex-direction: column; }
  .lx-ug > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #252320; padding: 6px; flex-shrink: 0; }
  .lx-ug > .lx-side .lx-side__item { white-space: nowrap; }
  .lx-ug > .lx-side .lx-side__sep { display: none; }
  .lx-ug-pick { width: auto; }
}

/* ---------- 1.16 Mrežni disk ---------- */
.lx-dav-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.lx-dav-row > span { min-width: 120px; color: var(--muted); }
.lx-dav-row code { background: #1b1916; padding: 4px 8px; border-radius: 6px; user-select: all; word-break: break-all; }
.lx-dav-list { display: flex; flex-direction: column; gap: 8px; }
.lx-dav-pass { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; flex-wrap: wrap; }
.lx-dav-secret { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lx-dav-secret code { font-size: 20px; letter-spacing: 1px; background: #1b1916; padding: 10px 14px; border-radius: 10px; user-select: all; color: var(--accent); }
.lx-dav-os { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.lx-dav-os summary { cursor: pointer; font-weight: 600; }
.lx-dav-os ol { margin: 10px 0 0; }
.lx-dav-os code { background: #1b1916; padding: 1px 6px; border-radius: 4px; word-break: break-all; }

/* 1.17: izbor stila (Klasičan / Staklo) i rasporeda trake u Podešavanja → Izgled */
.lx-look-styles, .lx-look-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lx-look-style, .lx-look-layout { display: flex; flex-direction: column; gap: 3px; padding: 10px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.lx-look-style:hover, .lx-look-layout:hover { border-color: #4a443a; }
.lx-look-style.is-active, .lx-look-layout.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent); }
.lx-look-style b, .lx-look-layout b { font-size: 13px; margin-top: 6px; }
.lx-look-style small, .lx-look-layout small { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.lx-look-style__demo, .lx-look-layout__demo { position: relative; display: block; height: 74px; border-radius: 8px; overflow: hidden; background: url("wallpapers/dusk-mini.webp") center / cover; }
.lx-look-style__demo i { position: absolute; border-radius: 6px; background: #1a1814; border: 1px solid #34302a; }
.lx-look-style__demo i:first-child { left: 12%; top: 16%; width: 52%; height: 62%; }
.lx-look-style__demo i:last-child { left: 40%; top: 32%; width: 48%; height: 56%; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.lx-look-style.is-glass .lx-look-style__demo i { background: rgba(20, 18, 15, .45); border-color: rgba(255, 244, 226, .2); backdrop-filter: blur(6px) brightness(.8); -webkit-backdrop-filter: blur(6px) brightness(.8); }
.lx-look-layout__demo i { position: absolute; background: rgba(16, 14, 11, .75); border: 1px solid rgba(255, 244, 226, .18); }
.lx-look-layout__demo.is-bar i { left: 0; right: 0; bottom: 0; height: 12px; border-width: 1px 0 0; }
.lx-look-layout__demo.is-float i { left: 26%; right: 26%; bottom: 6px; height: 12px; border-radius: 6px; }
.lx-look-layout__demo.is-dock i { left: 6px; top: 14%; bottom: 14%; width: 12px; border-radius: 6px; }

/* ---------- 1.17: Pregled (dashboard) i grafikoni ---------- */
.lx-tone--accent, .lx-ch--accent { --tone: var(--accent); }
.lx-tone--ok, .lx-ch--ok { --tone: var(--ok); }
.lx-tone--info, .lx-ch--info { --tone: #8fb3e8; }
.lx-tone--violet, .lx-ch--violet { --tone: #b49ad6; }
.lx-tone--warn, .lx-ch--warn { --tone: var(--warn); }
.lx-tone--bad, .lx-ch--bad { --tone: var(--bad); }
.lx-tone--muted, .lx-ch--muted { --tone: var(--muted); }

.lx-ov { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.lx-ov__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.lx-ov__hello h2 { margin: 0; font-size: 25px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.lx-ov__nav { display: flex; align-items: center; gap: 2px; margin: 4px 0 0 -8px; color: var(--text-2); font-size: 13px; }
.lx-ov__nav .lx-btn--icon { width: 30px; min-height: 30px; }
.lx-ov__label { padding: 0 4px; font-weight: 500; }
.lx-ov__tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-ov__tools .lx-seg button { padding: 0 12px; }
.lx-ov__brand { width: auto; min-height: 36px; }
.lx-ov__tools a.lx-btn { text-decoration: none; }
.lx-ov__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.lx-ov__main { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: 12px; align-items: stretch; }
.lx-ov__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container (max-width: 860px) { .lx-ov__main, .lx-ov__cols { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 520px) {
  .lx-ov { padding: 14px 12px 18px; } .lx-ov__hello h2 { font-size: 21px; }
  .lx-ov__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lx-ov__kpis .lx-dcard { padding: 12px; gap: 8px; }
  .lx-ov__kpis .lx-dcard__icon { display: none; }
  .lx-ov__kpis .lx-dcard__row { flex-direction: column; align-items: stretch; gap: 6px; }
  .lx-ov__kpis .lx-dcard__value { font-size: 20px; }
  .lx-ov__kpis .lx-spark { flex: none; width: 100%; max-width: none; height: 28px; }
}

.lx-dcard { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lx-dcard:hover { border-color: var(--line-2); }
.lx-ov__kpis .lx-dcard:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.lx-dcard__top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lx-dcard__icon { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.lx-dcard__icon svg { width: 16px; height: 16px; }
.lx-dcard__label { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-dcard__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.lx-dcard__row > div { min-width: 0; }
.lx-dcard__value { display: block; font-size: 24px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lx-dcard__sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.lx-dcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lx-dcard__head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.lx-dcard__head small { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }
.lx-dchip { flex-shrink: 0; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-dchip.is-up { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.lx-dchip.is-down { color: var(--bad); background: color-mix(in srgb, var(--bad) 14%, transparent); }
.lx-dchip.is-flat { color: var(--muted); background: rgba(255, 244, 226, .06); font-weight: 500; }
.lx-dchip--wide { height: 26px; padding: 0 10px; }

.lx-spark { flex: 0 1 120px; min-width: 56px; height: 40px; overflow: visible; }
.lx-spark__line { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linecap: round; }
.lx-spark__s1 { stop-color: var(--tone); stop-opacity: .32; }
.lx-spark__s2 { stop-color: var(--tone); stop-opacity: 0; }

.lx-ch { position: relative; }
.lx-ch-tip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; min-width: 120px; pointer-events: none;
  background: rgba(24, 21, 18, .95); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); font-size: 12px; color: var(--text-2); white-space: nowrap; }
.lx-ch-tip b { color: var(--text); font-weight: 600; }
.lx-ch-tip span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.lx-ch-tip i { width: 8px; height: 8px; border-radius: 2px; background: var(--tone); }
.lx-ch-tip small { color: var(--muted); }
.lx-cols__track { fill: rgba(255, 244, 226, .035); }
.lx-cols__bar { fill: color-mix(in srgb, var(--text) 30%, transparent); transform-box: fill-box; transform-origin: 50% 100%; animation: lx-grow .7s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 28ms); transition: fill .15s; }
.lx-cols__g:hover .lx-cols__bar { fill: color-mix(in srgb, var(--text) 48%, transparent); }
.lx-cols__g.is-now .lx-cols__bar { fill: var(--accent); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 45%, transparent)); }
.lx-cols__g.is-future .lx-cols__track { opacity: .45; }
.lx-cols__prev { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.lx-cols__val { fill: var(--accent); font: 600 11.5px var(--font); }
.lx-chart__axis.is-now { fill: var(--accent); font-weight: 600; }
@keyframes lx-grow { from { transform: scaleY(0); } to { transform: none; } }
.lx-line__path { fill: none; stroke: var(--tone); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lx-line__path.is-dashed { stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .7; }
.lx-line__s1 { stop-color: var(--tone); stop-opacity: .26; }
.lx-line__s2 { stop-color: var(--tone); stop-opacity: 0; }
.lx-line__cross { stroke: rgba(255, 244, 226, .22); stroke-dasharray: 3 3; }
.lx-line__dot { fill: var(--tone); stroke: var(--surface); stroke-width: 2; }
.lx-legend { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.lx-legend__sw.lx-ch--accent, .lx-legend__sw.lx-ch--ok, .lx-legend__sw.lx-ch--bad { background: var(--tone); margin-left: 6px; }
.lx-legend__sw--dash { background: none !important; border-top: 2px dashed var(--muted); height: 0 !important; margin-left: 6px; }
.is-still .lx-rise, .is-still .lx-cols__bar, .is-still .lx-hbar__fill { animation: none; }

.lx-agenda__list, .lx-agenda__more { display: flex; flex-direction: column; gap: 6px; }
.lx-agenda__more > small { color: var(--muted); font-size: 11.5px; margin: 4px 0 0; }
.lx-agenda__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 10px; text-align: left; cursor: pointer;
  background: rgba(255, 244, 226, .03); border: 0; border-left: 3px solid var(--tone); border-radius: 4px 10px 10px 4px; color: var(--text); font: inherit; transition: background .15s; }
.lx-agenda__item:hover { background: rgba(255, 244, 226, .07); }
.lx-agenda__time { font: 500 12px var(--mono); color: var(--tone); }
.lx-agenda__what b { display: block; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-agenda__what small { display: block; color: var(--muted); font-size: 11.5px; }
.lx-agenda__none { margin: 0; color: var(--muted); font-size: 13px; }
.lx-hbar__fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent)); transform-origin: left; animation: lx-grow-x .7s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes lx-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .lx-cols__bar, .lx-hbar__fill, .lx-dcard { animation: none; transition: none; } }

/* ---------- 1.18: Brendovi i sajtovi ---------- */
.lx-br-side { width: 210px; }
.lx-br-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.lx-br-health { display: inline-flex; gap: 3px; }
.lx-br-health i, .lx-br-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.lx-br-health i.is-ok, .lx-br-pill.is-ok i { background: var(--ok); }
.lx-br-health i.is-bad, .lx-br-pill.is-bad i { background: var(--bad); }
.lx-side__label { margin: 12px 10px 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lx-side__spacer { flex: 1; min-height: 12px; }
.lx-br-new { margin: 4px 2px 2px; }
.lx-br { padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.lx-br-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lx-br-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.lx-br-head p { margin: 3px 0 0; }
.lx-br-head a { color: var(--text-2); text-decoration: none; }
.lx-br-head a:hover { color: var(--accent); }
.lx-br-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lx-br-mark { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 11px; color: #14120f; font-weight: 700; font-size: 13px; letter-spacing: -.02em; }
.lx-br-mark.is-big { width: 48px; height: 48px; border-radius: 14px; font-size: 16px; }
.lx-br-tabs { border-bottom: 1px solid var(--line); padding-bottom: 8px; flex-wrap: wrap; }
.lx-br-tabs .lx-tab { display: inline-flex; align-items: center; gap: 6px; }
.lx-br-tabs .lx-tab svg { width: 14px; height: 14px; }
.lx-br-body { display: flex; flex-direction: column; gap: 14px; }
.lx-br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.lx-br-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.lx-br-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand); opacity: .85; }
.lx-br-card:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.lx-br-card__open { position: absolute; inset: 0; z-index: 1; background: none; border: 0; cursor: pointer; border-radius: 16px; }
.lx-br-card__open:focus-visible { outline-offset: -2px; }
.lx-br-card__top { display: flex; align-items: center; gap: 12px; }
.lx-br-card__top b { display: block; font-size: 15px; }
.lx-br-card__top small { display: block; color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-br-card__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lx-br-card__metrics small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-br-card__metrics b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-br-card__none { margin: 0; color: var(--muted); font-size: 13px; }
.lx-br-card__alert { display: flex; align-items: center; gap: 6px; color: var(--warn); font-size: 12.5px; }
.lx-br-card__alert svg { width: 14px; height: 14px; flex-shrink: 0; }
.lx-br-card__foot { display: flex; gap: 6px; flex-wrap: wrap; }
.lx-br-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: rgba(255, 244, 226, .05); color: var(--text-2); font-size: 11.5px; white-space: nowrap; }
.lx-br-pill small { color: var(--muted); }
.lx-br-site { display: flex; flex-direction: column; gap: 12px; }
.lx-br-site + .lx-br-site { border-top: 1px solid var(--line); padding-top: 16px; }
.lx-br-site__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lx-br-site__head h3 { margin: 0 0 3px; font-size: 15px; }
.lx-br-site__head small { color: var(--muted); font-size: 12px; }
.lx-br-data { display: flex; flex-direction: column; gap: 12px; }
.lx-br-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.lx-br-metric { text-decoration: none; color: inherit; }
a.lx-br-metric:hover { border-color: var(--line-2); }
.lx-br-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.lx-br-items { display: flex; flex-direction: column; }
.lx-br-item { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.lx-br-item:first-child { border-top: 0; }
a.lx-br-item:hover { background: rgba(255, 244, 226, .04); }
.lx-br-item__main { flex: 1; min-width: 0; }
.lx-br-item__main b, .lx-br-item__main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-br-item__main b { font-size: 13px; font-weight: 500; }
.lx-br-item__main small, .lx-br-item__side small { color: var(--muted); font-size: 11.5px; }
.lx-br-item__side { text-align: right; flex-shrink: 0; }
.lx-br-item__side b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
.lx-br-events { display: flex; flex-direction: column; gap: 8px; }
.lx-br-event { display: flex; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--tone, var(--muted)); border-radius: 6px 12px 12px 6px; --tone: #8fb3e8; }
.lx-br-event.is-ok { --tone: var(--ok); } .lx-br-event.is-warn { --tone: var(--warn); } .lx-br-event.is-bad { --tone: var(--bad); }
.lx-br-event__icon { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, transparent); }
.lx-br-event__icon svg { width: 15px; height: 15px; }
.lx-br-event__main { flex: 1; min-width: 0; }
.lx-br-event__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lx-br-event__top b { font-size: 13.5px; }
.lx-br-event__top small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lx-br-event p { margin: 4px 0 0; color: var(--text-2); font-size: 13px; white-space: pre-wrap; }
.lx-br-event dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 12.5px; }
.lx-br-event dt { color: var(--muted); }
.lx-br-event dd { margin: 0; }
.lx-br-event__foot { display: flex; gap: 12px; align-items: center; margin-top: 6px; font-size: 12px; }
.lx-br-event__foot code { color: var(--muted); }
.lx-br-event__foot a { color: var(--accent); text-decoration: none; }
.lx-br-links__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lx-br-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.lx-br-link__main { flex: 1; min-width: 200px; }
.lx-br-link__main b, .lx-br-link__main small { display: block; }
.lx-br-link__main small { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.lx-br-editor { display: flex; flex-direction: column; gap: 14px; max-width: 900px; }
.lx-br-editor__head { display: flex; align-items: center; gap: 8px; }
.lx-br-editor__head h3 { margin: 0; font-size: 16px; }
.lx-br-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lx-br-row a.lx-btn { text-decoration: none; }
.lx-br-map h4, .lx-br-test h4 { margin: 8px 0 6px; font-size: 13px; color: var(--text-2); }
.lx-br-maprows { display: flex; flex-direction: column; gap: 6px; }
.lx-br-maprow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 130px 80px 36px; gap: 6px; }
.lx-br-listmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 10px; }
.lx-br-test { display: flex; flex-direction: column; gap: 10px; }
.lx-br-test:empty { display: none; }
.lx-br-fields { display: flex; flex-direction: column; max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.lx-br-field { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 6px 4px 10px; border-top: 1px solid var(--line); font-size: 12.5px; }
.lx-br-field:first-child { border-top: 0; }
.lx-br-field code { overflow-wrap: anywhere; }
.lx-br-field span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx-br-field.is-object .lx-btn { visibility: hidden; }
.lx-br-field .lx-btn { min-height: 28px; padding: 0 8px; }
.lx-br-raw pre { max-height: 300px; overflow: auto; margin: 6px 0 0; padding: 10px; background: rgba(0, 0, 0, .25); border-radius: 8px; font-size: 12px; white-space: pre-wrap; }
.lx-br-raw summary { cursor: pointer; color: var(--text-2); font-size: 13px; }
.lx-br-hook { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.lx-br-hook h3 { margin: 0; font-size: 15px; }
.lx-br-hook p { margin: 0; }
.lx-banner--info { background: color-mix(in srgb, #8fb3e8 12%, transparent); border-color: transparent; }
@container (max-width: 620px) { .lx-br-maprow { grid-template-columns: 1fr 1fr; } .lx-br-card__metrics b { font-size: 16px; } }
@media (max-width: 760px) {
  .lx-brs { flex-direction: column; }
  .lx-brs > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; flex-shrink: 0; }
  .lx-brs > .lx-side .lx-side__item { width: auto; flex-shrink: 0; white-space: nowrap; }
  .lx-brs > .lx-side .lx-side__sep, .lx-brs > .lx-side .lx-side__spacer, .lx-brs > .lx-side .lx-side__label { display: none; }
  .lx-brs > .lx-side .lx-br-new { flex-shrink: 0; margin: 0; }
  .lx-br { padding: 14px 12px 20px; }
}
.lx-br-metric .lx-dcard__top { align-items: flex-start; }
.lx-br-metric .lx-dcard__label { white-space: normal; line-height: 1.3; }
.lx-br-editor .lx-seg { align-self: flex-start; }
.lx-br-card__metrics b { font-size: 16px; }

/* ---------- 1.19: Troškovi ---------- */
.lx-ex { padding: 18px 20px 24px; container-type: inline-size; }
.lx-ex-body { display: flex; flex-direction: column; gap: 14px; }
.lx-ex-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lx-ex-head h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.lx-ex-head p { margin: 3px 0 0; max-width: 680px; }
.lx-ex-new { margin: 4px 2px 2px; }
.lx-ex-intro { margin: 0; max-width: 760px; }
.lx-ex-tools { padding: 0; border: 0; flex-wrap: wrap; gap: 8px; }
.lx-ex-tools .lx-input { width: auto; min-width: 0; }
.lx-ex-tools input[type=search] { width: 200px; }
.lx-ex-table tbody tr { cursor: pointer; }
.lx-ex-table tr.is-invoice td { color: var(--text-2); }
.lx-ex-what b { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.lx-ex-what small, .lx-ex-orig { display: block; color: var(--muted); font-size: 11.5px; }
.lx-ex-clip { display: inline-flex; color: var(--muted); }
.lx-ex-clip svg { width: 13px; height: 13px; }
.lx-ex-cat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lx-ex-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.lx-ex-actions { white-space: nowrap; }
.lx-ex-actions .lx-btn { min-height: 30px; padding: 0 10px; margin-left: 4px; }
.lx-ex-total { display: flex; justify-content: space-between; gap: 10px; padding: 2px 4px; color: var(--muted); font-size: 13px; }
.lx-ex-total b { color: var(--text); font-family: var(--mono); font-weight: 500; }
.lx-ex-mine { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.lx-ex-mine:empty { display: none; }
.lx-ex-mine small { display: block; color: var(--muted); font-size: 12px; }
.lx-ex-mine b { font-size: 20px; font-weight: 600; }
.lx-ex-mine .lx-btn { margin-left: auto; }
.lx-ex-budget { display: flex; flex-direction: column; gap: 5px; padding: 4px 0 8px; }
.lx-ex-budget + .lx-ex-budget { border-top: 1px solid var(--line); padding-top: 10px; }
.lx-ex-budget__top { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.lx-ex-budget__top small { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.lx-ex-budget__bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.lx-ex-budget__bar i { display: block; height: 100%; border-radius: 999px; background: var(--ok); transform-origin: left; animation: lx-grow-x .7s cubic-bezier(.2, .9, .25, 1) both; }
.lx-ex-budget__bar.is-warn i { background: var(--warn); }
.lx-ex-budget__bar.is-over i { background: var(--bad); }
.lx-ex-budget__pct { color: var(--muted); font-size: 11.5px; }
.lx-ex-budget__pct.is-over { color: var(--bad); }
.lx-ex-budgets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.lx-ex-soon { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; width: 100%; padding: 7px 4px; background: none; border: 0; border-top: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.lx-ex-soon:first-of-type { border-top: 0; }
.lx-ex-soon:hover { background: rgba(255, 244, 226, .04); }
.lx-ex-soon__when { font: 12px var(--mono); color: var(--muted); }
.lx-ex-soon__when.is-late { color: var(--bad); }
.lx-ex-soon__what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; }
.lx-ex-soon b { font: 500 12.5px var(--mono); }
.lx-ex-detail { display: flex; flex-direction: column; gap: 12px; }
.lx-ex-detail h4 { margin: 4px 0 0; font-size: 13px; color: var(--text-2); }
.lx-ex-detail__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lx-ex-detail__amount { font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.lx-ex-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.lx-ex-kv span { display: block; color: var(--muted); font-size: 11.5px; }
.lx-ex-kv b { font-weight: 500; font-size: 13.5px; }
.lx-ex-note { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; font-size: 13px; white-space: pre-wrap; }
.lx-ex-files { display: flex; gap: 10px; flex-wrap: wrap; }
.lx-ex-file { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 112px; }
.lx-ex-file img, .lx-ex-file__pdf { width: 112px; height: 112px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); }
.lx-ex-file__pdf svg { width: 30px; height: 30px; }
.lx-ex-file small { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.lx-ex-file__open { display: contents; color: inherit; text-decoration: none; }
.lx-ex-file > .lx-btn { position: absolute; top: 4px; right: 4px; width: 26px; min-height: 26px; background: rgba(14, 12, 9, .75); }
.lx-ex-file--add { cursor: pointer; }
.lx-ex-file--add .lx-ex-file__pdf { border-style: dashed; color: var(--accent); }
.lx-ex-file--add:hover .lx-ex-file__pdf { border-color: var(--accent); }
.lx-ex-cats { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.lx-ex-catrow { display: flex; align-items: center; gap: 10px; }
.lx-ex-catrow.is-muted { opacity: .55; }
.lx-ex-color { position: relative; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; cursor: pointer; overflow: hidden; }
.lx-ex-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
tr.is-muted td { opacity: .55; }
@container (max-width: 640px) { .lx-ex-col-cat, .lx-ex-col-who { display: none; } .lx-ex-tools input[type=search] { width: 100%; } }
@media (max-width: 760px) {
  .lx-exs { flex-direction: column; }
  .lx-exs > .lx-side { width: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; flex-shrink: 0; }
  .lx-exs > .lx-side .lx-side__item { width: auto; flex-shrink: 0; white-space: nowrap; }
  .lx-exs > .lx-side .lx-side__sep, .lx-exs > .lx-side .lx-side__spacer { display: none; }
  .lx-exs > .lx-side .lx-ex-new { flex-shrink: 0; margin: 0; }
  .lx-ex { padding: 14px 12px 20px; }
}
/* uzak prozor / telefon: spisak troškova kao kartice */
@container (max-width: 520px) {
  .lx-ex-table thead { display: none; }
  .lx-ex-table, .lx-ex-table tbody { display: block; }
  .lx-ex-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-top: 1px solid var(--line); }
  .lx-ex-table td { display: block; padding: 0; border: 0; }
  .lx-ex-table td:first-child { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 11.5px; }
  .lx-ex-table td:nth-child(2) { grid-column: 1; grid-row: 1; }
  .lx-ex-table td.num { grid-column: 2; grid-row: 1; }
  .lx-ex-table td:has(> .lx-status) { grid-column: 2; grid-row: 2; justify-self: end; }
  .lx-ex-table td.lx-ex-actions { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .lx-ex-table td.lx-ex-col-who { display: block; grid-column: 1; grid-row: 3; color: var(--muted); font-size: 12px; }
  .lx-ex-table td.lx-ex-col-cat { display: none; }
}
/* Pregled: 5–6 kartica (sa Troškovima i Dobiti) u dva reda po tri */
.lx-ov__kpis.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 700px) { .lx-ov__kpis.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); } }