/*
 * The structure of each look, one block per copied app (js/looks/*.js,
 * istrazivanje/svjetske/KOSTURI.md). Colours and fonts come from themes.css;
 * this file is only loaded by the demo, never by the live app.
 */

/* ================= the shell every look uses ================= */
.ibtn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: inherit; flex-shrink: 0; }
.ibtn[tabindex="-1"] { cursor: default; }
.lnav { display: flex; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); position: relative; z-index: 3; }
.single .lnav { padding-bottom: calc(4px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))); }
.lnav-b { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 54px; color: var(--faint); font-size: 11.5px; font-weight: 600; }
.lnav-b .ico { position: relative; display: flex; }
.lnav-b .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }
.lnav-b.on { color: var(--primary); font-weight: 750; }
.lnav .dot, .ldrawer .dot { position: absolute; top: -1px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #E5302A; box-shadow: 0 0 0 2px var(--surface); }
.lnav .num { position: absolute; top: -6px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #E5302A; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ldrawer { position: absolute; inset: 0; z-index: 8; }
.ldrawer-scrim { position: absolute; inset: 0; width: 100%; background: rgba(0, 0, 0, 0.42); }
.ldrawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: 82%; max-width: 320px; background: var(--surface); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; overflow-y: auto; animation: ld-in 0.2s ease-out; }
@keyframes ld-in { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .ldrawer-panel { animation: none; } }
.ldrawer-list { padding: 8px 0 20px; }
.ldrawer-i { width: 100%; display: flex; align-items: center; gap: 22px; min-height: 50px; padding: 0 22px; font-size: 15px; font-weight: 600; color: var(--ink); text-align: left; }
.ldrawer-i .ico { position: relative; display: flex; color: var(--muted); }
.ldrawer-i.on { color: var(--primary); background: var(--primary-soft); }
.ldrawer-i.on .ico { color: var(--primary); }

.cal-d { width: 44px; text-align: center; flex-shrink: 0; }
.cal-d b { display: block; font-size: 20px; line-height: 22px; }
.cal-d span { font-size: 12px; color: var(--muted); }

/* tallies on the teacher's screens */
.bw-tally, .pz-tally, .fm-tally { display: flex; gap: 8px; margin: 12px 0; }
.bw-tally span, .pz-tally span, .fm-tally span { flex: 1; min-width: 0; text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--surface); font-size: 12px; color: var(--muted); }
.bw-tally b, .pz-tally b, .fm-tally b { display: block; font-size: 20px; line-height: 24px; color: var(--ink); }

