/* Foxy-IT Caption Studio. Scoped to the shortcode, including its phone mockup. */
.fcp {
    --fcp-ink: #202735;
    --fcp-muted: #647082;
    --fcp-line: #e0e4e9;
    --fcp-soft: #f6f7f9;
    --fcp-accent: #aa4c2b;
    --fcp-accent-soft: #fff1e9;
    --fcp-shadow: 0 8px 28px rgba(32, 39, 53, .045);
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 1240px;
    min-width: 0;
    margin: 28px auto;
    padding: clamp(20px, 4.5vw, 54px);
    border: 1px solid #e8eaed;
    border-radius: 30px;
    background: linear-gradient(145deg, #f5f6f7, #eff1f3 62%, #f5f6f7);
    color: var(--fcp-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    text-align: start;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-wrap: anywhere;
}
.fcp, .fcp *, .fcp *::before, .fcp *::after { box-sizing: border-box; }
.fcp [hidden] { display: none !important; }
.fcp :is(h2, h3, h4, p, ul, ol, figure) { margin: 0; padding: 0; }
.fcp :is(h2, h3, h4, strong) { color: var(--fcp-ink); }
.fcp :is(button, textarea, select, input) { font: inherit; }
.fcp button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fcp :is(button, textarea, input, select, summary, a, [tabindex]):focus-visible { outline: 3px solid #b95633; outline-offset: 4px; }
.fcp :is(button, input, textarea, select) { max-width: 100%; }
.fcp :is(.fcp__sr-only, .screen-reader-text) {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.fcp .fcp__hero { position: relative; padding: 0 142px 32px 0; }
.fcp .fcp__hero::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    width: 120px;
    height: 120px;
    background: url("fox.webp") center / contain no-repeat;
    opacity: .62;
    filter: saturate(.5);
    pointer-events: none;
}
.fcp .fcp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 13px;
    color: #6b5146;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.fcp .fcp__eyebrow::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #ce7653; box-shadow: 0 0 0 5px rgba(206, 118, 83, .08); }
.fcp .fcp__hero :is(h1, h2) { max-width: 780px; margin: 0 0 14px; color: var(--fcp-ink); font-size: clamp(30px, 3.6vw, 46px); font-weight: 760; line-height: 1.12; letter-spacing: -.045em; overflow-wrap: anywhere; }
.fcp .fcp__intro { max-width: 680px; color: var(--fcp-muted); font-size: 16px; line-height: 1.7; }
.fcp .fcp__hero-action { margin-top: 20px; }
.fcp .fcp__hero > .fcp__button { margin-top: 20px; }
.fcp .fcp__workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.fcp :is(.fcp__editor, .fcp__preview) { min-width: 0; padding: clamp(20px, 2.5vw, 28px); border: 1px solid rgba(222, 226, 232, .95); border-radius: 23px; background: #fff; box-shadow: var(--fcp-shadow); }
.fcp .fcp__editor { display: flex; flex-direction: column; }
.fcp .fcp__section-head { margin-bottom: 18px; }
.fcp .fcp__section-head :is(h2, h3) { font-size: 18px; font-weight: 720; line-height: 1.4; letter-spacing: -.025em; }
.fcp .fcp__section-head p { margin-top: 6px; color: var(--fcp-muted); font-size: 12px; line-height: 1.6; }

/* The platform and preview mode controls wrap instead of widening the page. */
.fcp :is(.fcp__platforms, .fcp__modes) { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; min-width: 0; padding: 4px; border: 1px solid #e2e6ea; border-radius: 13px; background: #f0f2f5; }
.fcp .fcp__platforms { margin-bottom: 20px; }
.fcp :is(button[data-platform], button[data-mode]) {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 9px 11px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    color: #606c7d;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
    text-transform: none;
    white-space: normal;
    transition: background-color .18s ease, border-color .18s ease;
}
.fcp :is(button[data-platform], button[data-mode]):is([aria-pressed="true"], [aria-selected="true"]) { border-color: #e0d5cc; background: #fff; box-shadow: 0 2px 6px rgba(32, 39, 53, .05); color: #894b32; }
.fcp :is(.fcp__field-head, .fcp__preview-controls) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.fcp .fcp__field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(100px, .7fr); align-items: start; gap: 12px; margin-bottom: 17px; }
.fcp .fcp__field { min-width: 0; }
.fcp :is(.fcp__label, .fcp__field > label) { display: block; margin-bottom: 8px; color: #424d5e; font-size: 12px; font-weight: 700; line-height: 1.5; }
.fcp .fcp__field-head .fcp__label { margin: 0; }
.fcp :is(select[data-field], input[data-custom-limit], input[data-nick], input[data-nickname]) {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #dce1e7;
    border-radius: 10px;
    background: #fafbfc;
    color: #354153;
    font-size: 16px;
    line-height: 1.35;
}
.fcp select[data-field] { padding-right: 28px; }
.fcp textarea[data-caption-input], .fcp textarea[data-copy-fallback] {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 250px;
    max-height: 660px;
    margin: 0;
    padding: 17px 18px;
    border: 1px solid #dbe0e7;
    border-radius: 14px;
    background: #fafbfc;
    box-shadow: inset 0 1px 2px rgba(32, 39, 53, .015);
    color: var(--fcp-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    resize: vertical;
    transition: border-color .18s ease, background-color .18s ease;
}
.fcp textarea[data-caption-input]::placeholder { color: #7b8595; opacity: 1; }
.fcp textarea[data-caption-input]:focus { border-color: #c08267; background: #fff; }
.fcp textarea[data-copy-fallback] { min-height: 140px; margin-top: 12px; border-color: #bf866b; background: #fffaf6; }
.fcp :is(.fcp__hint, .fcp__help, .fcp__editor-meta, .fcp__storage-status) { margin-top: 8px; color: var(--fcp-muted); font-size: 12px; line-height: 1.6; }
.fcp .fcp__field .fcp__hint { display: block; }
.fcp [data-limit-note] { margin: -3px 0 17px; }
.fcp .fcp__stats { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; margin: 15px 0 10px; padding: 0; list-style: none; }
.fcp .fcp__stats > * { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; max-width: 100%; margin: 0; padding: 7px 10px; border: 1px solid #e4e7eb; border-radius: 9px; background: #f7f8fa; color: var(--fcp-muted); font-size: 11px; line-height: 1.5; }
.fcp .fcp__stats :is(b, strong, [data-value]) { color: #354152; font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.fcp .fcp__stats i { font-style: normal; }
.fcp .fcp__stats [data-is-over="true"], .fcp .fcp__stats [data-state="over"], .fcp .fcp__stats .is-over { border-color: #ecc6c1; background: #fff2f0; color: #a03e35; }
.fcp .fcp__stats [data-is-over="true"] :is(b, strong, [data-value]), .fcp .fcp__stats [data-state="over"] :is(b, strong, [data-value]), .fcp .fcp__stats .is-over :is(b, strong, [data-value]) { color: #a03e35; }
.fcp progress[data-meter] { display: block; width: 100%; height: 5px; margin: 0 0 8px; overflow: hidden; border: 0; border-radius: 99px; background: #edf0f3; color: #be7656; accent-color: #be7656; -webkit-appearance: none; appearance: none; }
.fcp progress[data-meter]::-webkit-progress-bar { border-radius: 99px; background: #edf0f3; }
.fcp progress[data-meter]::-webkit-progress-value { border-radius: 99px; background: #be7656; transition: width .15s ease; }
.fcp progress[data-meter]::-moz-progress-bar { border-radius: 99px; background: #be7656; }
.fcp progress[data-meter][data-state="over"] { color: #b3473a; accent-color: #b3473a; }
.fcp progress[data-meter][data-state="over"]::-webkit-progress-value { background: #b3473a; }
.fcp progress[data-meter][data-state="over"]::-moz-progress-bar { background: #b3473a; }
.fcp [data-warnings] { display: grid; gap: 7px; margin: 13px 0 0; padding: 0; list-style: none; }
.fcp [data-warnings]:empty { display: none; }
.fcp .fcp__warning { position: relative; margin: 0; padding: 11px 12px 11px 36px; border: 1px solid #edd8c5; border-radius: 10px; background: #fff8ed; color: #7a5632; font-size: 12px; line-height: 1.6; }
.fcp .fcp__warning::before { content: "!"; position: absolute; top: 12px; left: 12px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #bb8955; color: #fff; font-size: 11px; font-weight: 800; line-height: 1; }
.fcp .fcp__warning--info { border-color: #dfe5ec; background: #f5f7fa; color: #596777; }
.fcp .fcp__warning--info::before { content: "i"; background: #8392a3; }
.fcp .fcp__warning--error { border-color: #ecc6c1; background: #fff2f0; color: #9b4338; }
.fcp .fcp__warning--error::before { background: #b3473a; }

.fcp .fcp__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 11px 15px;
    border: 1px solid #dde2e8;
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
    color: #4b5667;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    transition: background-color .18s ease, border-color .18s ease;
}
.fcp .fcp__button--primary { border-color: #293343; background: #293343; color: #fff; }
.fcp .fcp__button--accent { border-color: #ead8cc; background: var(--fcp-accent-soft); color: #884226; }
.fcp .fcp__button--text { border-color: transparent; background: transparent; color: #85523a; }
.fcp .fcp__button:disabled { cursor: not-allowed; opacity: .5; }
.fcp .fcp__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 19px; }
.fcp .fcp__actions > .fcp__button { flex: 1 1 auto; }
.fcp .fcp__actions > .fcp__button--primary { flex-basis: 100%; min-height: 48px; font-size: 14px; }
.fcp .fcp__options { display: grid; gap: 0; min-width: 0; margin: 18px 0 0; padding: 10px 0 0; border: 0; border-top: 1px solid #e8ebef; }
.fcp .fcp__options legend { float: none; width: auto; margin: 0 0 5px; padding: 0 9px 0 0; color: #596575; font-size: 12px; font-weight: 700; line-height: 1.5; }
.fcp .fcp__option { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 44px; margin: 0; color: #586374; font-size: 12px; font-weight: 500; line-height: 1.5; cursor: pointer; }
.fcp input[data-option] { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; accent-color: #aa6040; appearance: auto; -webkit-appearance: checkbox; cursor: pointer; }
.fcp .fcp__editor-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #e8ebef; }
.fcp :is(.fcp__status, [data-storage-status]) { min-width: 0; color: #786452; font-size: 12px; line-height: 1.6; }
.fcp .fcp__status { margin-top: 13px; }
.fcp .fcp__status:empty { margin-top: 0; }
.fcp .fcp__actions--minor { gap: 2px 8px; margin-top: 5px; }
.fcp .fcp__actions--minor .fcp__button { flex-basis: auto; padding: 9px 5px; font-size: 11px; }
.fcp .fcp__storage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 9px; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e8ebef; }
.fcp .fcp__storage .fcp__hint { margin: 0; }
.fcp .fcp__storage .fcp__button { padding-inline: 0; font-size: 11px; }
.fcp .fcp__button--fonts { margin-top: 14px; border-color: #e4d8ce; background: #faf5f0; color: #865638; }

/* This is an illustrative social preview, not a pixel-exact platform screen. */
.fcp .fcp__preview { --fcp-screen: #fff; --fcp-screen-ink: #20242d; --fcp-screen-muted: #717985; --fcp-screen-line: #e7e9ed; --fcp-screen-tag: #3b647b; background: linear-gradient(160deg, #fff 35%, #f9f8f6); }
.fcp .fcp__preview[data-theme="dark"] { --fcp-screen: #171a20; --fcp-screen-ink: #f0f2f5; --fcp-screen-muted: #a6afbd; --fcp-screen-line: #343a43; --fcp-screen-tag: #a9c5e1; }
.fcp .fcp__preview-controls { align-items: stretch; margin-bottom: 20px; }
.fcp .fcp__modes { flex: 1 1 auto; }
.fcp .fcp__modes button { padding-inline: 9px; font-size: 11px; }
.fcp .fcp__button--theme, .fcp [data-toggle-theme] { flex: 0 1 auto; min-height: 44px; }
.fcp .fcp__button--theme svg, .fcp [data-toggle-theme] svg { width: 19px; height: 19px; }
.fcp .fcp__device {
    position: relative;
    width: 100%;
    max-width: 348px;
    min-width: 0;
    margin: 0 auto;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #424955;
    border-radius: 39px;
    background: #20252e;
    box-shadow: 0 18px 38px -22px rgba(23, 31, 43, .55), inset 0 0 0 2px rgba(255, 255, 255, .035);
}
.fcp .fcp__device-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 37px; padding: 4px 19px 0; border-radius: 29px 29px 0 0; background: var(--fcp-screen); color: var(--fcp-screen-ink); font-size: 11px; font-weight: 700; line-height: 1; }
.fcp .fcp__device-status > :nth-child(2) { position: absolute; top: 8px; left: 50%; width: 82px; height: 21px; transform: translateX(-50%); border-radius: 99px; background: #20252e; color: transparent; font-size: 0; }
.fcp .fcp__device-status > :last-child { margin-left: auto; font-size: 10px; letter-spacing: -.025em; }
.fcp .fcp__phone { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 560px; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0 0 29px 29px; background: var(--fcp-screen); color: var(--fcp-screen-ink); font-size: 13px; line-height: 1.5; }
.fcp .fcp__phone :is(strong, b) { color: inherit; }
.fcp .fcp__phone-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; min-height: 45px; padding: 8px 16px; border-bottom: 1px solid var(--fcp-screen-line); color: var(--fcp-screen-ink); font-size: 21px; font-weight: 760; line-height: 1.2; letter-spacing: -.04em; }
.fcp .fcp__phone-bar > :last-child:not(:first-child) { font-size: 21px; font-weight: 400; letter-spacing: .1em; }
.fcp .fcp__profile { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 57px; padding: 10px 14px; color: var(--fcp-screen-ink); }
.fcp .fcp__avatar { display: block; flex: 0 0 32px; width: 32px; height: 32px; margin: 0; border: 1px solid rgba(160, 133, 113, .3); border-radius: 50%; background: #f3eae2; object-fit: cover; }
.fcp .fcp__profile-name { display: block; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.fcp .fcp__profile > :last-child:not(.fcp__profile-name):not(.fcp__avatar) { margin-left: auto; }
.fcp .fcp__photo { position: relative; flex: 0 0 auto; width: 100%; min-width: 0; aspect-ratio: 1; overflow: hidden; background: radial-gradient(ellipse at 70% 24%, #eed4bb 0%, transparent 53%), linear-gradient(138deg, #e6e0d6, #cbd1c9 65%, #bcc6c2); }
.fcp .fcp__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.fcp .fcp__photo-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; padding: 25px; color: #536058; font-size: 12px; font-weight: 600; line-height: 1.55; text-align: center; }
.fcp .fcp__photo-placeholder::before { content: ""; display: block; width: 72px; height: 72px; background: url("fox.webp") center / contain no-repeat; opacity: .55; filter: saturate(.25); }
.fcp .fcp__photo-placeholder svg { width: 32px; height: 32px; opacity: .65; }
.fcp .fcp__phone-actions { display: flex; align-items: center; gap: 16px; min-height: 40px; padding: 7px 15px; color: var(--fcp-screen-ink); font-size: 23px; line-height: 1; }
.fcp .fcp__phone-actions > :last-child { margin-left: auto; }
.fcp .fcp__phone :is(.fcp__phone-actions, .fcp__phone-nav, .fcp__phone-bar) svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.fcp .fcp__post { flex: 1 1 auto; min-width: 0; max-height: 290px; padding: 2px 15px 17px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #adb5c0 transparent; }
.fcp .fcp__caption { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; color: var(--fcp-screen-ink); font-family: inherit; font-size: 13px; line-height: 1.55; font-weight: 400; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.fcp .fcp__token { color: var(--fcp-screen-tag); }
.fcp .fcp__beyond { padding: 0; border-radius: 2px; background: #fce7d9; color: #8a4025; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fcp .fcp__preview[data-theme="dark"] .fcp__beyond { background: #593b2c; color: #ffe0cb; }
.fcp .fcp__placeholder { color: var(--fcp-screen-muted); }
.fcp button[data-expand-caption] { min-width: 44px; min-height: 44px; margin: 0; padding: 5px 0; border: 0; background: transparent; box-shadow: none; color: var(--fcp-screen-muted); font-size: 12px; font-weight: 600; line-height: 1.4; text-align: start; text-decoration: none; text-transform: none; }
.fcp .fcp__phone-nav { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; gap: 12px; min-height: 47px; margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--fcp-screen-line); color: var(--fcp-screen-ink); font-size: 20px; line-height: 1; }
.fcp .fcp__phone-note { padding: 10px 14px; color: var(--fcp-screen-muted); font-size: 10px; line-height: 1.5; }
.fcp :is(.fcp__preview-note, [data-preview-note]) { max-width: 348px; margin: 15px auto 0; color: var(--fcp-muted); font-size: 11px; line-height: 1.65; text-align: center; }

/* Portrait video layouts share a full-bleed image and readable text overlay. */
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) { --fcp-screen: #232a2d; --fcp-screen-ink: #fff; --fcp-screen-muted: #dce2e6; --fcp-screen-line: rgba(255, 255, 255, .18); --fcp-screen-tag: #fff; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__phone { min-height: 590px; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__photo { position: absolute; z-index: 0; inset: 0; height: 100%; aspect-ratio: auto; background: radial-gradient(ellipse at 65% 25%, #988c78, transparent 53%), linear-gradient(145deg, #87958d, #46594f 67%, #28352f); }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 15, 14, .42), transparent 27%, rgba(9, 15, 14, .22) 47%, rgba(9, 15, 14, .85)); pointer-events: none; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__photo-placeholder { padding-bottom: 90px; color: rgba(255, 255, 255, .8); }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__photo-placeholder::before { width: 94px; height: 94px; opacity: .65; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__phone-bar { position: relative; z-index: 1; border: 0; font-size: 17px; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__profile { position: relative; z-index: 1; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__post { position: absolute; z-index: 2; right: 46px; bottom: 49px; left: 0; max-height: 330px; padding: 20px 14px 12px; text-shadow: 0 1px 5px rgba(0, 0, 0, .4); }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__phone-actions { position: absolute; z-index: 2; right: 7px; bottom: 86px; display: flex; flex-direction: column; gap: 22px; width: 32px; padding: 0; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__phone-actions > :last-child { margin-left: 0; }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__phone-nav { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; background: rgba(19, 27, 24, .45); }
.fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__beyond { background: rgba(255, 210, 169, .22); color: #ffe2c4; }

/* Telegram is a message bubble; Threads is an uncluttered text-first post. */
.fcp .fcp__preview[data-platform="tg"] .fcp__phone { min-height: 560px; padding: 0 13px 64px; background: radial-gradient(circle at 30% 28%, rgba(151, 178, 154, .13) 0 6px, transparent 7px), #e5eae2; background-size: 43px 43px; }
.fcp .fcp__preview[data-platform="tg"][data-theme="dark"] .fcp__phone { background: radial-gradient(circle at 30% 28%, rgba(151, 178, 154, .08) 0 6px, transparent 7px), #222e2b; background-size: 43px 43px; }
.fcp .fcp__preview[data-platform="tg"] .fcp__phone-bar { margin: 0 -13px; border: 0; background: var(--fcp-screen); font-size: 17px; }
.fcp .fcp__preview[data-platform="tg"] .fcp__profile { margin: 14px 0 0; padding: 12px 11px; border-radius: 13px 13px 0 0; background: var(--fcp-screen); }
.fcp .fcp__preview[data-platform="tg"] .fcp__photo { aspect-ratio: 4 / 3; }
.fcp .fcp__preview[data-platform="tg"] .fcp__phone-actions { display: none; }
.fcp .fcp__preview[data-platform="tg"] .fcp__post { flex: 0 1 auto; min-height: 90px; max-height: 270px; padding: 12px 11px 17px; border-radius: 0 0 13px 13px; background: var(--fcp-screen); box-shadow: 0 2px 4px rgba(38, 60, 45, .035); }
.fcp .fcp__preview[data-platform="tg"] .fcp__phone-nav { position: absolute; right: 0; bottom: 0; left: 0; background: var(--fcp-screen); }
.fcp .fcp__preview[data-platform="th"] .fcp__phone { min-height: 560px; }
.fcp .fcp__preview[data-platform="th"] .fcp__phone-bar { justify-content: center; min-height: 51px; font-size: 23px; }
.fcp .fcp__preview[data-platform="th"] .fcp__profile { align-items: flex-start; margin-top: 7px; }
.fcp .fcp__preview[data-platform="th"] .fcp__post { order: 1; flex: 0 1 auto; min-height: 80px; max-height: 270px; padding: 0 15px 15px 55px; }
.fcp .fcp__preview[data-platform="th"] .fcp__photo { order: 2; width: calc(100% - 70px); margin: 0 15px 12px 55px; border: 1px solid var(--fcp-screen-line); border-radius: 11px; aspect-ratio: 4 / 3; }
.fcp .fcp__preview[data-platform="th"] .fcp__phone-actions { order: 3; padding-left: 55px; }
.fcp .fcp__preview[data-platform="th"] .fcp__phone-nav { order: 4; }
.fcp .fcp__preview[data-platform="th"] .fcp__phone-note { order: 5; }
.fcp .fcp__preview[data-platform="th"] .fcp__token[data-token="tag"] { font-weight: 650; }
.fcp .fcp__preview:is([data-platform="tg"], [data-platform="th"]) .fcp__photo-placeholder { gap: 8px; padding: 13px; }
.fcp .fcp__preview:is([data-platform="tg"], [data-platform="th"]) .fcp__photo-placeholder::before { width: 48px; height: 48px; }
.fcp .fcp__preview:is([data-platform="tg"], [data-platform="th"]) .fcp__photo-placeholder > [aria-hidden] { display: none; }

.fcp .fcp__customize { margin-top: 21px; padding-top: 18px; border-top: 1px solid #e5e8ec; }
.fcp .fcp__customize h4 { margin-bottom: 15px; color: #465263; font-size: 13px; font-weight: 700; line-height: 1.5; }
.fcp .fcp__customize > summary { min-height: 44px; color: #586475; font-size: 12px; font-weight: 650; cursor: pointer; }
.fcp .fcp__customize > .fcp__field { margin-bottom: 12px; }
.fcp .fcp__upload-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.fcp .fcp__upload-actions > * { flex: 1 1 120px; min-width: 0; }
.fcp .fcp__upload-actions label { display: block; color: #586475; font-size: 11px; font-weight: 600; line-height: 1.6; }
.fcp .fcp__upload-actions input[type="file"] { display: block; width: 100%; min-width: 0; min-height: 44px; margin-top: 5px; padding: 5px; overflow: hidden; border: 1px solid #e0e4e9; border-radius: 9px; background: #fff; color: #657082; font-size: 11px; line-height: 1.6; }
.fcp input[type="file"]::file-selector-button { min-height: 32px; max-width: 100%; margin-right: 8px; padding: 6px 8px; border: 0; border-radius: 5px; background: #f0f2f5; color: #4e5969; font: inherit; font-weight: 650; cursor: pointer; }

/* The existing font generator remains intact inside this optional panel. */
.fcp .fcp__fonts { margin-top: 24px; padding: 0; border: 1px solid #dde2e8; border-radius: 18px; background: rgba(255, 255, 255, .62); }
.fcp .fcp__fonts > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 22px; color: #3d4858; font-size: 15px; font-weight: 700; line-height: 1.45; cursor: pointer; list-style: none; }
.fcp .fcp__fonts > summary::-webkit-details-marker { display: none; }
.fcp .fcp__fonts > summary::after { content: "+"; flex: 0 0 26px; width: 26px; color: #94684f; font-size: 24px; font-weight: 400; line-height: 1; text-align: center; }
.fcp .fcp__fonts[open] > summary::after { content: "−"; }
.fcp .fcp__fonts > :is(p, .fcp__font-actions) { margin: 0 22px 18px; color: var(--fcp-muted); font-size: 13px; }
.fcp .fcp__fonts > .fcp__button { margin: 0 22px 20px; }
.fcp .fcp__fonts .ufg { width: auto; max-width: none; margin: 0 14px 16px; }

/* Long-form guidance and examples inherit the same editorial rhythm. */
.fcp .fcp__article { min-width: 0; margin-top: 30px; padding: clamp(22px, 3.8vw, 40px); border: 1px solid #e0e4e9; border-radius: 23px; background: rgba(255, 255, 255, .85); color: #4a5565; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.fcp .fcp__article :is(h2, h3, h4) { max-width: 800px; margin: 30px 0 13px; color: #293343; font-weight: 730; line-height: 1.3; letter-spacing: -.025em; }
.fcp .fcp__article h2 { font-size: clamp(23px, 2.8vw, 30px); }
.fcp .fcp__article h3 { font-size: 21px; }
.fcp .fcp__article h4 { font-size: 17px; }
.fcp .fcp__article > :first-child { margin-top: 0; }
.fcp .fcp__article p { max-width: 76ch; margin: 12px 0; font-size: 15px; line-height: 1.8; }
.fcp .fcp__article :is(ul, ol) { max-width: 76ch; margin: 13px 0 20px; padding-left: 24px; }
.fcp .fcp__article ul { list-style: disc; }
.fcp .fcp__article ol { list-style: decimal; }
.fcp .fcp__article li { margin: 7px 0; padding-left: 3px; }
.fcp .fcp__article li::marker { color: #92745f; }
.fcp .fcp__article strong { color: #384353; font-weight: 700; }
.fcp .fcp__article a:not(.fcp__button) { color: #984425; text-decoration: underline; text-decoration-color: #c8967b; text-underline-offset: 3px; }
.fcp .fcp__article blockquote { margin: 20px 0; padding: 8px 0 8px 18px; border-left: 3px solid #c48d70; color: #667081; }
.fcp .fcp__article blockquote p { margin: 0; }
.fcp .fcp__table-wrap { max-width: 100%; margin: 22px 0; overflow-x: auto; border: 1px solid #dfe4ea; border-radius: 13px; background: #fff; -webkit-overflow-scrolling: touch; }
.fcp .fcp__table-wrap table { width: 100%; min-width: 580px; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 1.65; text-align: start; }
.fcp .fcp__table-wrap :is(th, td) { padding: 13px 16px; border: 0; border-bottom: 1px solid #e6eaf0; color: #4a5565; text-align: start; vertical-align: top; }
.fcp .fcp__table-wrap th { background: #f2f4f7; color: #374353; font-weight: 700; }
.fcp .fcp__table-wrap tbody tr:last-child td { border-bottom: 0; }
.fcp .fcp__table-wrap tbody tr:nth-child(even) td { background: #fafbfc; }
.fcp .fcp__examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fcp .fcp__example { display: flex; flex-direction: column; min-width: 0; margin: 18px 0; padding: 20px; border: 1px solid #e0e4e9; border-radius: 15px; background: #fafbfc; }
.fcp .fcp__examples .fcp__example { margin: 0; }
.fcp .fcp__example > :is(h3, h4, strong) { display: block; margin: 0 0 10px; color: #414d5d; font-size: 14px; font-weight: 700; }
.fcp .fcp__example pre { display: block; flex: 1 1 auto; width: 100%; min-width: 0; margin: 0 0 13px; padding: 13px 14px; border: 1px solid #e0e4ea; border-radius: 10px; background: #fff; box-shadow: none; color: #344052; font-family: inherit; font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; }
.fcp .fcp__example [data-try-caption] { align-self: flex-start; min-height: 44px; border-color: #e1cbb9; background: #fff3eb; color: #865036; }
.fcp .fcp__article details { margin: 10px 0; border: 1px solid #e0e4e9; border-radius: 12px; background: #fff; }
.fcp .fcp__article details summary { min-height: 44px; padding: 15px 18px; color: #3c4859; font-size: 14px; font-weight: 650; line-height: 1.6; cursor: pointer; }
.fcp .fcp__article details > :not(summary) { margin: 0 18px 17px; font-size: 14px; }
.fcp .fcp__article .fcp__note { margin: 20px 0; padding: 15px 18px; border: 1px solid #e4dbd1; border-radius: 12px; background: #faf6f1; color: #78614e; font-size: 13px; }
.fcp .fcp__notice { margin-top: 20px; padding: 16px 18px; border: 1px solid #e4dbd1; border-radius: 12px; background: #fff8f0; color: #78614e; font-size: 13px; }

@media (hover: hover) {
    .fcp .fcp__button:not(:disabled):hover { border-color: #b6c0cd; background: #f5f7f9; color: #283343; }
    .fcp .fcp__button--primary:not(:disabled):hover { border-color: #172131; background: #172131; color: #fff; }
    .fcp .fcp__button--accent:not(:disabled):hover, .fcp .fcp__example [data-try-caption]:hover { border-color: #d5af96; background: #fce7d9; color: #78381e; }
    .fcp :is(button[data-platform], button[data-mode]):hover { background: #fff; color: #71442e; }
    .fcp button[data-expand-caption]:hover { text-decoration: underline; text-underline-offset: 3px; }
    .fcp .fcp__fonts > summary:hover { background: rgba(255, 255, 255, .6); border-radius: 18px; }
}
@media (max-width: 1080px) {
    .fcp .fcp__workspace { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 15px; }
    .fcp :is(.fcp__editor, .fcp__preview) { padding: 20px; }
    .fcp button[data-platform] { flex-basis: calc(50% - 4px); }
    .fcp .fcp__field-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
    .fcp { margin: 18px auto; padding: 27px 20px; border-radius: 23px; }
    .fcp .fcp__hero { padding: 0 100px 26px 0; }
    .fcp .fcp__hero::after { width: 82px; height: 82px; }
    .fcp .fcp__intro { font-size: 14px; }
    .fcp .fcp__workspace { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .fcp .fcp__editor { padding: 23px; }
    .fcp .fcp__preview { padding: 24px; }
    .fcp button[data-platform] { flex-basis: auto; }
    .fcp .fcp__field-row { grid-template-columns: minmax(0, 1fr) minmax(100px, .65fr); }
    .fcp textarea[data-caption-input] { min-height: 215px; }
    .fcp .fcp__preview-controls, .fcp .fcp__customize { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
    .fcp .fcp__preview > .fcp__section-head { text-align: center; }
    .fcp .fcp__device { max-width: 355px; }
    .fcp .fcp__examples { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .fcp { padding: 24px 12px; border-radius: 18px; }
    .fcp .fcp__hero { padding: 0 0 25px; }
    .fcp .fcp__hero::after { display: none; }
    .fcp .fcp__hero :is(h1, h2) { font-size: 31px; }
    .fcp .fcp__eyebrow { font-size: 10px; letter-spacing: .11em; }
    .fcp :is(.fcp__editor, .fcp__preview) { padding: 17px 13px; border-radius: 17px; }
    .fcp .fcp__platforms { gap: 3px; padding: 3px; }
    .fcp button[data-platform] { flex-basis: calc(50% - 3px); padding-inline: 8px; }
    .fcp .fcp__field-row { grid-template-columns: minmax(0, 1fr); }
    .fcp textarea[data-caption-input] { min-height: 230px; padding: 14px; }
    .fcp .fcp__stats { gap: 6px; }
    .fcp .fcp__stats > * { padding: 6px 8px; font-size: 10px; }
    .fcp .fcp__stats :is(b, strong, [data-value]) { font-size: 12px; }
    .fcp .fcp__actions > .fcp__button { flex-basis: 100%; }
    .fcp .fcp__preview-controls { gap: 8px; }
    .fcp .fcp__modes { flex-basis: 100%; }
    .fcp .fcp__button--theme, .fcp [data-toggle-theme] { margin-left: auto; }
    .fcp .fcp__device { padding: 6px; border-radius: 32px; }
    .fcp .fcp__device-status { border-radius: 25px 25px 0 0; padding-inline: 15px; }
    .fcp .fcp__device-status > :nth-child(2) { width: 68px; }
    .fcp .fcp__phone { min-height: 505px; border-radius: 0 0 25px 25px; }
    .fcp .fcp__phone-bar { padding-inline: 12px; font-size: 19px; }
    .fcp .fcp__profile { padding-inline: 11px; }
    .fcp .fcp__post { padding-inline: 12px; }
    .fcp .fcp__caption { font-size: 12px; }
    .fcp .fcp__phone-actions { gap: 12px; padding-inline: 12px; }
    .fcp .fcp__phone-nav { padding-inline: 10px; }
    .fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__phone { min-height: 525px; }
    .fcp .fcp__preview:is([data-platform="tt"], [data-platform="ig"][data-mode="reels"]) .fcp__photo-placeholder { padding-right: 43px; padding-bottom: 140px; padding-left: 16px; }
    .fcp .fcp__preview[data-platform="th"] .fcp__post { padding-left: 47px; }
    .fcp .fcp__preview[data-platform="th"] .fcp__photo { width: calc(100% - 60px); margin-left: 47px; margin-right: 13px; }
    .fcp .fcp__preview[data-platform="th"] .fcp__phone-actions { padding-left: 47px; }
    .fcp .fcp__fonts > summary { padding: 17px; font-size: 14px; }
    .fcp .fcp__fonts > :is(p, .fcp__font-actions) { margin-right: 17px; margin-left: 17px; }
    .fcp .fcp__fonts .ufg { margin-right: 0; margin-left: 0; border-right: 0; border-left: 0; border-radius: 0; }
    .fcp .fcp__fonts .ufg :is(.ufg__editor, .ufg__preview) { padding: 13px; }
    .fcp .fcp__fonts .ufg .ufg__field-head { flex-wrap: wrap; }
    .fcp .fcp__fonts .ufg .ufg__card-actions { grid-template-columns: minmax(0, 1fr); }
    .fcp .fcp__article { margin-top: 22px; padding: 23px 16px; border-radius: 17px; }
    .fcp .fcp__article h3 { font-size: 19px; }
    .fcp .fcp__article p { font-size: 14px; }
    .fcp .fcp__example { padding: 13px; }
    .fcp .fcp__example pre { padding: 11px; font-size: 13px; }
    .fcp .fcp__example [data-try-caption] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .fcp *, .fcp *::before, .fcp *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media (forced-colors: active) {
    .fcp :is(button[data-platform], button[data-mode]):is([aria-pressed="true"], [aria-selected="true"]) { outline: 2px solid Highlight; }
    .fcp .fcp__beyond { outline: 1px solid MarkText; }
    .fcp .fcp__hero::after, .fcp .fcp__photo-placeholder::before { display: none; }
    .fcp .fcp__device { border-color: CanvasText; }
}