.field-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 10px}.field-heading label{margin:0}.counter{font-size:12px;color:#9eacd0}.counter.over{color:#ff9cac}textarea{font:inherit;width:100%;resize:vertical;min-height:116px;max-height:300px;padding:14px 16px;color:white;background:#0b1328;border:1px solid #ffffff1c;border-radius:13px;line-height:1.7}.frame-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.frame-option{position:relative;margin:0;cursor:pointer}.frame-option input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}.frame-option .frame-sample{display:block;min-width:0;border:1px solid #ffffff20;border-radius:14px;padding:10px 6px;background:linear-gradient(135deg,#142236,#344d69);transition:.2s}.frame-option img{display:block;width:100%;aspect-ratio:2/1;object-fit:contain}.frame-option small{display:block;text-align:center;margin-top:5px;font-size:11px;color:#dce6ff}.frame-option input:checked+.frame-sample{border-color:#a3b7ff;box-shadow:0 0 0 1px #a3b7ff;background:#7587bb20}.frame-option input:focus-visible+.frame-sample{outline:3px solid #b4c0ff}.preview-stage{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;background:#040814;border:1px solid #ffffff1a;border-radius:16px;overflow:hidden;container-type:size;margin-top:20px}.stage{container-type:size}.wall-layer{display:flex;align-items:center;justify-content:center}.wall-scene{position:relative;width:min(100cqw,calc(100cqh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;background:#050914;overflow:hidden;isolation:isolate}.scene-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050914;border-radius:0}.scene-decorations{position:absolute;inset:0;pointer-events:none}.wall-scene .ig-overlay{bottom:3%;left:3%;transform:none;max-width:94%;gap:1cqw;padding:1cqw 1.6cqw;border-radius:1.4cqw;white-space:normal}.wall-scene .ig-overlay .ig-id{font-size:3.1cqw;line-height:1.3;overflow-wrap:anywhere}.wall-scene .ig-overlay .ig-icon{width:3.8cqw;height:3.8cqw;border-radius:1.1cqw}.wall-scene .ig-overlay .ig-icon svg{width:2.5cqw;height:2.5cqw}.wall-scene .tv-countdown{font-size:1.5cqw;padding-left:1cqw;display:inline-block}.wall-scene.has-quote .ig-overlay{max-width:51%}.scene-title{position:absolute;top:4%;left:3%;max-width:60%;padding:1cqw 1.8cqw;border-radius:1cqw;background:#111c33cc;backdrop-filter:blur(12px);border:1px solid #ffffff30;box-shadow:0 8px 25px #0004;font-size:2.5cqw;font-weight:500;line-height:1.45;overflow-wrap:anywhere;white-space:pre-wrap}.scene-quote{position:absolute;bottom:3%;right:2%;width:42%;aspect-ratio:2/1}.quote-glass{position:absolute;inset:17% 10% 15%;border-radius:1.7cqw;background:#081125b8;box-shadow:0 5px 24px #0003;backdrop-filter:blur(5px)}.quote-gif{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.65;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.frame-heart .quote-gif{mask-image:url('/stickers/frame-mask-heart.svg');-webkit-mask-image:url('/stickers/frame-mask-heart.svg')}.frame-neon .quote-gif{mask-image:url('/stickers/frame-mask-neon.svg');-webkit-mask-image:url('/stickers/frame-mask-neon.svg')}.frame-bear .quote-gif{mask-image:url('/stickers/frame-mask-bear.svg');-webkit-mask-image:url('/stickers/frame-mask-bear.svg')}.quote-text{position:absolute;inset:25% 13% 20%;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.55cqw;font-weight:500;line-height:1.45;color:#fff;text-shadow:0 2px 6px #000e;overflow:hidden}.frame-bear .quote-text{left:28%;right:12%;font-size:1.35cqw}.frame-bear .quote-glass{left:25%}.preview-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:12px 0;font-size:12px;color:#9eacd0}.preview-toolbar button{font-size:12px;padding:8px 12px;min-height:36px}.confirm-check{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;font-size:14px;color:#ced8f0;cursor:pointer}.confirm-check input{width:20px;height:20px;min-height:20px;flex:0 0 auto;margin-top:3px;accent-color:#96a9ff}.admin-decorations{background:#0b132855;border:1px solid #ffffff0e;border-radius:12px;padding:12px 14px;margin:12px 0;color:#bac7e0;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.live-empty{padding:20px;text-align:center;color:#a4b2cf}.preview-label{margin:20px 0 0;font-size:12px;color:#a7b9dc}.frame-guide{font-size:12px;color:#92a4c5}.original-preview-label{font-size:12px;color:#94a2bf;margin-bottom:8px}.modal .preview-stage{width:100%;margin-top:16px}.card.live-card{position:sticky;top:24px}.quote-text:empty{display:none}@media(max-width:800px){.card.live-card{position:static}.frame-option small{font-size:11px}}@media(prefers-reduced-motion:reduce){.quote-gif{opacity:.5}}

.wall-scene:not(.has-quote) .ig-overlay{left:50%;transform:translateX(-50%)}
.quote-copy{display:block;width:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:inherit}
.preview-stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}

