/* Pipeline modules + platform mockups. Mockups follow each network's chrome. */

.pipe {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 8px 48px;
    color: var(--text-primary);
}

.pipe-kicker {
    margin: 0 0 4px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent, #D50032);
    font-weight: 700;
}

.pipe-head h1 {
    margin: 0 0 6px;
    font-size: 32px;
    letter-spacing: -0.03em;
}

.pipe-head p { margin: 0; color: var(--text-secondary); max-width: 68ch; }

.pipe-grid { display: grid; gap: 16px; margin-top: 22px; }
.pipe-grid.two { grid-template-columns: 1.1fr 0.9fr; }
.pipe-card {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--card-highlight);
}
.pipe-card h2 { margin: 0 0 12px; font-size: 16px; }
.pipe label { display: block; font-size: 12px; font-weight: 650; margin: 10px 0 4px; }
.pipe input, .pipe textarea, .pipe select {
    width: 100%;
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 8px 10px;
    background: var(--bg-sunken);
    color: var(--text-primary);
    font: inherit;
}
.pipe textarea { min-height: 72px; resize: vertical; }
.pipe-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pipe-output {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg-sunken);
    border-radius: 12px;
    padding: 12px;
    min-height: 120px;
}

.pipe-setup {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(240px, 1fr) minmax(280px, 1fr);
    gap: 12px;
    margin-top: 18px;
    min-height: 640px;
}
.pipe-pane {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: 16px;
    padding: 14px;
    overflow: auto;
}
.pipe-channels { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.pipe-channels button[aria-pressed="true"] { background: #111; color: #fff; }

.pipe-connect { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pipe-connect button { font-size: 13px; }
.pipe-connect .is-on { border-color: #127a3e; color: #127a3e; }

.mock-stage { background: #f3f5f7; border-radius: 18px; padding: 16px; }
.mock-profile, .mock-post {
    background: #fff;
    color: #0f1419;
    border-radius: 16px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    box-shadow: 0 8px 30px rgba(15, 20, 25, 0.08);
    position: relative;
}
.mock-banner { height: 110px; background: linear-gradient(120deg, #1d9bf0, #0b3a4a); position: relative; }
.mock-banner img, .mock-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mock-banner-fallback { display: grid; place-items: center; height: 100%; color: #fff; font-weight: 700; }
.mock-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    margin: -36px 16px 0;
    background: #111; color: #fff;
    display: grid; place-items: center;
    border: 4px solid #fff;
    position: relative;
    font-size: 28px;
    overflow: hidden;
}
.mock-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mock-avatar.sm { width: 40px; height: 40px; margin: 0; border: 0; font-size: 16px; flex: none; }
.mock-id, .mock-bio, .mock-stats, .mock-pin { padding: 0 16px; }
.mock-name { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.mock-handle, .mock-post em { color: #536471; font-style: normal; font-size: 13px; }
.mock-bio { margin: 8px 0; font-size: 15px; line-height: 1.35; }
.mock-stats { display: flex; gap: 14px; list-style: none; padding: 0 16px 12px; margin: 0; font-size: 13px; color: #536471; }
.mock-stats b { color: #0f1419; }
.mock-pin { margin: 0 12px 12px; padding: 10px; border: 1px solid #eff3f4; border-radius: 12px; font-size: 14px; }
.mock-pin span { color: #536471; font-size: 12px; }
.mock-pencil {
    border: 0; background: #fff; color: #0f1419;
    width: 26px; height: 26px; border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
    cursor: pointer;
}
.mock-banner .mock-pencil { position: absolute; right: 8px; bottom: 8px; }

.mock-post { padding: 12px 12px 4px; margin-top: 12px; }
.mock-post header { display: flex; gap: 10px; align-items: center; }
.mock-post header strong { display: block; font-size: 15px; }
.mock-post p { margin: 10px 0; font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
.mock-media { border-radius: 12px; overflow: hidden; background: #e7ecf0; min-height: 160px; }
.mock-media-empty { display: grid; place-items: center; color: #536471; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.mock-post footer { display: flex; justify-content: space-between; color: #536471; padding: 8px 4px 10px; font-size: 13px; }

.mock-linkedin .mock-banner { background: linear-gradient(90deg, #0a66c2, #004182); }
.mock-linkedin .mock-avatar { border-radius: 8px; }
.mock-instagram .mock-banner { background: radial-gradient(circle at 30% 30%, #f9ce34, #ee2a7b 55%, #6228d7); }
.mock-facebook .mock-banner { background: #0866ff; }
.mock-telegram .mock-banner { background: #2AABEE; }
.mock-telegram.mock-post, .mock-discord.mock-post { background: #1c2733; color: #fff; }
.mock-telegram.mock-post em, .mock-discord.mock-post em,
.mock-telegram.mock-post footer, .mock-discord.mock-post footer { color: #8b9bab; }
.mock-discord .mock-banner { background: #5865f2; }
.mock-discord.mock-profile { background: #313338; color: #f2f3f5; }
.mock-discord.mock-profile .mock-handle,
.mock-discord.mock-profile .mock-stats { color: #b5bac1; }
.mock-discord.mock-profile .mock-stats b { color: #fff; }
.mock-youtube .mock-banner { background: #ff0033; }
.mock-youtube.mock-post .mock-media { aspect-ratio: 16/9; min-height: 0; }

.pipe-drop {
    display: grid;
    gap: 4px;
    margin-top: 8px;
    padding: 16px;
    border: 1px dashed var(--border-strong);
    border-radius: 14px;
    background: var(--bg-sunken);
    cursor: pointer;
    text-align: center;
}
.pipe-drop:hover, .pipe-drop.is-over { border-color: var(--primary, #dc2626); background: var(--surface-hover); }
.pipe-drop input { display: none; }
.pipe-drop-title { font-weight: 650; }
.pipe-drop-meta { color: var(--text-secondary); font-size: 13px; }
.pipe-drop-preview { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.pipe-drop-preview img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; }
.pipe-check li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--border-default); font-size: 14px; }
.pipe-score { width: 100%; border-collapse: collapse; font-size: 13px; }
.pipe-score th, .pipe-score td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border-default); }
.pipe-chat { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; margin-bottom: 8px; }
.pipe-chat .me { align-self: flex-end; background: #111; color: #fff; border-radius: 12px 12px 2px 12px; padding: 8px 10px; max-width: 90%; }
.pipe-chat .ai { align-self: flex-start; background: var(--surface-hover); border-radius: 12px 12px 12px 2px; padding: 8px 10px; max-width: 90%; }

.pipe-planner-dock {
    margin: 0 0 16px;
    padding: 14px;
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: 16px;
}
.pipe-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.45);
    display: grid; place-items: center; z-index: 80;
}
.pipe-modal .sheet {
    width: min(640px, calc(100% - 32px));
    max-height: calc(100% - 48px);
    overflow: auto;
    background: var(--surface-primary);
    color: var(--text-primary);
    border-radius: 16px;
    padding: 18px;
}

@media (max-width: 980px) {
    .pipe-grid.two, .pipe-setup { grid-template-columns: 1fr; }
}

/* Delivery map subsite */
.delivery-map-module { display: flex; flex-direction: column; gap: 16px; height: calc(100dvh - 120px); min-height: 520px; }
.delivery-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.delivery-map-head h1 { margin: 0; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.delivery-map-head p { margin: 4px 0 0; color: var(--dark-text-muted, #98989f); font-size: 0.95rem; }
.delivery-map-head .btn { display: inline-flex; align-items: center; gap: 8px; }
.delivery-map-frame { flex: 1; width: 100%; border: 1px solid var(--dark-border, rgba(255,255,255,.12)); border-radius: 14px; background: #0a0a0a; }
@media (max-width: 768px) {
    .delivery-map-module { height: calc(100dvh - 96px); }
    .delivery-map-head .btn span { display: none; }
}

/* Platform-accurate profile mockups (M3). Everything is scoped under .mkp;
   each platform sets its palette as tokens and swaps them in dark mode. */
.mock-profile.mkp {
    background: var(--mkp-bg);
    color: var(--mkp-text);
    font-family: var(--mkp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    box-shadow: var(--mkp-shadow, 0 8px 30px rgba(15, 20, 25, 0.08));
    overflow-wrap: anywhere;
}
.mkp p { margin: 0; }
.mkp .mkp-muted { color: var(--mkp-muted); }
.mkp .mock-pencil {
    display: inline-grid; place-items: center; flex: none;
    width: 24px; height: 24px; margin-left: 6px;
    font-size: 11px; vertical-align: middle;
}
.mkp-banner { position: relative; background: var(--mkp-banner-empty); }
.mkp-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkp-banner .mock-pencil { position: absolute; right: 8px; bottom: 8px; margin: 0; }
.mkp-avatar { position: relative; flex: none; }
.mkp-avatar-img {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden; box-sizing: border-box;
    display: grid; place-items: center;
    background: var(--mkp-text); color: var(--mkp-bg); font-weight: 700;
}
.mkp-avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mkp-avatar .mock-pencil { position: absolute; right: -2px; bottom: -2px; margin: 0; }

/* X */
.mkp-x {
    --mkp-bg: #fff; --mkp-text: #0f1419; --mkp-muted: #536471; --mkp-line: #eff3f4;
    --mkp-accent: #1d9bf0; --mkp-btn-line: #cfd9de; --mkp-banner-empty: #cfd9de;
    --mkp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.dark-mode .mkp-x {
    --mkp-bg: #000; --mkp-text: #e7e9ea; --mkp-muted: #71767b; --mkp-line: #2f3336;
    --mkp-btn-line: #536471; --mkp-banner-empty: #333639;
    --mkp-shadow: 0 0 0 1px #2f3336;
}
.mkp-x { max-width: 600px; margin-inline: auto; }
.mkp-x-cover { position: relative; }
.mkp-x-banner { aspect-ratio: 3 / 1; }
.mkp-x-top {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between; padding: 8px;
    color: #fff; pointer-events: none;
}
.mkp-x-top-right { display: flex; gap: 8px; }
.mkp-x-circle {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 15px;
    background: rgba(15, 20, 25, 0.75);
}
.mkp-x-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 16px; }
.mkp-x-avatar { width: 88px; height: 88px; margin-top: -44px; }
.mkp-x-avatar .mkp-avatar-img { border: 4px solid var(--mkp-bg); font-size: 32px; }
/* Avatar follows the profile width (80px on phones, ~134px on desktop) and keeps half-overlapping the banner. */
@supports (width: 1cqi) {
    .mkp-x { container-type: inline-size; --mkp-x-av: clamp(80px, 22cqi, 134px); }
    .mkp-x-avatar { width: var(--mkp-x-av); height: var(--mkp-x-av); margin-top: calc(var(--mkp-x-av) / -2); }
    .mkp-x-avatar .mkp-avatar-img { font-size: calc(var(--mkp-x-av) * 0.36); }
}
.mkp-x-follow {
    margin-top: 12px; padding: 0 16px; height: 36px;
    display: inline-flex; align-items: center;
    border-radius: 999px;
    background: #0f1419; color: #fff;
    font-size: 15px; font-weight: 700; white-space: nowrap;
}
body.dark-mode .mkp-x-follow { background: #eff3f4; color: #0f1419; }
.mkp-x-id { padding: 4px 16px 0; font-size: 15px; }
.mkp-x-name { display: flex; align-items: center; font-size: 20px; font-weight: 800; line-height: 1.2; }
.mkp-x-name strong { font-family: var(--mkp-font); font-weight: 800; }
.mkp-x-bio { padding: 12px 16px 0; font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
.mkp-x-stats { display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 16px 0; font-size: 14px; color: var(--mkp-muted); }
.mkp-x-stats b { color: var(--mkp-text); font-weight: 700; }
.mkp-x-tabs {
    display: flex; margin-top: 12px; border-bottom: 1px solid var(--mkp-line);
    overflow-x: auto; scrollbar-width: none;
}
.mkp-x-tabs::-webkit-scrollbar { display: none; }
.mkp-x-tabs span {
    position: relative; flex: none; padding: 16px 16px 15px;
    font-size: 15px; font-weight: 500; color: var(--mkp-muted); white-space: nowrap;
}
.mkp-x-tabs .is-active { color: var(--mkp-text); font-weight: 700; }
.mkp-x-tabs .is-active::after {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: 0;
    height: 4px; border-radius: 2px; background: var(--mkp-accent);
}
.mkp-x-pinned { padding: 12px 16px 4px; border-bottom: 1px solid var(--mkp-line); }
.mkp-x-social {
    display: flex; align-items: center; gap: 12px; padding-left: 26px;
    font-size: 13px; font-weight: 700; color: var(--mkp-muted);
}
.mkp-x-social i { font-size: 12px; }
.mkp-x-post { display: flex; gap: 8px; padding-top: 4px; }
.mkp-x-post-avatar { width: 40px; height: 40px; }
.mkp-x-post-avatar .mkp-avatar-img { font-size: 16px; }
.mkp-x-post-main { flex: 1; min-width: 0; }
.mkp-x-post-head { display: flex; align-items: baseline; gap: 4px; font-size: 15px; min-width: 0; }
.mkp-x-post-head strong, .mkp-x-post-head .mkp-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkp-x-post-more { margin-left: auto; color: var(--mkp-muted); font-size: 14px; }
.mkp .mkp-x-post-text { margin-top: 2px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
.mkp-x-actions {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0 8px; color: var(--mkp-muted); font-size: 15px;
}
.mkp-x-actions span { display: flex; gap: 16px; }
.mkp-x-pin-empty {
    display: flex; align-items: center; gap: 8px; padding: 14px 16px;
    color: var(--mkp-muted); font-size: 15px; border-bottom: 1px solid var(--mkp-line);
}

/* LinkedIn (company page) */
.mkp-linkedin {
    --mkp-bg: #f4f2ee; --mkp-card: #fff; --mkp-text: rgba(0, 0, 0, 0.9); --mkp-muted: rgba(0, 0, 0, 0.6);
    --mkp-line: rgba(140, 140, 140, 0.2); --mkp-accent: #0a66c2; --mkp-on-accent: #fff; --mkp-tab: #01754f;
    --mkp-banner-empty: #a0b4b7;
    --mkp-font: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, Cantarell, sans-serif;
    --mkp-li-logo: 72px; --mkp-li-pad: 16px;
}
body.dark-mode .mkp-linkedin {
    --mkp-bg: #000; --mkp-card: #1b1f23; --mkp-text: rgba(255, 255, 255, 0.9); --mkp-muted: rgba(255, 255, 255, 0.6);
    --mkp-line: rgba(255, 255, 255, 0.15); --mkp-accent: #71b7fb; --mkp-on-accent: #000; --mkp-tab: #7fc15e;
    --mkp-banner-empty: #38434f;
    --mkp-shadow: 0 0 0 1px #38434f;
}
/* 804px is LinkedIn's desktop main column (1128 container - 300 sidebar - 24 gap). */
.mock-profile.mkp-linkedin {
    max-width: 804px; margin-inline: auto; border-radius: 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.mkp-li-card { background: var(--mkp-card); border-radius: 8px; overflow: hidden; }
.mkp-li-banner { aspect-ratio: 1128 / 191; }
.mkp-li-body { padding: 0 var(--mkp-li-pad) 12px; }
.mkp-li-logo { width: var(--mkp-li-logo); height: var(--mkp-li-logo); margin-top: calc(var(--mkp-li-logo) / -2); }
.mkp-li-logo .mkp-avatar-img { border-radius: 4px; border: 4px solid var(--mkp-card); font-size: calc(var(--mkp-li-logo) * 0.36); }
.mkp-li-name { display: flex; align-items: center; margin-top: 12px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.mkp .mkp-li-tagline { margin-top: 4px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }
.mkp .mkp-li-meta { margin-top: 6px; font-size: 14px; }
/* Logo, name and text follow the page width (mobile app sizes at 390px, desktop sizes at 804px). */
@supports (width: 1cqi) {
    .mkp-linkedin { container: mkp-li / inline-size; --mkp-li-logo: clamp(72px, 16cqi, 128px); --mkp-li-pad: clamp(16px, 3cqi, 24px); }
    .mkp-li-name { font-size: clamp(20px, 3cqi, 24px); }
    .mkp .mkp-li-tagline { font-size: clamp(14px, 2cqi, 16px); }
}
.mkp-li-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mkp-li-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; box-sizing: border-box;
    border: 1px solid var(--mkp-accent); border-radius: 999px; color: var(--mkp-accent);
    font-size: 16px; font-weight: 600; white-space: nowrap;
}
.mkp-li-btn.is-primary { background: var(--mkp-accent); color: var(--mkp-on-accent); }
.mkp-li-tabs {
    display: flex; padding-inline: calc(var(--mkp-li-pad) - 12px); border-top: 1px solid var(--mkp-line);
    overflow-x: auto; scrollbar-width: none;
}
.mkp-li-tabs::-webkit-scrollbar { display: none; }
.mkp-li-tabs span {
    position: relative; flex: none; padding: 14px 12px;
    font-size: 14px; font-weight: 600; color: var(--mkp-muted); white-space: nowrap;
}
.mkp-li-tabs .is-active { color: var(--mkp-tab); }
.mkp-li-tabs .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mkp-tab); }
.mkp-li-feed-title { padding: 12px var(--mkp-li-pad) 0; font-size: 20px; font-weight: 600; }
.mkp-li-post { padding: 12px var(--mkp-li-pad) 0; }
.mkp-li-pinned {
    display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--mkp-line); font-size: 12px;
}
.mkp-li-post-head { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.mkp-li-post-logo { width: 48px; height: 48px; }
.mkp-li-post-logo .mkp-avatar-img { border-radius: 4px; font-size: 18px; }
.mkp-li-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; }
.mkp-li-post-who > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkp-li-post-who strong { font-size: 14px; }
.mkp-li-name strong, .mkp-li-post-who strong { font-family: var(--mkp-font); font-weight: 600; }
.mkp-li-post-more { font-size: 16px; }
.mkp .mkp-li-post-text { margin-top: 8px; font-size: 14px; line-height: 1.43; white-space: pre-wrap; }
.mkp-li-post-actions { display: flex; margin-top: 8px; padding: 4px 0; border-top: 1px solid var(--mkp-line); }
.mkp-li-post-actions > span {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px;
    font-size: 14px; font-weight: 600; color: var(--mkp-muted); white-space: nowrap;
}
.mkp-li-post-actions i { font-size: 16px; }
/* Narrow page: labels sit under the icons, as in the LinkedIn mobile app. */
@container mkp-li (max-width: 480px) {
    .mkp-li-post-actions > span { flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 12px; }
}
.mkp-li-pin-empty { display: flex; align-items: center; gap: 8px; padding: 14px var(--mkp-li-pad); font-size: 14px; }

/* Instagram (mobile app, visitor view) */
.mkp-instagram {
    --mkp-bg: #fff; --mkp-text: #000; --mkp-muted: #737373; --mkp-line: #dbdbdb;
    --mkp-accent: #0095f6; --mkp-btn: #efefef; --mkp-ig-pin: #e0f1fe;
    --mkp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mkp-ig-av: 86px; --mkp-ig-pad: 16px;
}
body.dark-mode .mkp-instagram {
    --mkp-bg: #000; --mkp-text: #f5f5f5; --mkp-muted: #a8a8a8; --mkp-line: #262626;
    --mkp-btn: #363636; --mkp-ig-pin: #0b2a40;
    --mkp-shadow: 0 0 0 1px #262626;
}
/* Mobile-app layout, so the cap is a large phone, not the 935px desktop page. */
.mock-profile.mkp-instagram { max-width: 440px; margin-inline: auto; }
.mkp-ig-top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 44px; padding: 0 var(--mkp-ig-pad); font-size: 22px;
}
.mkp-ig-top-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mkp-ig-top-left i { font-size: 20px; }
.mkp-ig-top strong {
    font-family: var(--mkp-font); font-size: 20px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkp-ig-top-right { display: flex; gap: 20px; flex: none; }
.mkp-ig-head { display: flex; align-items: center; gap: 20px; padding: 4px var(--mkp-ig-pad) 0; }
.mkp-ig-avatar { width: var(--mkp-ig-av); height: var(--mkp-ig-av); }
.mkp-ig-avatar .mkp-avatar-img { font-size: calc(var(--mkp-ig-av) * 0.36); }
.mkp-ig-headmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mkp-ig-name { display: flex; align-items: center; font-size: 14px; line-height: 1.3; }
.mkp-ig-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; }
.mkp-ig-stats > span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.25; }
.mkp-ig-stats strong { font-size: 16px; }
.mkp-ig-name strong, .mkp-ig-stats strong { font-family: var(--mkp-font); font-weight: 600; }
/* Sizes follow the phone width (roughly 320 to 440px). */
@supports (width: 1cqi) {
    .mkp-instagram { container: mkp-ig / inline-size; --mkp-ig-av: clamp(77px, 22cqi, 96px); --mkp-ig-pad: clamp(12px, 4cqi, 16px); }
    .mkp-ig-head { gap: clamp(14px, 5cqi, 24px); }
    .mkp-ig-name { font-size: clamp(13px, 3.6cqi, 15px); }
    .mkp-ig-stats strong { font-size: clamp(15px, 4.1cqi, 17px); }
    .mkp-ig-stats > span { font-size: clamp(13px, 3.6cqi, 15px); }
}
.mkp .mkp-ig-bio { margin-top: 12px; padding: 0 var(--mkp-ig-pad); font-size: 14px; line-height: 18px; white-space: pre-wrap; }
.mkp-ig-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 14px; padding: 0 var(--mkp-ig-pad); }
.mkp-ig-btn {
    display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 8px;
    background: var(--mkp-btn); color: var(--mkp-text); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.mkp-ig-btn.is-primary { background: var(--mkp-accent); color: #fff; }
.mkp-ig-tabs { display: flex; margin-top: 16px; border-bottom: 1px solid var(--mkp-line); }
.mkp-ig-tabs span {
    position: relative; flex: 1; display: flex; justify-content: center; padding: 12px 0;
    font-size: 22px; color: var(--mkp-muted);
}
.mkp-ig-tabs .is-active { color: var(--mkp-text); }
.mkp-ig-tabs .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--mkp-text); }
.mkp-ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding-top: 2px; }
.mkp-ig-tile { position: relative; aspect-ratio: 3 / 4; background: var(--mkp-line); min-width: 0; overflow: hidden; }
.mkp-ig-tile.is-pinned { background: var(--mkp-ig-pin); padding: 8px; box-sizing: border-box; }
.mkp .mkp-ig-tile p {
    margin: 18px 0 0; font-size: 12px; line-height: 1.35; white-space: pre-wrap;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.mkp-ig-pin-badge { position: absolute; top: 6px; right: 8px; font-size: 13px; }
.mkp-ig-tile .mock-pencil { position: absolute; right: 6px; bottom: 6px; margin: 0; }
.mkp-ig-tile.is-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: var(--mkp-bg); border: 1px dashed var(--mkp-line); box-sizing: border-box;
    color: var(--mkp-muted); font-size: 12px; text-align: center;
}

/* Facebook Page (mobile app, visitor view) */
.mkp-facebook {
    --mkp-bg: #f0f2f5; --mkp-card: #fff; --mkp-text: #050505; --mkp-muted: #65676b; --mkp-line: #ced0d4;
    --mkp-btn: #e4e6eb; --mkp-accent: #0866ff; --mkp-tab-bg: #ebf5ff; --mkp-tab-text: #0064d1;
    --mkp-banner-empty: #dadde1;
    --mkp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Segoe UI Historic", Helvetica, Arial, sans-serif;
    --mkp-fb-av: 120px; --mkp-fb-pad: 16px;
}
body.dark-mode .mkp-facebook {
    --mkp-bg: #18191a; --mkp-card: #242526; --mkp-text: #e4e6eb; --mkp-muted: #b0b3b8; --mkp-line: #3e4042;
    --mkp-btn: #3a3b3c; --mkp-tab-bg: #263951; --mkp-tab-text: #4599ff;
    --mkp-banner-empty: #3a3b3c;
    --mkp-shadow: 0 0 0 1px #3e4042;
}
/* Mobile-app layout capped at the widest phone (440pt). Cover is 640x360 on phones (Facebook Help Center). */
.mock-profile.mkp-facebook { max-width: 440px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; }
.mkp-fb-card { background: var(--mkp-card); }
.mkp-fb-bar {
    display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 var(--mkp-fb-pad); font-size: 20px;
}
.mkp-fb-bar strong {
    flex: 1; min-width: 0; font-family: var(--mkp-font); font-size: 17px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkp-fb-banner { aspect-ratio: 640 / 360; }
.mkp-fb-body { padding: 0 var(--mkp-fb-pad) 12px; }
.mkp-fb-avatar { width: var(--mkp-fb-av); height: var(--mkp-fb-av); margin-top: calc(var(--mkp-fb-av) / -2); }
.mkp-fb-avatar .mkp-avatar-img { border: 4px solid var(--mkp-card); font-size: calc(var(--mkp-fb-av) * 0.36); }
.mkp-fb-name { display: flex; align-items: center; margin-top: 8px; font-size: 24px; line-height: 1.2; }
.mkp-fb-name strong { font-family: var(--mkp-font); font-weight: 700; }
.mkp-fb-meta { margin-top: 6px; font-size: 15px; }
.mkp-fb-meta strong { font-family: var(--mkp-font); font-weight: 600; color: var(--mkp-text); }
.mkp .mkp-fb-bio { margin-top: 10px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
/* Avatar, padding and name follow the phone width (roughly 320 to 440px). */
@supports (width: 1cqi) {
    .mkp-facebook { container: mkp-fb / inline-size; --mkp-fb-av: clamp(104px, 31cqi, 136px); --mkp-fb-pad: clamp(12px, 4cqi, 16px); }
    .mkp-fb-name { font-size: clamp(22px, 6.2cqi, 26px); }
}
.mkp-fb-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 14px; }
.mkp-fb-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 12px; box-sizing: border-box;
    border-radius: 6px; background: var(--mkp-btn); color: var(--mkp-text);
    font-size: 15px; font-weight: 600; white-space: nowrap; min-width: 0;
}
.mkp-fb-btn.is-primary { background: var(--mkp-accent); color: #fff; }
.mkp-fb-btn.is-square { width: 44px; padding: 0; }
.mkp-fb-tabs {
    display: flex; gap: 4px; padding: 8px var(--mkp-fb-pad); border-top: 1px solid var(--mkp-line);
    overflow-x: auto; scrollbar-width: none;
}
.mkp-fb-tabs::-webkit-scrollbar { display: none; }
.mkp-fb-tabs span {
    flex: none; display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px;
    font-size: 15px; font-weight: 600; color: var(--mkp-muted); white-space: nowrap;
}
.mkp-fb-tabs .is-active { background: var(--mkp-tab-bg); color: var(--mkp-tab-text); }
.mkp-fb-feed-title {
    display: flex; align-items: center; gap: 8px; padding: 12px var(--mkp-fb-pad) 0;
    font-size: 17px; font-weight: 700;
}
.mkp-fb-feed-title i { font-size: 14px; color: var(--mkp-muted); }
.mkp-fb-post { padding: 12px var(--mkp-fb-pad) 0; }
.mkp-fb-post-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkp-fb-post-avatar { width: 40px; height: 40px; }
.mkp-fb-post-avatar .mkp-avatar-img { font-size: 16px; }
.mkp-fb-post-who { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.mkp-fb-post-who > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkp-fb-post-who strong { font-family: var(--mkp-font); font-size: 15px; font-weight: 600; }
.mkp-fb-post-more { font-size: 18px; }
.mkp .mkp-fb-post-text { margin-top: 10px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; }
.mkp-fb-post-actions { display: flex; margin-top: 10px; padding: 2px 0; border-top: 1px solid var(--mkp-line); }
.mkp-fb-post-actions > span {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px;
    font-size: 15px; font-weight: 600; color: var(--mkp-muted); white-space: nowrap;
}
.mkp-fb-post-actions i { font-size: 17px; }
.mkp-fb-pin-empty { display: flex; align-items: center; gap: 8px; padding: 14px var(--mkp-fb-pad); font-size: 15px; }

/* YouTube channel (mobile app, visitor view) */
.mkp-youtube {
    --mkp-bg: #fff; --mkp-text: #0f0f0f; --mkp-muted: #606060; --mkp-line: rgba(0, 0, 0, 0.1);
    --mkp-sub-bg: #0f0f0f; --mkp-sub-text: #fff;
    --mkp-banner-empty: #e5e5e5;
    --mkp-font: Roboto, Arial, sans-serif;
    --mkp-yt-av: 72px; --mkp-yt-pad: 16px;
}
body.dark-mode .mkp-youtube {
    --mkp-bg: #0f0f0f; --mkp-text: #f1f1f1; --mkp-muted: #aaa; --mkp-line: rgba(255, 255, 255, 0.2);
    --mkp-sub-bg: #f1f1f1; --mkp-sub-text: #0f0f0f;
    --mkp-banner-empty: #272727;
    --mkp-shadow: 0 0 0 1px #272727;
}
/* Mobile-app layout capped at the widest phone (440pt). The banner shows the 1546x423 safe area of the 2560x1440 upload. */
.mock-profile.mkp-youtube { max-width: 440px; margin-inline: auto; padding-bottom: 12px; }
.mkp-yt-bar { display: flex; align-items: center; height: 48px; padding: 0 var(--mkp-yt-pad); font-size: 18px; }
.mkp-yt-bar-right { display: flex; gap: 22px; margin-left: auto; }
.mkp-yt-banner { aspect-ratio: 1546 / 423; margin: 0 var(--mkp-yt-pad); border-radius: 12px; overflow: hidden; }
.mkp-yt-head { display: flex; align-items: center; gap: 16px; padding: 16px var(--mkp-yt-pad) 0; }
.mkp-yt-avatar { width: var(--mkp-yt-av); height: var(--mkp-yt-av); }
.mkp-yt-avatar .mkp-avatar-img { font-size: calc(var(--mkp-yt-av) * 0.36); }
.mkp-yt-headmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mkp-yt-name { display: flex; align-items: center; font-size: 24px; line-height: 1.2; }
.mkp-yt-name strong { font-family: var(--mkp-font); font-weight: 700; }
.mkp-yt-meta { font-size: 12px; line-height: 1.5; }
/* Avatar, padding and text follow the phone width (roughly 320 to 440px). */
@supports (width: 1cqi) {
    .mkp-youtube { container: mkp-yt / inline-size; --mkp-yt-av: clamp(72px, 22cqi, 96px); --mkp-yt-pad: clamp(12px, 4cqi, 16px); }
    .mkp-yt-name { font-size: clamp(20px, 6.2cqi, 26px); }
    .mkp-yt-meta { font-size: clamp(12px, 3.3cqi, 14px); }
}
.mkp .mkp-yt-bio {
    display: flex; align-items: center; margin-top: 12px; padding: 0 var(--mkp-yt-pad);
    font-size: 14px; line-height: 20px; color: var(--mkp-muted);
}
.mkp-yt-bio-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.mkp-yt-more { flex: none; color: var(--mkp-text); font-weight: 500; }
.mkp-yt-actions { margin-top: 12px; padding: 0 var(--mkp-yt-pad); }
.mkp-yt-sub {
    display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 18px;
    background: var(--mkp-sub-bg); color: var(--mkp-sub-text); font-size: 14px; font-weight: 600;
}
.mkp-yt-tabs {
    display: flex; gap: 24px; margin-top: 8px; padding: 0 var(--mkp-yt-pad); border-bottom: 1px solid var(--mkp-line);
    overflow-x: auto; scrollbar-width: none;
}
.mkp-yt-tabs::-webkit-scrollbar { display: none; }
.mkp-yt-tabs span {
    position: relative; flex: none; display: flex; align-items: center; height: 48px;
    font-size: 14px; font-weight: 500; color: var(--mkp-muted); white-space: nowrap;
}
.mkp-yt-tabs .is-active { color: var(--mkp-text); }
.mkp-yt-tabs .is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--mkp-text); }
.mkp-yt-post { margin: 12px var(--mkp-yt-pad) 0; padding: 12px; border: 1px solid var(--mkp-line); border-radius: 12px; }
.mkp-yt-post-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkp-yt-post-avatar { width: 32px; height: 32px; }
.mkp-yt-post-avatar .mkp-avatar-img { font-size: 13px; }
.mkp-yt-post-who { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.mkp-yt-post-who strong {
    min-width: 0; font-family: var(--mkp-font); font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkp-yt-post-who .mkp-muted { flex: none; display: inline-flex; align-items: center; gap: 4px; }
.mkp-yt-post-who i { font-size: 11px; }
.mkp-yt-post-more { font-size: 16px; }
.mkp .mkp-yt-post-text { margin-top: 8px; font-size: 14px; line-height: 20px; white-space: pre-wrap; }
.mkp-yt-post-actions { display: flex; align-items: center; gap: 24px; padding-top: 12px; font-size: 16px; }
.mkp-yt-pin-empty { display: flex; align-items: center; gap: 8px; margin: 12px var(--mkp-yt-pad) 0; font-size: 14px; }

/* Telegram channel (Telegram Desktop info column, visitor view) */
.mkp-telegram {
    --mkp-bg: #f1f1f1; --mkp-card: #fff; --mkp-text: #000; --mkp-bold: #222; --mkp-muted: #999;
    --mkp-accent: #168acd;
    --mkp-font: "Segoe UI", Arial, sans-serif;
    --mkp-tg-av: 80px; --mkp-tg-pad: 18px; --mkp-tg-indent: 22px;
}
body.dark-mode .mkp-telegram {
    --mkp-bg: #232e3c; --mkp-card: #17212b; --mkp-text: #f5f5f5; --mkp-bold: #e9e8e8; --mkp-muted: #708499;
    --mkp-accent: #6ab3f3;
    --mkp-shadow: 0 0 0 1px #232e3c;
}
/* 392px is Telegram Desktop's widest info column (columnMaximalWidthThird); sizes from info_profile_top_bar.style. */
.mock-profile.mkp-telegram { max-width: 392px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
@supports (width: 1cqi) {
    .mkp-telegram {
        container: mkp-tg / inline-size;
        --mkp-tg-av: clamp(64px, 20.4cqi, 80px); --mkp-tg-pad: clamp(12px, 4.6cqi, 18px);
        --mkp-tg-indent: clamp(14px, 5.6cqi, 22px);
    }
}
.mkp-tg-card { position: relative; background: var(--mkp-card); }
.mkp-tg-head { display: flex; flex-direction: column; align-items: center; padding: 24px var(--mkp-tg-pad) 16px; }
.mkp-tg-close { position: absolute; top: 0; right: 0; width: 56px; height: 56px; display: grid; place-items: center; font-size: 18px; }
.mkp-tg-avatar { width: var(--mkp-tg-av); height: var(--mkp-tg-av); }
.mkp-tg-avatar .mkp-avatar-img { font-size: calc(var(--mkp-tg-av) * 0.36); }
.mkp-tg-name { display: flex; align-items: center; max-width: 100%; margin-top: 9px; font-size: 14px; line-height: 20px; color: var(--mkp-bold); }
.mkp-tg-name strong { min-width: 0; font-family: var(--mkp-font); font-weight: 600; }
.mkp-tg-status { margin-top: 1px; line-height: 18px; }
.mkp-tg-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-self: stretch; margin-top: 16px; }
.mkp-tg-actions > span {
    display: flex; flex-direction: column; align-items: center; gap: 4px; height: 52px; padding-top: 6px; box-sizing: border-box;
    border-radius: 8px; background: var(--mkp-bg); color: var(--mkp-bold); font-size: 11px; white-space: nowrap;
}
.mkp-tg-actions i { font-size: 20px; line-height: 23px; }
.mkp-tg-info { padding: 2px 0; }
.mkp-tg-row { padding: 10px 20px 8px var(--mkp-tg-indent); line-height: 18px; }
.mkp-tg-link { color: var(--mkp-accent); }
.mkp .mkp-tg-desc { white-space: pre-wrap; }
.mkp-tg-label { margin-top: 2px; }
.mkp-tg-pinned { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px var(--mkp-tg-pad); }
.mkp-tg-pinned-main { flex: 1; min-width: 0; padding-left: 10px; border-left: 2px solid var(--mkp-accent); line-height: 18px; }
.mkp-tg-pinned-label { display: block; color: var(--mkp-accent); font-weight: 600; }
.mkp .mkp-tg-pinned-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkp-tg-pin-empty { display: flex; align-items: center; gap: 8px; padding: 14px var(--mkp-tg-pad); }

/* Discord server profile card (desktop, visitor view) */
.mkp-discord {
    --mkp-bg: #fff; --mkp-text: #2e2e34; --mkp-strong: #28282d; --mkp-muted: #6c6d76;
    --mkp-line: rgba(151, 151, 159, 0.278); --mkp-join: #008545; --mkp-banner-empty: #5865f2;
    --mkp-font: Arial, sans-serif;
    --mkp-dc-icon: 70px; --mkp-dc-pad: 16px; --mkp-dc-text: 14px;
}
body.dark-mode .mkp-discord {
    --mkp-bg: #2c2d32; --mkp-text: #efeff1; --mkp-strong: #fbfbfb; --mkp-muted: #96979e;
    --mkp-line: rgba(151, 151, 159, 0.122); --mkp-banner-empty: #5865f2;
    --mkp-shadow: none;
}
/* Capped at 440px, deliberately wider than Discord's real 300px card (guildInviteContainer), so it fills the M3 column.
   The proportions come from Discord's web CSS: 5:2 banner (300x120), icon overlapping it by 34/70 of its size. */
.mock-profile.mkp-discord { max-width: 440px; margin-inline: auto; border: 1px solid var(--mkp-line); font-size: 14px; }
@supports (width: 1cqi) {
    .mkp-discord {
        container: mkp-dc / inline-size;
        --mkp-dc-icon: clamp(60px, 20cqi, 88px); --mkp-dc-pad: clamp(16px, 4.5cqi, 20px); --mkp-dc-text: clamp(14px, 3.6cqi, 16px);
    }
    .mkp-dc-name { font-size: clamp(20px, 5.5cqi, 24px); }
}
.mkp-dc-banner { aspect-ratio: 5 / 2; }
.mkp-dc-icon { width: var(--mkp-dc-icon); height: var(--mkp-dc-icon); margin: calc(var(--mkp-dc-icon) * -0.486) var(--mkp-dc-pad) 0; }
.mkp-dc-icon .mkp-avatar-img { border-radius: 16px; border: 4px solid var(--mkp-bg); font-size: calc(var(--mkp-dc-icon) * 0.36); }
.mkp-dc-name { display: flex; align-items: center; margin: 8px var(--mkp-dc-pad) 0; font-size: 20px; line-height: 1.2; color: var(--mkp-strong); }
.mkp-dc-name strong { min-width: 0; font-family: var(--mkp-font); font-weight: 700; }
.mkp-dc-meta { display: flex; align-items: center; gap: 6px; margin: 4px var(--mkp-dc-pad) 0; line-height: 18px; }
.mkp-dc-meta i { font-size: 8px; }
.mkp-dc-body { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; padding: 0 var(--mkp-dc-pad); }
.mkp-dc-section { display: flex; flex-direction: column; gap: 6px; }
.mkp-dc-label {
    font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--mkp-muted);
}
.mkp .mkp-dc-desc, .mkp .mkp-dc-pin-text { font-size: var(--mkp-dc-text); line-height: 1.43; white-space: pre-wrap; }
.mkp-dc-pin-empty { display: flex; align-items: center; gap: 6px; }
.mkp-dc-actions { margin-top: 16px; padding: 0 var(--mkp-dc-pad) var(--mkp-dc-pad); }
.mkp-dc-join {
    display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px;
    background: var(--mkp-join); color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;
}