/* Vitrine /produtos v2 + mockups interativos (staging, 13/11/2026). Sobrepõe produtos.css sem alterá-lo. */
:root {
    --pv-ink: #0b1220;
    --pv-ink-2: #475569;
    --pv-ink-3: #64748b;
    --pv-line: #e2e8f0;
    --pv-surface: #ffffff;
    --pv-bg: #f8fafc;
    --pv-radius: 20px;
}

/* ---------- Vitrine ---------- */
#search-bar-container { max-width: 1200px; }
#content-container { max-width: 1248px; }
.pv2-chips { display: flex; gap: 8px; flex-wrap: wrap; max-width: 1200px; margin: 0 auto 22px; }
.pv2-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--pv-line); background: var(--pv-surface); color: var(--pv-ink-2); font: 500 14px/1 Poppins, sans-serif;
    transition: background .2s, color .2s, border-color .2s;
}
.pv2-chip span { font-size: 12px; color: var(--pv-ink-3); background: #f1f5f9; border-radius: 999px; padding: 3px 7px; }
.pv2-chip:hover { border-color: #cbd5e1; color: var(--pv-ink); }
.pv2-chip.is-on { background: var(--pv-ink); border-color: var(--pv-ink); color: #fff; }
.pv2-chip.is-on span { background: rgba(255,255,255,.16); color: #fff; }

.pv2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; }
.pv2-card {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--pv-radius);
    background: var(--pv-surface); border: 1px solid var(--pv-line); cursor: pointer; overflow: hidden;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
    animation: pv2-in .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 40ms);
}
.pv2-card::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--pa); opacity: 0; transition: opacity .25s;
}
.pv2-card:hover, .pv2-card:focus-visible { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pa) 35%, var(--pv-line)); box-shadow: 0 18px 40px -18px rgba(15,23,42,.25); outline: none; }
.pv2-card:hover::before, .pv2-card:focus-visible::before { opacity: 1; }
.pv2-card__top { display: flex; align-items: center; gap: 14px; }
.pv2-card__icon { width: 64px; height: 64px; flex: none; border-radius: 16px; overflow: hidden; background: #f1f5f9; box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 6px 14px -8px rgba(15,23,42,.35); }
.pv2-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.pv2-card__head { min-width: 0; }
.pv2-card__cat { display: block; font: 600 11px/1.2 Poppins, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pa); margin-bottom: 4px; }
.pv2-card__name { font: 700 17px/1.25 Poppins, sans-serif; color: var(--pv-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pv2-card__desc { font: 400 14px/1.55 Poppins, sans-serif; color: var(--pv-ink-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv2-card__foot { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #f1f5f9; font: 500 13px/1 Poppins, sans-serif; color: var(--pv-ink-3); }
.pv2-card__plat { display: inline-flex; gap: 9px; color: var(--pv-ink-2); font-size: 14px; }
.pv2-card__rate i { color: #f59e0b; margin-right: 4px; }
.pv2-card__go { margin-left: auto; color: var(--pv-ink); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.pv2-card__go i { transition: transform .2s; font-size: 12px; }
.pv2-card:hover .pv2-card__go i { transform: translateX(3px); }
.pv2-card--feature { grid-column: span 2; padding: 28px; background: linear-gradient(120deg, #0b1220 0%, #111c33 60%, color-mix(in srgb, var(--pa) 40%, #111c33) 100%); border-color: transparent; color: #fff; }
.pv2-card--feature .pv2-card__icon { width: 96px; height: 96px; border-radius: 24px; }
.pv2-card--feature::after { content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 55%, transparent), transparent); pointer-events: none; }
.pv2-card--feature .pv2-card__desc { color: rgba(255,255,255,.75); -webkit-line-clamp: 2; }
.pv2-card--feature .pv2-card__foot { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.pv2-card--feature .pv2-card__plat { color: rgba(255,255,255,.85); }
.pv2-card--feature .pv2-card__go { color: #fff; }
.pv2-card--feature > .pv2-card__desc, .pv2-card--feature > .pv2-card__foot { position: relative; z-index: 1; }
.pv2-card--feature { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 28px; row-gap: 10px; }
.pv2-card--feature .pv2-card__top { grid-row: 1 / 4; align-self: center; }
.pv2-card--feature .pv2-card__head { grid-column: 2; }
.pv2-card--feature .pv2-card__top { display: contents; }
.pv2-card--feature .pv2-card__icon { grid-row: 1 / 4; grid-column: 1; align-self: center; }
.pv2-card--feature .pv2-card__name { color: #fff; font-size: 24px; }
.pv2-card--feature .pv2-card__cat { color: color-mix(in srgb, var(--pa) 60%, #fff); }
@keyframes pv2-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Página do produto ---------- */
body.pv2-detalhe .hero-section { display: none; }
body.pv2-detalhe #content-container { margin-top: 0; }
.pv2-detail { max-width: 1200px; margin: 0 auto; padding-top: 8px; font-family: Poppins, sans-serif; color: var(--pv-ink); }
.pv2-crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--pv-ink-3); margin: 6px 0 18px; }
.pv2-crumbs button { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--pv-line); background: #fff; color: var(--pv-ink); font-weight: 500; }
.pv2-crumbs button:hover { background: #f1f5f9; }

.pv2-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 40px; align-items: center;
    padding: 40px; border-radius: 28px; background: #fff; border: 1px solid var(--pv-line); overflow: hidden;
}
.pv2-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 40%, color-mix(in srgb, var(--pa) 14%, transparent), transparent 70%); pointer-events: none; }
.pv2-hero__info { position: relative; min-width: 0; }
.pv2-hero__id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pv2-hero__icon { width: 72px; height: 72px; border-radius: 18px; overflow: hidden; background: #f1f5f9; box-shadow: 0 10px 24px -12px rgba(15,23,42,.45); }
.pv2-hero__icon img { width: 100%; height: 100%; object-fit: cover; }
.pv2-tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pa); background: color-mix(in srgb, var(--pa) 10%, #fff); }
.pv2-hero__title { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.pv2-hero__desc { font-size: 16px; line-height: 1.65; color: var(--pv-ink-2); max-width: 56ch; }
.pv2-hero__desc p { margin: 0 0 8px; }
.pv2-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 22px 0 24px; border: 1px solid var(--pv-line); border-radius: 16px; background: #fff; width: fit-content; max-width: 100%; }
.pv2-stats > div { padding: 12px 18px; border-left: 1px solid var(--pv-line); }
.pv2-stats > div:first-child { border-left: 0; }
.pv2-stats dt { font-size: 12px; color: var(--pv-ink-3); margin-bottom: 2px; }
.pv2-stats dd { margin: 0; font-weight: 600; font-size: 15px; }
.pv2-stats dd i { color: #f59e0b; font-size: 13px; }
.pv2-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pv2-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 600; font-size: 14px; transition: transform .15s, background .2s, box-shadow .2s; }
.pv2-btn--dark { background: var(--pv-ink); color: #fff; }
.pv2-btn--dark:hover { background: #1e293b; transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgba(15,23,42,.6); }
.pv2-btn--dark i { font-size: 20px; }
.pv2-btn span { display: flex; flex-direction: column; line-height: 1.15; }
.pv2-btn small { font-size: 10px; font-weight: 500; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.pv2-btn--ghost { background: #fff; color: var(--pv-ink); border: 1px solid var(--pv-line); }
.pv2-btn--ghost:hover { background: #f1f5f9; }
.pv2-actions .produto-download-menu { display: inline-flex; }

.pv2-tour { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--pv-line); }
.pv2-tour__title { font-size: 13px; font-weight: 600; color: var(--pv-ink-3); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.pv2-tour__title i { color: var(--pa); margin-right: 6px; }
.pv2-tour__list { display: flex; flex-wrap: wrap; gap: 8px; }
.pv2-tour__list button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--pa) 30%, var(--pv-line)); background: color-mix(in srgb, var(--pa) 6%, #fff); color: var(--pv-ink); font-size: 14px; font-weight: 500; transition: background .2s, color .2s; }
.pv2-tour__list button:hover { background: color-mix(in srgb, var(--pa) 14%, #fff); }
.pv2-tour__list button.is-on { background: var(--pa); border-color: var(--pa); color: #fff; }

/* Palco do mockup */
.pv2-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pv2-stage__glow { position: absolute; width: 380px; height: 380px; top: 50%; left: 50%; transform: translate(-50%, -55%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 35%, transparent), transparent); filter: blur(10px); pointer-events: none; }
.pv2-stage__note { position: relative; font-size: 12.5px; color: var(--pv-ink-3); text-align: center; max-width: 360px; margin: 0; line-height: 1.5; }
.pv2-stage__note strong { color: var(--pv-ink); }
.pv2-live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 6px; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: pv2-pulse 2s infinite; vertical-align: 1px; }
@keyframes pv2-pulse { 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

.pv2-phone { position: relative; width: 318px; height: 660px; padding: 11px; border-radius: 52px; background: linear-gradient(145deg, #2a2d34, #0b0c10 40%, #1a1c22); box-shadow: inset 0 0 0 2px #3a3d45, inset 0 0 0 4px #0b0c10, 0 40px 80px -30px rgba(15,23,42,.55), 0 18px 30px -18px rgba(15,23,42,.45); }
.pv2-phone__island { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 96px; height: 28px; border-radius: 20px; background: #000; z-index: 5; }
.pv2-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: #0b1220; isolation: isolate; }
.pv2-window { position: relative; width: 100%; max-width: 560px; border-radius: 14px; overflow: hidden; background: #0f172a; box-shadow: 0 40px 80px -30px rgba(15,23,42,.6), 0 0 0 1px rgba(15,23,42,.15); }
.pv2-window__bar { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; background: #1e293b; color: #94a3b8; font-size: 12px; }
.pv2-window__bar > i { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; }
.pv2-window__bar > i:nth-child(2) { background: #f59e0b; }
.pv2-window__bar > i:nth-child(3) { background: #22c55e; }
.pv2-window__bar span { margin-left: 10px; }
.pv2-window__body { position: relative; height: 400px; isolation: isolate; }

/* Recursos, prints, relacionados */
.pv2-section { margin-top: 56px; }
.pv2-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pv2-section__head h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.pv2-section__head p { margin: 0; font-size: 14px; color: var(--pv-ink-3); }
.pv2-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--pv-line); }
.pv2-features li { border-bottom: 1px solid var(--pv-line); }
.pv2-features li:not(:nth-child(3n+1)) { border-left: 1px solid var(--pv-line); }
.pv2-features button { width: 100%; height: 100%; display: flex; align-items: flex-start; gap: 14px; padding: 22px 20px; text-align: left; font-size: 15px; line-height: 1.5; color: var(--pv-ink); background: transparent; transition: background .2s; }
.pv2-features button:hover:not(:disabled) { background: color-mix(in srgb, var(--pa) 5%, #fff); }
.pv2-features button.is-on { background: color-mix(in srgb, var(--pa) 9%, #fff); }
.pv2-features__n { font-size: 12px; font-weight: 700; color: var(--pa); padding-top: 3px; font-variant-numeric: tabular-nums; }
.pv2-features button > span:nth-child(2) { flex: 1; }
.pv2-features button > i { color: var(--pv-ink-3); font-size: 12px; padding-top: 6px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.pv2-features button:hover > i, .pv2-features button.is-on > i { opacity: 1; transform: none; color: var(--pa); }
.pv2-features button.is-static { cursor: default; }
.pv2-features button.is-static > i { display: none; }
.pv2-detail .produto-screenshots-track { margin: 0; }
.pv2-related { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pv2-rel { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--pv-line); text-align: left; transition: border-color .2s, transform .2s; min-width: 0; }
.pv2-rel:hover { border-color: color-mix(in srgb, var(--pa) 40%, var(--pv-line)); transform: translateY(-2px); }
.pv2-rel__icon { width: 48px; height: 48px; flex: none; border-radius: 12px; overflow: hidden; background: #f1f5f9; }
.pv2-rel__icon img { width: 100%; height: 100%; object-fit: cover; }
.pv2-rel__txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pv2-rel__txt strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-rel__txt small { font-size: 12px; color: var(--pv-ink-3); }
.pv2-rel__txt small i { color: #f59e0b; }
.pv2-rel > i { color: var(--pv-ink-3); font-size: 12px; }

@media (max-width: 1024px) {
    .pv2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv2-hero { grid-template-columns: 1fr; padding: 28px; }
    .pv2-stage { order: -1; }
    .pv2-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pv2-features li:not(:nth-child(3n+1)) { border-left: 0; }
    .pv2-features li:nth-child(2n) { border-left: 1px solid var(--pv-line); }
    .pv2-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .pv2-grid { grid-template-columns: 1fr; }
    .pv2-card--feature { grid-column: auto; grid-template-columns: 1fr; padding: 22px; }
    .pv2-card--feature .pv2-card__top { grid-row: auto; }
    .pv2-card--feature .pv2-card__head { grid-column: 1; }
    .pv2-card--feature .pv2-card__icon { width: 72px; height: 72px; }
    .pv2-hero { padding: 20px 16px; border-radius: 22px; }
    .pv2-features { grid-template-columns: 1fr; }
    .pv2-features li:nth-child(2n) { border-left: 0; }
    .pv2-related { grid-template-columns: 1fr; }
    .pv2-stats > div { padding: 10px 14px; }
    .pv2-stage--desktop .pv2-window { border-radius: 10px; }
}
@media (max-width: 360px) {
    .pv2-phone { transform: scale(.9); transform-origin: top center; margin-bottom: -66px; }
}

/* ================= Mockups (dentro da tela) ================= */
.mk { --mk-bg: #0b1220; --mk-surf: #141d30; --mk-surf2: #1c2740; --mk-line: rgba(255,255,255,.08); --mk-tx: #f1f5f9; --mk-tx2: #94a3b8;
    position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--mk-bg); color: var(--mk-tx);
    font: 400 13px/1.4 Poppins, system-ui, sans-serif; text-align: left; overflow: hidden; -webkit-user-select: none; user-select: none; }
.mk--light { --mk-bg: #f8fafc; --mk-surf: #ffffff; --mk-surf2: #eef2f7; --mk-line: rgba(15,23,42,.08); --mk-tx: #0f172a; --mk-tx2: #64748b; }
:where(.mk) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mk input { font: inherit; }
.mk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 50px 16px 10px; flex: none; }
.mk-h { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.mk-head__actions { display: inline-flex; align-items: center; gap: 2px; }
.mk-brand { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.mk-brand i { color: var(--pa); }
.mk-brand b { color: var(--pa); font-weight: 700; }
.mk-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.mk-view[hidden] { display: none; }
.mk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; scrollbar-width: none; }
.mk-body::-webkit-scrollbar { display: none; }
.mk-center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mk-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--mk-tx2); margin: 14px 0 8px; align-self: stretch; text-align: left; }
.mk-label small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mk-hint { font-size: 11.5px; color: var(--mk-tx2); margin: 10px 0 0; line-height: 1.45; }
.mk-hint--pad { padding: 0 16px 6px; margin: 0; }
.mk-muted { color: var(--mk-tx2); }
.mk-empty { color: var(--mk-tx2); font-size: 12px; padding: 10px 0; margin: 0; }
.mk-ok { color: #22c55e; font-weight: 600; }

.mk-icon { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; color: var(--mk-tx2); font-size: 15px; transition: background .15s, color .15s; }
.mk-icon:hover { background: var(--mk-surf2); color: var(--mk-tx); }
.mk-icon:disabled { opacity: .35; cursor: default; }
.mk-icon.is-fav { color: #f43f5e; }
.mk-icon.is-ok { color: #22c55e; }
.mk-icon--fill { background: var(--pa); color: #fff; border-radius: 50%; width: 36px; height: 36px; }
.mk-icon--fill:hover { background: var(--pa); color: #fff; filter: brightness(1.1); }
.mk-round { width: 64px; height: 64px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--pa); color: #fff; font-size: 22px; box-shadow: 0 10px 24px -10px var(--pa); transition: transform .15s; }
.mk-round:active { transform: scale(.94); }
.mk-round--sm { width: 42px; height: 42px; font-size: 15px; box-shadow: none; flex: none; }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 14px; padding: 0 16px; border-radius: 14px; background: var(--pa); color: #fff !important; font-weight: 600; }
.mk-btn--ghost { background: var(--mk-surf2); color: var(--mk-tx) !important; }
.mk-btn--sm { width: auto; min-height: 40px; margin-top: 10px; font-size: 12.5px; padding: 0 14px; }
.mk-link { margin-top: 6px; color: var(--pa) !important; font-size: 12px; font-weight: 600; min-height: 32px; text-decoration: underline; text-underline-offset: 3px; }

.mk-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 8px; scrollbar-width: none; flex: none; }
.mk-body .mk-chips { padding: 2px 0 8px; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chips--wrap { flex-wrap: wrap; overflow: visible; }
.mk-chip { flex: none; min-height: 34px; padding: 0 13px; border-radius: 999px; background: var(--mk-surf); border: 1px solid var(--mk-line) !important; color: var(--mk-tx2) !important; font-size: 12px; font-weight: 500; white-space: nowrap; }
.mk-chip.is-on { background: var(--pa); border-color: var(--pa) !important; color: #fff !important; }
.mk-seg { display: flex; padding: 3px; gap: 3px; border-radius: 12px; background: var(--mk-surf2); margin: 4px 0 10px; }
.mk-seg button { flex: 1; min-height: 34px; border-radius: 9px; font-size: 11.5px; font-weight: 600; color: var(--mk-tx2); white-space: nowrap; padding: 0 4px; }
.mk-seg button.is-on { background: var(--mk-surf); color: var(--mk-tx); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.mk-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--mk-surf2); color: var(--mk-tx2); font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.mk-pill--red { background: #dc2626; color: #fff; }
.mk-pill--on { background: color-mix(in srgb, var(--pa) 22%, transparent); color: var(--mk-tx); }
.mk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: mk-blink 1.2s infinite; }
.mk-dot--red { background: #ef4444; }
@keyframes mk-blink { 50% { opacity: .3; } }

.mk-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--mk-line); }
.mk-row.is-on .mk-row__txt strong { color: var(--pa); }
.mk-row__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; min-height: 44px; }
.mk-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-row__txt strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row__txt small { font-size: 11px; color: var(--mk-tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-row__txt small.mk-meta { font-size: 10.5px; }
.mk-tile { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--c); color: #fff; font-weight: 700; font-size: 13px; }
.mk-tile--lg { width: 56px; height: 56px; }
.mk-eqbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; vertical-align: -1px; }
.mk-eqbars i { width: 3px; height: 40%; background: var(--pa); border-radius: 2px; }
.mk-eqbars.is-play i { animation: mk-eq .9s ease-in-out infinite; }
.mk-eqbars.is-play i:nth-child(2) { animation-delay: -.3s; }
.mk-eqbars.is-play i:nth-child(3) { animation-delay: -.6s; }
@keyframes mk-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

.mk-nav { flex: none; display: flex; padding: 6px 8px 20px; border-top: 1px solid var(--mk-line); background: var(--mk-bg); }
.mk-nav button { flex: 1; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--mk-tx2); font-size: 10.5px; font-weight: 500; border-radius: 12px; }
.mk-nav button i { font-size: 16px; }
.mk-nav button.is-on { color: var(--pa); }
.mk-nav button.is-on i { transform: translateY(-1px); }

.mk-mini { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 10px 8px; padding: 8px 8px 8px 10px; border-radius: 16px; background: var(--mk-surf2); }
.mk-mini[hidden] { display: none; }
.mk-mini .mk-tile { width: 38px; height: 38px; }

.mk-switch { position: relative; width: 46px; height: 28px; flex: none; border-radius: 999px; background: rgba(148,163,184,.4) !important; transition: background .2s; }
.mk-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.mk-switch.is-on { background: var(--pa) !important; }
.mk-switch.is-on span { transform: translateX(18px); }
.mk-setting { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--mk-line); text-align: left; align-self: stretch; }
.mk-setting > span:not(.mk-tile):not(.mk-row__txt) { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mk-setting strong { font-size: 13px; font-weight: 600; }
.mk-setting small { font-size: 11px; color: var(--mk-tx2); line-height: 1.35; }
.mk-option { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--mk-line) !important; text-align: left; font-size: 13.5px; }
.mk-option i { width: 18px; color: var(--mk-tx2); }
.mk-option.is-on i { color: var(--pa); }
.mk-range { display: block; margin: 10px 0 0; align-self: stretch; text-align: left; }
.mk-range > span { display: flex; justify-content: space-between; font-size: 12px; color: var(--mk-tx2); margin-bottom: 4px; }
.mk-range b { color: var(--mk-tx); font-weight: 600; }
.mk input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; }
.mk input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: var(--mk-surf2); }
.mk input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7.5px; border-radius: 50%; background: #fff; border: 3px solid var(--pa); }
.mk input[type=range]::-moz-range-track { height: 5px; border-radius: 5px; background: var(--mk-surf2); }
.mk input[type=range]::-moz-range-progress { height: 5px; border-radius: 5px; background: var(--pa); }
.mk input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--pa); }

/* Slider vertical */
.mk-vs { position: relative; width: 28px; height: 150px; touch-action: none; cursor: ns-resize; outline: none; }
.mk-vs__track { position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; transform: translateX(-50%); border-radius: 5px; background: var(--mk-surf2); }
.mk-vs__fill { position: absolute; left: 0; right: 0; border-radius: 5px; background: var(--pa); }
.mk-vs__mid { position: absolute; left: -6px; right: -6px; top: 50%; height: 1px; background: var(--mk-tx2); opacity: .5; }
.mk-vs__thumb { position: absolute; left: 50%; width: 22px; height: 12px; border-radius: 6px; transform: translate(-50%, 50%); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.mk-vs:focus-visible .mk-vs__thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa) 50%, transparent); }
.mk-eq { display: flex; justify-content: space-between; gap: 2px; padding: 6px 0 2px; }
.mk-eq__col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-eq__col small { font-size: 9.5px; color: var(--mk-tx2); font-variant-numeric: tabular-nums; }
.mk-eq--sm .mk-vs { height: 120px; width: 24px; }

/* Sheet e toast */
.mk-sheet { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.mk-sheet__scrim { position: absolute; inset: 0; width: 100%; background: rgba(2,6,23,.55) !important; opacity: 0; transition: opacity .2s; pointer-events: auto; }
.mk-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82%; display: flex; flex-direction: column; background: var(--mk-surf); color: var(--mk-tx); border-radius: 22px 22px 0 0; transform: translateY(100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); pointer-events: auto; padding-bottom: 18px; }
.mk-sheet.is-on .mk-sheet__scrim { opacity: 1; }
.mk-sheet.is-on .mk-sheet__panel { transform: none; }
.mk-sheet__grip { width: 36px; height: 4px; border-radius: 4px; background: var(--mk-tx2); opacity: .4; margin: 8px auto 2px; }
.mk-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 4px 16px; }
.mk-sheet__head strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-x { width: 40px; height: 40px; border-radius: 12px; color: var(--mk-tx2) !important; }
.mk-sheet__body { overflow-y: auto; padding: 0 16px; scrollbar-width: none; }
.mk-toast { position: absolute; left: 50%; bottom: 92px; z-index: 30; transform: translate(-50%, 10px); max-width: 86%; padding: 9px 14px; border-radius: 12px; background: rgba(15,23,42,.94); color: #fff; font: 500 12px/1.35 Poppins, sans-serif; text-align: center; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); }
.mk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pv2-window .mk-toast { bottom: 20px; }
.mk-share { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 0 4px; }
.mk-share button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10.5px; color: var(--mk-tx2) !important; min-height: 72px; }
.mk-share span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; }
.mk-flash { animation: mk-flash 1.2s ease-out; border-radius: 12px; }
@keyframes mk-flash { 0%, 40% { box-shadow: 0 0 0 3px var(--pa); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Chat */
.mk-chat { display: flex; flex-direction: column; gap: 6px; }
.mk-msg { align-self: flex-start; max-width: 85%; padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: var(--mk-surf2); font-size: 12px; text-align: left; animation: pv2-in .3s both; }
.mk-msg b { display: block; font-size: 10.5px; color: var(--pa); font-weight: 600; }
.mk-msg--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--pa); color: #fff; }
.mk-msg--me b { color: rgba(255,255,255,.8); }
.mk-msg.is-removed span { font-style: italic; opacity: .55; }
.mk-input { flex: none; display: flex; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid var(--mk-line); }
.mk-input input { flex: 1; min-width: 0; height: 40px; border-radius: 999px; border: 1px solid var(--mk-line); background: var(--mk-surf); color: var(--mk-tx); padding: 0 14px; font-size: 12.5px; outline: none; -webkit-user-select: text; user-select: text; }
.mk-input input:focus { border-color: var(--pa); }
.mk-input button { width: 40px; height: 40px; border-radius: 50%; background: var(--pa) !important; color: #fff !important; flex: none; }

/* 1 · rádio */
.mk-radio { --mk-bg: #0a1022; --mk-surf: #121a33; --mk-surf2: #1b2546; }
.mk-live-card { margin: 0 16px 8px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--pa), #1e3a8a); display: flex; flex-direction: column; gap: 4px; flex: none; }
.mk-live-card .mk-pill { align-self: flex-start; }
.mk-live-card strong { font-size: 15px; }
.mk-live-card small { color: rgba(255,255,255,.75); font-size: 11px; }

/* 2 · gravador */
.mk-rec { --mk-bg: #111214; --mk-surf: #1b1c20; --mk-surf2: #26272d; }
.mk-format { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 8px 0 0; }
.mk-timer { font-size: 44px; font-weight: 300; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 22px 0 6px; }
.mk-wave { width: 100%; height: 90px; display: block; }
.mk-status { font-size: 12px; color: var(--mk-tx2); margin: 10px 0 16px; min-height: 18px; display: flex; align-items: center; justify-content: center; gap: 6px; text-wrap: balance; }
.mk-recbtn { width: 78px; height: 78px; border-radius: 50%; border: 4px solid rgba(255,255,255,.85) !important; display: grid; place-items: center; }
.mk-recbtn span { width: 58px; height: 58px; border-radius: 50%; background: #ef4444; transition: all .2s; }
.mk-recbtn.is-on span { width: 28px; height: 28px; border-radius: 7px; }
.mk-recbtn--sm { width: 56px; height: 56px; border-width: 3px !important; border-color: var(--mk-tx2) !important; }
.mk-recbtn--sm span { width: 40px; height: 40px; }
.mk-recbtn--sm.is-on span { width: 20px; height: 20px; }
.mk-trim { position: relative; height: 64px; border-radius: 10px; background: var(--mk-surf2); overflow: hidden; margin: 6px 0 4px; }
.mk-trim canvas { width: 100%; height: 100%; display: block; }
.mk-trim__sel { position: absolute; top: 0; bottom: 0; border: 2px solid var(--pa); background: color-mix(in srgb, var(--pa) 18%, transparent); border-radius: 8px; }

/* 3 · player */
.mk-player.mk--dark { --mk-bg: #120a14; --mk-surf: #1d1220; --mk-surf2: #2a1b2e; }
.mk-now { display: flex; flex-direction: column; align-items: center; }
.mk-cover { --h: 320; width: 210px; height: 210px; border-radius: 22px; display: grid; place-items: center; font-size: 54px; color: rgba(255,255,255,.85); margin-top: 6px;
    background: radial-gradient(circle at 30% 25%, hsl(calc(var(--h) + 40) 90% 65%), transparent 55%), linear-gradient(135deg, hsl(var(--h) 80% 55%), hsl(calc(var(--h) + 60) 70% 30%)); box-shadow: 0 20px 40px -18px hsl(var(--h) 80% 40%); transition: transform .4s; }
.mk-cover.is-play { transform: scale(1.02); }
.mk-cover--sm { width: 44px; height: 44px; border-radius: 10px; font-size: 16px; margin: 0; flex: none; box-shadow: none; }
.mk-now__meta { display: flex; flex-direction: column; align-items: center; margin: 16px 0 6px; }
.mk-now__meta strong { font-size: 18px; }
.mk-now__meta small { color: var(--mk-tx2); font-size: 12px; }
.mk-seek { margin-top: 4px; }
.mk-times { display: flex; justify-content: space-between; width: 100%; font-size: 11px; color: var(--mk-tx2); margin-top: -4px; font-variant-numeric: tabular-nums; }
.mk-ctrls { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 8px 0 2px; }
.mk-ctrls .mk-icon { font-size: 19px; color: var(--mk-tx); }
.mk-lyrics p { font-size: 17px; font-weight: 600; color: var(--mk-tx2); opacity: .45; margin: 0 0 12px; transition: opacity .3s, color .3s; line-height: 1.35; }
.mk-lyrics p.is-on { opacity: 1; color: var(--mk-tx); }
.mk-lyrics .mk-label { opacity: 1; font-size: 11px; }
.mk-lyrics--sheet p { opacity: 1; color: var(--mk-tx); font-size: 15px; }
.mk-home { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; padding: 60px 16px 20px; background: linear-gradient(160deg, #312e81, #831843); animation: pv2-in .3s both; }
.mk-home__time { font-size: 48px; font-weight: 300; color: #fff; margin: 4px 0 18px; }
.mk-widget { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border-radius: 22px; background: rgba(255,255,255,.18); backdrop-filter: blur(16px); color: #fff; }
.mk-widget .mk-row__txt small { color: rgba(255,255,255,.75); }
.mk-home__apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; margin: 22px 0 auto; padding: 0 8px; }
.mk-home__apps i { aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.2); }
.mk-home .mk-hint { color: rgba(255,255,255,.8); text-align: center; }

/* 4 · equalizer */
.mk-eqapp { --mk-bg: #0d0717; --mk-surf: #170e26; --mk-surf2: #241739; }
.mk-power { font-size: 11px; color: var(--mk-tx2); margin-right: 6px; }
.mk-viz { position: relative; height: 92px; border-radius: 16px; background: var(--mk-surf); overflow: hidden; margin-bottom: 10px; }
.mk-viz canvas { width: 100%; height: 100%; display: block; }
.mk-viz .mk-round { position: absolute; right: 8px; top: 8px; }
.mk-eqbody.is-off [data-pane], .mk-eqbody.is-off .mk-viz { opacity: .35; filter: grayscale(1); }
.mk-eqapp.is-night::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); pointer-events: none; z-index: 10; }
.mk-knob { --v: 40; width: 128px; height: 128px; margin: 8px auto 6px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(closest-side, var(--mk-surf) 78%, transparent 80% 100%), conic-gradient(from 225deg, var(--pa) calc(var(--v) * 2.7deg), var(--mk-surf2) 0 270deg, transparent 0); }
.mk-knob span { font-size: 26px; font-weight: 700; }
.mk-knob small { font-size: 10.5px; color: var(--mk-tx2); }
.mk-appvol { display: flex; align-items: center; gap: 10px; }
.mk-appvol .mk-range { flex: 1; margin: 6px 0; }
.mk-appvol .mk-tile { width: 36px; height: 36px; }

/* 5 · mix live */
.mk-mix { --mk-bg: #050b18; --mk-surf: #0c1528; --mk-surf2: #13203a; }
.mk-onair { width: 100%; min-height: 76px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 2px solid #334155 !important; background: var(--mk-surf) !important; color: #64748b !important; transition: all .25s; }
.mk-onair span { font-size: 22px; font-weight: 800; letter-spacing: .14em; }
.mk-onair small { font-size: 11px; }
.mk-onair.is-on { border-color: #ef4444 !important; background: #b91c1c !important; color: #fff !important; box-shadow: 0 0 30px -6px #ef4444; }
.mk-select { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 10px; padding: 0 12px; border-radius: 14px; background: var(--mk-surf) !important; text-align: left; }
.mk-select span { flex: 1; display: flex; flex-direction: column; }
.mk-select small { font-size: 10px; color: var(--mk-tx2); }
.mk-select strong { font-size: 12.5px; }
.mk-select i { color: var(--mk-tx2); }
.mk-strips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.mk-strips::-webkit-scrollbar { display: none; }
.mk-strip { flex: none; width: 58px; padding: 8px 4px; border-radius: 14px; background: var(--mk-surf); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-strip > i { color: var(--pa); font-size: 13px; }
.mk-strip small { font-size: 9.5px; color: var(--mk-tx2); white-space: nowrap; }
.mk-strip__row { display: flex; gap: 2px; align-items: stretch; }
.mk-strip .mk-vs { height: 110px; width: 24px; }
.mk-vu { width: 6px; border-radius: 3px; background: var(--mk-surf2); position: relative; overflow: hidden; }
.mk-vu span { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, #22c55e 0 60%, #f59e0b 60% 85%, #ef4444 85%); background-size: 100% 110px; background-position: bottom; }
.mk-mute { width: 36px; height: 30px; border-radius: 8px; background: var(--mk-surf2) !important; font-size: 11px; font-weight: 700; color: var(--mk-tx2) !important; }
.mk-mute.is-on { background: #f59e0b !important; color: #111 !important; }
.mk-when { width: 54px; flex: none; display: flex; flex-direction: column; }
.mk-when b { font-size: 14px; }
.mk-when small { font-size: 10px; color: var(--mk-tx2); }

/* 6 · muda voz */
.mk-voz { --mk-bg: #f3faf7; --mk-surf: #ffffff; --mk-surf2: #e3f1ea; }
.mk-avatar { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--pa) 18%, #fff), #fff); border: 1px solid var(--mk-line); }
.mk-avatar > span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: #fff; box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); transition: transform .2s; }
.mk-avatar.is-talk > span { animation: mk-talk .35s ease-in-out infinite alternate; }
@keyframes mk-talk { to { transform: scale(1.1) rotate(-4deg); } }
.mk-avatar div { display: flex; flex-direction: column; min-width: 0; }
.mk-avatar strong { font-size: 15px; }
.mk-avatar small { color: var(--mk-tx2); font-size: 11px; }
.mk-vozrec { display: flex; align-items: center; gap: 12px; margin-top: 12px; text-align: left; }
.mk-vozrec span { display: flex; flex-direction: column; }
.mk-vozrec strong { font-size: 13px; }
.mk-vozrec small { font-size: 10.5px; color: var(--mk-tx2); }
.mk-fxgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mk-fx { min-height: 64px; border-radius: 14px; background: var(--mk-surf) !important; border: 1px solid var(--mk-line) !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10.5px; font-weight: 500; }
.mk-fx i { font-size: 17px; color: var(--pa); }
.mk-fx.is-on { background: var(--pa) !important; color: #fff !important; border-color: var(--pa) !important; }
.mk-fx.is-on i { color: #fff; }
.mk-av-sm { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: var(--mk-surf2); }

/* 7 · mp3 studio */
.mk-studio { --mk-bg: #0f0d0a; --mk-surf: #1a1712; --mk-surf2: #2a251c; }
.mk-file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--mk-surf); }
.mk-file > i { font-size: 22px; color: var(--pa); }
.mk-wavebox { position: relative; height: 120px; margin: 14px 0 10px; border-radius: 14px; background: var(--mk-surf); touch-action: none; cursor: pointer; }
.mk-wavebox canvas { width: 100%; height: 100%; display: block; }
.mk-selbox { position: absolute; top: 0; bottom: 0; border-top: 2px solid var(--pa); border-bottom: 2px solid var(--pa); background: color-mix(in srgb, var(--pa) 10%, transparent); pointer-events: none; }
.mk-handle { position: absolute; top: -6px; bottom: -6px; width: 22px; pointer-events: auto; cursor: ew-resize; touch-action: none; outline: none; }
.mk-handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); background: var(--pa); border-radius: 2px; }
.mk-handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 14px; height: 28px; transform: translate(-50%, -50%); border-radius: 6px; background: var(--pa); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.mk-handle:focus-visible::after { box-shadow: 0 0 0 3px #fff; }
.mk-handle--a { left: -11px; }
.mk-handle--b { right: -11px; }
.mk-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; pointer-events: none; }
.mk-tc { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.mk-tc > div { padding: 8px; border-radius: 12px; background: var(--mk-surf); display: flex; flex-direction: column; gap: 2px; }
.mk-tc small { font-size: 10px; color: var(--mk-tx2); }
.mk-tc strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.mk-tc span { display: flex; gap: 4px; }
.mk-tc span button { flex: 1; height: 28px; border-radius: 8px; background: var(--mk-surf2) !important; font-weight: 700; }

/* 8 · finder */
.mk-finder { --mk-bg: #0c0718; --mk-surf: #160f2a; --mk-surf2: #22183d; }
.mk-listen { position: relative; width: 150px; height: 150px; border-radius: 50%; margin: 22px 0 14px; display: grid; place-items: center; font-size: 46px; color: #fff !important; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pa) 60%, #fff), var(--pa) 60%) !important; box-shadow: 0 20px 50px -14px var(--pa); }
.mk-listen__rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pa); opacity: 0; }
.mk-listen.is-on .mk-listen__rings i { animation: mk-ring 1.8s ease-out infinite; }
.mk-listen.is-on .mk-listen__rings i:nth-child(2) { animation-delay: .6s; }
.mk-listen.is-on .mk-listen__rings i:nth-child(3) { animation-delay: 1.2s; }
@keyframes mk-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }
.mk-result { width: 100%; padding: 14px; border-radius: 18px; background: var(--mk-surf); display: grid; grid-template-columns: auto 1fr; gap: 12px; text-align: left; animation: pv2-in .35s both; }
.mk-result .mk-cover { width: 64px; height: 64px; border-radius: 14px; font-size: 22px; margin: 0; }
.mk-result__meta { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.mk-result__meta strong { font-size: 15px; }
.mk-result__meta small { color: var(--mk-tx2); font-size: 11px; }
.mk-result__acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.mk-result__acts .mk-btn { flex: 1; margin-top: 0; }
.mk-stream { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; }
.mk-stream small { font-size: 10.5px; color: var(--mk-tx2); margin-right: auto; }
.mk-stream button { width: 40px; height: 40px; border-radius: 12px; background: var(--mk-surf2) !important; font-size: 17px; }
.mk-row--pend { background: var(--mk-surf); border-radius: 12px; padding: 8px; border: 0; margin-bottom: 6px; }

/* 9 · sound meter */
.mk-meter { --mk-bg: #07110b; --mk-surf: #0e1c13; --mk-surf2: #16291c; }
.mk-alert { flex: none; margin: 0 12px 6px; padding: 8px 12px; border-radius: 12px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.mk-alert[hidden], .mk-bgpill[hidden] { display: none; }
.mk-bgpill { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 6; height: 28px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border-radius: 999px; background: #166534; color: #dcfce7; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.mk-gauge { position: relative; width: 230px; margin-top: 6px; }
.mk-gauge svg { width: 100%; display: block; }
.mk-gauge__bg, .mk-gauge__fg { fill: none; stroke-width: 14; stroke-linecap: round; }
.mk-gauge__bg { stroke: var(--mk-surf2); }
.mk-gauge__fg { stroke: #22c55e; stroke-dasharray: 0 100; transition: stroke-dasharray .25s, stroke .25s; }
.mk-gauge__v { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-direction: column; align-items: center; }
.mk-gauge__v strong { font-size: 46px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.mk-gauge__v small { font-size: 11px; color: var(--mk-tx2); }
.mk-gauge__v span { font-size: 11.5px; margin-top: 2px; }
.mk-mma { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; margin-top: 12px; }
.mk-mma div { padding: 8px; border-radius: 12px; background: var(--mk-surf); display: flex; flex-direction: column; align-items: center; }
.mk-mma small { font-size: 10px; color: var(--mk-tx2); }
.mk-mma b { font-size: 16px; font-variant-numeric: tabular-nums; }
.mk-chart { width: 100%; height: 170px; display: block; border-radius: 14px; background: var(--mk-surf); }
.mk-refrow { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 10px; border-radius: 12px; }
.mk-refrow b { width: 54px; font-variant-numeric: tabular-nums; }
.mk-refrow span { flex: 1; }
.mk-refrow em { font-style: normal; font-size: 10px; font-weight: 700; color: #052e16; background: #22c55e; border-radius: 999px; padding: 2px 8px; }
.mk-refrow.is-on { background: var(--mk-surf2); }

/* Genérico */
.mk-generic .mk-center { justify-content: center; height: 100%; padding: 24px; gap: 12px; }
.mk-genicon { width: 96px; height: 96px; border-radius: 24px; }
.mk-generic ul { text-align: left; padding-left: 18px; color: var(--mk-tx2); font-size: 12px; }
.mk-shots { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mk-shots img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.mk-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.mk-dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4) !important; }
.mk-dots button.is-on { background: #fff !important; width: 20px; border-radius: 4px; }


/* ================= Apps desktop: janela escalada (área fixa 1040x640) ================= */
.pv2-hero--desk { grid-template-columns: minmax(0, 1fr); }
.pv2-hero--desk .pv2-hero__info { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.pv2-hero--desk .pv2-hero__id, .pv2-hero--desk .pv2-hero__title, .pv2-hero--desk .pv2-hero__desc { grid-column: 1; }
.pv2-hero--desk .pv2-stats, .pv2-hero--desk .pv2-actions, .pv2-hero--desk .pv2-tour { grid-column: 2; }
.pv2-hero--desk .pv2-stats { grid-row: 1 / span 2; align-self: end; margin-top: 0; }
.pv2-hero--desk .pv2-actions { grid-row: 3; align-self: start; }
.pv2-hero--desk .pv2-tour { grid-row: 4; margin-top: 18px; }
.pv2-hero--desk .pv2-stage { order: 0; }
.pv2-hero--desk .pv2-stage__glow { width: 70%; height: 60%; }
.pv2-stage--desktop { width: 100%; }
.pv2-stage--desktop .pv2-window { max-width: 1100px; }
.pv2-window__bar { position: relative; }
.pv2-window__fs { margin-left: auto; width: 30px; height: 26px; border-radius: 7px; color: #cbd5e1; font-size: 13px; background: transparent; border: 0; cursor: pointer; }
.pv2-window__fs:hover, .pv2-window__fs:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.pv2-stage--desktop .pv2-window__body { height: calc(640px * var(--app-s, .5)); overflow: hidden; }
.pv2-window__app { position: absolute; top: 0; left: 0; width: 1040px; height: 640px; transform: scale(var(--app-s, .5)); transform-origin: 0 0; }
.pv2-window.is-full { position: fixed; inset: 0; z-index: 9999; max-width: none; border-radius: 0; background: #05070c; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv2-window.is-full .pv2-window__bar { position: absolute; top: 0; left: 0; right: 0; }
.pv2-window.is-full .pv2-window__body { width: min(100vw, calc((100vh - 40px) * 1040 / 640)); margin-top: 36px; }
html.pv2-noscroll, html.pv2-noscroll body { overflow: hidden; }
.pv2-window__app .mk-sheet__panel { left: 50%; right: auto; top: 50%; bottom: auto; width: 480px; max-height: 86%; border-radius: 12px; padding-bottom: 16px; transform: translate(-50%, -46%); opacity: 0; transition: transform .2s, opacity .2s; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.pv2-window__app .mk-sheet.is-on .mk-sheet__panel { transform: translate(-50%, -50%); opacity: 1; }
.pv2-window__app .mk-sheet__grip { display: none; }
.pv2-window__app .mk-sheet__head { padding: 12px 8px 8px 18px; }
.pv2-window__app .mk-sheet__body { padding: 0 18px; scrollbar-width: thin; }
.pv2-window__app .mk-x { width: 32px; height: 32px; border-radius: 8px; }
.pv2-window__app .mk-toast { bottom: 40px; font-size: 13px; }
@media (max-width: 1024px) {
    .pv2-hero--desk .pv2-hero__info { grid-template-columns: 1fr; }
    .pv2-hero--desk .pv2-stats, .pv2-hero--desk .pv2-actions, .pv2-hero--desk .pv2-tour { grid-column: 1; grid-row: auto; }
    .pv2-hero--desk .pv2-stats { margin-top: 22px; }
    .pv2-hero--desk .pv2-stage { order: -1; }
}
@media (max-width: 680px) {
    .pv2-stage--desktop .pv2-window__bar { height: 40px; }
    .pv2-window__fs { width: 40px; height: 34px; font-size: 15px; background: rgba(255,255,255,.08); }
}

/* ---------- HubLive ---------- */
.mk.hl { --pa: #f5a623; --mk-bg: #0d0d0f; --mk-surf: #161618; --mk-surf2: #222226; --mk-line: #2a2a2e; --mk-tx: #f2f2f3; --mk-tx2: #9a9aa2; font: 400 12px/1.4 'Noto Sans', 'Segoe UI', system-ui, sans-serif; }
.hl select, .hl input[type=text], .hl input[type=password] { font: inherit; color: var(--mk-tx); background: #1b1b1e; border: 1px solid var(--mk-line); border-radius: 6px; height: 28px; padding: 0 8px; outline: none; min-width: 0; }
.hl select:focus, .hl input:focus { border-color: #4a4a52; }
.hl-top { flex: none; display: flex; align-items: center; height: 48px; padding: 0 20px; background: #0a0a0c; border-bottom: 1px solid #18181b; }
.hl-logo { display: flex; align-items: center; gap: 8px; font-size: 16px; width: 170px; }
.hl-logo b { color: var(--pa); font-weight: 400; }
.hl-logo__mk { color: var(--pa); font-weight: 800; font-size: 19px; display: inline-flex; align-items: center; gap: 1px; }
.hl-logo__mk i { font-size: 9px; transform: rotate(90deg); }
.hl-nav { flex: 1; display: flex; justify-content: center; gap: 4px; }
.hl-nav button { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 7px; color: #b9b9c0; font-weight: 600; font-size: 12px; }
.hl-nav button:hover { color: #fff; }
.hl-nav button.is-on { background: #2a1d07; color: var(--pa); }
.hl-user { position: relative; width: 30px; height: 30px; color: #b9b9c0; }
.hl-user__dot { position: absolute; right: 4px; bottom: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; }
.hl-view { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.hl-ph { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.hl-ph h2 { font-size: 19px; margin: 0; font-weight: 700; }
.hl-ph p { margin: 2px 0 0; color: var(--mk-tx2); }
.hl-ph--cfg { align-items: flex-end; }
.hl-status { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid #3b3b40; color: var(--mk-tx2); font-weight: 600; }
.hl-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hl-status.is-live { border-color: #34d399; color: #34d399; }
.hl-card { background: var(--mk-surf); border: 1px solid var(--mk-line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.hl-card h3 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.hl-card--in { background: #111113; margin: 10px 0; }
.hl-row { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; }
.hl-tx__src { margin: 0 0 8px; color: var(--mk-tx2); }
.hl-tx__main { display: flex; gap: 12px; }
.hl-wave { flex: 1; min-width: 0; height: 132px; border: 1px solid var(--mk-line); border-radius: 8px; background: #111113; display: block; }
.hl-tx__btns { width: 92px; display: flex; flex-direction: column; gap: 6px; }
.hl-b { height: 34px; border-radius: 7px; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.hl-b--go { background: #34d399 !important; color: #06281c !important; }
.hl-b--go:disabled { opacity: .45; cursor: default; }
.hl-b--stop { background: #3a3a3f !important; color: #d4d4d8 !important; }
.hl-b--stop:not(:disabled) { background: #ef4444 !important; color: #fff !important; }
.hl-b--stop:disabled { opacity: .7; cursor: default; }
.hl-b--rec { border: 1px solid #ef4444 !important; color: #ef4444 !important; }
.hl-b--rec i { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; }
.hl-b--rec.is-on { background: #ef4444 !important; color: #fff !important; }
.hl-b--rec.is-on i { background: #fff; animation: hl-blink 1s infinite; }
@keyframes hl-blink { 50% { opacity: .2; } }
.hl-onair { text-align: right; margin-top: 4px; }
.hl-onair small, .hl-lab, .hl-kpis small, .hl-peak small, .hl-f > span { display: block; font-size: 10px; color: var(--mk-tx2); text-transform: uppercase; letter-spacing: .02em; }
.hl-onair b { font-size: 16px; font-variant-numeric: tabular-nums; }
.hl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 10px 0 8px; }
.hl-kpis b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.hl-acc { color: var(--pa); }
.hl-sec { display: flex; align-items: center; gap: 10px; }
.hl-mini { height: 26px !important; }
.hl-audio .hl-in { width: 100%; margin: 3px 0 10px; }
.hl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.hl-2 select { width: 60px; margin-top: 3px; }
.hl-gain { display: flex; justify-content: space-between; align-items: baseline; }
.hl-range { --p: 50%; margin: 4px 0 8px; height: 22px !important; }
.hl .hl-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--pa) var(--p), #3a3a3f var(--p)); height: 3px; }
.hl .hl-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; background: #0078d7; border: 0; }
.hl .hl-range::-moz-range-thumb { background: #0078d7; border: 0; }
.hl .hl-range::-moz-range-progress { background: var(--pa); }
.hl-lvl { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.hl-lvl small { width: 8px; font-size: 9px; color: var(--mk-tx2); }
.hl-seg { flex: 1; display: flex; gap: 2px; height: 22px; }
.hl-seg i { flex: 1; border-radius: 1px; background: #26262b; }
.hl-seg i.g { background: #34d399; } .hl-seg i.y { background: #fbbf24; } .hl-seg i.r { background: #ef4444; }
.hl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.hl-table th { text-align: left; font-weight: 400; font-size: 10px; color: var(--mk-tx2); padding: 0 8px 6px; }
.hl-table td { padding: 7px 8px; background: #121214; border-top: 1px solid #1d1d20; }
.hl-table tr td:first-child { border-radius: 6px 0 0 6px; width: 14px; }
.hl-table tr td:last-child { border-radius: 0 6px 6px 0; }
.hl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ef4444; }
.hl-dot.is-on { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); }
.hl-srvname { text-align: left; border-radius: 6px; padding: 2px 4px !important; }
.hl-srvname:hover { background: #1f1f23 !important; }
.hl-srvname b { display: block; font-size: 12px; }
.hl-srvname small { display: block; font-size: 10px; color: var(--mk-tx2); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-ok { color: #34d399; font-weight: 700; } .hl-err { color: #ef4444; font-weight: 700; } .hl-off { color: var(--mk-tx2); }
.hl-mono { font-variant-numeric: tabular-nums; font-weight: 600; }
.hl-hint, .hl-sub { color: var(--mk-tx2); font-size: 11px; margin: 4px 0 8px; }
.hl-empty { color: var(--mk-tx2); text-align: center; padding: 14px !important; }
.hl-acts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; }
.hl-acts--end { justify-content: flex-end; }
.hl-btn { height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--mk-line) !important; background: #1b1b1e !important; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.hl-btn:hover { background: #242428 !important; }
.hl-btn--acc { background: var(--pa) !important; border-color: var(--pa) !important; color: #1a1205 !important; }
.hl-btn--sq { width: 30px; padding: 0; }
.hl-btn--big { height: 34px; align-self: flex-end; }
.hl-chart__h { display: flex; justify-content: space-between; }
.hl-legend { display: flex; align-items: center; gap: 6px; color: var(--mk-tx2); font-size: 11px; margin: 0; }
.hl-legend i { width: 10px; height: 3px; border-radius: 2px; }
.hl-o { background: var(--pa); } .hl-g { background: #34d399; margin-left: 8px; }
.hl-peak { text-align: right; } .hl-peak b { font-size: 26px; color: #34d399; font-variant-numeric: tabular-nums; }
.hl-chart { width: 100%; height: 150px; display: block; margin-top: 6px; }
.hl-inline { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.hl-inline > span, .hl-inline > b { white-space: nowrap; }
.hl-path { flex: 1; } .hl-port { width: 70px; }
.mk-switch.hl-sw { width: 38px; height: 20px; }
.mk-switch.hl-sw span { width: 14px; height: 14px; }
.mk-switch.hl-sw.is-on span { transform: translateX(18px); background: #111; }
.hl-log { min-height: 300px; font: 11px/1.6 ui-monospace, 'Cascadia Mono', monospace; background: #0b0b0d; }
.hl-l { margin: 0; color: #c8c8ce; display: flex; align-items: center; gap: 8px; }
.hl-l i { width: 5px; height: 5px; border-radius: 50%; background: #6b6b73; flex: none; }
.hl-l.ok i { background: #34d399; } .hl-l.warn i { background: #fbbf24; } .hl-l.warn { color: #fbbf24; }
.hl-cfg { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
.hl-cfgnav { display: flex; flex-direction: column; gap: 3px; }
.hl-cfgnav button { text-align: left; height: 30px; padding: 0 12px; border-radius: 7px; color: #b9b9c0; font-weight: 700; }
.hl-cfgnav button.is-on { background: #1f1f23; color: #fff; }
.hl-cfgbody { min-width: 0; }
.hl-f { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; min-width: 0; }
.hl-f--top { margin: 0; } .hl-f--top select { width: 110px; }
.hl-grid { display: grid; gap: 10px; } .hl-grid--2 { grid-template-columns: 1fr 1fr; } .hl-grid--3 { grid-template-columns: 2fr 1fr 1fr; } .hl-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hl-grid--prof { grid-template-columns: 1fr 1fr auto; align-items: end; }
.hl-seg2 { display: flex; flex-wrap: wrap; gap: 4px; }
.hl-seg2 button { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--mk-line) !important; background: #1b1b1e !important; color: #c8c8ce; font-weight: 600; }
.hl-seg2 button.is-on { border-color: var(--pa) !important; color: var(--pa); background: #2a1d07 !important; }
.hl-h3b { margin-top: 14px !important; }
.hl-xsrv { display: grid; grid-template-columns: auto 120px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; background: #121214; border-radius: 7px; margin-bottom: 6px; }
.hl-xsrv code { color: #c8c8ce; font-size: 11px; } .hl-xsrv small { color: var(--mk-tx2); }
.hl-eqh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hl-eq { display: flex; justify-content: space-between; padding: 6px 10px 0; }
.hl-eqcol { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--mk-tx2); }
.hl-eqcol b { color: var(--mk-tx); font-variant-numeric: tabular-nums; }
.hl .mk-vs { height: 120px; width: 24px; }
.hl-detect { margin: 8px 0; padding: 8px 10px; border-radius: 7px; background: #2a1d07; color: #f5d39b; }
.hl-detect i { color: var(--pa); }
.hl-newtask { display: flex; align-items: flex-end; gap: 8px; }
.hl-newtask .hl-f { margin: 0; } .hl-newtask select { width: 70px; } .hl-newtask .hl-f:nth-child(4) select, .hl-newtask .hl-f:nth-child(5) select { width: 160px; }
.hl-colon { padding-bottom: 6px; }
.hl-form { display: flex; flex-direction: column; gap: 8px; }
.hl .mk-sheet__panel { background: #161618; border: 1px solid var(--mk-line); }

/* ---------- Sonora (tema claro) ---------- */
.mk.so { --pa: #3d67db; --mk-bg: #edf0f4; --mk-surf: #fff; --mk-surf2: #e3e8ef; --mk-line: #d8dee6; --mk-tx: #111827; --mk-tx2: #6b7280; font: 400 11.5px/1.4 Inter, 'Segoe UI', system-ui, sans-serif; color: var(--mk-tx); }
.so b { font-weight: 600; }
.so-in, .so select, .so input[type=text], .so input[type=email] { font: inherit; height: 28px; padding: 0 8px; border: 1px solid var(--mk-line); border-radius: 7px; background: #fff; color: var(--mk-tx); outline: none; min-width: 0; }
.so input:focus, .so select:focus { border-color: var(--pa); }
.so-top { flex: none; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--mk-line); }
.so-brand { display: flex; align-items: center; gap: 9px; text-align: left; width: 170px; }
.so-brand__ic { width: 28px; height: 28px; border-radius: 7px; background: var(--pa); color: #fff; display: grid; place-items: center; font-size: 12px; }
.so-brand b { display: block; font-size: 12.5px; } .so-brand small { display: block; color: var(--mk-tx2); font-size: 10px; }
.so-mode { display: flex; padding: 3px; border: 1px solid var(--mk-line); border-radius: 8px; }
.so-mode button { height: 26px; padding: 0 12px; border-radius: 6px; font-weight: 700; font-size: 10px; letter-spacing: .04em; color: var(--mk-tx2); }
.so-mode.is-auto [data-mode=auto] { background: #22c55e !important; color: #052e16; }
.so-mode.is-manual [data-mode=manual] { background: #f4b84a !important; color: #3b2503; }
.so-search { flex: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--mk-line); border-radius: 8px; color: var(--mk-tx2); min-width: 0; }
.so-search input { flex: 1; border: 0 !important; height: 26px; padding: 0 !important; background: transparent !important; min-width: 0; }
.so-search kbd, .so kbd { font: 9px ui-monospace, monospace; padding: 2px 6px; border: 1px solid var(--mk-line); border-radius: 4px; background: #f6f7f9; color: var(--mk-tx2); }
.so-search--in { flex: 0 1 260px; }
.so-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: #eef1f5 !important; color: #4b5563; font-weight: 600; font-size: 10px; white-space: nowrap; }
.so-chip > i:empty { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; }
.so-chip.is-on { background: #dcfce7 !important; color: #166534; }
.so-chip.is-on > i:empty { background: #22c55e; }
.so-chip--mic { height: 28px; border: 1px solid var(--mk-line) !important; background: #fff !important; border-radius: 7px; }
.so-chip--mic.is-on { background: #fee2e2 !important; color: #b91c1c; border-color: #fca5a5 !important; }
.so-clock { text-align: right; }
.so-clock b { display: block; font: 600 18px/1 ui-monospace, 'JetBrains Mono', monospace; }
.so-clock small { font-size: 9.5px; color: var(--mk-tx2); }
.so-body { flex: 1; min-height: 0; display: flex; }
.so-rail { width: 62px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: #fff; border-right: 1px solid var(--mk-line); }
.so-rail button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 8px; color: #4b5563; font-size: 8.5px; }
.so-rail button i { font-size: 14px; }
.so-rail button.is-on { background: #eaf0fd !important; color: var(--pa); box-shadow: inset 2px 0 0 var(--pa); }
.so-rail__cfg { margin-top: auto; }
.so-main { flex: 1; min-width: 0; position: relative; }
.so-v { position: absolute; inset: 0; padding: 12px; overflow: auto; scrollbar-width: thin; }
.mk.so:has(.so-transport:not([hidden])) .so-v { bottom: 0; }
.so-card { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 12px; }
.so-cap { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--mk-tx2); margin-bottom: 4px; }
.so-sp { flex: 1; }
.so-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--mk-line) !important; background: #f8f9fb !important; font-weight: 600; white-space: nowrap; }
.so-btn:hover { background: #eef1f5 !important; }
.so-btn--pri { background: var(--pa) !important; border-color: var(--pa) !important; color: #fff; }
.so-btn--pri:hover { background: #2f56c4 !important; }
.so-btn--red { background: #e5484d !important; border-color: #e5484d !important; color: #fff; min-width: 110px; }
.so-btn--red.is-on { background: #111827 !important; border-color: #111827 !important; }
.so-btn--sm { height: 26px; padding: 0 10px; font-size: 10.5px; }
.so-btn--full { width: 100%; margin-top: 8px; }
.so-btn.is-on { background: #fff7e6 !important; border-color: #f4b84a !important; }
.so-btn:disabled { opacity: .6; cursor: progress; }
.so-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.so-noar { display: grid; grid-template-columns: 270px minmax(0, 1fr) 300px; gap: 10px; }
.so-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.so-player__h { display: flex; justify-content: space-between; align-items: center; }
.so-player__h small { font-size: 9px; letter-spacing: .08em; color: var(--mk-tx2); font-weight: 700; }
.so-tag { font-size: 9px; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 4px; background: #eef1f5; color: #4b5563; }
.so-tag.is-live { background: #fee2e2; color: #b91c1c; }
.so-player__np { display: flex; gap: 10px; margin: 10px 0 6px; align-items: center; }
.so-cover { --h: 220; width: 48px; height: 48px; flex: none; border-radius: 8px; display: grid; place-items: center; background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 60% 50%); font-size: 18px; }
.so-cover--sm { width: 28px; height: 28px; font-size: 11px; }
.so-player__np b { display: block; font-size: 14px; } .so-player__np small { color: var(--mk-tx2); }
.so-player__t { display: flex; justify-content: space-between; align-items: flex-end; }
.so-player__t small { display: block; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--mk-tx2); }
.so-big { font: 600 30px/1.05 ui-monospace, 'JetBrains Mono', monospace; letter-spacing: -.02em; }
.so-ends { text-align: right; } .so-ends b { font: 600 13px ui-monospace, monospace; } .so-ends small:last-child { font: 9px ui-monospace, monospace; letter-spacing: 0; }
.so-wave { display: block; width: 100%; height: 34px; margin: 8px 0 6px; }
.so-lr { display: flex; align-items: center; gap: 6px; height: 7px; margin-bottom: 3px; }
.so-lr small { width: 7px; font-size: 7px; color: var(--mk-tx2); }
.so-lr span { flex: 1; height: 4px; background: repeating-linear-gradient(90deg, #e5e7eb 0 2px, transparent 2px 4px); position: relative; }
.so-lr i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: repeating-linear-gradient(90deg, #22c55e 0 2px, transparent 2px 4px); }
.so-vol { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.so-vol small { font-size: 9px; color: var(--mk-tx2); font-family: ui-monospace, monospace; }
.so input[type=range] { --p: 50%; height: 20px; }
.so input[type=range]::-webkit-slider-runnable-track { height: 5px; background: linear-gradient(90deg, var(--pa) var(--p), #e5e7eb var(--p)); }
.so input[type=range]::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -4.5px; background: #111827; border: 0; }
.so input[type=range]::-moz-range-thumb { background: #111827; border: 0; }
.so-player__b { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.so-player__b .so-btn { height: 34px; }
.so-blk b { display: block; font-size: 12.5px; margin-bottom: 6px; }
.so-blk__bar { height: 6px; border-radius: 3px; background: #eef1f5; overflow: hidden; margin-bottom: 4px; }
.so-blk__bar i { display: block; height: 100%; background: var(--pa); width: 0; transition: width .3s; }
.so-blk small { color: var(--mk-tx2); }
.so-queue { display: flex; flex-direction: column; min-height: 0; }
.so-queue__h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.so-queue__h b { font-size: 13px; }
.so-pill { font-size: 9.5px; padding: 3px 8px; border-radius: 999px; background: #eef1f5; color: #4b5563; }
.so-pill--b { background: #eaf0fd; color: var(--pa); font-weight: 600; }
.so-q { list-style: none; margin: 0; padding: 0; flex: 1; overflow: auto; scrollbar-width: thin; }
.so-qi { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 7px; border: 1px solid transparent; }
.so-qi:hover { background: #f6f8fb; border-color: #eef1f5; }
.so-grip { color: #c0c6d0; font-size: 10px; cursor: grab; }
.so-qi__ic, .so-qi__n { width: 24px; height: 24px; flex: none; border-radius: 6px; display: grid; place-items: center; font-size: 10px; background: #eaf0fd; color: var(--pa); }
.so-qi__n { background: transparent; color: var(--mk-tx2); font-family: ui-monospace, monospace; }
.so-t-vinheta { background: #f3e8ff; color: #7c3aed; } .so-t-comercial { background: #fff7e6; color: #b45309; } .so-t-hora { background: #e0f2fe; color: #0369a1; }
.so-qi__t { flex: 1; min-width: 0; } .so-qi__t b, .so-qi__t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .so-qi__t small { color: var(--mk-tx2); font-size: 10px; }
.so-qi__at, .so-qi__d { font: 10px ui-monospace, monospace; color: var(--mk-tx2); }
.so-qi__x { width: 22px; height: 22px; border-radius: 5px; color: #9ca3af; font-size: 10px; opacity: 0; }
.so-qi:hover .so-qi__x { opacity: 1; } .so-qi__x:hover { background: #eef1f5 !important; color: #111827; } .so-qi__x:disabled { visibility: hidden; }
.so-drop { margin-top: 8px; padding: 10px; border: 1.5px dashed #c0c6d0; border-radius: 8px; text-align: center; color: var(--mk-tx2); font-size: 10px; }
.so-empty { color: var(--mk-tx2); text-align: center; padding: 18px 8px; list-style: none; }
.so-col--r .so-card { flex: none; }
.so-mpads__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.so-mpads__h small { margin-left: auto; color: var(--mk-tx2); font-size: 9.5px; }
.so-tabs { display: flex; padding: 2px; border: 1px solid var(--mk-line); border-radius: 7px; }
.so-tabs button { height: 22px; padding: 0 8px; border-radius: 5px; font-size: 10px; color: #4b5563; }
.so-tabs button.is-on { background: var(--pa) !important; color: #fff; }
.so-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.so-pad { --c: var(--pa); position: relative; height: 40px; border-radius: 7px; padding: 5px 7px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; background: color-mix(in srgb, var(--c) 12%, #fff) !important; border: 1px solid color-mix(in srgb, var(--c) 35%, #fff) !important; color: color-mix(in srgb, var(--c) 80%, #000); overflow: hidden; }
.so-pad b { font-size: 10px; line-height: 1.1; } .so-pad small { font: 8.5px ui-monospace, monospace; opacity: .7; }
.so-pad::after { content: ''; position: absolute; inset: 0; background: var(--c); opacity: 0; }
.so-pad.is-hit::after { animation: so-hit .5s ease-out; }
@keyframes so-hit { 0% { opacity: .55; } 100% { opacity: 0; } }
.so-pad--empty { background: transparent !important; border: 1px dashed var(--mk-line) !important; color: #9ca3af; font-size: 9.5px; }
.so-pads:not(.so-pads--mini) .so-pad { height: 86px; padding: 10px 12px; }
.so-pads:not(.so-pads--mini) .so-pad b { font-size: 13px; }
.so-mlib__list { display: flex; flex-direction: column; gap: 3px; }
.so-ml { display: grid; grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; padding: 5px 8px; border-radius: 7px; border: 1px solid #eef1f5 !important; }
.so-ml:hover { background: #f6f8fb !important; }
.so-ml i { grid-row: span 2; color: var(--pa); } .so-ml span { grid-row: span 2; font: 10px ui-monospace, monospace; color: var(--mk-tx2); } .so-ml small { color: var(--mk-tx2); font-size: 9.5px; }
.so-ph { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.so-ph h2 { margin: 0; font-size: 17px; font-weight: 700; } .so-ph h3 { margin: 0; font-size: 14px; } .so-ph small { color: var(--mk-tx2); }
.so-prog { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start; }
.so-day { margin: 4px 0 12px; }
.so-day__h { display: flex; justify-content: space-between; font: 9px ui-monospace, monospace; color: var(--mk-tx2); }
.so-day__bar { position: relative; height: 30px; border-radius: 7px; background: #f3f5f8; margin-top: 3px; }
.so-day__bar button { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: #dbe5fb !important; color: var(--pa); font: 600 9.5px ui-monospace, monospace; border-left: 2px solid #fff !important; }
.so-day__bar button.is-on { background: var(--pa) !important; color: #fff; }
.so-day__now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #e5484d; border-radius: 1px; }
.so-blist { display: flex; flex-direction: column; gap: 5px; }
.so-bl { display: grid; grid-template-columns: 50px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--mk-line) !important; text-align: left; }
.so-bl b { font: 600 12px ui-monospace, monospace; } .so-bl small { color: var(--mk-tx2); }
.so-bl em { font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: #fee2e2; color: #b91c1c; }
.so-bl.is-on { border-color: var(--pa) !important; background: #f5f8ff !important; }
.so-legend { display: flex; gap: 12px; align-items: center; color: var(--mk-tx2); font-size: 10px; margin: 12px 0 0; }
.so-legend i { margin-right: -6px; } .so-legend span { margin-left: auto; }
.so-bsel h3 { margin: 0 0 10px; font-size: 14px; }
.so-q--sel { max-height: 300px; margin-bottom: 4px; }
.so-bib { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: start; }
.so-fold { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 7px; text-align: left; color: #374151; }
.so-fold i { color: var(--pa); width: 14px; } .so-fold small { margin-left: auto; font: 10px ui-monospace, monospace; color: var(--mk-tx2); }
.so-fold.is-on { background: #eaf0fd !important; color: var(--pa); font-weight: 600; }
.so-libbar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.so-fchip { height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--mk-line) !important; font-size: 10.5px; color: #374151; white-space: nowrap; }
.so-fchip:hover { background: #f6f8fb !important; }
.so-fchip.is-on { border-color: var(--pa) !important; background: #eaf0fd !important; color: var(--pa); }
.so-table { width: 100%; border-collapse: collapse; }
.so-table th { text-align: left; font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--mk-tx2); padding: 6px 8px; border-bottom: 1px solid var(--mk-line); }
.so-table td { padding: 6px 8px; border-bottom: 1px solid #f0f2f5; }
.so-table td i { color: var(--pa); margin-right: 8px; }
.so-table tr[data-lib] { cursor: default; } .so-table tr[data-lib]:hover td { background: #f6f8fb; }
.so-table tr.is-new td:first-child b::after { content: 'NOVO'; margin-left: 6px; font-size: 8px; padding: 1px 5px; border-radius: 3px; background: #dcfce7; color: #166534; }
.so-mono { font-family: ui-monospace, monospace; font-size: 10.5px; } .so-link { color: var(--pa); }
.so-padsv { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; align-items: start; }
.so-panels button { display: flex; justify-content: space-between; width: 100%; padding: 8px 10px; border-radius: 7px; margin-top: 4px; text-align: left; }
.so-panels button small { color: var(--mk-tx2); font-family: ui-monospace, monospace; }
.so-panels button.is-on { background: #eaf0fd !important; color: var(--pa); font-weight: 600; }
.so-echo { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 10px; }
.so-chat { display: flex; flex-direction: column; min-height: 100%; }
.so-echo__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(135deg, #3d67db, #8b5cf6); color: #fff; }
.so-chat .so-ph b { display: block; } .so-chat .so-ph small { font-size: 10px; }
.so-seg { display: inline-flex; padding: 2px; border: 1px solid var(--mk-line); border-radius: 7px; background: #fff; }
.so-seg button { height: 24px; padding: 0 10px; border-radius: 5px; font-size: 10.5px; color: #4b5563; white-space: nowrap; }
.so-seg button.is-on { background: var(--pa) !important; color: #fff; }
.so-msgs { flex: 1; min-height: 200px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 8px 2px; }
.so-echo__empty { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; color: var(--mk-tx2); }
.so-echo__empty i { font-size: 22px; color: var(--pa); } .so-echo__empty b { color: var(--mk-tx); font-size: 13px; }
.so-msg { max-width: 80%; padding: 8px 11px; border-radius: 10px; line-height: 1.45; }
.so-msg--me { align-self: flex-end; background: var(--pa); color: #fff; border-bottom-right-radius: 3px; }
.so-msg--echo { align-self: flex-start; background: #f3f5f8; border-bottom-left-radius: 3px; }
.so-msg small { display: block; margin-top: 4px; font-size: 9px; color: var(--mk-tx2); }
.so-msg em { display: block; margin-top: 6px; font-style: normal; color: #b45309; font-size: 10.5px; }
.so-msg.is-typing { display: flex; gap: 4px; }
.so-msg.is-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9ca3af; animation: so-typing 1s infinite; }
.so-msg.is-typing i:nth-child(2) { animation-delay: .15s; } .so-msg.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes so-typing { 50% { transform: translateY(-3px); opacity: .5; } }
.so-echo__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.so-echo__in { display: flex; gap: 6px; }
.so-echo__in input { flex: 1; height: 32px !important; }
.so-side { display: flex; flex-direction: column; gap: 10px; }
.so-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.so-kv dt { color: var(--mk-tx2); } .so-kv dd { margin: 0; text-align: right; font-weight: 600; }
.so-green { color: #16a34a !important; } .so-orange { color: #b45309 !important; }
.so-pend { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 7px; background: #fff7e6; border: 1px solid #fde3a7; }
.so-pend small { color: #92400e; } .so-pend .so-2 { margin-top: 6px; }
.so-actl { margin: 0; font-size: 10.5px; } .so-actl i { color: #16a34a; }
.so-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.so-kpis b { display: block; font: 600 22px ui-monospace, monospace; } .so-kpis small:last-child { color: var(--mk-tx2); font-size: 10px; }
.so-htable { padding: 4px 8px; }
.so-grav { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 10px; align-items: start; }
.so-rec h2 { margin: 0 0 10px; font-size: 17px; }
.so-recsrc { margin: 0 0 10px; }
.so-src { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px; border-radius: 9px; border: 1px solid var(--mk-line) !important; }
.so-src span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: #f3f5f8; color: #4b5563; }
.so-src b { display: block; } .so-src small { color: var(--mk-tx2); font-size: 10px; }
.so-src.is-on { border-color: var(--pa) !important; background: #f5f8ff !important; } .so-src.is-on span { background: var(--pa); color: #fff; }
.so-recbox { position: relative; height: 160px; border-radius: 9px; background: #f8f9fb; border: 1px solid #eef1f5; }
.so-recwave { position: absolute; inset: 10px 10px 30px; width: calc(100% - 20px); height: calc(100% - 40px); }
.so-rect { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font: 600 16px ui-monospace, monospace; }
.so-reclvl { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px; width: 140px; }
.so-reclvl small { font-size: 8.5px; color: var(--mk-tx2); letter-spacing: .06em; }
.so-reclvl span { flex: 1; height: 5px; border-radius: 3px; background: #e5e7eb; overflow: hidden; } .so-reclvl i { display: block; height: 100%; width: 0; background: #22c55e; }
.so-recbar { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; }
.so-f { flex: 1; display: flex; flex-direction: column; gap: 3px; } .so-f span { font-size: 9px; font-weight: 700; letter-spacing: .06em; color: var(--mk-tx2); }
.so-recs small { color: var(--mk-tx2); }
.so-recit { display: grid; grid-template-columns: 20px 1fr; padding: 7px 0; border-bottom: 1px solid #f0f2f5; }
.so-recit i { grid-row: span 2; color: var(--pa); margin-top: 2px; } .so-recit b { font-size: 10.5px; word-break: break-all; }
.so-cfg { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; align-items: start; }
.so-cfgnav { display: flex; flex-direction: column; gap: 2px; }
.so-cfgnav > b { font-size: 13px; margin-bottom: 6px; }
.so-cfgnav button { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 7px; text-align: left; color: #374151; }
.so-cfgnav button i { width: 14px; color: var(--mk-tx2); }
.so-cfgnav button.is-on { background: #eaf0fd !important; color: var(--pa); font-weight: 600; } .so-cfgnav button.is-on i { color: var(--pa); }
.so-cfgbody { max-height: 100%; overflow: auto; }
.so-cfgbody h2 { margin: 0; font-size: 17px; font-weight: 700; }
.so-sub { color: var(--mk-tx2); margin: 2px 0 12px; }
.so-set { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #f0f2f5; }
.so-set p { margin: 1px 0 0; color: var(--mk-tx2); font-size: 10.5px; }
.so-set__c { display: flex; align-items: center; gap: 8px; flex: none; }
.so-set__c input[type=range] { width: 150px; }
.so-set__c .so-in { width: 200px; }
.so-val { font: 600 11px ui-monospace, monospace; min-width: 60px; text-align: right; }
.mk-switch.so-sw { width: 34px; height: 20px; } .mk-switch.so-sw span { width: 14px; height: 14px; } .mk-switch.so-sw.is-on span { transform: translateX(14px); }
.so-rdsprev { display: flex; gap: 10px; align-items: center; padding: 12px 14px; margin-bottom: 8px; border-radius: 9px; background: #0b1220; color: #7dd3fc; font: 600 13px ui-monospace, monospace; overflow: hidden; }
.so-rds__ps { padding: 4px 8px; border: 1px solid #1e3a5f; border-radius: 4px; letter-spacing: .1em; flex: none; }
.so-rds__rt { flex: 1; overflow: hidden; white-space: nowrap; } .so-rds__rt span { display: inline-block; }
.so-ops { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 14px; }
.so-op { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: left; margin-bottom: 4px; }
.so-op span { grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eaf0fd; color: var(--pa); font-weight: 700; }
.so-op small { color: var(--mk-tx2); font-size: 10px; }
.so-op.is-on { background: #f5f8ff !important; box-shadow: inset 0 0 0 1px var(--pa); }
.so-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; margin-bottom: 10px; }
.so-perm { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 10.5px; cursor: pointer; }
.so-perm input { accent-color: var(--pa); } .so-perm.is-ro { opacity: .7; cursor: default; }
.so-foot { flex: none; display: flex; gap: 12px; align-items: center; height: 24px; padding: 0 14px; background: #fff; border-top: 1px solid var(--mk-line); color: var(--mk-tx2); font-size: 9.5px; }
.so-foot span + span::before { content: '·'; margin-right: 12px; }
.so-ok i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-right: 6px; }
.so-transport { flex: none; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: #fff; border-top: 1px solid var(--mk-line); }
.so-t__title { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-t__btns { display: flex; gap: 2px; }
.so-t__btns button { width: 28px; height: 28px; border-radius: 50%; color: #374151; }
.so-t__btns button:nth-child(2) { background: var(--pa) !important; color: #fff; }
.so-t__bar { flex: 1; height: 4px; border-radius: 2px; background: #e5e7eb; overflow: hidden; } .so-t__bar i { display: block; height: 100%; width: 0; background: var(--pa); }
.so-t__rem { font: 600 12px ui-monospace, monospace; width: 50px; }
.so-t__next { width: 170px; border-left: 1px solid var(--mk-line); padding-left: 10px; }
.so-t__next small { display: block; font-size: 8.5px; letter-spacing: .08em; color: var(--mk-tx2); font-weight: 700; } .so-t__next b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so .mk-sheet__panel { background: #fff; color: var(--mk-tx); }
.so .mk-toast { background: #111827; }

/* ---------- FrameLive (base OBS, escuro quente) ---------- */
.mk.fl { --pa: #ff8b3e; --mk-bg: #2a2622; --mk-surf: #2f2a26; --mk-surf2: #3a342f; --mk-line: #433d37; --mk-tx: #ece6e0; --mk-tx2: #a89c90; font: 400 11.5px/1.4 'Open Sans', 'Segoe UI', system-ui, sans-serif; }
.fl .fl-in { font: inherit; height: 28px; padding: 0 8px; border: 1px solid #514840; border-radius: 4px; background: #1e1b18; color: var(--mk-tx); outline: none; min-width: 0; width: 100%; }
.fl textarea.fl-in { height: auto; padding: 6px 8px; resize: none; }
.fl .fl-in:focus { border-color: var(--pa); }
.fl-sp { flex: 1; }
.fl-top { flex: none; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px; background: #1e1b18; }
.fl-ham { width: 28px; height: 28px; font-size: 14px; }
.fl-brand { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-right: 6px; }
.fl-brand i { color: var(--pa); } .fl-brand em { font-style: normal; color: #ef9f27; }
.fl-state { display: inline-flex; align-items: center; gap: 5px; color: var(--mk-tx2); margin-right: 6px; }
.fl-state i { width: 6px; height: 6px; border-radius: 50%; background: #8a7f74; }
.fl-state.is-live { color: #ff6b6b; font-weight: 700; } .fl-state.is-live i { background: #ff4d4d; animation: hl-blink 1s infinite; }
.fl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 4px; background: #3a342f !important; border: 1px solid #4a423b !important; font-weight: 600; white-space: nowrap; }
.fl-btn:hover { background: #463f38 !important; }
.fl-btn--live { background: var(--pa) !important; border-color: var(--pa) !important; color: #fff; }
.fl-btn--live:hover { background: #ff9b56 !important; }
.fl-btn--live.is-on { background: #d93636 !important; border-color: #d93636 !important; }
.fl-btn--rec { background: #4a4440 !important; }
.fl-btn--rec i { font-size: 7px; } .fl-btn--rec.is-on { background: #d93636 !important; border-color: #d93636 !important; color: #fff; }
.fl-btn--tool { background: #2a2622 !important; border-color: #3a342f !important; font-weight: 400; }
.fl-btn--flat { background: #2a2622 !important; font-weight: 400; }
.fl-btn--sm { height: 24px; padding: 0 9px; font-size: 10.5px; }
.fl-btn.is-stop { background: #5a2a26 !important; border-color: #7a3530 !important; }
.fl-stage { flex: 1; min-height: 0; display: flex; align-items: stretch; gap: 6px; padding: 4px; background: #1a1714; }
.fl-pv { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; }
.fl-pv canvas { display: block; background: #000; }
.fl-pv__lab { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: 10px; padding: 1px 8px; border-radius: 3px; background: rgba(0,0,0,.6); color: #ddd; }
.fl-pv__lab--pg { background: #b42318; color: #fff; }
.fl-trans { flex: none; width: 110px; display: flex; flex-direction: column; justify-content: center; gap: 6px; text-align: center; color: var(--mk-tx2); }
.fl-trans .fl-btn { background: var(--pa) !important; border-color: var(--pa) !important; color: #fff; }
.fl-zoom { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; height: 18px; background: #2a2622; font-size: 9px; color: var(--mk-tx2); }
.fl-zoom button { width: 18px; height: 14px; font-size: 8px; border: 1px solid #514840 !important; border-radius: 2px; }
.fl-zoom__fit { width: auto !important; padding: 0 8px; margin-left: 30px; }
.fl-srcbar { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; background: #2a2622; border-top: 1px solid #1e1b18; }
.fl-srcbar__n { width: 170px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-docks { flex: none; display: flex; gap: 4px; height: 210px; padding: 4px; background: #1e1b18; }
.fl-dock { display: flex; flex-direction: column; min-width: 0; background: #2a2622; border: 1px solid #39332d; border-radius: 3px; overflow: hidden; }
.fl-dock > header { flex: none; display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 6px; background: #433d37; font-weight: 700; font-size: 11px; }
.fl-dock > header i { font-size: 9px; color: #c9bfb4; }
.fl-dock > footer { flex: none; display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px; border-top: 1px solid #39332d; }
.fl-dock > footer button { width: 24px; height: 22px; border-radius: 3px; font-size: 11px; color: #ddd; }
.fl-dock > footer button:hover, .fl-dock > footer button.is-on { background: #433d37 !important; }
.fl-dock > footer button.is-on { color: var(--pa); }
.fl-dock--lay { width: 200px; } .fl-dock--cam { width: 180px; } .fl-dock--mix { width: 230px; transition: width .2s; } .fl-dock--dst { flex: 1; }
.fl-thumbs { flex: 1; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; align-content: start; scrollbar-width: thin; }
.fl-thumb { display: flex; flex-direction: column; gap: 2px; padding: 2px; border-radius: 4px; border: 2px solid transparent !important; font-size: 9.5px; }
.fl-thumb canvas { width: 100%; aspect-ratio: 16 / 9; display: block; border-radius: 3px; background: #000; }
.fl-thumb.is-on { border-color: var(--pa) !important; }
.fl-thumb.is-pg { box-shadow: 0 0 0 2px #d93636; }
.fl-layers { flex: 1; overflow: auto; padding: 3px; scrollbar-width: thin; }
.fl-layer { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px 0 6px; border-radius: 3px; cursor: pointer; }
.fl-layer > i { width: 12px; font-size: 10px; color: #c9bfb4; }
.fl-layer span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-layer button { width: 20px; height: 20px; font-size: 10px; color: #c9bfb4; }
.fl-layer:hover { background: #352f2a; }
.fl-layer.is-on { background: #6b4528; } .fl-layer.is-off span { opacity: .45; }
.fl-nolayer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px; text-align: center; color: #c9bfb4; font-size: 10.5px; }
.fl-nolayer i { font-size: 20px; }
.fl-mix { flex: 1; overflow: auto; padding: 4px 6px; scrollbar-width: thin; }
.fl-ch { padding: 4px 0 6px; border-bottom: 1px solid #39332d; }
.fl-ch__h { display: flex; justify-content: space-between; font-size: 10.5px; } .fl-ch__h small { color: var(--mk-tx2); font-family: ui-monospace, monospace; font-size: 9px; }
.fl-meter { height: 6px; margin: 3px 0; background: linear-gradient(90deg, #2c4a2c 0 70%, #4a4a2c 70% 88%, #4a2c2c 88%); position: relative; overflow: hidden; }
.fl-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #4ade80 0, #4ade80 calc(70% / var(--w, 1)), #facc15 0); background: #4ade80; }
.fl-ch.is-mute .fl-meter i { background: #6b6b6b; }
.fl-ch__c { display: flex; align-items: center; gap: 4px; }
.fl-ch__c input { --p: 80%; flex: 1; height: 16px; }
.fl input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #c9bfb4 var(--p), #514840 var(--p)); }
.fl input[type=range]::-webkit-slider-thumb { width: 10px; height: 14px; margin-top: -5.5px; border-radius: 2px; background: #e8e2db; border: 0; }
.fl input[type=range]::-moz-range-thumb { width: 10px; height: 14px; border-radius: 2px; background: #e8e2db; border: 0; }
.fl input[type=range]::-moz-range-progress { background: #c9bfb4; }
.fl-ch__c button { width: 20px; height: 20px; font-size: 10px; color: #ddd; }
.fl-ch.is-mute [data-mute] { color: #ff6b6b; }
.fl-hidden { font-weight: 700; color: #c9bfb4; font-size: 10.5px; padding-left: 4px; }
.fl-collapse { width: 18px; height: 18px; font-size: 9px; color: #c9bfb4; }
.fl-dock--mix.is-mini { width: 74px; }
.fl-dock--mix.is-mini .fl-ch__h b, .fl-dock--mix.is-mini .fl-ch__c input, .fl-dock--mix.is-mini .fl-ch__c [data-chcfg], .fl-dock--mix.is-mini footer > :not(.fl-sp):not([data-mixvert]) { display: none; }
.fl-dock--mix.is-mini .fl-ch__h { justify-content: center; }
.fl-dsthead { display: flex; gap: 6px; padding: 6px; flex-wrap: wrap; }
.fl-dsts { flex: 1; display: flex; gap: 6px; padding: 0 6px 6px; overflow-x: auto; scrollbar-width: thin; }
.fl-dst { flex: 1 0 116px; display: flex; flex-direction: column; gap: 4px; padding: 7px 8px; border-radius: 4px; background: #24201c; border: 1px solid #39332d; }
.fl-dst__h { display: flex; align-items: center; gap: 6px; } .fl-dst__h b { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-dst__h button { width: 18px; height: 18px; font-size: 9.5px; color: #c9bfb4; }
.fl-dst__st { display: flex; align-items: center; gap: 5px; font-size: 10.5px; }
.fl-dst__st i { width: 6px; height: 6px; border-radius: 50%; background: #8a7f74; }
.fl-dst__st small { margin-left: auto; font: 9.5px ui-monospace, monospace; color: var(--mk-tx2); }
.fl-dst.is-conn .fl-dst__st i { background: #facc15; animation: hl-blink .6s infinite; }
.fl-dst.is-live { border-color: #3f6b3f; } .fl-dst.is-live .fl-dst__st i { background: #4ade80; } .fl-dst.is-live .fl-dst__st span { color: #86efac; font-weight: 700; }
.fl-dst__k { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; margin: 0; font-size: 10px; }
.fl-dst__k dt { color: var(--mk-tx2); } .fl-dst__k dd { margin: 0; text-align: right; font-family: ui-monospace, monospace; }
.fl-dst .fl-btn { margin-top: auto; }
.fl-status { flex: none; display: flex; align-items: center; gap: 14px; height: 22px; padding: 0 10px; background: #2a2622; border-top: 1px solid #1e1b18; font-size: 10.5px; color: #c9bfb4; }
.fl-status b { font-weight: 400; font-variant-numeric: tabular-nums; }
.fl-status [data-sig] { color: #6b625a; } .fl-status [data-sig].is-on { color: #4ade80; }
.fl-status [data-livest].is-on { color: #ff6b6b; } .fl-status [data-recst] i { font-size: 8px; color: #6b625a; } .fl-status [data-recst].is-on, .fl-status [data-recst].is-on i { color: #ff6b6b; }
.fl-status [data-rdsst] { color: var(--pa); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 3px; padding: 0 4px; }
.fl-status [data-rdsst].is-pulse { animation: fl-pulse 1s ease-out; }
@keyframes fl-pulse { 0% { background: rgba(255,139,62,.35); } 100% { background: transparent; } }
.fl-pop { position: absolute; z-index: 15; min-width: 210px; padding: 4px; background: #2f2a26; border: 1px solid #514840; border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.fl-pop button { display: flex; align-items: center; gap: 8px; width: 100%; height: 24px; padding: 0 8px; border-radius: 3px; text-align: left; white-space: nowrap; }
.fl-pop button i { width: 14px; font-size: 10.5px; color: #c9bfb4; }
.fl-pop button:hover { background: var(--pa) !important; color: #fff; } .fl-pop button:hover i { color: #fff; }
.fl-pop .fl-pop__r { margin-left: auto; width: auto; }
.fl-pop hr { border: 0; border-top: 1px solid #433d37; margin: 3px 0; }
.mk.fl.is-big .fl-docks, .mk.fl.is-big .fl-srcbar { display: none; }
.fl-form { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.fl-f { display: flex; flex-direction: column; gap: 3px; } .fl-f > span { font-size: 10.5px; color: var(--mk-tx2); }
.fl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fl-chk { display: flex; align-items: center; gap: 6px; } .fl-chk input { accent-color: var(--pa); }
.fl-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px; }
.fl-hint { margin: 0; color: var(--mk-tx2); font-size: 10.5px; }
.fl-filters { display: flex; flex-direction: column; gap: 2px; }
.fl-filt { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #39332d; }
.fl .mk-switch { width: 34px; height: 20px; } .fl .mk-switch span { width: 14px; height: 14px; } .fl .mk-switch.is-on span { transform: translateX(14px); }
.fl-enc { border: 1px solid #433d37; border-radius: 4px; padding: 6px 8px 8px; display: grid; grid-template-columns: 1fr 64px; gap: 6px; margin: 0; }
.fl-enc legend { font-size: 10.5px; color: var(--mk-tx2); padding: 0 4px; }
.fl-rdsnow { padding: 8px 10px; border-radius: 4px; background: #1e1b18; border-left: 3px solid var(--pa); }
.fl-rdsnow small { display: block; font-size: 9px; letter-spacing: .08em; color: var(--mk-tx2); } .fl-rdsnow b { color: var(--pa); }
.fl-pl__now { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 4px; background: #1e1b18; margin-bottom: 6px; }
.fl-pl__now > i { color: var(--pa); font-size: 16px; } .fl-pl__now div { flex: 1; min-width: 0; } .fl-pl__now b, .fl-pl__now small { display: block; } .fl-pl__now small { color: var(--mk-tx2); font-family: ui-monospace, monospace; }
.fl-pl__list { list-style: none; margin: 0 0 6px; padding: 0; }
.fl-pl__list button { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border-radius: 3px; text-align: left; }
.fl-pl__list button:hover { background: #352f2a !important; }
.fl-pl__list span { width: 16px; color: var(--mk-tx2); font-family: ui-monospace, monospace; } .fl-pl__list b { flex: 1; font-weight: 400; } .fl-pl__list small { font-family: ui-monospace, monospace; color: var(--mk-tx2); }
.fl-pl__list li.is-on button { background: #6b4528 !important; }
.fl .mk-sheet__panel { background: #2f2a26; border: 1px solid #514840; border-radius: 6px; }
.fl .mk-toast { background: #1e1b18; border: 1px solid #514840; }
@media (prefers-reduced-motion: reduce) {
    .pv2-card, .mk-msg, .mk-result, .mk-home { animation: none; }
    .pv2-live-dot, .mk-dot, .mk-eqbars.is-play i, .mk-avatar.is-talk > span { animation: none; }
    .mk-listen.is-on .mk-listen__rings i { animation: none; opacity: .6; transform: scale(1.2); }
    .mk-flash { animation: none; box-shadow: 0 0 0 3px var(--pa); }
    .pv2-card, .mk-sheet__panel, .mk-toast { transition: none; }
}

/* ---------- Banner "Em destaque" da vitrine (13/11, v2) ----------
 * Um produto por vez: texto à esquerda, o app de verdade (mockup) à direita, fileira com os 12 embaixo.
 * --pa = cor do produto da vez (muda o brilho do fundo, os ícones de check e a barra de progresso). */
.pv2-spot {
    --sp-bg: #070b16; --sp-ink: #f8fafc; --sp-mute: #9aa6bb; --sp-line: rgba(255,255,255,.09); --pa: #2563eb;
    position: relative; display: block !important; overflow: hidden; isolation: isolate; min-height: 0 !important; margin-top: 0 !important;
    background: var(--sp-bg); color: var(--sp-ink); font-family: Poppins, system-ui, sans-serif;
}
body.pv2-detalhe .pv2-spot { display: none !important; }
.pv2-spot__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(48% 70% at 74% 46%, color-mix(in srgb, var(--pa) 34%, transparent), transparent 70%),
                radial-gradient(40% 50% at 8% 0%, rgba(255,255,255,.05), transparent 70%); transition: background .8s ease; }
.pv2-spot__bg::after { content: ''; position: absolute; inset: 0; opacity: .5;
    background-image: linear-gradient(var(--sp-line) 1px, transparent 1px), linear-gradient(90deg, var(--sp-line) 1px, transparent 1px);
    background-size: 56px 56px; mask-image: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000, transparent 75%); }
.pv2-spot__inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px 22px; }
.pv2-spot__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--sp-line); }
.pv2-spot #header-content.pv2-spot__head { position: static; top: auto; left: auto; transform: none; width: auto; z-index: auto; flex-direction: row; justify-content: space-between; text-align: left; }
.pv2-spot__head.hidden { display: flex !important; }
.pv2-spot__title { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; font-size: 15px; font-weight: 700; letter-spacing: .02em; color: var(--sp-ink); line-height: 1.3; }
.pv2-spot__title span { font-size: 14px; font-weight: 400; color: var(--sp-mute); }
.pv2-spot__title b { color: var(--sp-ink); font-weight: 700; }
.pv2-spot__all { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--sp-ink); font-size: 14px; font-weight: 600; text-decoration: none; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); transition: background .2s, border-color .2s; }
.pv2-spot__all:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.32); color: var(--sp-ink); }

.pv2-spot__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 40px; min-height: 540px; padding: 28px 0 20px; }
.pv2-spot__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 22px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sp-mute); }
.pv2-spot__num { color: var(--sp-ink); font-variant-numeric: tabular-nums; }
.pv2-spot__dev { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.07); letter-spacing: .04em; text-transform: none; font-weight: 500; }
.pv2-spot__dev i { color: var(--pa); }
.pv2-spot__id { display: flex; align-items: center; gap: 18px; }
.pv2-spot__icon { flex: none; width: 76px; height: 76px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.08); box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--pa) 80%, transparent), 0 0 0 1px rgba(255,255,255,.1); }
.pv2-spot__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-spot__name { margin: 0; font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; line-height: 1.04; letter-spacing: -.02em; color: var(--sp-ink); text-wrap: balance; }
.pv2-spot__tag { margin: 6px 0 0; font-size: 16px; font-weight: 500; color: color-mix(in srgb, var(--pa) 55%, #fff); }
.pv2-spot__desc { margin: 22px 0 0; max-width: 52ch; font-size: 16.5px; line-height: 1.6; color: #c4cddc; }
.pv2-spot__feats { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.pv2-spot__feats li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.45; color: #dbe2ee; }
.pv2-spot__feats i { flex: none; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; background: color-mix(in srgb, var(--pa) 24%, transparent); color: color-mix(in srgb, var(--pa) 60%, #fff); }
.pv2-spot__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; }
.pv2-spot__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.pv2-spot__btn--main { background: #fff; color: #0b1020; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--pa) 70%, transparent); }
.pv2-spot__btn--main:hover { color: #0b1020; transform: translateY(-2px); }
.pv2-spot__btn--main i { transition: transform .2s; }
.pv2-spot__btn--main:hover i { transform: translateX(3px); }
.pv2-spot__plats { display: inline-flex; gap: 12px; font-size: 18px; color: var(--sp-mute); }

.pv2-spot__stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 520px; }
.pv2-spot__device { position: relative; display: block; text-decoration: none; cursor: pointer; }
.pv2-spot__device::before { content: ''; position: absolute; inset: 10% 6%; z-index: -1; border-radius: 50%; background: var(--pa); filter: blur(70px); opacity: .45; }
.pv2-spot__stage--phone .pv2-spot__device { width: 248px; height: 515px; }
.pv2-spot__phone { position: absolute !important; top: 0; left: 0; display: block; transform: scale(.78); transform-origin: 0 0; }
.pv2-spot__phone .pv2-phone__screen, .pv2-spot__phone .pv2-phone__island { display: block; }
.pv2-spot__stage--desk .pv2-spot__device { width: 100%; max-width: 620px; }
.pv2-spot__win { display: block; max-width: none; }
.pv2-spot__win .pv2-window__bar { display: flex; }
.pv2-spot__winbody { position: relative; display: block; height: calc(640px * var(--app-s, .58)); overflow: hidden; isolation: isolate; }
.pv2-spot__device .pv2-phone__screen *, .pv2-spot__device .pv2-window__app * { pointer-events: none !important; }
.pv2-spot__device:hover .pv2-spot__phone, .pv2-spot__device:hover .pv2-spot__win { box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa) 70%, transparent), 0 40px 80px -30px rgba(0,0,0,.7); }
.pv2-spot__note { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sp-mute); }

.pv2-spot.is-anim .pv2-spot__swap { animation: pv2SpotIn .55s cubic-bezier(.2,.8,.2,1) both; }
.pv2-spot.is-anim .pv2-spot__device { animation: pv2SpotDev .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pv2SpotIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pv2SpotDev { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

.pv2-spot__nav { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--sp-line); }
.pv2-spot__thumbs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; scroll-snap-type: x proximity; }
.pv2-spot__thumbs::-webkit-scrollbar { display: none; }
.pv2-spot__thumb { position: relative; flex: 1 0 auto; display: flex; align-items: center; gap: 9px; min-width: 0; max-width: 190px; padding: 8px 12px 10px 8px; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--sp-mute); font: inherit; font-size: 12.5px; font-weight: 600; text-align: left; cursor: pointer; scroll-snap-align: center; transition: background .2s, color .2s, border-color .2s; }
.pv2-spot__thumb:hover { background: rgba(255,255,255,.05); color: var(--sp-ink); }
.pv2-spot__thumb.is-on { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: var(--sp-ink); }
.pv2-spot__thumb:focus-visible, .pv2-spot__arrow:focus-visible, .pv2-spot__pause:focus-visible, .pv2-spot__btn:focus-visible, .pv2-spot__all:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pv2-spot__thumb-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.08); opacity: .75; transition: opacity .2s; }
.pv2-spot__thumb.is-on .pv2-spot__thumb-ic, .pv2-spot__thumb:hover .pv2-spot__thumb-ic { opacity: 1; }
.pv2-spot__thumb-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-spot__thumb-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv2-spot__bar { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; opacity: 0; }
.pv2-spot__thumb.is-on .pv2-spot__bar { opacity: 1; }
.pv2-spot__bar i { display: block; height: 100%; background: var(--pa); transform: scaleX(0); transform-origin: 0 50%; }
.pv2-spot__arrow, .pv2-spot__pause { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: transparent; color: var(--sp-ink); cursor: pointer; display: grid; place-items: center; font-size: 13px; transition: background .2s, border-color .2s; }
.pv2-spot__arrow:hover, .pv2-spot__pause:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }

@media (max-width: 1100px) {
    .pv2-spot__thumb-nm { display: none; }
    .pv2-spot__thumb { flex: 0 0 auto; padding: 7px 7px 10px; }
    .pv2-spot__thumbs { justify-content: space-between; }
}
@media (max-width: 900px) {
    .pv2-spot__inner { padding: 22px 16px 16px; }
    .pv2-spot #header-content.pv2-spot__head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .pv2-spot__main { grid-template-columns: 1fr; gap: 18px; min-height: 0; padding: 20px 0 14px; }
    .pv2-spot__stage { order: -1; min-height: 0; }
    .pv2-spot__stage--phone .pv2-spot__device { width: 190px; height: 395px; }
    .pv2-spot__phone { transform: scale(.6); }
    .pv2-spot__stage--desk .pv2-spot__device { max-width: 100%; }
    .pv2-spot__kicker { margin-bottom: 14px; }
    .pv2-spot__icon { width: 60px; height: 60px; border-radius: 16px; }
    .pv2-spot__desc { margin-top: 14px; font-size: 15px; }
    .pv2-spot__feats { margin-top: 14px; }
    .pv2-spot__feats li:nth-child(3) { display: none; }
    .pv2-spot__cta { margin-top: 20px; }
    .pv2-spot__btn { min-height: 46px; padding: 0 20px; font-size: 14.5px; }
    .pv2-spot__arrow { display: none; }
    .pv2-spot__thumbs { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .pv2-spot__feats, .pv2-spot__note { display: none; }
    .pv2-spot__tag { font-size: 14.5px; }
    .pv2-spot__desc { margin-top: 12px; }
    .pv2-spot__stage--phone .pv2-spot__device { width: 166px; height: 344px; }
    .pv2-spot__phone { transform: scale(.522); }
}
@media (prefers-reduced-motion: reduce) {
    .pv2-spot.is-anim .pv2-spot__swap, .pv2-spot.is-anim .pv2-spot__device { animation: none; }
    .pv2-spot__bg { transition: none; }
}

/* ---------- Ajustes de 13/11 (tarde): mockup só nos 3 programas; os outros com screenshots ---------- */
.pv2-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* banner "Em destaque" sem a linha de título e o "Ver todos": o cabeçalho só guarda o h1 invisível */
.pv2-spot #header-content.pv2-spot__head, .pv2-spot__head.hidden { display: block !important; padding: 0; border: 0; height: 0; }
.pv2-spot__main { padding-top: 8px; }

/* página do produto sem mockup: vitrine de screenshots em leque */
.pv2-hero--solo { grid-template-columns: 1fr; }
.pv2-stage--shots { width: 100%; }
.pv2-shots { position: relative; width: 100%; height: 520px; outline: none; touch-action: pan-y; }
.pv2-shots:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa) 45%, transparent); border-radius: 24px; }
.pv2-shots__track { position: absolute; inset: 0; }
.pv2-shots__item { position: absolute; left: 50%; top: 50%; width: 260px; aspect-ratio: 9 / 16; max-height: 100%; padding: 0; border: 0; border-radius: 22px; overflow: hidden; cursor: pointer;
    background: #e2e8f0; box-shadow: 0 30px 60px -28px rgba(15, 23, 42, .55), 0 0 0 1px rgba(15, 23, 42, .06);
    transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s, filter .45s; }
.pv2-shots__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-shots__item[data-pos="0"] { transform: translate(-50%, -50%); opacity: 1; z-index: 3; pointer-events: auto; cursor: zoom-in; }
.pv2-shots__item[data-pos="-1"] { transform: translate(-92%, -50%) scale(.8) rotate(-5deg); opacity: .75; z-index: 2; pointer-events: auto; filter: saturate(.8); }
.pv2-shots__item[data-pos="1"] { transform: translate(-8%, -50%) scale(.8) rotate(5deg); opacity: .75; z-index: 2; pointer-events: auto; filter: saturate(.8); }
.pv2-shots__item[data-pos="-2"] { transform: translate(-108%, -50%) scale(.64) rotate(-9deg); opacity: .35; z-index: 1; }
.pv2-shots__item[data-pos="2"] { transform: translate(8%, -50%) scale(.64) rotate(9deg); opacity: .35; z-index: 1; }
.pv2-shots__item[data-pos="-1"]:hover, .pv2-shots__item[data-pos="1"]:hover { opacity: .95; }
.pv2-shots__arrow { position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 1px solid var(--pv-line); background: rgba(255, 255, 255, .92);
    color: var(--pv-ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .4); transition: transform .2s, background .2s; }
.pv2-shots__arrow:hover { transform: scale(1.06); background: #fff; }
.pv2-shots__arrow--prev { left: 4px; } .pv2-shots__arrow--next { right: 4px; }
.pv2-stage--shots .pv2-stage__note { max-width: 480px; }
.pv2-stage--shots .pv2-stage__note i { color: var(--pa); margin-right: 2px; }

/* banner: apps sem mockup mostram 3 telas da loja em leque */
.pv2-spot__stage--shots .pv2-spot__fan { position: relative; width: 420px; max-width: 100%; height: 500px; }
.pv2-spot__fan img[data-fan] { position: absolute; left: 50%; top: 50%; width: 250px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.pv2-spot__fan img[data-fan="0"] { z-index: 3; transform: translate(-50%, -50%); }
.pv2-spot__fan img[data-fan="1"] { z-index: 2; transform: translate(-112%, -47%) scale(.82) rotate(-7deg); opacity: .85; }
.pv2-spot__fan img[data-fan="2"] { z-index: 1; transform: translate(12%, -47%) scale(.82) rotate(7deg); opacity: .85; }
.pv2-spot__fan:hover img[data-fan="1"] { transform: translate(-120%, -48%) scale(.84) rotate(-9deg); }
.pv2-spot__fan:hover img[data-fan="2"] { transform: translate(20%, -48%) scale(.84) rotate(9deg); }
.pv2-spot__fan-ic { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 160px; height: 160px; border-radius: 36px; overflow: hidden; }
.pv2-spot__fan-ic img { width: 100%; height: 100%; object-fit: cover; }
.pv2-spot__note i { color: var(--pa); }

@media (max-width: 1024px) {
    .pv2-shots { height: 460px; }
    .pv2-shots__item { width: 240px; }
    .pv2-spot__stage--shots .pv2-spot__fan { height: 420px; }
    .pv2-spot__fan img[data-fan] { width: 210px; }
}
@media (max-width: 680px) {
    .pv2-shots { height: 400px; }
    .pv2-shots__item { width: 210px; border-radius: 18px; }
    .pv2-shots__item[data-pos="-1"] { transform: translate(-100%, -50%) scale(.74) rotate(-5deg); }
    .pv2-shots__item[data-pos="1"] { transform: translate(0%, -50%) scale(.74) rotate(5deg); }
    .pv2-shots__item[data-pos="-2"], .pv2-shots__item[data-pos="2"] { opacity: 0; }
    .pv2-shots__arrow { width: 38px; height: 38px; margin-top: -19px; }
    .pv2-spot__stage--shots .pv2-spot__fan { height: 330px; }
    .pv2-spot__fan img[data-fan] { width: 165px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .pv2-shots__item, .pv2-spot__fan img[data-fan] { transition: none; }
}

/* banner: "Hub" e "Frame" no laranja de cada app (a cor vem de --pa, definida pelo produto da vez) */
.pv2-spot__hi { color: var(--pa, #f5a623); }

/* ---------- Grade: HubLive, Sonora e FrameLive sempre em destaque (13/11) ---------- */
.pv2-card--star { background: linear-gradient(150deg, #0b1220 0%, #111c33 55%, color-mix(in srgb, var(--pa) 38%, #111c33) 100%); border-color: color-mix(in srgb, var(--pa) 45%, transparent); color: #fff; box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--pa) 70%, transparent); }
.pv2-card--star::before { opacity: 1; }
.pv2-card--star::after { content: ''; position: absolute; right: -70px; top: -70px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 45%, transparent), transparent); pointer-events: none; }
.pv2-card--star > * { position: relative; z-index: 1; }
.pv2-card--star .pv2-card__name { color: #fff; }
.pv2-card--star .pv2-card__cat { color: color-mix(in srgb, var(--pa) 70%, #fff); }
.pv2-card--star .pv2-card__cat i { font-size: 10px; margin-right: 2px; }
.pv2-card--star .pv2-card__desc { color: rgba(255,255,255,.74); }
.pv2-card--star .pv2-card__foot { border-top-color: rgba(255,255,255,.12); color: rgba(255,255,255,.7); }
.pv2-card--star .pv2-card__plat { color: rgba(255,255,255,.85); }
.pv2-card--star .pv2-card__go { color: #fff; }
.pv2-card--star .pv2-card__icon { background: #0b1220; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 22px -10px color-mix(in srgb, var(--pa) 80%, transparent); }
.pv2-card--star:hover, .pv2-card--star:focus-visible { border-color: var(--pa); box-shadow: 0 22px 46px -20px color-mix(in srgb, var(--pa) 85%, transparent); }