/* Ecem's rose palette, shared by the community pages. */
body.ecem-pink {
    --ecem-bg:#291529; --ecem-panel:#43223f; --ecem-raised:#603553;
    --ecem-border:#76536d; --ecem-text:#fff1f8; --ecem-muted:#dbb8cf;
    --ecem-accent:#ff9acb; --ecem-button:#b92b70; --ecem-input:#2c1a29;
    color:var(--ecem-text); background:var(--ecem-bg);
}
html:not(.dark) body.ecem-pink {
    --ecem-bg:#fff0f6; --ecem-panel:#fffafd; --ecem-raised:#ffe2ef;
    --ecem-border:#d6a4be; --ecem-text:#4b203b; --ecem-muted:#80546e;
    --ecem-accent:#a82060; --ecem-button:#b92b70; --ecem-input:#fff8fc;
}
body.ecem-pink #app, body.ecem-pink .site-bg,
body.ecem-pink:has(.ecem-home) #app, body.ecem-pink:has(.ecem-home) .site-bg {
    background:var(--ecem-bg); color:var(--ecem-text);
}
body.ecem-pink #app>nav, body.ecem-pink:has(.ecem-home) #app>nav {
    background:var(--ecem-panel); border-bottom:1px solid var(--ecem-border);
}
body.ecem-pink #app>nav a, body.ecem-pink:has(.ecem-home) #app>nav a {color:var(--ecem-text)}
body.ecem-pink .nav-item:hover, body.ecem-pink .nav-item.active {border-bottom-color:var(--ecem-accent)!important}
body.ecem-pink [class*="border-b-[#eeb425]"] {border-color:var(--ecem-accent)!important}
body.ecem-pink .header-bg>div.absolute {background:linear-gradient(110deg,#781e51b8,#a5418059,#321a3b9e)}
body.ecem-pink .header-bg button {background:var(--ecem-button);color:#fff}
body.ecem-pink>footer, body.ecem-pink:has(.ecem-home)>footer {background:var(--ecem-panel);color:var(--ecem-muted);border-top:1px solid var(--ecem-border)}
body.ecem-pink .ecem-home {color:var(--ecem-text)}
body.ecem-pink .ecem-panel {background:var(--ecem-panel);border-color:var(--ecem-border);box-shadow:0 6px 24px #3a102315}
body.ecem-pink .ecem-muted,body.ecem-pink .ecem-section-title p,
body.ecem-pink .ecem-room-row small,body.ecem-pink .ecem-label,
body.ecem-pink .ecem-profile-details span,body.ecem-pink .ecem-referrals>p,
body.ecem-pink .ecem-referrals>small,body.ecem-pink .ecem-welcome p {color:var(--ecem-muted)}
body.ecem-pink .ecem-section-title h2 {color:var(--ecem-text)}
body.ecem-pink .ecem-pictogram,body.ecem-pink .ecem-room-icon,body.ecem-pink .ecem-pill {background:var(--ecem-raised);color:var(--ecem-accent)}
body.ecem-pink .ecem-friends>.ecem-section-title {border-color:var(--ecem-border)}
body.ecem-pink .ecem-friend {color:var(--ecem-text)}
body.ecem-pink .ecem-friend>span {background:var(--ecem-input);border-color:var(--ecem-accent)}
body.ecem-pink .ecem-outline {color:var(--ecem-text);border-color:var(--ecem-border)}
body.ecem-pink .ecem-profile-cover:before {background:linear-gradient(#8c2e6026,#4d163380)}
body.ecem-pink .ecem-news-feature {background-color:#a72e6b;background-blend-mode:normal,luminosity;border-color:var(--ecem-border)}
body.ecem-pink .ecem-avatar {background:linear-gradient(145deg,#ffc3df,#c7478b);border-color:var(--ecem-panel)}
body.ecem-pink .ecem-profile-details>div,body.ecem-pink .ecem-room-row,
body.ecem-pink .ecem-badges>a,body.ecem-pink .ecem-news-controls span,
body.ecem-pink .ecem-news-controls button {background:var(--ecem-raised);border-color:var(--ecem-border);color:var(--ecem-text)}
body.ecem-pink .ecem-label:after {background:var(--ecem-border)}
body.ecem-pink .ecem-profile-link,body.ecem-pink .ecem-room-arrow,
body.ecem-pink .ecem-discover-grid>a>span,body.ecem-pink .ecem-discover-grid b,
body.ecem-pink .ecem-kicker {color:var(--ecem-accent)}
body.ecem-pink .ecem-discover-grid>a {background:linear-gradient(135deg,var(--ecem-raised),var(--ecem-panel));border-color:var(--ecem-border)}
body.ecem-pink .ecem-discover-grid p {color:var(--ecem-muted)}
body.ecem-pink .ecem-copy-row input {background:var(--ecem-input);color:var(--ecem-text);border-color:var(--ecem-border)}
body.ecem-pink .ecem-copy-row button,body.ecem-pink .ecem-primary {background:var(--ecem-button);color:#fff}
body.ecem-pink .ecem-welcome {background:linear-gradient(135deg,var(--ecem-raised),var(--ecem-panel))}
body.ecem-pink .ecem-home a:focus-visible,body.ecem-pink .ecem-home button:focus-visible {outline-color:var(--ecem-accent)}
body.ecem-pink .ecem-home a:hover.ecem-room-row {border-color:var(--ecem-accent)}
body.ecem-pink .ecem-support {background:var(--ecem-bg);color:var(--ecem-text)}
body.ecem-pink .ecem-support .box {background:var(--ecem-panel);border-color:var(--ecem-border)}
body.ecem-pink .ecem-support .action {background:var(--ecem-button)}
body.ecem-pink .ecem-support .dialog {background:var(--ecem-panel);color:var(--ecem-text);border-color:var(--ecem-border)}
body.ecem-pink .ecem-support .ticket-link:hover {border-color:var(--ecem-accent)}
body.ecem-pink ::selection {background:#ca478b;color:white}
body.ecem-pink ::-webkit-scrollbar-thumb {background-color:var(--ecem-border)}
html.dark body.ecem-pink .bg-gray-900,html.dark body.ecem-pink [class~="dark:bg-gray-900"] {background-color:var(--ecem-bg)}
html.dark body.ecem-pink .bg-gray-800,html.dark body.ecem-pink [class~="dark:bg-gray-800"] {background-color:var(--ecem-panel)}
html.dark body.ecem-pink .bg-gray-700,html.dark body.ecem-pink [class~="dark:bg-gray-700"] {background-color:var(--ecem-raised)}
html.dark body.ecem-pink [class~="dark:border-gray-700"],html.dark body.ecem-pink [class~="dark:border-gray-900"] {border-color:var(--ecem-border)}
html.dark body.ecem-pink [class~="dark:text-gray-200"],html.dark body.ecem-pink [class~="dark:text-gray-300"] {color:var(--ecem-text)}
body.ecem-pink a[class*="text-[#eeb425]"],body.ecem-pink [class~="text-yellow-500"] {color:var(--ecem-accent)}
@media(prefers-reduced-motion:no-preference){body.ecem-pink .ecem-panel,body.ecem-pink .ecem-outline{transition:background-color .18s,border-color .18s}}

/* Rose garden: layered satin cards, pearly edges and a decorative star field. */
body.ecem-pink #app {background:radial-gradient(ellipse at 8% 20%,#e668b12b,transparent 42%),radial-gradient(ellipse at 95% 60%,#ad7cdb26,transparent 40%),var(--ecem-bg)}
body.ecem-pink main.site-bg {background:radial-gradient(circle at 16px 16px,#ffa8d51c 1px,transparent 2px) 0 0/34px 34px,radial-gradient(ellipse at 50% 0,#d9579626,transparent 65%),var(--ecem-bg)}
body.ecem-pink .ecem-home{position:relative;padding-top:12px}
body.ecem-pink .ecem-panel{position:relative;border:1px solid #d99ab377;border-radius:24px;background:linear-gradient(145deg,#ffffff0d,transparent 50%),var(--ecem-panel);box-shadow:0 12px 34px #18071638,inset 0 1px 0 #ffd7eb26;overflow:hidden}
body.ecem-pink .ecem-panel:before{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;background:linear-gradient(90deg,transparent,#ffb9d9,#e4c3ff,transparent);pointer-events:none}
body.ecem-pink .ecem-section-title{position:relative}
body.ecem-pink .ecem-pictogram{border:1px solid #ffc3df66;border-radius:13px;background:linear-gradient(140deg,#f997c44d,#ad77da33);box-shadow:inset 0 1px 0 #fff3;color:#ffd6e9}
body.ecem-pink .ecem-profile-cover{border-radius:17px;border:1px solid #ffbfdb66}
body.ecem-pink .ecem-profile-cover:before{background:linear-gradient(130deg,#bd43844d,#4d163340)}
body.ecem-pink .ecem-avatar{border:4px solid #f7bfd7;background:radial-gradient(circle at 35% 25%,#fff2f8,#ee91bf 65%,#be5a91);box-shadow:0 0 0 5px #c675a32e,0 8px 28px #e86bb64d}
body.ecem-pink .ecem-profile-details>div{border-radius:14px;background:linear-gradient(130deg,#ffa7cf12,transparent),var(--ecem-raised)}
body.ecem-pink .ecem-label{letter-spacing:1.8px;color:#efbad4}
body.ecem-pink .ecem-label:after{background:linear-gradient(90deg,#e99dc2,transparent)}
body.ecem-pink .ecem-badges>a{border-radius:14px;background:radial-gradient(circle at 50% 20%,#ffcee326,transparent),var(--ecem-raised)}
body.ecem-pink .ecem-discover-grid>a{position:relative;border-radius:18px;background:radial-gradient(circle at 100% 0,#f593c333,transparent 65%),linear-gradient(145deg,var(--ecem-raised),var(--ecem-panel));box-shadow:inset 0 1px 0 #ffd5e51c}
body.ecem-pink .ecem-discover-grid>a:after{content:"✧";position:absolute;right:15px;top:12px;font-size:25px;color:#ffbbd666;pointer-events:none}
body.ecem-pink .ecem-room-row{border-radius:15px;background:linear-gradient(100deg,#e989b61c,transparent),var(--ecem-raised)}
body.ecem-pink .ecem-news-feature{border:1px solid #f1b3cd99;border-radius:23px;box-shadow:0 8px 25px #18071630}
body.ecem-pink .ecem-primary,body.ecem-pink .ecem-copy-row button,body.ecem-pink .header-bg button{border:1px solid #ffbdd7a6;background:linear-gradient(135deg,#db4d96,#a73a85);box-shadow:0 4px 16px #cb408a40,inset 0 1px 0 #fff3;border-radius:13px}
body.ecem-pink .ecem-outline{border-radius:12px;background:#f5a5cc0d}
body.ecem-pink #app>nav{background:linear-gradient(100deg,var(--ecem-panel),var(--ecem-raised),var(--ecem-panel));border-bottom:1px solid #da93b388;box-shadow:0 5px 24px #1b071b29}
body.ecem-pink .header-bg>div.absolute{background:linear-gradient(100deg,#84255588,#b7659b40,#51205288)}
html:not(.dark) body.ecem-pink .ecem-pictogram{color:#a33270}
html:not(.dark) body.ecem-pink .ecem-label{color:#8d4268}
html:not(.dark) body.ecem-pink .ecem-panel{box-shadow:0 10px 30px #a64e7717,inset 0 1px 0 white}
@media(hover:hover) and (prefers-reduced-motion:no-preference){body.ecem-pink .ecem-discover-grid>a,body.ecem-pink .ecem-room-row{transition:transform .18s,box-shadow .18s}body.ecem-pink .ecem-discover-grid>a:hover,body.ecem-pink .ecem-room-row:hover{transform:translateY(-3px);box-shadow:0 8px 20px #b6498a26}}

.ecem-heart-cursor{display:none;position:fixed;width:52px;height:auto;max-width:none;z-index:2147483647;pointer-events:none;transform:translate(-50%,-42%);filter:drop-shadow(0 2px 3px #58214f55)}
@media(pointer:fine){html.ecem-heart-ready,html.ecem-heart-ready *{cursor:none!important}.ecem-heart-ready .ecem-heart-cursor.visible{display:block}}

/* Fit the entire artwork across both dimensions of the content area. */
body.ecem-pink main.site-bg,body.ecem-pink:has(.ecem-home) main.site-bg{
    background-color:#291529;
    background-image:url('../images/ecem-kpop-background-v1.png');
    background-size:100% 100%;
    background-position:center top;
    background-repeat:no-repeat;
    background-attachment:scroll;
    min-height:max(calc(100vh - 280px),66.667vw);
}
body.ecem-pink .ecem-panel{background-color:color-mix(in srgb,var(--ecem-panel) 94%,transparent);backdrop-filter:blur(8px)}

@media(min-width:1500px){body.ecem-pink:has(.ecem-home) main>div{max-width:min(1000px,52vw)}}
@media(min-width:1000px) and (max-width:1499px){body.ecem-pink:has(.ecem-home) main>div{max-width:52vw;padding-left:12px;padding-right:12px}.ecem-home .ecem-columns{grid-template-columns:280px minmax(0,1fr);gap:18px}.ecem-home .ecem-discover-grid{grid-template-columns:1fr}.ecem-home .ecem-friends{gap:12px;padding:14px}.ecem-home .ecem-friends>.ecem-muted{display:none}}

@media(min-width:1500px){.ecem-home .ecem-columns{grid-template-columns:340px minmax(0,1fr)}}

body.ecem-pink .ecem-video-header{overflow:hidden;isolation:isolate}
.ecem-header-film{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ecem-header-film iframe{position:absolute;left:50%;top:50%;width:100%;height:auto;aspect-ratio:16/9;min-height:100%;border:0;transform:translate(-50%,-50%)}
body.ecem-pink .ecem-video-header>.ecem-film-shade{background:linear-gradient(90deg,#2810258c,#28102530,#2810258c);pointer-events:none}
.ecem-film-controls{position:absolute;z-index:5;right:24px;bottom:9px;display:flex;align-items:center;gap:9px;font-size:11px}
body.ecem-pink .header-bg .ecem-film-controls button,.ecem-film-controls a{background:#24152cdd;border:1px solid #f6b8db80;color:#fff5fa;border-radius:8px;padding:5px 9px;box-shadow:none;text-decoration:none}
@media(max-width:700px){.ecem-header-film iframe{width:180%;max-width:none}.ecem-film-controls{right:10px;bottom:6px;font-size:10px}}

/* Show the complete 16:9 frame, without enlarging it to banner width. */
body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{height:300px;background-position:center!important;background-size:cover!important}
.ecem-header-film{display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#291529dd,#29152955 30%,#29152955 70%,#291529dd)}
.ecem-header-film iframe{position:relative;left:auto;top:auto;width:auto;height:100%;min-height:0;max-width:100%;aspect-ratio:16/9;transform:none;flex-shrink:0}
body.ecem-pink .ecem-video-header>.ecem-film-shade{background:linear-gradient(90deg,#28102580,transparent 32%,transparent 68%,#28102580)}
.ecem-header-content{pointer-events:none}
.ecem-header-content a,.ecem-header-content button{pointer-events:auto}
.ecem-header-brand{flex-direction:column;align-items:flex-start;gap:12px;max-width:300px}
.ecem-header-brand>div{margin-left:28px;font-size:12px;height:auto;min-height:36px}
@media(min-width:1500px){.ecem-header-content{max-width:1440px!important}.ecem-header-brand{margin-left:0}}
@media(max-width:900px){body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{height:260px}.ecem-header-content{align-items:flex-end;padding-bottom:38px}.ecem-header-brand{max-width:160px}.ecem-header-brand img{max-width:145px!important}.ecem-header-brand>div{display:none}.ecem-header-content>flex button{font-size:12px;padding:8px 12px}}
@media(max-width:550px){body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{height:230px}.ecem-header-content{align-items:flex-end;justify-content:flex-start;padding-bottom:36px}.ecem-header-brand img{max-width:110px!important}.ecem-film-controls{font-size:10px}}

/* Full-width narrow strip, fitting the full source frame vertically. */
body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{height:174px}
.ecem-header-film iframe{position:absolute;left:50%;top:50%;width:100%;max-width:none;height:calc(100vw * 9 / 16);min-height:0;aspect-ratio:16/9;transform:translate(-50%,-50%);transform-origin:center}
.ecem-header-brand{flex-direction:row;align-items:center;gap:16px;max-width:none;margin-left:0}
.ecem-header-brand>div{margin-left:0;min-height:50px;font-size:14px}
.ecem-header-content{max-width:1280px!important;align-items:center;padding-bottom:0;pointer-events:none}
@media(max-width:900px){body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{height:174px}.ecem-header-brand img{max-width:200px!important}.ecem-header-brand>div{display:none}}
@media(max-width:550px){body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{height:150px}.ecem-header-brand img{max-width:150px!important}}

/* Explicit user preference: compress the complete frame into the narrow strip. */
.ecem-header-film iframe{transform:translate(-50%,-50%) scaleY(var(--film-y-scale,.16))}

.ecem-header-film iframe{height:var(--film-source-height,calc(100vw * 9 / 16))}

/* Natural video proportions; music controls stay in the strip. */
.ecem-header-film iframe{transform:translate(-50%,-50%);height:calc(100vw * 9 / 16)}
.ecem-film-controls button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:550px){.ecem-film-controls{gap:4px;right:5px}.ecem-film-controls a{display:none}}

/* Complete frame inside the original strip, with natural proportions. */
.ecem-header-film iframe{position:relative;left:auto;top:auto;width:auto;height:100%;max-width:100%;aspect-ratio:16/9;transform:none;flex-shrink:0}
.ecem-header-brand{flex-direction:column;align-items:flex-start;gap:4px;max-width:265px}
.ecem-header-brand img{max-width:220px!important;max-height:80px!important}
.ecem-header-brand>div{margin-left:28px;min-height:30px;height:30px;font-size:11px}
@media(max-width:900px){.ecem-header-brand img{max-width:150px!important}.ecem-header-brand>div{display:none}}
@media(max-width:550px){.ecem-header-brand img{max-width:90px!important}.ecem-film-controls{font-size:9px;gap:3px}.ecem-film-controls button{padding:4px}}

/* Wider central cinema window, matching the marked space between the branding. */
.ecem-header-film{left:50%;right:auto;width:min(720px,calc(100% - 600px));transform:translateX(-50%);background:#291529}
.ecem-header-film iframe{position:absolute;left:50%;top:50%;width:100%;max-width:none;height:auto;min-height:100%;aspect-ratio:16/9;transform:translate(-50%,-50%);flex-shrink:0}
@media(max-width:1100px){.ecem-header-film{width:56%}}
@media(max-width:550px){.ecem-header-film{width:100%}.ecem-header-brand{align-self:flex-start}.ecem-header-brand img{max-width:100px!important}}

body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{background-size:100% 100%!important}
body.ecem-pink .ecem-video-header>.ecem-film-shade{background:linear-gradient(90deg,#28102530,transparent 32%,transparent 68%,#28102530)}

body.ecem-pink .ecem-video-header,body.ecem-pink:has(.ecem-home) .ecem-video-header{background-image:none!important;background-color:#291529}
.ecem-header-side{position:absolute;top:0;bottom:0;width:max(300px,calc((100% - 720px)/2));background-image:url('../images/ecem-huntrx-pastel-v2.png');background-repeat:no-repeat;background-size:auto 100%;pointer-events:none}
.ecem-header-side-left{left:0;background-position:left center}
.ecem-header-side-right{right:0;background-position:right center}
@media(max-width:1100px){.ecem-header-side{width:22%}}
@media(max-width:550px){.ecem-header-side{display:none}}

.ecem-header-side{background-color:#d5b8e0}
body.ecem-pink .ecem-video-header>.ecem-film-shade{background:linear-gradient(90deg,#29152920,transparent 32%,transparent 68%,#29152920)}

/* Both options join the side artwork directly to the video, without flat gaps. */
.ecem-header-side{background-size:cover;background-color:#d5b8e0}
.ecem-header-side-left{background-position:left center}
.ecem-header-side-right{background-position:right center}
.ecem-banner-wide .ecem-header-film{width:min(900px,calc(100% - 600px))}
.ecem-banner-wide .ecem-header-side{width:max(300px,calc((100% - 900px)/2))}
@media(max-width:1100px){.ecem-banner-wide .ecem-header-film{width:56%}.ecem-banner-wide .ecem-header-side{width:22%}}
@media(max-width:550px){.ecem-banner-wide .ecem-header-film{width:100%}}