/* ============================================================
   Lafa web v5 · replike tuđih aplikacija i Mac tastatura (rx.css)
   Boje ovde su boje tuđih aplikacija i Apple hardvera (replika), ne Lafa brand.
   ============================================================ */

/* ---------- Mac tastatura: mreža od 58 kolona, pravi raspored, F-red su aplikacije ---------- */
.kbd { width: min(900px, 100%); margin-top: 16px; perspective: 1700px; perspective-origin: 50% -20%; container-type: inline-size; }
.kbd-deck {
  --pad: 2.2cqw;
  transform: rotateX(32deg); transform-origin: 50% 0;
  padding: var(--pad) var(--pad) calc(var(--pad) * 1.3); border-radius: 2.4cqw 2.4cqw 1cqw 1cqw;
  background: linear-gradient(180deg, var(--kb-deck-hi), var(--kb-deck) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 40px 80px -30px rgba(0, 0, 0, 0.8), 0 -20px 90px -50px rgba(var(--la-accent-rgb), 0.5);
}
.kb {
  --c: calc((100cqw - var(--pad) * 2) / 100.75);
  --kg: calc(var(--c) * 0.75);
  --kh: calc(var(--c) * 5.3);
  display: grid; grid-template-columns: repeat(58, minmax(0, 1fr)); grid-template-rows: repeat(6, var(--kh));
  gap: var(--kg);
}
.kb .key { grid-column: span var(--w); grid-row: var(--r); }
.key {
  position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0;
  border-radius: calc(var(--c) * 0.9);
  background: linear-gradient(180deg, var(--kb-key), var(--kb-key-2));
  color: var(--kb-ink); font: 500 calc(var(--c) * 1.5)/1 var(--f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 calc(var(--c) * 0.28) 0 var(--kb-edge), 0 calc(var(--c) * 0.6) calc(var(--c) * 1.2) rgba(0, 0, 0, 0.4);
  transition: transform 0.16s var(--ease), box-shadow 0.16s, background-color 0.16s, filter 0.16s;
}
.key b { font-weight: 500; }
.kl { position: absolute; bottom: calc(var(--c) * 0.75); font-size: calc(var(--c) * 1.02); letter-spacing: 0.01em; opacity: 0.78; white-space: nowrap; }
.kl--bl { left: calc(var(--c) * 0.85); }
.kl--br { right: calc(var(--c) * 0.85); }
.ks { position: absolute; top: calc(var(--c) * 0.7); font-size: calc(var(--c) * 1.25); opacity: 0.85; }
.ks--tr { right: calc(var(--c) * 0.85); }
.ks--tl { left: calc(var(--c) * 0.85); }
.kn { font-size: calc(var(--c) * 1.12); line-height: 1.25; text-align: center; opacity: 0.9; }
.key--sr { color: var(--la-accent-soft); }
.caps { position: absolute; left: calc(var(--c) * 0.9); top: calc(var(--c) * 0.85); width: calc(var(--c) * 0.55); height: calc(var(--c) * 0.55); border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.key-ud { grid-column: span var(--w); grid-row: var(--r); display: grid; grid-template-rows: 1fr 1fr; gap: calc(var(--c) * 0.25); }
.key-ud .key { font-size: calc(var(--c) * 0.9); }
.key--half { align-self: end; height: calc(50% - var(--c) * 0.12); font-size: calc(var(--c) * 0.9); }
.key--tid { background: linear-gradient(180deg, var(--kb-key), var(--kb-key-2)); }
.tid { width: 52%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.key--app img { width: 72%; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); transition: transform 0.2s var(--ease); }
.key--app .key-name {
  position: absolute; bottom: calc(100% + 10px); left: 50%; translate: -50% 4px; opacity: 0; pointer-events: none; white-space: nowrap;
  font: 500 12px/1 var(--f); padding: 6px 9px; border-radius: 8px; background: color-mix(in oklab, var(--bg-0) 92%, transparent); color: var(--text-bright);
  transition: opacity 0.15s, translate 0.15s;
}
.key--app:hover { filter: brightness(1.2); }
.key--app:hover img { transform: translateY(-1px) scale(1.04); }
.key--app:hover .key-name, .key--app:focus-visible .key-name { opacity: 1; translate: -50% 0; }
.key--app[aria-selected="true"] {
  transform: translateY(calc(var(--c) * 0.18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 2px var(--la-accent), 0 0 calc(var(--c) * 2.4) rgba(var(--la-accent-rgb), 0.5);
}
.key--hot { color: var(--la-accent-soft); }
.kbd.is-holding .key--hot {
  transform: translateY(calc(var(--c) * 0.22)); color: var(--on-accent); background: var(--la-grad);
  box-shadow: 0 0 0 1px rgba(var(--la-accent-rgb), 0.6), 0 0 calc(var(--c) * 3.4) rgba(var(--la-accent-rgb), 0.65);
}
.kbd.is-holding .key--hot .kl, .kbd.is-holding .key--hot .ks { opacity: 1; }

/* ---------- Prozor aplikacije: zajednički okvir ---------- */
.appwin { position: relative; width: min(760px, 100%); height: clamp(236px, 29vh, 276px); border-radius: 12px; overflow: hidden; background: var(--mac-win); color: var(--mac-ink); box-shadow: var(--mac-shadow), 0 0 0 1px rgba(var(--la-accent-rgb), 0.08); font: 400 13px/1.35 var(--f); text-align: left; }
.appwin > .rx { height: 100%; }
.appwin.is-swap > .rx { animation: win-in 0.42s var(--ease) both; }
.rx { display: flex; min-height: 0; }
.rx .tl i { width: 11px; height: 11px; }
.rx b { font-weight: 600; }
.rx small { color: var(--mac-ink-2); font-size: 11.5px; }
[data-out] { position: relative; font-size: 15px; line-height: 1.45; color: var(--mac-ink); }
[data-out].is-wait { opacity: 0; }
.appwin .is-pasted { animation: paste-in 0.45s var(--ease) both; }
.appwin .is-pasted::after { content: ""; position: absolute; inset: -3px -5px; border-radius: 6px; z-index: -1; background: rgba(var(--la-accent-rgb), 0.24); opacity: 0; animation: glow-out 1.8s ease-out both; }
.av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font: 600 11.5px/1 var(--f); background: linear-gradient(180deg, #a1a7b3, #7d838f); }
.av--b { background: linear-gradient(180deg, #6cb4ff, #2b7cf0); }
.av--g { background: linear-gradient(180deg, #7ad98a, #2fae4e); }
.av--o { background: linear-gradient(180deg, #ffb46b, #f07a2b); }
.av--p { background: linear-gradient(180deg, #a99bff, #6f5ee8); }
.rx-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rx-side { flex: none; width: 34%; display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; background: var(--mac-side); border-right: 1px solid var(--mac-line); min-width: 0; }
.rx-side .tl { margin: 2px 2px 10px; }
.rx-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; min-width: 0; }
.rx-row span { display: grid; min-width: 0; }
.rx-row span b, .rx-row span small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-search { margin: 0 2px 6px; padding: 5px 10px; border-radius: 7px; background: rgba(0, 0, 0, 0.05); color: #56565b; font-size: 12px; }
.rx-head { flex: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--mac-line); }
.rx-head--c { justify-content: center; flex-direction: column; gap: 2px; height: 56px; }
.rx-head--c .av { width: 24px; height: 24px; font-size: 10px; }
.rx-body { flex: 1; min-height: 0; padding: 14px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.rx-in { flex: none; margin: 0 14px 14px; padding: 9px 14px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--mac-line); min-height: 40px; }
.bub { max-width: 76%; padding: 8px 13px; border-radius: 17px; font-size: 14px; line-height: 1.35; }
.bub--in { align-self: flex-start; background: var(--mac-bub); border-bottom-left-radius: 5px; }

/* Poruke */
.rx--poruke .rx-row.on { background: var(--mac-blue); color: #fff; }
.rx--poruke .rx-row.on small { color: #fff; opacity: 0.94; }

/* Mail */
.rx--mail { flex-direction: column; }
.rx--mail .rx-head { gap: 14px; }
.rx-send { width: 26px; height: 26px; border-radius: 50%; background: #0a84ff; display: grid; place-items: center; }
.rx-send::before { content: ""; width: 10px; height: 10px; border: 2px solid #fff; border-left: 0; border-bottom: 0; transform: rotate(-45deg) translate(-1px, 1px); }
.rx-field { display: flex; gap: 8px; align-items: center; height: 34px; padding: 0 18px; border-bottom: 1px solid var(--mac-line); color: var(--mac-ink-2); }
.rx-field b { color: var(--mac-ink); font-weight: 500; }
.tok { padding: 2px 8px; border-radius: 6px; background: rgba(10, 132, 255, 0.12); color: #0a64c8; font-style: normal; }
.rx--mail .rx-body { justify-content: flex-start; padding: 16px 18px; }

/* Beleške */
.rx--beleske .rx-side { width: 24%; }
.rx-fold { padding: 6px 9px; border-radius: 7px; color: var(--mac-ink-2); }
.rx-fold.on, .rx-list .on { background: var(--mac-notes); color: var(--mac-notes-ink); }
.rx-list { flex: none; width: 26%; padding: 12px 8px; border-right: 1px solid var(--mac-line); display: flex; flex-direction: column; gap: 4px; }
.rx-list p { display: grid; padding: 7px 9px; border-radius: 7px; }
.rx-list p small { color: inherit; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rx-note { flex: 1; padding: 14px 20px; min-width: 0; }
.rx-note time { display: block; text-align: center; color: var(--mac-ink-2); font-size: 11px; margin-bottom: 8px; }
.rx-note h4 { font: 700 19px/1.2 var(--fd); margin-bottom: 8px; }
.rx-pre { margin: 0 0 8px; padding-left: 1.15em; list-style: disc; font-size: 14px; line-height: 1.5; color: var(--mac-ink-2); }
.rx-pre li::marker { color: #d9a700; }

/* Kalendar */
.rx--kalendar { flex-direction: column; }
.rx-seg { margin-left: auto; display: inline-flex; padding: 2px; border-radius: 7px; background: rgba(0, 0, 0, 0.06); font-size: 11.5px; }
.rx-seg i { font-style: normal; padding: 3px 10px; border-radius: 5px; color: var(--mac-ink-2); }
.rx-seg i.on { background: #fff; color: var(--mac-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.rx-cal { flex: 1; display: flex; min-height: 0; }
.rx-grid { position: relative; flex: 1; padding: 6px 12px 0 46px; }
.rx-grid p { position: relative; height: 38px; border-top: 1px solid var(--mac-line); font-size: 11px; color: var(--mac-ink-2); }
.rx-grid p span { position: absolute; left: -38px; top: -7px; }
.rx-ev { position: absolute; left: 50px; right: 18px; top: 82px; height: 58px; padding: 7px 10px; border-radius: 7px; background: #fde2e1; color: #b3261e; }
.rx-ev b { display: block; }
.rx-ev small { color: #b3261e; opacity: 0.8; }
.rx-pop { flex: none; width: 44%; margin: 10px 12px 12px 0; padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--mac-line), 0 12px 30px -10px rgba(0, 0, 0, 0.25); display: flex; flex-direction: column; gap: 4px; }
.rx-pop b { font-size: 15px; }
.rx-lab { margin-top: 8px; font-size: 11px; color: var(--mac-ink-2); }
.rx-pop [data-out] { font-size: 13.5px; }

/* Slack */
.rx--slack .rx-side { width: 28%; background: #3f0e40; color: #d1c2d2; border: 0; }
.rx--slack .rx-side b.ws { color: #fff; font-size: 15px; margin: 0 4px 8px; }
.rx--slack .rx-side p { padding: 4px 8px; border-radius: 6px; font-size: 13px; }
.rx--slack .rx-side p.on { background: #1164a3; color: #fff; }
.rx-m { display: flex; gap: 10px; align-items: flex-start; }
.rx-m .av { border-radius: 7px; }
.rx-m span { display: block; font-size: 14px; }
.rx--slack .rx-in, .rx--teams .rx-in { border-radius: 9px; }
.rx-tb { display: flex; gap: 12px; margin-top: 6px; color: var(--mac-ink-2); font-size: 11.5px; }

/* Teams */
.rx-rail { flex: none; width: 52px; background: #ebebf5; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 40px 0 0; border-right: 1px solid var(--mac-line); }
.rx-rail i { width: 20px; height: 20px; border-radius: 6px; background: #c5c5e0; }
.rx-rail i.on { background: #5b5fc7; box-shadow: -14px 0 0 -10px #5b5fc7; }
.rx--teams .rx-head { position: relative; }
.rx-join { margin-left: auto; padding: 5px 12px; border-radius: 6px; background: #5b5fc7; color: #fff; font-weight: 600; font-size: 12px; }
.rx--teams .rx-body { background: #f5f5f5; }
.rx--teams .rx-m span { padding: 8px 12px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* WhatsApp */
.rx--whatsapp .rx-row.on { background: #f0f2f5; }
.rx--whatsapp .rx-side { background: #fff; }
.rx--whatsapp .rx-body { background-color: #efeae2; background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1.5px); background-size: 14px 14px; }
.rx--whatsapp .bub--in { background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.rx--whatsapp .rx-in { background: #fff; box-shadow: none; margin: 0; border-radius: 0; padding: 10px 16px; border-top: 1px solid var(--mac-line); }
.rx--whatsapp .rx-head { background: #f0f2f5; }

/* Telegram */
.rx--telegram .rx-row.on { background: #2a73c7; color: #fff; }
.rx--telegram .rx-row.on small { color: #fff; opacity: 0.94; }
.rx--telegram .rx-body { background: linear-gradient(160deg, #cfe6c3, #a9d3b6 50%, #9ecbc6); }
.rx--telegram .bub--in { background: #fff; }
.rx--telegram .rx-in { background: #fff; margin: 0; border-radius: 0; box-shadow: none; padding: 10px 16px; }

/* Notion */
.rx--notion { flex-direction: column; }
.rx--notion .rx-head { border: 0; color: var(--mac-ink-2); font-size: 12px; }
.rx-page { padding: 6px 48px 16px; }
.rx-emoji { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.rx-page h4 { font: 700 24px/1.15 var(--fd); color: #37352f; margin-bottom: 8px; }
.rx-prop { display: flex; gap: 14px; font-size: 12.5px; color: #787774; margin-bottom: 10px; }
.rx-prop b { font-weight: 400; color: #37352f; }
.rx--notion [data-out] { color: #37352f; }

/* VS Code */
.rx--vscode { flex-direction: column; background: #1f1f1f; color: #cccccc; }
.rx--vscode .rx-head { background: #181818; border-color: #2b2b2b; color: #9d9d9d; font-size: 12px; }
.rx-code { flex: 1; display: flex; min-height: 0; }
.rx-act { flex: none; width: 40px; background: #181818; display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 12px; border-right: 1px solid #2b2b2b; }
.rx-act i { width: 18px; height: 18px; border-radius: 4px; border: 1.6px solid #6f6f6f; }
.rx-act i:first-child { border-color: #cfcfcf; }
.rx-ed { flex: 1; margin: 0; padding: 12px 14px; font: 12px/1.65 var(--fm); white-space: pre; overflow: hidden; color: #cccccc; }
.rx-ed .k { color: #569cd6; } .rx-ed .s { color: #ce9178; } .rx-ed .f { color: #dcdcaa; } .rx-ed .c { color: #6a9955; } .rx-ed .n { color: #858585; }
.rx-chat { flex: none; width: 40%; display: flex; flex-direction: column; border-left: 1px solid #2b2b2b; background: #181818; padding: 10px; gap: 8px; }
.rx-chat > b { font-size: 11px; letter-spacing: 0.04em; color: #9d9d9d; font-weight: 600; }
.rx-chat-in { margin-top: auto; padding: 10px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px #3c3c3c; background: #1f1f1f; }
.rx--vscode [data-out] { color: #e6e6e6; font-size: 13.5px; }

/* Claude */
.rx--claude { flex-direction: column; background: #f5f4ed; }
.rx--claude .rx-head { border: 0; }
.rx-cl { flex: 1; display: grid; align-content: center; justify-items: center; gap: 16px; padding: 0 40px 24px; }
.rx-greet { display: flex; align-items: center; gap: 10px; font: 400 25px/1.2 Georgia, "Times New Roman", serif; color: #3d3929; }
.rx-star { color: #d97757; font: 400 30px/1 var(--f); }
.rx-cbox { position: relative; width: 100%; padding: 12px 52px 34px 14px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(31, 30, 29, 0.12), 0 4px 16px -8px rgba(0, 0, 0, 0.15); }
.rx-cbox small { position: absolute; left: 14px; bottom: 8px; }
.rx-csend { position: absolute; right: 10px; bottom: 8px; width: 28px; height: 28px; border-radius: 8px; background: #d97757; }
.rx--claude [data-out] { color: #3d3929; font-size: 14px; }

/* ChatGPT */
.rx--chatgpt { flex-direction: column; background: #fff; }
.rx--chatgpt .rx-head { border: 0; font-size: 14px; }
.rx-gp { flex: 1; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 0 44px 24px; }
.rx-gq { font: 500 22px/1.2 var(--fd); color: #0d0d0d; letter-spacing: -0.01em; }
.rx-gbox { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 26px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 6px 18px -10px rgba(0, 0, 0, 0.25); }
.rx-gbox > i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 20px/1 var(--f); color: #5d5d5d; font-style: normal; }
.rx-gbox > i:last-child { background: #0d0d0d; }
.rx-gbox [data-out] { flex: 1; font-size: 14px; }

/* ---------- Još 13 aplikacija (red sa brojevima) ---------- */
.rx-ic { display: inline-grid; place-items: center; font-style: normal; }
.rx-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Gmail */
.rx--gmail { flex-direction: column; }
.rx-gm-h { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; background: #f2f6fc; color: #041e49; font-size: 13.5px; }
.rx-gm-x { display: flex; gap: 12px; } .rx-gm-x i { width: 10px; height: 2px; background: #444746; border-radius: 1px; }
.rx--gmail .rx-field { color: #5f6368; }
.tok--g { background: #e9eef6; color: #1f1f1f; border-radius: 999px; padding: 2px 10px; }
.rx--gmail .rx-body { justify-content: flex-start; padding: 14px 18px; }
.rx-gm-f { flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px 14px; color: #444746; }
.rx-gm-send { padding: 9px 22px; border-radius: 999px; background: #0b57d0; color: #fff; font: 600 13.5px/1 var(--f); }
/* Gemini, Perplexity: pitanje u polje */
.rx--ask { flex-direction: column; background: #fff; }
.rx--ask .rx-head { border: 0; font-size: 13.5px; }
.rx-ask { flex: 1; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 0 48px 22px; }
.rx-ask-h { font: 500 28px/1.15 var(--fd); letter-spacing: -0.02em; }
.rx-ask-box { width: 100%; display: grid; gap: 10px; padding: 14px 16px 10px; border-radius: 24px; background: #f0f4f9; }
.rx-ask-row { display: flex; justify-content: space-between; color: #444746; }
.rx-ask-go { width: 32px; height: 32px; border-radius: 50%; background: #fff; }
.rx--gemini .rx-ask-h { background: linear-gradient(90deg, #4285f4, #9b72cb 45%, #d96570); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rx--perplexity { background: #fcfcf9; }
.rx--perplexity .rx-ask-h { font: 400 30px/1.1 Georgia, "Times New Roman", serif; color: #13343b; }
.rx--perplexity .rx-ask-box { background: #fff; box-shadow: 0 0 0 1px #e5e3d4; border-radius: 14px; }
.rx--perplexity .rx-ask-go { background: #20808d; color: #fff; }
/* Siri: staklena traka sa sjajem, kao u novom macOS-u */
.rx--siri { align-items: flex-end; justify-content: center; padding: 0 40px 34px; background: radial-gradient(60% 70% at 20% 10%, #c9d8ff, transparent 70%), radial-gradient(60% 80% at 90% 100%, #f6c9e8, transparent 70%), linear-gradient(160deg, #dfe8ff, #f3e6f7); }
.rx-siri { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 20px; border-radius: 28px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 #fff, 0 20px 50px -20px rgba(60, 40, 120, 0.45); }
.rx-siri::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #ff7ac6, #8b7bff 30%, #3fd1ff 55%, #6ef2a8 78%, #ffc56b); filter: blur(8px); opacity: 0.8; }
.rx-siri-orb { flex: none; width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 200deg, #ff5fb2, #7a5cff, #2fd2ff, #6ef2a8, #ff5fb2); box-shadow: 0 0 14px rgba(122, 92, 255, 0.6); }
.rx--siri [data-out] { color: #1d1d1f; font-size: 16px; }
/* YouTube */
.rx--youtube { flex-direction: column; background: #fff; }
.rx-yt-h { flex: none; display: flex; align-items: center; gap: 14px; height: 42px; padding: 0 14px; }
.rx-yt-logo { display: inline-flex; align-items: center; gap: 4px; font: 700 15px/1 var(--f); letter-spacing: -0.04em; color: #0f0f0f; }
.rx-yt-logo i { display: grid; place-items: center; width: 22px; height: 15px; border-radius: 4px; background: #ff0033; color: #fff; }
.rx-yt-logo svg { width: 9px; height: 9px; fill: currentColor; }
.rx-yt-s { margin-left: auto; width: 34%; padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px #ccc; color: #606060; font-size: 12px; }
.rx-yt { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 4px 16px 14px; }
.rx-yt-v { position: relative; flex: none; width: 46%; align-self: flex-start; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(70% 90% at 30% 30%, #3a4a5e, #10151c); }
.rx-yt-pl { display: grid; place-items: center; width: 46px; height: 32px; border-radius: 9px; background: rgba(0, 0, 0, 0.6); color: #fff; }
.rx-yt-pl svg { width: 16px; height: 16px; fill: currentColor; }
.rx-yt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.3); }
.rx-yt-bar i { display: block; width: 38%; height: 100%; background: #ff0033; }
.rx-yt-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rx-yt-c > b { font-size: 15px; line-height: 1.3; color: #0f0f0f; }
.rx-yt-in { display: flex; gap: 10px; margin-top: 10px; }
.rx-yt-in > div { flex: 1; display: grid; gap: 8px; padding-bottom: 6px; border-bottom: 1.5px solid #0f0f0f; }
.rx-yt-btn { justify-self: end; padding: 7px 14px; border-radius: 999px; background: #065fd4; color: #fff; font: 600 12px/1 var(--f); }
/* Figma */
.rx--figma { flex-direction: column; background: #f5f5f5; }
.rx-fg-h { flex: none; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: #2c2c2c; color: #fff; font-size: 13px; }
.rx-fg-logo { display: grid; grid-template-columns: 6px 6px; gap: 0; }
.rx-fg-logo i { width: 6px; height: 6px; border-radius: 3px; background: #f24e1e; }
.rx-fg-logo i:nth-child(2) { background: #ff7262; } .rx-fg-logo i:nth-child(3) { background: #a259ff; } .rx-fg-logo i:nth-child(4) { background: #1abcfe; border-radius: 50%; } .rx-fg-logo i:nth-child(5) { background: #0acf83; border-radius: 3px 3px 3px 0; }
.rx-fg-share { margin-left: auto; padding: 6px 12px; border-radius: 6px; background: #0d99ff; font-weight: 600; font-size: 12px; }
.rx-fg { flex: 1; min-height: 0; display: flex; }
.rx-fg-l { flex: none; width: 22%; padding: 10px 8px; background: #fff; border-right: 1px solid #e6e6e6; font-size: 12px; }
.rx-fg-l p { padding: 5px 8px; border-radius: 5px; color: #333; }
.rx-fg-l p.on { background: #e5f4ff; }
.rx-fg-c { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.rx-fg-frame { flex: none; width: 28%; height: 100%; max-height: 190px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px #0d99ff; display: grid; align-content: start; gap: 8px; padding: 12px; }
.rx-fg-frame i { height: 8px; border-radius: 3px; background: #e6e6e6; }
.rx-fg-frame i:first-child { width: 70%; height: 12px; background: #d9d9d9; }
.rx-fg-frame i.b { width: 50%; height: 18px; margin-top: 8px; border-radius: 9px; background: #0d99ff; }
.rx-fg-cm { flex: 1; min-width: 0; display: grid; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.25); }
.rx-fg-q { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.rx-fg-q .av { width: 24px; height: 24px; font-size: 10px; }
.rx-fg-r { padding: 8px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #0d99ff; }
.rx--figma [data-out] { font-size: 13.5px; }
/* Viber i Messenger */
.rx--viber .rx-row.on { background: #7360f2; color: #fff; }
.rx--viber .rx-row.on small { color: #fff; opacity: 0.92; }
.rx--viber .rx-in { box-shadow: inset 0 0 0 1.5px #7360f2; }
.rx--messenger .rx-row.on { background: #e7f0ff; }
.rx--messenger .bub--in { background: #f0f0f0; }
.rx--messenger .rx-in { background: #f0f2f5; box-shadow: none; }
.rx--messenger .rx-head b { background: linear-gradient(90deg, #0084ff, #a033ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Outlook */
.rx--outlook { flex-direction: column; }
.rx-ol-h { flex: none; display: flex; align-items: center; gap: 14px; height: 38px; padding: 0 14px; background: #0f6cbd; color: #fff; font-size: 13px; }
.rx-ol-bar { flex: none; display: flex; align-items: center; gap: 16px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--mac-line); font-size: 12.5px; color: #424242; }
.rx-ol-bar i { font-style: normal; }
.rx-ol-send { padding: 6px 14px; border-radius: 4px; background: #0f6cbd; color: #fff; font-weight: 600; }
.tok--o { background: #ebf3fc; color: #0f548c; border-radius: 4px; }
.rx--outlook .rx-body { justify-content: flex-start; padding: 14px 18px; }
/* Word, Google Docs, Obsidian */
.rx--doc { flex-direction: column; }
.rx-pg { flex: 1; min-height: 0; overflow: hidden; display: flex; justify-content: center; padding: 14px 0 0; background: #f3f3f3; }
.rx-sheet { width: 78%; padding: 22px 28px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.rx-sheet h4 { font: 700 17px/1.25 var(--fd); margin-bottom: 8px; color: #1f1f1f; }
.rx-wd-h { flex: none; display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 14px; background: #185abd; color: #fff; font-size: 13px; }
.rx-wd-r { flex: none; display: flex; gap: 18px; height: 34px; align-items: center; padding: 0 16px; background: #fff; border-bottom: 1px solid #e1e1e1; font-size: 12.5px; color: #424242; }
.rx-wd-r i { font-style: normal; padding: 8px 0 6px; }
.rx-wd-r i.on { color: #185abd; font-weight: 600; box-shadow: inset 0 -2px 0 #185abd; }
.rx-gd-h { flex: none; display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 14px; background: #f9fbfd; }
.rx-gd-ic { width: 18px; height: 24px; border-radius: 3px; background: linear-gradient(#fff, #fff) 4px 8px / 10px 2px no-repeat, linear-gradient(#fff, #fff) 4px 12px / 10px 2px no-repeat, linear-gradient(#fff, #fff) 4px 16px / 7px 2px no-repeat, #4285f4; }
.rx-gd-h > span:not(.rx-gd-share):not(.tl) { display: grid; gap: 2px; font-size: 14px; }
.rx-gd-h small { font-size: 11px; }
.rx-gd-share { margin-left: auto; padding: 8px 16px; border-radius: 999px; background: #c2e7ff; color: #001d35; font: 600 12.5px/1 var(--f); }
.rx-gd-tb { flex: none; display: flex; gap: 10px; margin: 0 12px; padding: 7px 12px; border-radius: 999px; background: #edf2fa; }
.rx-gd-tb i { width: 16px; height: 10px; border-radius: 3px; background: #c4c7c5; }
.rx--gdocs .rx-pg { background: #f9fbfd; }
.rx--obsidian { flex-direction: row; background: #1e1e1e; color: #dadada; }
.rx-ob-l { flex: none; width: 26%; display: flex; flex-direction: column; gap: 3px; padding: 12px 10px; background: #262626; border-right: 1px solid #333; font-size: 12.5px; }
.rx-ob-l .tl { margin: 2px 2px 12px; }
.rx-ob-l p { padding: 4px 8px; border-radius: 5px; color: #b3b3b3; }
.rx-ob-l p.on { background: #363636; color: #fff; }
.rx-ob { flex: 1; min-width: 0; padding: 14px 30px; }
.rx-ob-t { text-align: center; font-size: 12px; color: #8a8a8a; margin-bottom: 12px; }
.rx-ob h4 { font: 700 22px/1.2 var(--fd); color: #e6e6e6; margin-bottom: 8px; }
.rx--obsidian [data-out] { color: #dadada; }
.rx--obsidian .is-pasted::after { background: rgba(127, 109, 242, 0.35); }
/* Safari: forma na sajtu */
.rx--safari { flex-direction: column; }
.rx-sf-h { flex: none; display: flex; align-items: center; gap: 16px; height: 42px; padding: 0 14px; background: #f6f6f6; border-bottom: 1px solid var(--mac-line); }
.rx-sf-url { flex: 1; max-width: 58%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #e8e8ea; color: #3c3c43; font-size: 12.5px; }
.rx-sf-url .rx-ic svg { width: 12px; height: 12px; }
.rx-sf { flex: 1; min-height: 0; display: grid; align-content: start; gap: 9px; padding: 12px 40px; }
.rx-sf-brand { display: grid; font: 700 19px/1.2 var(--fd); color: #1d1d1f; }
.rx-sf-brand small { font: 400 12px/1.4 var(--f); }
.rx-sf-row, .rx-sf-msg { display: grid; gap: 4px; font-size: 11.5px; color: var(--mac-ink-2); }
.rx-sf-row i { font-style: normal; padding: 7px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1px #d2d2d7; color: #1d1d1f; font-size: 13.5px; }
.rx-sf-msg [data-out] { padding: 8px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #0071e3; min-height: 44px; }
.rx-sf-btn { justify-self: start; padding: 8px 18px; border-radius: 8px; background: #1d1d1f; color: #fff; font: 600 12.5px/1 var(--f); }

@media (max-width: 760px) {
  .appwin { height: 300px; }
  .rx-side { display: none; }
  .rx--beleske .rx-side, .rx-list, .rx-rail, .rx-act, .rx-ed { display: none; }
  .rx-chat { width: 100%; border: 0; }
  .rx-pop { width: 56%; }
  .rx-page { padding: 6px 22px 16px; }
  .rx-ob-l, .rx-fg-l, .rx-yt-s { display: none; }
  .rx-yt { flex-direction: column; }
  .rx-yt-v { width: 100%; max-height: 110px; aspect-ratio: auto; }
  .rx-ask, .rx-sf { padding-inline: 18px; }
  .rx-fg-frame { display: none; }
  .kbd { perspective: none; }
  .kbd-deck { --pad: 12px; transform: none; padding: 12px; border-radius: 22px; }
  .kb { --c: 7px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; gap: 8px; }
  .kb .key { grid-column: auto; grid-row: auto; }
  .kb > .key:not(.key--app):not(.key--hot), .kb > .key-ud { display: none; }
  .kb .key--app { aspect-ratio: 1; }
  .kb .key--hot { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; align-items: center; height: 50px; }
  .kb .key--hot .kl, .kb .key--hot .ks { position: static; font-size: 14px; opacity: 0.9; }
  .key--app .key-name { display: none; }
}