/* Shared rose scrollbars for public pages, forms and the admin panel. */
:root{--site-scroll-thumb:#ba3e75;--site-scroll-track:#112330}
*{scrollbar-color:var(--site-scroll-thumb) var(--site-scroll-track);scrollbar-width:thin}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:var(--site-scroll-track)}
*::-webkit-scrollbar-thumb{background:var(--site-scroll-thumb);border:2px solid var(--site-scroll-track);border-radius:9px}
*::-webkit-scrollbar-thumb:hover{background:#a93569}
*::-webkit-scrollbar-corner{background:var(--site-scroll-track)}
.discount-price{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}.discount-gold{display:inline-flex;position:relative;padding:10px 16px;border:1px solid #d7ad57;border-radius:12px;background:linear-gradient(135deg,#453720,#27251e);color:#f5d68c;font:700 14px/1.3 system-ui;white-space:nowrap}.discount-crossed:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom right,transparent calc(50% - 1.5px),#ba3e75 calc(50% - 1.5px),#ba3e75 calc(50% + 1.5px),transparent calc(50% + 1.5px));pointer-events:none}.discount-new-price{color:#ff69a5;font-size:15px!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important}.discount-days{color:#ffbad6;font:12px/1.4 system-ui;flex-basis:100%}.gift-confirm-footer>.discount-price{margin-left:auto;max-width:260px}
.member-name{display:inline-flex;align-items:center;gap:.25em}.member-name-premium{color:#20f7f7!important}.member-name-vip{color:#f5d68c!important}.member-name>svg{width:1em;height:1em;flex:none;vertical-align:middle}
.discount-crossed:after{inset:-8px -10px;border-radius:0}
/* One selected VIP style, adapted to portrait, thumbnail and circular media. */
.vip-framed{position:relative!important;isolation:isolate}
.vip-framed-media{display:block;width:100%;height:100%;min-width:0}
.vip-framed-media>img{display:block;width:100%;height:100%;object-fit:cover}
.vip-framed[data-frame-shape=circle]{overflow:visible!important;border-color:transparent!important}
.vip-framed[data-frame-shape=circle]>img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.frame-picker{width:min(850px,calc(100vw - 32px));box-sizing:border-box;max-height:90dvh;overflow:auto;padding:24px;color:#e9f0f5;background:#102632;border:1px solid #d7ad57;border-radius:18px}
.frame-picker::backdrop{background:#02090dbb}
.frame-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0}
.frame-choice{display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 8px;background:#152d3b;color:#e5edf3;border:2px solid #355466;border-radius:12px;cursor:pointer;font:inherit}
.frame-choice[aria-pressed=true]{border-color:#f5d68c;background:#3b3325;box-shadow:0 0 0 2px #f5d68c30}
.frame-choice:focus-visible{outline:2px solid #fff;outline-offset:3px}
.frame-choice-art{display:grid;place-items:center;width:100%;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#0a1923;font-size:40px;color:#f5d68c}
.frame-choice-art>img{width:100%;height:100%;object-fit:cover;display:block}
.frame-picker-actions{display:flex;justify-content:flex-end;gap:12px}
.search-card-caption,.search-like,.search-new{z-index:3}
.ribbon-card>.vip-framed-media{height:auto;aspect-ratio:3/4}
.profile-photo-frame.vip-framed>.gallery-controls,.profile-photo-frame.vip-framed>.photo-reaction{z-index:3}
@media(max-width:600px){.frame-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.frame-picker{padding:18px}}
.vip-framed{background:transparent!important;border-color:transparent!important;overflow:visible!important}
.search-card:has(.vip-framed){background:transparent;border-color:transparent}
.search-card>a:hover .vip-framed>img{transform:none}
.profile-photo-frame.vip-framed>.person-arrow{z-index:3}
/* Restrained metallic frames; stable keys preserve existing VIP selections. */
.vip-framed{--frame-radius:12px;--frame-metal:linear-gradient(135deg,#bc8b36,#fff0b7 28%,#dcab51 65%,#ffe8a0);--frame-spark:url('/site-assets/frames/spark-crown.svg');--frame-glow:#ffdb8f66;border-radius:var(--frame-radius)!important}
.vip-framed[data-vip-frame=ice]{--frame-metal:linear-gradient(135deg,#8cadd3,#eff8ff 28%,#9abbeb 65%,#d8ebff);--frame-spark:url('/site-assets/frames/spark-ice.svg');--frame-glow:#b9dcff66}
.vip-framed[data-vip-frame=roses]{--frame-metal:linear-gradient(135deg,#d96999,#ffcae0 28%,#f17bab 65%,#ffa9cd);--frame-spark:url('/site-assets/frames/spark-roses.svg');--frame-glow:#ff8fbd66}
.vip-framed::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:var(--frame-radius);padding:2px;background:var(--frame-metal);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;filter:drop-shadow(0 0 2px var(--frame-glow))}
.vip-framed::before{content:'';position:absolute;inset:-15px -12px;z-index:3;pointer-events:none;background-image:var(--frame-spark),var(--frame-spark),var(--frame-spark);background-repeat:no-repeat;background-size:24px 30px;background-position:34% 0,100% 50%,74% 100%;filter:drop-shadow(0 0 3px var(--frame-glow))}
.vip-framed>img{border:0!important;border-radius:var(--frame-radius)!important;mask:none!important;-webkit-mask:none!important}
.vip-framed[data-frame-shape=thumb]{--frame-radius:8px}
.vip-framed[data-frame-shape=circle]{--frame-radius:50%}
.vip-framed[data-frame-shape=thumb]::after,.vip-framed[data-frame-shape=circle]::after{padding:1.5px}
.vip-framed[data-frame-shape=thumb]::before,.vip-framed[data-frame-shape=circle]::before{inset:-9px -7px;background-image:var(--frame-spark);background-size:16px 20px;background-position:96% 0}
.vip-framed[data-frame-shape=circle]::before{inset:-6px;background-position:85% 14%}
.frame-choice-art{overflow:visible}
.frame-picker-grid{gap:20px}

.vip-framed[data-vip-frame=blue]{--frame-metal:linear-gradient(135deg,#1685ff,#ddf7ff 28%,#30c7ff 65%,#ddf7ff);--frame-spark:url('/site-assets/frames/spark-blue.svg');--frame-glow:#58caff99}

.vip-framed[data-vip-frame=hotpink]{--frame-metal:linear-gradient(135deg,#e51979,#ffe0f2 28%,#ff429c 65%,#ffe0f2);--frame-spark:url('/site-assets/frames/spark-hotpink.svg');--frame-glow:#ff319788}

.vip-framed[data-vip-frame=graphite]{--frame-metal:linear-gradient(135deg,#45494e,#c8cbd0 28%,#73777e 65%,#c8cbd0);--frame-spark:url('/site-assets/frames/spark-graphite.svg');--frame-glow:#a7acb133}

/* Keep avatar images inside their circle while sparks may extend outside. */
.liker-avatar{position:relative}
.liker-avatar>img,.vip-framed.liker-avatar[data-frame-shape=circle]>img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;margin:0;object-fit:cover;border-radius:50%}
/* The photo caption and its shade sit below the frame contour and sparks. */
.search-card .vip-framed-media>.search-card-caption{z-index:1;border-radius:0 0 var(--frame-radius) var(--frame-radius)}


/* Mobile layout uses the safe, visible viewport instead of the layout viewport. */
@media(max-width:700px){
 html{scroll-padding-bottom:100px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
 body{overflow-x:clip}
 html:has(dialog[open]){overflow:hidden}
 .own-profile-page .profile-sidebar{display:block;position:fixed;top:var(--visible-end,100svh);bottom:auto;left:var(--visible-left,0px);right:auto;width:var(--visible-width,100%);transform:translateY(-100%);z-index:40;box-sizing:border-box;margin:0;padding:5px 4px max(5px,env(safe-area-inset-bottom))}
 .own-profile-page .profile-sidebar nav{margin:0;display:flex;flex-direction:row;align-items:stretch;gap:2px;overflow-x:auto}
 .own-profile-page .profile-layout{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
 .own-profile-page>.footer{margin-bottom:calc(100px + env(safe-area-inset-bottom))}
 dialog[open]:not(.member-messenger-dialog):not(.photo-viewer){box-sizing:border-box;position:fixed;inset:auto!important;left:calc(var(--visible-left,0px) + 8px)!important;top:calc(var(--visible-top,0px) + 8px)!important;right:auto!important;bottom:auto!important;margin:0!important;transform:none!important;width:calc(var(--visible-width,100vw) - 16px)!important;max-width:calc(var(--visible-width,100vw) - 16px)!important;max-height:calc(var(--visible-height,100svh) - 16px)!important;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
 dialog[open] input:not([type=checkbox]):not([type=radio]),dialog[open] select,dialog[open] textarea{font-size:16px}
 dialog.member-dialog.frame-picker[open]{height:calc(var(--visible-height,100svh) - 16px);display:flex;flex-direction:column;gap:12px;overflow:hidden;border-radius:12px;padding:16px 12px max(12px,env(safe-area-inset-bottom))}
 dialog.frame-picker>h2,dialog.frame-picker>p{flex-shrink:0;margin:0}
 dialog.frame-picker>.frame-picker-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:16px 8px;align-content:start;grid-template-columns:repeat(2,minmax(0,1fr))}
 dialog.frame-picker>.frame-picker-actions{flex-shrink:0;margin:0;padding-top:8px;background:#102632}
 dialog.frame-picker>.frame-picker-actions button{flex:1;min-height:44px}
 dialog.frame-picker>p:empty{display:none}
 dialog.member-messenger-dialog[open]{height:min(var(--chat-height,100dvh),var(--visible-height,100svh))}
 dialog.photo-viewer[open]{height:min(var(--viewer-height,100dvh),var(--visible-height,100svh))}
}

.member-tabs{scrollbar-width:none;-ms-overflow-style:none}.member-tabs::-webkit-scrollbar{display:none;width:0;height:0}
@media(max-width:700px){
 .own-profile-page .profile-sidebar{top:auto!important;bottom:var(--nav-bottom,0px)!important;transform:none!important;min-height:64px;width:var(--visible-width,100%);background:#0b1721;overflow:visible}
 .own-profile-page .profile-sidebar nav{min-height:54px;scrollbar-width:none}
 .own-profile-page .profile-sidebar nav::-webkit-scrollbar{display:none}
}