/* BalkanLoop - izgled za js/dodaci.js (7.11.2026., TikTok dodaci). Iste boje i oblik kao ostatak aplikacije. */

/* --- stranica zvuka --- */
.feed .music[data-act="zvuk"] { cursor: pointer; }
.zv-body { padding-bottom: 24px; }
.zv-head { display: flex; align-items: center; gap: 14px; padding: 6px 2px 14px; }
.zv-disk { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 16px; display: grid; place-items: center;
  background: var(--card2); color: var(--amber); border: 1px solid var(--line); }
.zv-disk svg { width: 34px; height: 34px; }
.zv-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zv-txt b { font-family: var(--display); font-size: 20px; line-height: 1.2; overflow-wrap: anywhere; }
.zv-txt span { color: var(--dim); font-size: 14px; }
.zv-btns { display: flex; gap: 10px; margin-bottom: 16px; }
.zv-btns .btn { flex: 1; }

/* --- izbor naslovne slike --- */
.dd-naslovna { margin: 6px 0 10px; }
.dd-nas { display: flex; gap: 12px; align-items: center; }
.dd-nas-img { width: 54px; height: 96px; object-fit: cover; border-radius: 10px; border: 2px solid var(--amber); flex: 0 0 54px; }
.dd-nas-r { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dd-nas-r input[type="range"] { width: 100%; accent-color: var(--amber); }
.dd-nas-t { color: var(--dim); font-size: 13px; }

/* --- prikačeni videi --- */
.tile { position: relative; }
.tile .dd-pin { position: absolute; top: 6px; left: 6px; z-index: 2; background: var(--amber); color: var(--ink);
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 999px; pointer-events: none; }

/* --- snimanje u više dijelova --- */
.screen.cam[data-mode="paused"] .cam-rec i { background: var(--paprika); }
.screen.cam[data-mode="paused"] [data-flip], .screen.cam[data-mode="paused"] [data-timer], .screen.cam[data-mode="paused"] [data-lens] { visibility: hidden; }
.cam-gotovo { color: #fff; }
.cam-gotovo svg { width: 22px; height: 22px; }

/* --- duet i stitch --- */
.screen.dd-duet .dd-platno { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.screen.dd-duet .dd-poruka { position: absolute; left: 16px; right: 16px; bottom: 128px; text-align: center; }
.screen.dd-duet[data-mode="rec"] .cam-rec i { border-radius: 10px; width: 32px; height: 32px; }

/* --- filter riječi, teme, pauza --- */
.dd-rij-in { width: 100%; box-sizing: border-box; background: var(--card2); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 10px; font: inherit; margin: 6px 0 12px; }
.dd-opc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.dd-teme-l { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; margin: 8px 0 12px; }
.dd-tema { display: grid; grid-template-columns: 1fr 70px auto auto; align-items: center; gap: 8px; }
.dd-tema span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-tema i { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--amber) var(--w), var(--faint) var(--w)); }
.dd-tema .btn.sm { min-width: 38px; padding: 6px 10px; }

/* --- tekst preko videa u više redova --- */
.text-ov { white-space: pre-line; }
.screen.upload textarea.ov-in { resize: none; width: 100%; box-sizing: border-box; }

/* --- teleprompter --- */
.dd-tp-btn { font: 800 18px/1 var(--display); }
.screen.cam .dd-tp { position: absolute; left: 16px; right: 16px; top: calc(64px + var(--sat)); height: 30%; overflow: hidden; z-index: 4;
  background: rgba(0, 0, 0, .45); border-radius: 14px; padding: 10px 14px; pointer-events: none; }
.screen.cam .dd-tp-t { color: #fff; font: 700 20px/1.45 system-ui, sans-serif; white-space: pre-wrap; transition: transform .05s linear; }

/* --- link u profilu --- */
.dd-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 8px; }
.dd-link a { display: inline-flex; align-items: center; gap: 6px; color: var(--amber2); font-weight: 600; text-decoration: none; }
.dd-link a svg { width: 16px; height: 16px; }

/* --- glasovne poruke --- */
.dmform .dd-mic.rec { background: var(--paprika); color: #fff; border-radius: 999px; font-weight: 700; font-size: 13px; min-width: 44px; }
.dmm audio.dd-glas { width: 220px; max-width: 100%; height: 40px; }