/* Live Multi-Platform Social Mockup Preview (mockup.js). Self-contained: also used on the client review page. */
.mk-root { --mk-ink: #0f172a; --mk-ink2: #64748b; --mk-line: #e2e8f0; --mk-bg: #f1f5f9; --mk-accent: #0E7C66; font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--mk-ink); }
html[data-theme='dark'] .mk-root { --mk-ink: #e6edf7; --mk-ink2: #a3b1c6; --mk-line: rgba(255,255,255,.12); --mk-bg: #0b1220; }
.mk-toolbar { display: grid; gap: 8px; margin-bottom: 12px; }
.mk-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.mk-tabs::-webkit-scrollbar { display: none; }
.mk-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--mk-line); background: transparent; color: inherit; border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 36px; }
.mk-tabs button[aria-selected='true'] { background: var(--mk-accent); color: #fff; border-color: var(--mk-accent); }
.mk-sub { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mk-seg { display: inline-flex; border: 1px solid var(--mk-line); border-radius: 10px; overflow: hidden; }
.mk-seg button { border: 0; background: transparent; color: inherit; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 34px; }
.mk-seg button[aria-pressed='true'] { background: rgba(14,124,102,.14); color: var(--mk-accent); font-weight: 600; }
.mk-theme { border: 1px solid var(--mk-line); background: transparent; color: inherit; border-radius: 10px; width: 36px; height: 34px; cursor: pointer; }
.mk-stage { display: grid; justify-items: center; gap: 10px; padding: 12px 0 4px; }
.mk-note { margin: 0; font-size: 12.5px; color: var(--mk-ink2); text-align: center; max-width: 360px; }

/* phone frame */
.mk-phone { position: relative; width: min(340px, 86vw); aspect-ratio: 9 / 19.2; background: #0b0b0d; border-radius: 42px; padding: 10px; box-shadow: 0 18px 50px rgba(15,23,42,.28), inset 0 0 0 2px #2a2a30; }
.mk-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; background: #0b0b0d; border-radius: 14px; z-index: 5; }
.mk-screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #fff; }

/* app chrome (light by default; .mk-dark switches) */
.mk-app { --a-bg: #fff; --a-ink: #050505; --a-ink2: #65676b; --a-line: #e4e6eb; --a-soft: #f0f2f5; position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--a-bg); color: var(--a-ink); font-size: 13px; line-height: 1.38; text-align: left; }
.mk-dark .mk-app { --a-bg: #18191a; --a-ink: #e4e6eb; --a-ink2: #b0b3b8; --a-line: #3a3b3c; --a-soft: #242526; }
.mk-bar { display: flex; align-items: center; gap: 10px; padding: 40px 14px 8px; border-bottom: 1px solid var(--a-line); flex: none; }
.mk-bar.center { justify-content: center; }
.mk-bar .mk-icons { margin-left: auto; display: flex; gap: 14px; font-size: 16px; }
.mk-scroll { flex: 1; overflow-y: auto; scrollbar-width: none; }
.mk-scroll::-webkit-scrollbar { display: none; }
.mk-post { padding: 0 0 6px; border-bottom: 6px solid var(--a-soft); }
.mk-post header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.mk-post header > div { flex: 1; min-width: 0; display: grid; }
.mk-post header small { color: var(--a-ink2); font-size: 11.5px; }
.mk-av { width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.mk-av.ring { box-shadow: 0 0 0 2px var(--a-bg), 0 0 0 4px #d62976; width: 32px; height: 32px; }
.mk-text { padding: 0 12px 8px; word-wrap: break-word; }
.mk-tag { color: #1d6fe0; }
.mk-dark .mk-tag { color: #6fa8ff; }
.mk-more { border: 0; background: none; color: var(--a-ink2); padding: 0; font: inherit; cursor: pointer; }
.mk-dim { color: var(--a-ink2); }
.mk-stats { display: flex; justify-content: space-between; padding: 8px 12px; color: var(--a-ink2); font-size: 12px; }
.mk-acts { display: flex; justify-content: space-around; border-top: 1px solid var(--a-line); margin: 0 12px; padding: 8px 0; color: var(--a-ink2); font-weight: 600; font-size: 12.5px; }
.mk-acts.ig { justify-content: flex-start; gap: 16px; border: 0; padding: 10px 2px 4px; font-size: 20px; color: var(--a-ink); }
.mk-acts.ig .right { margin-left: auto; }
.mk-acts.x { justify-content: space-between; border: 0; margin: 0; padding: 8px 0 0; font-weight: 400; }
.mk-likes { padding: 0 12px 4px; font-weight: 700; }
.mk-need { display: grid; place-items: center; text-align: center; padding: 30px 16px; background: var(--a-soft); color: var(--a-ink2); font-size: 12.5px; margin: 0 0 8px; }
.mk-need.dark { position: absolute; inset: 0; background: #111; color: #aaa; margin: 0; }
.mk-warn { color: #d93025; font-size: 11.5px; }

/* media */
.mk-media { position: relative; width: 100%; background: #000; overflow: hidden; }
.mk-media.fill { position: absolute; inset: 0; aspect-ratio: auto !important; }
.mk-media img, .mk-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-video video { cursor: pointer; }
/* Square or landscape media in full-screen apps sit in the middle (as TikTok/Reels show them). */
.mk-media.contain img, .mk-media.contain video { object-fit: contain; }
.mk-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; cursor: pointer; transition: opacity .2s; z-index: 2; }
.mk-play.hide { opacity: 0; pointer-events: none; }
.mk-mute { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; z-index: 3; }
.mk-full .mk-mute { bottom: auto; top: 76px; right: 10px; }
.mk-track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-track::-webkit-scrollbar { display: none; }
.mk-slide { flex: 0 0 100%; scroll-snap-align: center; height: 100%; }
.mk-count { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.mk-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); color: #111; font-size: 11px; cursor: pointer; z-index: 2; }
.mk-arrow.prev { left: 6px; } .mk-arrow.next { right: 6px; }
.mk-arrow[hidden] { display: none; }
.mk-dots { position: absolute; bottom: -18px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.mk-ig .mk-car { margin-bottom: 18px; overflow: visible; }
.mk-ig .mk-car .mk-track { overflow-x: auto; }
.mk-dots span { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.mk-dots span.on { background: #0095f6; }
.mk-full .mk-dots { bottom: 140px; }

/* full-screen formats (reels, tiktok, shorts, stories) */
.mk-full { background: #000; color: #fff; }
.mk-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0, transparent 18%, transparent 58%, rgba(0,0,0,.7) 100%); pointer-events: none; }
.mk-tt-top { position: absolute; top: 40px; left: 0; right: 0; display: flex; justify-content: center; gap: 16px; align-items: center; font-size: 14px; z-index: 3; }
.mk-tt-top > span { opacity: .7; }
.mk-tt-top > i { position: absolute; right: 14px; }
.mk-tt-top.yt { justify-content: flex-end; padding-right: 14px; gap: 18px; }
.mk-tt-top.yt > i { position: static; }
.mk-igreel .mk-tt-top { justify-content: space-between; padding: 0 14px; }
.mk-igreel .mk-tt-top > i { position: static; }
.mk-rail { position: absolute; right: 8px; bottom: 120px; display: grid; gap: 14px; justify-items: center; z-index: 3; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.mk-rail > span { display: grid; justify-items: center; font-size: 22px; }
.mk-rail small { font-size: 10.5px; margin-top: 2px; }
.mk-rail-av { position: relative; margin-bottom: 6px; }
.mk-rail-av .mk-av { width: 40px; height: 40px; border: 2px solid #fff; }
.mk-rail-av > i { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: #fe2c55; font-size: 9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; }
.mk-disc { animation: mkspin 4s linear infinite; font-size: 26px !important; }
@keyframes mkspin { to { transform: rotate(360deg); } }
.mk-cap { position: absolute; left: 12px; right: 64px; bottom: 22px; z-index: 3; display: grid; gap: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.mk-tt .mk-cap { bottom: 64px; }
.mk-cap.center { right: 12px; text-align: center; bottom: 70px; }
.mk-who { display: flex; align-items: center; gap: 8px; }
.mk-who .mk-av { width: 30px; height: 30px; font-size: 11px; }
.mk-follow { border: 1px solid rgba(255,255,255,.8); border-radius: 8px; padding: 2px 10px; font-size: 12px; }
.mk-ytshort .mk-follow { background: #fff; color: #000; border: 0; border-radius: 16px; }
.mk-captext { font-size: 12.5px; }
.mk-full .mk-tag { color: #fff; font-weight: 600; }
.mk-full .mk-more { color: #ddd; }
.mk-music { font-size: 11.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-tt-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: #000; display: flex; justify-content: space-around; align-items: center; font-size: 10.5px; z-index: 4; }
.mk-tt-nav b { background: #fff; color: #000; border-radius: 8px; padding: 0 10px; font-size: 16px; box-shadow: -3px 0 #25f4ee, 3px 0 #fe2c55; }
.mk-story-top { position: absolute; top: 36px; left: 10px; right: 10px; z-index: 3; display: grid; gap: 8px; }
.mk-prog { display: flex; gap: 3px; }
.mk-prog span { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.4); }
.mk-prog span.on { background: #fff; }
.mk-story-who { display: flex; align-items: center; gap: 8px; }
.mk-story-who .mk-av { width: 30px; height: 30px; font-size: 11px; }
.mk-story-who small { opacity: .75; }
.mk-story-reply { position: absolute; left: 12px; right: 12px; bottom: 18px; display: flex; align-items: center; gap: 12px; z-index: 3; font-size: 20px; }
.mk-story-reply span { flex: 1; border: 1px solid rgba(255,255,255,.7); border-radius: 22px; padding: 8px 14px; font-size: 13px; }
.mk-wastatus.text { background: #0E7C66; display: grid; place-items: center; }
.mk-wa-text { padding: 70px 26px; font-size: 20px; font-weight: 600; text-align: center; }

/* platform specifics */
.mk-fb-logo { color: #1877f2; font-size: 22px; letter-spacing: -.5px; }
.mk-dark .mk-fb-logo { color: #e4e6eb; }
.mk-ig-logo { font-family: 'Pacifico', 'Brush Script MT', cursive; font-weight: 400; font-size: 21px; }
.mk-yt-logo { font-size: 16px; } .mk-yt-logo i { color: #ff0000; }
.mk-x-logo, .mk-th b { font-size: 20px; }
.mk-li-logo { color: #0a66c2; font-size: 26px; }
.mk-search { flex: 1; background: var(--a-soft); border-radius: 6px; padding: 5px 10px; color: var(--a-ink2); }
.mk-li-follow { color: #0a66c2; font-weight: 700; font-size: 12.5px; }
.mk-post.x { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid var(--a-line); }
.mk-xbody { flex: 1; min-width: 0; }
.mk-xbody .mk-text { padding: 2px 0 6px; }
.mk-xmedia .mk-media { border-radius: 14px; border: 1px solid var(--a-line); }
.mk-yt-info { padding: 10px 12px; display: grid; gap: 8px; }
.mk-yt-info h3 { margin: 0; font-size: 15px; line-height: 1.3; }
.mk-yt-ch { display: flex; align-items: center; gap: 8px; }
.mk-yt-ch .mk-av { width: 30px; height: 30px; font-size: 11px; }
.mk-yt-ch .mk-sub, .mk-yt-ch > span:last-child { margin-left: auto; background: var(--a-ink); color: var(--a-bg); border-radius: 18px; padding: 6px 14px; font-weight: 600; font-size: 12px; }
.mk-yt-acts { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.mk-yt-acts span { flex: none; background: var(--a-soft); border-radius: 18px; padding: 6px 12px; font-size: 12px; }
.mk-yt-desc { background: var(--a-soft); border-radius: 12px; padding: 10px; font-size: 12.5px; }
.mk-wa { --a-bg: #efeae2; }
.mk-dark .mk-wa { --a-bg: #0b141a; }
.mk-bar.wa { background: #008069; color: #fff; border: 0; }
.mk-bar.wa .mk-av { width: 32px; height: 32px; }
.mk-bar.wa > div { display: grid; } .mk-bar.wa small { opacity: .8; font-size: 11px; }
.mk-wa-chat { padding: 12px; }
.mk-bubble { margin-left: auto; max-width: 86%; background: #d9fdd3; color: #111; border-radius: 10px 0 10px 10px; padding: 4px; box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.mk-dark .mk-bubble { background: #005c4b; color: #e9edef; }
.mk-bubble .mk-media { border-radius: 8px; }
.mk-bubble .mk-text { padding: 6px 6px 0; }
.mk-bubble small { display: block; text-align: right; font-size: 10.5px; opacity: .6; padding: 0 6px 2px; }
.mk-bubble small i { color: #53bdeb; }
.mk-wa-input { display: flex; gap: 10px; align-items: center; padding: 8px 10px 18px; }
.mk-wa-input span { flex: 1; background: var(--a-soft); border-radius: 22px; padding: 9px 14px; color: var(--a-ink2); }
.mk-dark .mk-wa-input span { background: #202c33; }

/* dialog */
.mk-modal { position: fixed; inset: 0; z-index: 3000; background: rgba(15,23,42,.55); display: grid; place-items: center; padding: 16px; }
.mk-dialog { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; color: #0f172a; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
html[data-theme='dark'] .mk-dialog { background: #111a2e; color: #e6edf7; }
.mk-dialog header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: inherit; border-bottom: 1px solid rgba(100,116,139,.2); flex-wrap: wrap; }
.mk-dialog header h3 { margin: 0; font-size: 16px; flex: 1; min-width: 180px; }
.mk-dialog-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mk-x { border: 0; background: rgba(100,116,139,.12); color: inherit; width: 36px; height: 36px; border-radius: 10px; cursor: pointer; font-size: 16px; }
.mk-body { padding: 14px 16px 18px; }
@media (max-width: 560px) {
  .mk-modal { padding: 0; }
  .mk-dialog { max-height: 100vh; height: 100%; border-radius: 0; }
  .mk-phone { width: min(320px, 82vw); }
}