/* the sign-in kiosk (Procare, brightwheel) */
.kiosk { padding: 20px 16px 24px; text-align: center; }
.kiosk .kq { font-size: 15px; margin: 6px 0 12px; }
.kiosk .qr { width: 160px; aspect-ratio: 1; margin: 0 auto 18px; padding: 10px; background: #fff; display: grid; grid-template-columns: repeat(21, 1fr); border-radius: 4px; }
.kiosk .qr i.b { background: #1B1B1B; }
.kdots { display: flex; justify-content: center; gap: 14px; margin: 4px 0 16px; }
.kdots i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.75); }
.kdots i.on { background: #fff; border-color: #fff; }
.kdone { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 14px; padding: 8px 12px; max-width: 300px; border-radius: 10px; background: #fff; color: var(--ok); font-size: 14px; font-weight: 700; }
.kpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 264px; margin: 0 auto; }
.kpad button { height: 54px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 8px; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; }

/* ================= Procare (sunce) ================= */
html[data-theme="sunce"] .phone { background: #F4F6F7; }
.pc-bar { display: flex; align-items: center; gap: 2px; min-height: 56px; padding: 4px 6px; background: var(--sun); color: #fff; flex-shrink: 0; }
.pc-bar h1 { flex: 1; min-width: 0; margin: 0 0 0 6px; font-size: 20px; font-weight: 400; display: flex; align-items: center; gap: 2px; white-space: nowrap; overflow: hidden; }
.pc-bar.pc-clear { background: transparent; }
.pc-two { display: flex; flex-direction: column; line-height: 1.2; }
.pc-two b { font-size: 17px; font-weight: 600; }
.pc-two span { font-size: 12.5px; opacity: 0.9; }
.pc-scroll { padding: 0 0 40px; }
.pc-hero { background: var(--sun); color: #fff; text-align: center; padding-bottom: 58px; }
.pc-hero .face { margin: 0 auto; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9); }
.pc-name { margin: 14px 0 0; font-size: 30px; line-height: 36px; font-weight: 300; }
.pc-ic { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pc-ic span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-ic.on { background: #fff; }
.pc-card { position: relative; margin: -44px 12px 0; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(30, 60, 70, 0.12); padding: 0 0 20px; }
.pc-range { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; text-align: left; font-size: 15px; line-height: 20px; color: var(--ink); border-bottom: 1px solid #E7ECEE; }
.pc-range svg { color: var(--muted); flex-shrink: 0; }
.pc-pick { border-bottom: 1px solid #E7ECEE; padding: 4px 0; }
.pc-pick button { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 16px; font-size: 15px; text-align: left; }
.pc-pick button.on { color: var(--primary); font-weight: 700; }
.pc-today { display: inline-block; margin: 14px 16px 4px; padding: 3px 12px; border-radius: 999px; background: #FFF6C8; border: 1px solid #F0D24A; color: #7A5E00; font-size: 13px; font-weight: 600; }
.pc-line { position: relative; padding: 0 14px 0 12px; }
.pc-line::before { content: ''; position: absolute; left: 33px; top: 0; bottom: 0; width: 2px; background: #E3EAEC; }
.pc-ev { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; margin-top: 12px; }
.pc-ev-ico { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 6px; background: #fff; border: 1px solid #E3EAEC; display: flex; align-items: center; justify-content: center; color: var(--k); }
.pc-ev-card { background: #fff; border: 1px solid #E8EDEF; border-radius: 4px; box-shadow: 0 2px 6px rgba(30, 60, 70, 0.08); padding: 10px 12px 12px; }
.pc-ev-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pc-ev-top b { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; }
.pc-ev-top time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pc-ev-card p { margin: 4px 0 0; font-size: 14.5px; line-height: 20px; color: #3A464D; }
.pc-shots, .bw-shots { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 3px; width: 100%; height: 150px; margin-top: 10px; border-radius: 4px; overflow: hidden; }
.pc-shots img, .bw-shots img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 0; }
.pc-shots.n1, .bw-shots.n1 { grid-template-columns: 1fr; }
.pc-shots.n3 img:first-child, .bw-shots.n3 img:first-child { grid-row: span 2; }
.pc-empty { margin: 16px; color: var(--muted); font-size: 14px; }
.pc-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pc-gal button { position: relative; aspect-ratio: 1; overflow: hidden; }
.pc-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-gal i { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 2px #fff; }
.pc-dhead { display: flex; flex-direction: column; gap: 3px; padding: 30px 20px 18px; background: var(--sun); color: #fff; }
.pc-dhead .avatar, .pc-dhead .face { margin-bottom: 10px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
.pc-dhead b { font-size: 17px; }
.pc-dhead span { font-size: 13px; opacity: 0.9; }
.pc-page { padding: 16px 14px; }
.pc-search { display: flex; align-items: center; gap: 8px; margin: 12px; padding: 0 10px; background: #fff; border: 1px solid #DDE5E7; border-radius: 4px; color: var(--muted); }
.pc-search .field { border: 0; min-height: 44px; padding: 0; background: transparent; font-size: 15px; }
.pc-incoming { margin: 0 12px 12px; }
.pc-roster { display: flex; margin: 0 12px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(30, 60, 70, 0.08); }
.pc-list { flex: 1; min-width: 0; }
.pc-kid { width: 100%; display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 12px; border-bottom: 1px solid #EEF2F3; text-align: left; }
.pc-kid b { display: block; font-size: 15.5px; font-weight: 600; }
.pc-kid .grow span { display: block; font-size: 12.5px; color: var(--muted); }
.pc-kf { position: relative; display: flex; }
.pc-kf i { position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border-radius: 50%; background: #2BB24C; box-shadow: 0 0 0 2px #fff; }
.pc-flag { font-size: 11.5px; font-weight: 700; color: #7A5E00; background: #FFF6C8; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pc-az { width: 16px; display: flex; flex-direction: column; justify-content: space-around; padding: 8px 0; font-size: 10px; color: #9AA7AD; text-align: center; }
.pc-sheet { position: absolute; inset: 0; z-index: 7; }
.pc-scrim { position: absolute; inset: 0; width: 100%; background: rgba(0, 0, 0, 0.35); }
.pc-menu { position: absolute; left: 28px; right: 28px; top: 28%; background: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); padding: 6px 0; }
.pc-menu-h { display: flex; align-items: center; gap: 12px; padding: 10px 18px 12px; border-bottom: 1px solid #EEF2F3; font-size: 16px; }
.pc-menu button { width: 100%; display: flex; align-items: center; gap: 16px; min-height: 50px; padding: 0 18px; font-size: 15.5px; text-align: left; }
.pc-menu button svg { color: var(--primary); }
.pc-hint { margin: 12px; padding: 10px 14px; background: #E6F7F9; color: #2C5B61; border-radius: 3px; font-size: 13.5px; }
.pc-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; padding: 8px 12px 6px; }
.pc-act { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; color: #52646B; }
.pc-act span { width: 58px; height: 58px; border-radius: 50%; background: #fff; border: 1.5px solid #CFE7EA; color: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); }
.pc-act.on { color: var(--primary); font-weight: 700; }
.pc-act.on span { background: var(--primary); border-color: var(--primary); color: #fff; }
.pc-form { margin: 14px 12px 0; padding: 2px 14px 16px; background: #fff; border-radius: 4px; box-shadow: 0 2px 8px rgba(30, 60, 70, 0.08); }
.pc-tabs { display: flex; background: var(--sun); flex-shrink: 0; }
.pc-tabs button { flex: 1; min-height: 44px; color: rgba(255, 255, 255, 0.78); font-size: 14px; font-weight: 600; border-bottom: 3px solid transparent; }
.pc-tabs button.on { color: #fff; border-bottom-color: #fff; }
.pc-th, .pc-note { width: 100%; display: flex; gap: 12px; padding: 12px 14px; background: #fff; border-bottom: 1px solid #EEF2F3; text-align: left; }
.pc-th-h, .pc-note-h { display: flex; justify-content: space-between; gap: 8px; }
.pc-th-h b, .pc-note-h b { font-size: 15px; }
.pc-th time, .pc-note time { font-size: 12px; color: var(--muted); }
.pc-th-t { display: block; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-th-t.new { color: var(--ink); font-weight: 700; }
.pc-note p { margin: 4px 0 0; font-size: 14px; }
.pc-note p span { display: inline-block; width: 98px; color: var(--muted); font-size: 12.5px; }
.pc-src { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; font-size: 14px; font-weight: 700; color: var(--primary); }
.pc-pickgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 12px; }
.pc-pickgrid .pick { border-radius: 2px; }
.pc-tagged { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.pc-kiosk-wrap { flex: 1; overflow-y: auto; background: var(--sun); color: #fff; }

/* ================= brightwheel (profil) ================= */
html[data-theme="profil"] .phone { background: #fff; }
.bw-bar { display: flex; align-items: center; min-height: 54px; padding: 4px 6px; background: var(--bar); color: #fff; flex-shrink: 0; }
.bw-bar h1 { flex: 1; min-width: 0; margin: 0; text-align: center; font-size: 18px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; overflow: hidden; }
.bw-bar.bw-blurple { background: var(--blurple); }
.bw-scroll { padding: 0 0 40px; background: #fff; }
.bw-hero { position: relative; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bw-blur { position: absolute; inset: -24px; background-size: cover; background-position: center; filter: blur(14px) brightness(0.92); }
.bw-hero .face { position: relative; box-shadow: 0 0 0 4px #fff; }
.bw-acts { display: flex; border-bottom: 1px solid #E6EAEE; }
.bw-acts .act { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; font-size: 12.5px; color: #55575F; }
.bw-acts .act svg { color: #8A8D94; }
.bw-acts .act-pickup svg { color: var(--bar); }
.bw-filter { position: relative; padding: 10px 12px; }
.bw-sel { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 12px; border: 1px solid #D5DBE1; border-radius: 4px; font-size: 14px; color: #55575F; background: #fff; }
.bw-pick { position: absolute; left: 12px; right: 12px; top: 52px; z-index: 3; background: #fff; border: 1px solid #D5DBE1; border-radius: 4px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); max-height: 320px; overflow-y: auto; }
.bw-pick button { width: 100%; min-height: 42px; padding: 0 12px; text-align: left; font-size: 14.5px; }
.bw-pick button.on { background: #E8F7F7; color: var(--primary); font-weight: 700; }
.bw-date { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: #EEF1F4; font-size: 13px; color: #6A6D75; }
.bw-rep { min-height: 28px; padding: 0 10px; border-radius: 3px; background: var(--blurple); color: #fff; font-size: 12px; font-weight: 700; }
.bw-row { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid #EEF1F4; }
.bw-dot { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bw-row b { display: block; font-size: 15px; font-weight: 700; }
.bw-row p { margin: 2px 0 0; font-size: 13.5px; line-height: 19px; color: #45474F; }
.bw-row time { display: block; margin-top: 3px; font-size: 12px; color: #8A8D94; }
.bw-shots { height: 140px; margin: 8px 0 2px; border-radius: 6px; }
.bw-empty { margin: 16px 12px; color: var(--muted); font-size: 14px; }
.bw-sheet { position: absolute; inset: 0; z-index: 7; display: flex; align-items: flex-end; }
.bw-scrim { position: absolute; inset: 0; width: 100%; background: rgba(0, 0, 0, 0.4); }
.bw-sheet-in { position: relative; width: 100%; background: #fff; border-radius: 14px 14px 0 0; padding: 8px 16px 26px; }
.bw-sheet-h { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 6px 0 10px; border-bottom: 1px solid #EEF1F4; }
.bw-sheet-h b { font-size: 17px; }
.bw-sheet-h span { grid-row: 2; font-size: 13px; color: var(--muted); }
.bw-sheet-h .ibtn { grid-row: 1 / 3; grid-column: 2; }
.bw-rr { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #EEF1F4; font-size: 14px; }
.bw-rr span { width: 92px; flex-shrink: 0; color: var(--muted); }
.bw-rr b { font-weight: 600; }
.bw-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.bw-gal button { aspect-ratio: 1; overflow: hidden; }
.bw-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-dhead { display: flex; align-items: center; gap: 12px; padding: 30px 18px 16px; background: var(--bar); color: #fff; }
.bw-dhead b { display: block; font-size: 16px; }
.bw-dhead span span { display: block; font-size: 12.5px; opacity: 0.9; }
.bw-page { padding: 16px 14px; }
.bw-incoming { margin: 12px 12px 0; }
.bw-grp-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 4px 12px; font-size: 13.5px; color: var(--muted); }
.bw-students { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 8px; padding: 8px 12px 96px; }
.bw-st { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.bw-st-f { position: relative; display: flex; }
.bw-st-f i { position: absolute; right: -2px; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--bar); color: #fff; display: none; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.bw-st.on .face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bar); }
.bw-st.on i { display: flex; }
.bw-st.off { opacity: 0.5; cursor: default; }
.bw-st em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--muted); text-align: center; line-height: 14px; }
.bw-fab { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 25px; background: var(--blurple); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(84, 99, 214, 0.35); }
.bw-tally { margin: 12px; }
.bw-tally span { background: #F1F4F8; }
.bw-ci-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: 1px solid #EEF1F4; }
.bw-ci-row .grow b { display: block; font-size: 15px; }
.bw-ci-row .grow span { display: block; font-size: 12.5px; color: var(--muted); }
.bw-ci-btn { min-height: 36px; padding: 0 16px; border-radius: 18px; background: var(--bar); color: #fff; font-size: 13.5px; font-weight: 700; }
.bw-ci-btn.out { background: #fff; color: #55575F; border: 1px solid #D5DBE1; }
.bw-abs { font-size: 12.5px; font-weight: 700; color: #C0392B; }
.bw-cr { color: var(--ok); }
.bw-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; padding: 16px 8px 10px; }
.bw-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #45474F; }
.bw-tile span { width: 58px; height: 58px; border-radius: 14px; color: #fff; display: flex; align-items: center; justify-content: center; }
.bw-tile.on span { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
html[data-theme="profil"] .lf, html[data-theme="profil"] .lg-save { margin: 0 12px; }
.bw-th { width: 100%; display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid #EEF1F4; text-align: left; }
.bw-th-h { display: flex; justify-content: space-between; gap: 8px; }
.bw-th-h b { font-size: 15px; }
.bw-th time { font-size: 12px; color: #8A8D94; }
.bw-th-s { display: block; font-size: 12.5px; color: var(--blurple); font-weight: 600; }
.bw-th-t { display: block; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-th-t.new { color: var(--ink); font-weight: 700; }
.bw-lp { padding: 16px 14px 10px; border-bottom: 1px solid #EEF1F4; }
.bw-lp-k { font-size: 12.5px; color: var(--blurple); font-weight: 700; }
.bw-lp h2 { margin: 2px 0; font-size: 20px; }
.bw-lp p { margin: 0; font-size: 14px; color: var(--muted); }
.bw-lp-d, .bw-cal { width: 44px; text-align: center; font-size: 12px; color: var(--muted); flex-shrink: 0; }
.bw-cal b { display: block; font-size: 20px; color: var(--ink); }
.bw-lp-d { font-weight: 700; color: var(--blurple); font-size: 13px; }
.bw-done { color: var(--ok); display: flex; }
.bw-kiosk-wrap { flex: 1; overflow-y: auto; background: var(--blurple); color: #fff; }
.bw-kiosk .kpad button { background: #fff; color: var(--ink); border: 0; border-radius: 6px; }
.bw-kiosk .kpad svg { color: var(--ink); }
.bw-bal { padding: 20px 16px 16px; text-align: center; }
.bw-bal span { display: block; font-size: 13px; color: var(--muted); }
.bw-bal b { display: block; font-size: 34px; line-height: 42px; }
.bw-pay .btn { background: var(--blurple); border-radius: 26px; }
.bw-h { margin: 22px 0 6px; font-size: 15px; }
html[data-theme="profil"] .lnav-b.on { color: var(--primary); }
/* brightwheel's chat: your own messages in its teal with your photo on the right, the other side grey */
html[data-theme="profil"] .bubble { background: #EEF1F4; color: var(--ink); border: 0; border-radius: 18px 18px 18px 4px; }
html[data-theme="profil"] .mine .bubble { background: var(--bar); color: #fff; border-radius: 18px 18px 4px 18px; }
html[data-theme="profil"] .msg-ava.me { display: block; }
html[data-theme="profil"] .ldrawer-i.on { background: #E3F6F6; }

/* ================= Stay Informed (vijesti) ================= */
html[data-theme="vijesti"] .phone { background: #F1F3F7; }
.si-tall { padding: 4px 8px 16px; background: var(--primary); color: #fff; flex-shrink: 0; }
.si-row { display: flex; align-items: center; }
.si-tall h1 { margin: 4px 10px 12px; font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.3px; }
.si-search { display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 0 12px; background: rgba(255, 255, 255, 0.16); border-radius: 10px; color: rgba(255, 255, 255, 0.85); }
.si-search .field { background: transparent; border: 0; color: #fff; min-height: 42px; padding: 0; font-size: 15px; }
.si-search .field::placeholder { color: rgba(255, 255, 255, 0.78); }
.si-bar { display: flex; align-items: center; gap: 4px; min-height: 58px; padding: 4px 10px 4px 6px; background: var(--primary); color: #fff; flex-shrink: 0; }
.si-bar .grow { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.si-bar b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-bar .grow span { font-size: 12.5px; opacity: 0.85; }
.si-scroll { padding: 12px 12px 90px; }
.si-white { background: #fff; }
.si-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(20, 30, 60, 0.1); padding: 10px 12px 14px 14px; margin-bottom: 12px; }
.si-card[hidden] { display: none; }
.si-meta { display: flex; align-items: center; gap: 8px; }
.si-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.si-tag { font-size: 12px; font-weight: 700; color: var(--primary); background: #E3ECFC; padding: 2px 8px; border-radius: 5px; }
.si-star { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #9AA3B5; }
.si-star.on { color: #E8A21C; }
.si-star.on svg { fill: currentColor; }
.si-meta .ibtn { width: 40px; height: 40px; color: #9AA3B5; }
.si-when { font-size: 12.5px; color: var(--muted); }
.si-by { font-size: 13px; font-weight: 600; }
.si-gr { font-size: 12.5px; color: var(--muted); }
.si-card h3 { margin: 8px 0 4px; font-size: 17px; line-height: 22px; font-weight: 800; }
.si-card p { margin: 0; font-size: 14.5px; line-height: 20px; color: #3B4357; }
.si-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 10px; }
.si-shots img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.si-shots img:only-child { grid-column: 1 / -1; }
.si-ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 30px; padding: 0 10px; border-radius: 6px; background: #E3ECFC; color: var(--primary); font-size: 13px; font-weight: 700; }
.si-ask.done { background: var(--ok-soft); color: var(--ok); }
.si-fab { position: absolute; right: 16px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 20px 0 16px; border-radius: 25px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 6px 16px rgba(6, 78, 198, 0.35); }
.si-fab.on { background: #fff; }
.si-list { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(20, 30, 60, 0.08); }
.si-th, .si-kid { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #EBEEF4; text-align: left; }
.si-th.off { opacity: 0.6; }
.si-ini { width: 44px; height: 44px; border-radius: 50%; color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.si-ini.grp { background: #34A853; }
.si-ini.sm { width: 34px; height: 34px; font-size: 12px; }
.si-th .grow, .si-kid .grow { min-width: 0; }
.si-th-h { display: flex; justify-content: space-between; gap: 8px; }
.si-th-h b, .si-kid b { font-size: 15.5px; }
.si-th time { font-size: 12px; color: var(--muted); }
.si-th-t, .si-kid .grow span { display: block; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.si-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #D93025; color: #fff; font-size: 11.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.si-st { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: #EEF1F6; color: var(--muted); white-space: nowrap; }
.si-st.present { background: #E3F4E8; color: #1E7A3C; }
.si-st.absent { background: #FDE7E5; color: #B3261E; }
.si-show { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 10px; min-height: 36px; font-size: 14px; color: #3B4357; }
.si-month { position: relative; height: 92px; margin-bottom: 14px; border-radius: 12px; overflow: hidden; }
.si-month img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-month b { position: absolute; left: 14px; bottom: 10px; color: #fff; font-size: 22px; font-weight: 800; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45); }
.si-month-h { margin: 2px 4px 10px; font-size: 15px; font-weight: 800; }
.si-day { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; margin-bottom: 12px; }
.si-wd { text-align: center; padding-top: 8px; }
.si-wd span { display: block; font-size: 12.5px; color: var(--muted); }
.si-wd b { font-size: 20px; font-weight: 800; }
.si-ev { position: relative; margin-bottom: 8px; padding: 8px 40px 10px 12px; background: #fff; border: 1.5px solid var(--primary); border-radius: 10px; }
.si-ev.y { border-color: #F5B53D; }
.si-ev-k { display: block; font-size: 11.5px; font-weight: 700; color: var(--primary); }
.si-ev.y .si-ev-k { color: #8A5A00; }
.si-ev b { display: block; font-size: 15px; font-weight: 800; }
.si-ev > span:not(.si-ev-k):not(.si-ev-i) { display: block; font-size: 13px; color: var(--muted); }
.si-ev-i { position: absolute; right: 10px; top: 10px; color: var(--primary); display: flex; }
.si-ev .si-shots { margin-top: 8px; }
.si-form { padding: 2px 4px; }
.si-form h2 { margin: 6px 0 2px; font-size: 22px; line-height: 28px; font-weight: 800; }
.si-form-s { margin: 0 0 6px; font-size: 13.5px; font-weight: 700; }
.si-opt { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid #E8EBF1; text-align: left; }
.si-opt-t { display: block; font-size: 15px; line-height: 20px; }
.si-bar-p { display: block; height: 4px; margin: 8px 0 4px; border-radius: 2px; background: #E3E7EF; overflow: hidden; }
.si-bar-p i { display: block; height: 100%; background: var(--primary); }
.si-opt-n { display: block; font-size: 12px; color: var(--muted); }
.si-tick { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #B5BDCC; color: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.si-opt.on .si-tick { background: var(--primary); border-color: var(--primary); color: #fff; }
.si-wide { padding: 16px 4px; }
.si-wide .btn { border-radius: 4px; }
.si-sheet { margin: 18px -12px -90px; padding: 14px 16px 40px; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -2px 12px rgba(20, 30, 60, 0.08); }
.si-sheet-h { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-bottom: 8px; }
.si-sheet-h span:first-child { color: var(--primary); font-size: 14px; }
.si-sheet-h b { font-size: 15.5px; }
.si-sheet p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.si-lab { margin: 14px 0 8px; font-size: 13px; font-weight: 700; }
.si-none { margin: 8px 4px; font-size: 14px; color: var(--muted); }
.si-incoming { margin-bottom: 12px; }
.si-dhead { padding: 32px 20px 18px; background: var(--primary); color: #fff; }
.si-dhead b { display: block; font-size: 18px; }
.si-dhead span { font-size: 13px; opacity: 0.85; }
.si-h3 { margin: 18px 0 8px; font-size: 16px; }
.si-resp { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.si-resp b { display: block; font-size: 15px; }
.si-resp .grow span { font-size: 13px; color: var(--muted); }
.si-page { padding: 4px 2px; }

/* ================= ParentZone (hronologija) ================= */
html[data-theme="hronologija"] .phone { background: #EEEEEE; }
.pz-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 4px 6px; background: var(--bar); color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); flex-shrink: 0; }
.pz-bar h1 { flex: 1; min-width: 0; margin: 0 0 0 10px; font-size: 19px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-scroll { padding: 8px 10px 90px; }
.pz-post { margin-top: 12px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); overflow: hidden; }
.pz-post-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 0; }
.pz-post-h time { font-size: 12px; color: var(--muted); }
.pz-type { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border-radius: 14px; border: 1px solid #BDBDBD; font-size: 13px; color: #424242; }
.pz-type.moment { background: #8E5BD6; border-color: #8E5BD6; color: #fff; }
.pz-post-b { padding: 8px 12px 10px; }
.pz-post-b b { font-size: 15.5px; font-weight: 600; }
.pz-post-b p { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #555; }
.pz-photo { position: relative; display: block; width: 100%; }
.pz-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pz-photo span { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; }
.pz-post-f { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid #EEEEEE; font-size: 12.5px; color: var(--muted); }
.pz-fab { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px; border-radius: 24px; background: var(--bar); color: #fff; font-size: 14.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); }
.pz-none { margin: 16px 4px; color: var(--muted); font-size: 14px; }
.pz-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pz-g { position: relative; aspect-ratio: 1; }
.pz-g-img { width: 100%; height: 100%; display: block; }
.pz-g img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-heart { position: absolute; right: 2px; bottom: 2px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.pz-heart.on { color: #E53935; }
.pz-heart.on svg { fill: currentColor; }
.pz-tx { display: flex; align-items: center; gap: 12px; min-height: 58px; border-top: 1px solid #EEEEEE; color: var(--muted); }
.pz-tx-i { display: flex; }
.pz-tx .grow b { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.pz-tx .grow span { font-size: 12.5px; color: var(--faint); }
.pz-amt { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pz-amt.cr { color: #2E7D32; }
.pz-amt.db { color: #C62828; }
.pz-text { min-height: 40px; padding: 0 8px; color: var(--primary); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; }
.pz-card > .pz-text { margin: 4px 0 2px -8px; }
.pz-out { margin: 18px 4px 8px; }
.pz-ses { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.pz-ses-d { text-align: center; padding-top: 6px; }
.pz-ses-d b { display: block; font-size: 20px; }
.pz-ses-d span { font-size: 12px; color: var(--muted); }
.pz-ses-c { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.pz-ses-c b { display: block; font-size: 14px; }
.pz-ses-c span span { display: block; font-size: 12.5px; color: var(--muted); }
.pz-cats { display: flex; gap: 14px; overflow-x: auto; padding: 8px 2px 14px; scrollbar-width: none; }
.pz-cats button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; flex-shrink: 0; }
.pz-cats img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 3px solid transparent; }
.pz-cats .on img { border-color: var(--bar); }
.pz-cats .on { color: var(--primary); font-weight: 700; }
.pz-h { margin: 6px 4px 8px; font-size: 16px; font-weight: 700; }
.pz-art { display: flex; gap: 12px; margin-bottom: 8px; padding: 12px; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); }
.pz-art b { display: block; font-size: 14.5px; }
.pz-art .grow span { font-size: 13px; color: var(--muted); }
.pz-art img { width: 64px; height: 64px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.pz-dhead { display: flex; flex-direction: column; gap: 2px; padding: 28px 18px 16px; background: var(--bar); color: #fff; }
.pz-dhead .face { margin-bottom: 10px; box-shadow: 0 0 0 2px #fff; }
.pz-dhead b { font-size: 16px; }
.pz-dhead span { font-size: 13px; opacity: 0.85; }
.pz-tally span { border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.pz-reg { padding: 0; }
.pz-r { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #EEEEEE; text-align: left; }
.pz-r .grow { min-width: 0; }
.pz-r .grow b { display: block; font-size: 15px; font-weight: 500; }
.pz-r .grow span { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-r .grow span.pz-new { color: var(--ink); font-weight: 700; }
.pz-r time { font-size: 12px; color: var(--muted); }
.pz-r .pz-text.in { color: #2E7D32; }
.pz-r-abs { font-size: 12.5px; font-weight: 700; color: #C62828; letter-spacing: 0.04em; }
.pz-pad { padding: 12px 14px 14px; }
.pz-obs-k { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 14px; font-size: 14px; }
.pz-obs-k .face { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bar); }
.pz-page { padding: 2px 0; }
.pz-page .m-field { margin-bottom: 12px; }
.pz-incoming { margin-top: 4px; }
html[data-theme="hronologija"] .lg-save { margin-top: 12px; }

/* ================= Lillio (izvjestaj) ================= */
html[data-theme="izvjestaj"] .phone { background: #F5F6F3; }
.ll-band { display: flex; align-items: center; min-height: 52px; padding: 2px 6px; background: var(--primary); color: #fff; flex-shrink: 0; }
.ll-band b { flex: 1; text-align: center; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-scroll { padding: 0 0 40px; background: #fff; }
.ll-rep { padding: 18px 18px 8px; }
.ll-rep-h { display: flex; align-items: flex-start; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #DDE3DE; }
.ll-rep-h h1 { margin: 0; font-family: 'Bitter', Georgia, serif; font-size: 27px; line-height: 32px; font-weight: 600; }
.ll-rep-h span { font-size: 13.5px; font-weight: 700; }
.ll-pick { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 4px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.ll-pick.on { background: var(--ok-soft); }
.ll-pick-row { padding: 10px 0 2px; }
.ll-part h2 { margin: 16px 0 4px; font-family: 'Bitter', Georgia, serif; font-size: 22px; line-height: 28px; font-weight: 600; }
.ll-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 3px 0; font-size: 14px; line-height: 20px; color: #2E3A40; }
.ll-li b { font-weight: 700; }
.ll-li time { font-size: 12.5px; color: var(--muted); }
.ll-li.none { color: #8A949A; display: block; }
.ll-li .tl-cancel, .ll-li .ll-shots { grid-column: 1 / -1; }
.ll-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; }
.ll-shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.ll-gal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 10px; padding: 14px; }
.ll-gal button { text-align: left; }
.ll-gal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.ll-gal b { display: block; margin-top: 6px; font-family: 'Bitter', Georgia, serif; font-size: 15px; line-height: 19px; font-weight: 600; }
.ll-gal span { font-size: 12px; color: var(--muted); }
.ll-prof { padding: 16px 18px 18px; }
.ll-prof-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ll-prof-h h1 { margin: 0; font-family: 'Bitter', Georgia, serif; font-size: 25px; font-weight: 600; }
.ll-edit { padding: 6px 10px; border-radius: 3px; background: #9AA3A6; color: #fff; font-size: 12.5px; white-space: nowrap; }
.ll-photo { width: 150px; margin: 12px 0 4px; padding: 6px; background: #E6F1F1; border-radius: 4px; }
.ll-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.ll-photo span { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 0 2px; font-size: 12px; color: #3A4A50; }
.ll-h2 { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font-family: 'Bitter', Georgia, serif; font-size: 22px; font-weight: 600; }
.ll-i { display: flex; color: #E8892B; }
.ll-room { display: block; margin-bottom: 4px; font-size: 15px; }
.ll-f { font-size: 13.5px; line-height: 21px; }
.ll-f span { color: var(--muted); margin-right: 4px; }
.ll-f b { font-weight: 600; }
.ll-link { min-height: 36px; margin-top: 6px; color: var(--primary); font-size: 14px; font-weight: 700; }
.ll-rows { border-top: 8px solid #F1F3F0; }
.ll-row { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #E8ECE8; font-size: 15px; text-align: left; color: var(--ink); }
.ll-row > svg { color: var(--primary); flex-shrink: 0; }
.ll-n { font-size: 12.5px; color: var(--muted); }
.ll-th .grow { min-width: 0; }
.ll-th .grow b { display: block; }
.ll-th .grow span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-th .grow span.new { color: var(--ink); font-weight: 700; }
.ll-th time { font-size: 12px; color: var(--muted); }
.ll-att-h { text-align: center; padding: 14px 0 6px; }
.ll-att-h b { display: block; font-size: 16px; }
.ll-pill { display: inline-block; margin-top: 8px; padding: 6px 16px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 600; }
.ll-incoming { margin: 10px 14px 0; }
.ll-sec { display: flex; align-items: center; gap: 8px; padding: 14px 14px 8px; border-bottom: 1px solid #DDE3DE; font-size: 15px; }
.ll-ratio { padding: 4px 10px; border-radius: 4px; background: #EEF1EC; font-size: 13px; }
.ll-a { font-size: 13.5px; font-weight: 600; color: var(--primary); }
.ll-g { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 3px; background: #AEB7BA; color: #fff; font-size: 12px; }
.ll-counts { display: flex; gap: 16px; padding: 10px 14px; font-size: 14px; border-bottom: 1px solid #EEF1EC; }
.ll-counts span { display: flex; align-items: center; gap: 5px; }
.ll-counts i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #555; }
.ll-counts i.in { background: #3C9A4B; border-color: #3C9A4B; }
.ll-counts i.out { background: #777; border-color: #777; }
.ll-counts i.abs { border-style: dashed; }
.ll-att { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 38px; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid #EEF1EC; }
.ll-nm { color: var(--primary); font-size: 14px; font-weight: 600; line-height: 18px; }
.ll-st { font-size: 13px; color: #C2412D; }
.ll-st.in { color: #3C9A4B; }
.ll-sq { width: 38px; height: 34px; border-radius: 3px; color: #fff; display: flex; align-items: center; justify-content: center; }
.ll-sq.in { background: #4CAF50; }
.ll-sq.out { background: #E05345; }
.ll-sq.off { background: #E4E7E3; }
.ll-room-h { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0 14px 10px; padding: 14px 0 10px; border-bottom: 1px solid #DDE3DE; font-size: 17px; font-weight: 700; }
html[data-theme="izvjestaj"] .lk-rows { margin: 0 14px 6px; }
.ll-bill-h { display: flex; align-items: center; justify-content: space-between; }
.ll-bill-h h1 { margin: 0; font-size: 24px; font-weight: 800; }
.ll-tax { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 3px; background: #9AA3A6; color: #fff; font-size: 12.5px; }
.ll-box { margin: 12px 0 8px; padding: 12px; background: #F1F3F0; text-align: center; }
.ll-box p { margin: 0 0 8px; font-size: 14px; }
.ll-box .btn.ll-green { background: #5AA332; color: #fff; border-radius: 4px; }
.ll-bal { display: flex; align-items: center; justify-content: space-between; padding: 12px; background: #F1F3F0; }
.ll-bal b { display: block; font-size: 24px; }
.ll-bal div span { font-size: 12.5px; color: var(--muted); }
.ll-latest { padding: 8px 12px; border-radius: 3px; background: #2D9CA8; color: #fff; font-size: 13px; }
.ll-hist { margin: 18px 0 8px; font-size: 15px; font-weight: 600; }
.ll-page { padding: 16px; }
html[data-theme="izvjestaj"] .lnav-b.on { color: var(--primary); }

/* ================= Storypark (dnevnik) ================= */
html[data-theme="dnevnik"] .phone { background: #fff; }
.sp-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 48px; padding: 4px 8px; background: rgba(249, 249, 249, 0.94); border-bottom: 0.5px solid #D1D1D6; flex-shrink: 0; }
.sp-nav > b { justify-self: center; display: flex; align-items: center; gap: 2px; font-size: 17px; font-weight: 600; white-space: nowrap; }
.sp-nav > :last-child { justify-self: end; }
.sp-back { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; color: var(--primary); font-size: 16px; white-space: nowrap; }
.sp-go { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 2px; color: var(--primary); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sp-plus, .sp-next { min-height: 40px; padding: 0 4px; color: var(--primary); font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; }
.sp-next:disabled { opacity: 0.4; }
.sp-seg-wrap { padding: 8px 12px; border-bottom: 0.5px solid #E5E5EA; flex-shrink: 0; }
.sp-seg { display: flex; padding: 2px; border-radius: 9px; background: #EEEEF0; }
.sp-seg button { flex: 1; min-height: 32px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.sp-seg button.on { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.sp-scroll { padding: 0 0 40px; }
.sp-grey { background: #F2F2F7; }
.sp-ini { border-radius: 50%; background: #F56E5F; color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sp-story { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; border-bottom: 8px solid #F2F2F7; }
.sp-story-h b { display: block; font-size: 15px; font-weight: 600; }
.sp-story-h span { font-size: 12px; color: #8E8E93; }
.sp-story h3, .sp-story p, .sp-story .sp-collage, .sp-story .sp-foot, .sp-story .sp-more, .sp-story .sp-reply, .sp-story .sp-cm, .sp-story .sp-week { grid-column: 1 / -1; }
.sp-story h3 { margin: 12px 0 4px; font-size: 18px; font-weight: 700; }
.sp-story p { margin: 6px 0 0; font-size: 15px; line-height: 21px; }
.sp-collage { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 92px; gap: 3px; width: 100%; margin-top: 10px; border-radius: 10px; overflow: hidden; }
.sp-collage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-collage img:first-child { grid-row: span 2; }
.sp-collage.n1 { grid-template-columns: 1fr; grid-auto-rows: 200px; }
.sp-collage.n1 img:first-child { grid-row: auto; }
.sp-collage.n2 { grid-auto-rows: 184px; }
.sp-collage.n2 img:first-child { grid-row: auto; }
.sp-foot { display: flex; justify-content: flex-end; gap: 14px; margin-top: 10px; font-size: 13px; color: var(--primary); }
.sp-foot > * { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; }
.sp-like.on svg { fill: currentColor; }
.sp-none { margin: 20px 16px; color: var(--muted); }
.sp-masonry { columns: 2; column-gap: 10px; padding: 12px; }
.sp-tile { break-inside: avoid; margin-bottom: 12px; }
.sp-tile > button { display: block; width: 100%; }
.sp-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.sp-tile.tall img { aspect-ratio: 3 / 4; }
.sp-tile p { margin: 6px 0 0; font-size: 13px; line-height: 18px; }
.sp-tile .sp-foot { justify-content: flex-start; margin-top: 2px; }
.sp-week { margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; }
.sp-week li { display: flex; gap: 10px; padding: 5px 0; border-top: 0.5px solid #E5E5EA; }
.sp-week b { width: 92px; flex-shrink: 0; font-weight: 600; }
.sp-grp-h { padding: 18px 32px 6px; font-size: 13px; color: #6D6D72; }
.sp-grp { margin: 0 16px 8px; background: #fff; border-radius: 10px; overflow: hidden; }
.sp-grey > .sp-grp:first-child { margin-top: 16px; }
.sp-cell { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-bottom: 0.5px solid #E5E5EA; text-align: left; }
.sp-cell:last-child { border-bottom: 0; }
.sp-cell .grow { min-width: 0; }
.sp-cell .grow b { display: block; font-size: 15px; font-weight: 500; }
.sp-cell .grow span { display: block; font-size: 13px; color: #8E8E93; }
.sp-cell time, .sp-n { font-size: 13px; color: #8E8E93; white-space: nowrap; }
.sp-cell > svg { color: #C7C7CC; flex-shrink: 0; }
.sp-ic { display: flex; color: var(--primary); }
.sp-me .grow b { font-size: 17px; font-weight: 600; }
.sp-me .grow span { color: var(--primary) !important; }
.sp-pad { padding: 14px; }
.sp-pad .btn { margin-top: 12px; }
.sp-large { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; flex-shrink: 0; }
.sp-large h1 { margin: 0; font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.6px; }
.sp-count { font-size: 13px; color: var(--muted); padding-bottom: 6px; }
.sp-room .sp-nav { background: #fff; }
.sp-more { margin-top: 4px; font-size: 14px; color: var(--primary); }
.sp-reply { margin-top: 10px; }
.sp-reply .field { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 18px; background: #F2F2F7; font-size: 14px; }
.sp-cm { margin-top: 6px; font-size: 14px; }
.sp-act { width: 100%; display: flex; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid #E5E5EA; text-align: left; }
.sp-act-a { position: relative; display: flex; align-self: flex-start; }
.sp-act-a i { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; }
.sp-act .grow b { display: block; font-size: 15px; font-weight: 500; line-height: 20px; }
.sp-act .grow span { display: block; font-size: 13px; color: #8E8E93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-act .grow { min-width: 0; }
.sp-act time { display: block; font-size: 12px; color: #8E8E93; }
.sp-tabface .face { box-shadow: 0 0 0 2px transparent; }
.sp-tabface.on .face { box-shadow: 0 0 0 2px var(--primary); }
.sp-search { display: flex; align-items: center; gap: 6px; margin: 4px 16px 8px; padding: 0 10px; background: #EEEEF0; border-radius: 10px; color: #8E8E93; }
.sp-search .field { min-height: 38px; padding: 0; border: 0; background: transparent; font-size: 15px; }
.sp-kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 8px; padding: 10px 16px; }
.sp-kid { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-kid b { font-size: 14px; }
.sp-kid span { font-size: 11.5px; line-height: 14px; color: var(--muted); text-align: center; }
.sp-kid.present .face { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--primary); }
.sp-kid:not(.present) { opacity: 0.55; }
.sp-incoming { margin: 6px 16px; }
.sp-page { padding: 16px; }
html[data-theme="dnevnik"] .lnav { background: rgba(249, 249, 249, 0.96); border-top: 0.5px solid #C6C6C8; }
html[data-theme="dnevnik"] .lnav-b { font-weight: 500; font-size: 10.5px; }

/* ================= Famly (ljubicasta) ================= */
html[data-theme="ljubicasta"] .phone { background: #F3F0FA; }
.fm-bar { display: flex; align-items: center; gap: 2px; min-height: 56px; padding: 4px 10px 4px 14px; background: var(--primary); color: #fff; flex-shrink: 0; }
.fm-bar h1 { margin: 0; font-size: 18px; font-weight: 650; white-space: nowrap; }
.fm-bar h1.mid { flex: 1; text-align: center; }
.fm-bar .ibtn:first-child { margin-left: -10px; }
.fm-logo { display: flex; align-items: center; gap: 6px; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; white-space: nowrap; }
.fm-me { display: flex; margin-left: 4px; }
.fm-me .avatar, .fm-me .face { width: 32px !important; height: 32px !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7); }
.fm-scroll { padding: 12px 12px 30px; }
.fm-news { display: flex; gap: 6px; margin-bottom: 12px; }
.fm-news button { min-height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid #E2D8F3; background: #fff; color: var(--primary); font-size: 14px; font-weight: 600; }
.fm-news button.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.fm-todo { margin-bottom: 12px; padding: 14px; background: #fff; border: 1px solid #E2D8F3; border-radius: 12px; }
.fm-todo b { font-size: 13px; color: var(--primary); }
.fm-todo p { margin: 4px 0 10px; font-size: 15px; line-height: 21px; }
.fm-todo-b { display: flex; gap: 8px; }
.fm-post { margin-bottom: 12px; background: #fff; border: 1px solid #ECE6F6; border-radius: 12px; overflow: hidden; }
.fm-post-h { display: flex; align-items: center; gap: 10px; padding: 10px 6px 0 12px; }
.fm-grp { width: 40px; height: 40px; border-radius: 50%; background: #FFF1DC; color: #F4A340; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-post-h b { display: block; font-size: 15px; }
.fm-post-h .grow span { font-size: 12.5px; color: var(--muted); }
.fm-post > p { margin: 10px 12px; font-size: 15px; line-height: 21px; }
.fm-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; width: 100%; }
.fm-shots img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fm-shots img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.fm-shots.n2 { grid-template-columns: 1fr; }
.fm-shots.n2 img:last-child { aspect-ratio: 2 / 1; }
.fm-shots.n3 { grid-template-columns: 1fr 1fr; }
.fm-post-f { display: flex; align-items: center; gap: 16px; padding: 4px 8px 6px 12px; font-size: 13.5px; color: #5C5470; }
.fm-post-f > * { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.fm-post-f .on { color: #D23F3F; }
.fm-post-f .on svg { fill: currentColor; }
.fm-keep { margin-left: auto; padding: 0 6px; }
.fm-keep.on { color: var(--primary) !important; }
.fm-none { margin: 16px 4px; color: var(--muted); font-size: 14px; }
.fm-prof { padding: 6px 0 10px; text-align: center; }
.fm-prof .face { margin: 0 auto 10px; }
.fm-prof h2 { margin: 0; font-size: 22px; font-weight: 750; }
.fm-prof span { font-size: 13px; color: var(--muted); }
.fm-tabs { display: flex; margin: 0 -12px; padding: 0 8px; border-bottom: 1px solid #E2D8F3; overflow-x: auto; scrollbar-width: none; }
.fm-tabs button { display: inline-flex; align-items: center; gap: 2px; min-height: 42px; padding: 0 9px; border-bottom: 2.5px solid transparent; font-size: 14px; color: #5C5470; white-space: nowrap; }
.fm-tabs button.on { color: var(--primary); font-weight: 700; border-bottom-color: var(--primary); }
.fm-pbody { padding-top: 12px; }
.fm-acts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 4px 14px; background: #fff; border: 1px solid #E2D8F3; border-radius: 12px; }
.fm-acts .act { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 15px; font-weight: 600; text-align: left; }
.fm-acts .act svg { color: var(--primary); flex-shrink: 0; }
.fm-acts .act-sick svg { color: #D23F3F; }
.fm-acts .act-vacation svg { color: #F2A33A; }
.fm-acts .act-absence svg { color: var(--muted); }
.fm-pick { margin-top: 10px; }
.fm-pick .act { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 12px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; }
.fm-pick .act.on { background: var(--ok-soft); }
.fm-med { display: flex; gap: 10px; margin-top: 12px; padding: 12px; background: #fff; border: 1.5px solid #3D7BE0; border-radius: 12px; }
.fm-med > svg { color: #3D7BE0; flex-shrink: 0; margin-top: 2px; }
.fm-med b { display: block; font-size: 15px; }
.fm-med span { display: block; font-size: 13.5px; }
.fm-med .fm-link { color: #3D7BE0; font-weight: 600; }
.fm-future { display: flex; align-items: center; gap: 4px; margin-top: 16px; font-size: 13px; color: var(--muted); }
.fm-day { margin: 6px 0 6px; font-size: 18px; font-weight: 700; }
.fm-act { display: flex; gap: 12px; padding: 8px 0; }
.fm-act .grow { min-width: 0; }
.fm-sq { width: 30px; height: 30px; border-radius: 7px; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-act b { display: block; font-size: 15px; font-weight: 600; }
.fm-act .grow > span { display: block; font-size: 13px; color: var(--muted); }
.fm-dshots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; width: 100%; margin-top: 6px; border-radius: 8px; overflow: hidden; }
.fm-dshots img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.fm-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.fm-inbox { background: #fff; border: 1px solid #ECE6F6; border-radius: 12px; overflow: hidden; }
.fm-th, .fm-note, .fm-mi, .fm-kid { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #F0EBF8; text-align: left; }
.fm-th .grow, .fm-note .grow, .fm-kid .grow { min-width: 0; }
.fm-th-h { display: flex; justify-content: space-between; gap: 8px; }
.fm-th-h b { font-size: 15px; }
.fm-th time { font-size: 12px; color: var(--muted); }
.fm-th-s { display: block; font-size: 12.5px; color: var(--primary); }
.fm-th-t { display: block; font-size: 13.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-th-t.new { color: var(--ink); font-weight: 700; }
.fm-note-i { width: 40px; height: 40px; border-radius: 50%; background: #EFE8F8; color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fm-note b { display: block; font-size: 15px; }
.fm-note .grow span { font-size: 13px; color: var(--muted); }
.fm-note > i { width: 9px; height: 9px; border-radius: 50%; background: #E5302A; flex-shrink: 0; }
.fm-note.open { background: #FBF9FE; }
.fm-menu-h { display: flex; align-items: center; gap: 12px; padding: 4px 4px 14px; }
.fm-menu-h b { display: block; font-size: 17px; }
.fm-menu-h .grow span { font-size: 13px; color: var(--primary); }
.fm-mi { font-size: 15px; }
.fm-mi > svg:first-child { color: var(--primary); }
.fm-mi > svg:last-child { color: #B9B2C8; }
.fm-due { font-size: 13.5px; color: #D23F3F; }
.fm-task { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 12px; padding: 12px 14px; background: #fff; border: 1px solid #E2D8F3; border-radius: 12px; text-align: left; font-weight: 700; }
.fm-task > svg { color: var(--primary); }
.fm-task > span:not(.grow) { order: 5; width: 100%; padding-left: 30px; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.fm-kid b { display: block; font-size: 15px; }
.fm-kid .grow span { font-size: 12.5px; color: var(--muted); }
.fm-sign { min-height: 34px; padding: 0 14px; border-radius: 17px; background: var(--primary); color: #fff; font-size: 13.5px; font-weight: 700; }
.fm-sign.out { background: #fff; color: var(--primary); border: 1.5px solid var(--primary); }
.fm-abs { font-size: 12.5px; font-weight: 700; color: #D23F3F; }
.fm-inv { display: inline-flex; align-items: center; gap: 6px; margin: 0 12px 12px; padding: 8px 12px; border: 1px solid #E2D8F3; border-radius: 8px; font-size: 13.5px; }
.fm-week div { display: flex; gap: 10px; padding: 4px 0; font-size: 13.5px; }
.fm-week b { width: 92px; flex-shrink: 0; }
.fm-tabface .face { box-shadow: 0 0 0 2px transparent; }
.fm-tabface.on .face { box-shadow: 0 0 0 2px var(--primary); }
.fm-incoming { margin-bottom: 12px; }
.fm-page { padding: 2px 0; }
html[data-theme="ljubicasta"] .lnav-b { font-size: 11px; }