/* V1.3: all overlays are scaled inside the actual object-fit media rectangle. */
.media-bounds{position:absolute;overflow:hidden;container-type:size;pointer-events:none}
.media-design{position:absolute;left:0;top:0;container-type:size;transform-origin:top left}
.media-bounds .scene-decorations{inset:0}
.wall-scene .media-bounds .ig-overlay{left:50%;bottom:3%;transform:translateX(-50%);width:88%;max-width:88%;height:7%;min-height:0;justify-content:center;gap:1.2cqw;padding:.7cqw 1cqw;border-radius:1.6cqw;background:#07102033;box-sizing:border-box;overflow:hidden}
.wall-scene .media-bounds .ig-id{font-size:3.6cqw;line-height:1.5;white-space:nowrap;min-width:0;max-width:77%;overflow:hidden;text-overflow:clip}
.wall-scene .media-bounds .ig-icon{width:4cqw;height:4cqw;max-height:5cqh;max-width:5cqh;flex-shrink:0;border-radius:1cqw}
.wall-scene .media-bounds .ig-icon svg{width:70%;height:70%}
.wall-scene .media-bounds .tv-countdown{font-size:1.8cqw;padding-left:.5cqw;flex-shrink:0}
.media-bounds .scene-title{top:3%;left:12.5%;width:75%;max-width:75%;height:9%;display:flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box;padding:.7cqw 1.5cqw;font-size:3.2cqw;line-height:1.35;background:#07102033;overflow:hidden;box-shadow:none;backdrop-filter:none;white-space:pre-wrap;border-color:#ffffff25}
.media-bounds .scene-quote{bottom:13%;right:auto;left:12.5%;width:75%;aspect-ratio:2/1;max-height:37%}
.media-bounds[data-position=top] .scene-quote{top:15%;bottom:auto}
.media-bounds .quote-glass{background:#07102033;backdrop-filter:none;box-shadow:none}
.media-bounds .quote-text{inset:18% 12% 15%;font-size:3cqw;line-height:1.25}
.media-bounds .frame-bear .quote-text{font-size:2.6cqw}
.media-bounds .quote-gif{opacity:.7;object-fit:fill}
.media-bounds .frame-flying{left:0;width:100%;height:26%;aspect-ratio:auto;max-height:26%;overflow:hidden}
.flying-track{position:absolute;inset:0;animation:wall-flight var(--flight-duration,20s) linear infinite;will-change:transform}
.media-bounds .frame-flying .quote-text{inset:0 12.5%;font-size:3.4cqw;text-align:center;background:#07102033;border-radius:1.5cqw}
@keyframes wall-flight{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.flying-track{animation:none}}

/* V1.3.4 Hotfix: clear text on the actual media, shared by TV and previews. */
.wall-scene .media-bounds .ig-overlay{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;justify-content:center;padding:0 12px;gap:12px;text-align:center;color:#fff}
.wall-scene .media-bounds .ig-id{font-family:Mitr,sans-serif;font-weight:700;color:#fff;text-shadow:0 2px 4px #000,0 0 8px #000;line-height:1.5}
.wall-scene .media-bounds .ig-icon{width:42px;height:42px;max-width:6cqh;max-height:6cqh;flex-shrink:0;background:none;border:0;border-radius:0;color:#fff;filter:drop-shadow(0 2px 3px #000)}
.wall-scene .media-bounds .ig-icon svg{width:100%;height:100%;max-width:none;max-height:none}
.wall-scene .media-bounds .scene-title{display:flex;align-items:center;justify-content:center;text-align:center;font-family:Mitr,sans-serif;font-weight:700;color:#fff;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:0 10px;line-height:1.35;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 2px 5px #000,0 0 10px #000}
.wall-scene .media-bounds .tv-countdown{color:#fff;background:none;border:0;box-shadow:none;text-shadow:0 2px 3px #000}
.frame-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.flight-sample{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;font-size:20px;color:#ced8ff}
.wall-controls{margin:20px 0;padding:22px}.wall-controls .actions{flex-wrap:wrap}.wall-controls label{display:flex;align-items:center;gap:12px}.wall-controls input{width:22px;min-height:22px;accent-color:#8fa7ff}.wall-controls .notice{margin:12px 0}.paused-status{color:#ffb0bc}.mode-status{font-weight:500}
.wall-scene .media-bounds .ig-overlay{height:10%;padding:.35cqw 1cqw}
.media-bounds .scene-quote{bottom:16%;max-height:34%}

/* V1.3.1 uses measured media geometry; GIF boxes always keep their native 2:1 ratio. */
.media-bounds .scene-quote{max-width:500px;max-height:none;aspect-ratio:2/1}
.media-bounds .quote-gif{object-fit:contain}
.wall-scene .media-bounds .ig-overlay{transform:none;max-width:760px;padding:4px 12px;gap:12px;border-radius:14px;backdrop-filter:none;box-shadow:none}
.wall-scene .media-bounds .ig-icon{width:32px;height:32px;max-width:4cqh;max-height:4cqh;border-radius:9px}
.wall-scene .media-bounds .tv-countdown{font-size:min(17px,3cqh);line-height:1.5;padding-left:8px}
.media-bounds .scene-title{max-width:700px;padding:2px 10px;border-radius:10px}
.media-bounds .quote-text{inset:25% 13% 20%;line-height:1.4}
.media-bounds .frame-bear .quote-text{left:28%;right:12%}
.media-bounds .frame-flying{max-width:none;max-height:none;aspect-ratio:auto;background:none;border:0;box-shadow:none}
.media-bounds .frame-flying .quote-text{inset:0 8%;font-weight:700;color:#fff;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;text-shadow:0 2px 4px #000,0 0 8px #000c}
.flying-track{animation:wall-flight var(--flight-duration,20s) ease-in-out infinite}
@keyframes wall-flight{0%{transform:translateX(100%)}25%,65%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.flying-track{animation:none}}

/* V1.3.5 cartoon overlays: same dynamic renderer in TV, live and fullscreen previews. */
.media-bounds .scene-title{max-width:800px;padding:6px 42px!important;font-weight:700;line-height:1.2!important;overflow:hidden}
.title-copy{display:block;width:100%;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;-webkit-text-stroke:4px #171021;paint-order:stroke fill;text-shadow:0 4px 0 #603287,0 6px 9px #5b219a99}
.cartoon-word{font-weight:700;color:#fff;line-height:inherit}
.title-copy .tone-1{color:#f5b3df}.title-copy .tone-2{color:#dcc5ff}
.media-bounds .scene-title::before,.media-bounds .scene-title::after{position:absolute;top:50%;transform:translateY(-50%);font-size:22px;line-height:1;color:#ee93cf;-webkit-text-stroke:2px #27122e;text-shadow:0 2px 6px #a855f788;pointer-events:none}
.media-bounds .scene-title::before{content:'♥';left:10px;transform:translateY(-50%) rotate(-14deg)}
.media-bounds .scene-title::after{content:'✦';right:10px;color:#dcc0ff;transform:translateY(-50%) rotate(12deg)}
.media-bounds .quote-text{font-family:Mitr,sans-serif;font-weight:700;line-height:1.35;-webkit-text-stroke:3px #211124;paint-order:stroke fill;text-shadow:0 3px 0 #6c398d,0 4px 7px #ab69d580}
.quote-copy .tone-1,.quote-copy .tone-2{color:#ffc2e3}
.media-bounds .quote-glass{background:linear-gradient(170deg,#ed74c920,#a855f70c);border-radius:40% 18% 35% 22%;box-shadow:none}
.media-bounds .frame-flying .quote-text{font-weight:700;-webkit-text-stroke:3px #211124;paint-order:stroke fill;text-shadow:0 3px 0 #6c398d,0 4px 7px #ab69d580}
.wall-scene .media-bounds .ig-overlay{padding:5px 20px;gap:12px;border:2px solid #f5b3df70;border-radius:42px;background:linear-gradient(115deg,#7134aeeb,#aa478bd9);box-shadow:inset 0 2px 0 #ffffff24,0 3px 8px #20102d70;backdrop-filter:none}
.wall-scene .media-bounds .ig-id{font-weight:700;color:#fff;line-height:1.6;-webkit-text-stroke:2px #3c164c;paint-order:stroke fill;text-shadow:0 2px 3px #301137;max-width:calc(100% - 62px)}
.wall-scene .media-bounds .ig-icon{width:44px;height:44px;max-width:5cqh;max-height:5cqh;padding:7px;border-radius:12px;background:radial-gradient(circle at 28% 105%,#ffd76e 0%,#f5a14c 24%,#e44986 48%,#a63bb5 70%,#6659d6 100%);filter:none;box-shadow:0 1px 4px #26103670;color:white}
.wall-scene .media-bounds .ig-icon svg{width:100%;height:100%}
.wall-scene .media-bounds .tv-countdown{display:none}

/* Cute Neon: gradient fill + white inner edge + dark purple sticker outline. */
.title-copy{font-family:Mitr,Tahoma,Arial,sans-serif;-webkit-text-stroke:2px #fff;text-shadow:none;filter:drop-shadow(2px 0 0 #3a1557) drop-shadow(-2px 0 0 #3a1557) drop-shadow(0 2px 0 #3a1557) drop-shadow(0 -2px 0 #3a1557) drop-shadow(0 3px 1px #261038)}
.title-copy .cartoon-word{color:#f3b7e5;background:linear-gradient(180deg,#ffe2f4 8%,#da9deb 40%,#a86bd7 65%,#f59dcc 95%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;paint-order:stroke fill}
.media-bounds .scene-title::before,.media-bounds .scene-title::after{font-size:28px;color:#ffa8da;-webkit-text-stroke:2px #4a205d;text-shadow:0 2px 0 #fff,0 4px 4px #321240}
.media-bounds .quote-text,.media-bounds .frame-flying .quote-text{font-family:Mitr,Tahoma,Arial,sans-serif;-webkit-text-stroke:3px #3b174f;paint-order:stroke fill;text-shadow:0 3px 0 #190b25,0 5px 5px #0009}
.quote-copy .tone-1{color:#f3afe2}.quote-copy .tone-2{color:#fff}.quote-copy .tone-3{color:#ddc0ff}
.wall-scene .media-bounds .ig-overlay{border:2px solid #fb8ad4aa;background:linear-gradient(110deg,#4f2289e8,#893ba9dc 50%,#cf5ca4d9);box-shadow:inset 0 2px 0 #ffe0f433,0 0 9px #cc5adc50,0 4px 5px #25103066;border-radius:52px;padding:6px 20px;gap:16px}
.wall-scene .media-bounds .ig-icon{width:66px;height:66px;max-width:7cqh;max-height:7cqh;padding:9px;border-radius:17px;background:radial-gradient(circle at 25% 110%,#ffdd75 0%,#ffbb52 25%,#f25984 49%,#c138a9 73%,#6756d6 100%);box-shadow:0 2px 5px #35194077}
.wall-scene .media-bounds .ig-id{max-width:calc(100% - 90px);-webkit-text-stroke:2px #331249}
@supports not ((background-clip:text) or (-webkit-background-clip:text)){.title-copy .cartoon-word{-webkit-text-fill-color:#f3b7e5;background:none;color:#f3b7e5}}

/* Orientation comes from decoded media dimensions; portrait rules remain untouched. */
.media-bounds:not([data-orientation=portrait]) .scene-title{padding:calc(6px * var(--title-size)) calc(42px * var(--title-size))!important}
.media-bounds:not([data-orientation=portrait]) .scene-title::before,.media-bounds:not([data-orientation=portrait]) .scene-title::after{font-size:clamp(1px,calc(28px * var(--title-size)),28px)}
.wall-scene .media-bounds:not([data-orientation=portrait]) .ig-overlay{padding:calc(6px * var(--ig-size)) calc(20px * var(--ig-size));gap:calc(16px * var(--ig-size));border-radius:calc(52px * var(--ig-size))}
.wall-scene .media-bounds:not([data-orientation=portrait]) .ig-icon{width:clamp(1px,calc(66px * var(--ig-size)),66px);height:clamp(1px,calc(66px * var(--ig-size)),66px);max-width:calc(7cqh * var(--ig-size));max-height:calc(7cqh * var(--ig-size));padding:calc(9px * var(--ig-size));border-radius:calc(17px * var(--ig-size))}
.wall-scene .media-bounds:not([data-orientation=portrait]) .ig-id{max-width:calc(100% - 90px * var(--ig-size))}
