/* Pipio V4.9.85 — GROUP 1 UI FINISHING
   Presentation layer ONLY. No routing, auth, media, payment, chat, or wallet code.
   Loaded after V4.9.84 page CSS and shared design system. */
:root{
 --pp-g1-ease:cubic-bezier(.2,.75,.3,1);
 --pp-g1-purple:#6d44db;
 --pp-g1-pink:#ed488b;
 --pp-g1-outline:rgba(110,72,214,.24);
 --pp-g1-soft-shadow:0 8px 24px rgba(43,27,76,.08);
 --pp-g1-inset:env(safe-area-inset-bottom,0px);
}
/* 1. Stable app typography and controls — no globally fixed dimensions. */
body.pipio-pro{overflow-wrap:break-word;min-width:0}
body.pipio-pro :is(button,[role="button"],a){-webkit-tap-highlight-color:transparent}
body.pipio-pro :is(button,a,[role="button"]):focus-visible{
 outline:3px solid #b594ff;outline-offset:3px;box-shadow:0 0 0 6px rgba(114,76,210,.13)
}
body.pipio-pro :is(button,input,select,textarea):disabled{opacity:.55}
body.pipio-pro :is(input,textarea,select){max-inline-size:100%;min-inline-size:0}
body.pipio-pro :is(.app-shell,.main,.pipio-premium-home,.pw-page,.pc-channel,.pc-creator){min-width:0}
body.pipio-pro :is(.pipio-catalog-title,.pipio-catalog-studio,.pipio-catalog-details,.p480-live-card,.pw-title-row){overflow-wrap:anywhere}
/* 2. Elegant navigation states: existing HTML/buttons/JS handlers untouched. */
body.pipio-pro .sidebar .nav-item,
body.pipio-pro .mobilebar .mobnav,
body.pipio-pro .p480-app-nav :is(a,button),
body.pipio-pro .audio-bottom-nav :is(a,button){
 transition:background-color .18s ease,color .18s ease,transform .18s var(--pp-g1-ease),box-shadow .18s ease;
}
@media(hover:hover){
 body.pipio-pro .sidebar .nav-item:hover,
 body.pipio-pro .p480-app-nav :is(a,button):hover,
 body.pipio-pro .audio-bottom-nav :is(a,button):hover{transform:translateY(-1px)}
}
body.pipio-pro .mobilebar{isolation:isolate}
body.pipio-pro .mobilebar .mobnav.active{font-weight:750}
/* 3. First-paint and loading: original startup controller retains full ownership. */
body.pipio-pro .loading-cover{
 position:relative;isolation:isolate;display:grid;place-items:center;gap:18px;
 padding:36px 24px;color:#6a4bb5;text-align:center;min-height:min(68dvh,640px);font-weight:730;
}
body.pipio-pro .loading-cover::before{
 content:"";display:block;width:48px;height:48px;border:4px solid rgba(110,72,214,.13);
 border-top-color:var(--pp-g1-purple);border-radius:50%;animation:pp-g1-spin .9s linear infinite;
}
body.pipio-pro #pipio-startup .pipio-startup-track::after{animation-duration:1.35s}
/* Standard opt-in skeleton classes for loading blocks. Do not fake loaded content. */
body.pipio-pro :is(.pp-skeleton,.pipio-skeleton){
 background:linear-gradient(100deg,rgba(124,105,177,.11) 15%,rgba(161,145,210,.21) 40%,rgba(124,105,177,.11) 65%);
 background-size:210% 100%;border-radius:12px;animation:pp-g1-shimmer 1.55s ease-in-out infinite;
}
body.pipio-pro[data-pipio-theme="dark"] :is(.pp-skeleton,.pipio-skeleton){
 background-image:linear-gradient(100deg,#ffffff11 15%,#ffffff25 40%,#ffffff11 65%)
}
/* 4. Buttons, cards, filter states — keep existing brand and semantic status colors. */
body.pipio-pro :is(.pipio-category-pill,.p481-access-pill,.p480-home-live button,.pw-action,.pc-action){
 transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s var(--pp-g1-ease);
}
@media(hover:hover){
 body.pipio-pro :is(.pipio-category-pill,.p481-access-pill,.p480-home-live button,.pw-action,.pc-action):hover:not(:disabled){transform:translateY(-1px)}
}
body.pipio-pro :is(.pipio-catalog-card,.p480-live-card,.p481-member-card){
 transition:transform .23s var(--pp-g1-ease),box-shadow .23s ease,border-color .23s ease;
}
body.pipio-pro .pipio-catalog-cover img{object-fit:cover}
/* 5. Dialog UX. Don't change display/visibility; app code owns modal lifecycle. */
body.pipio-pro :is(.modal,.pipio-pay-card,.p64-card,.p64-panel){
 scrollbar-width:thin;overscroll-behavior:contain;max-width:calc(100vw - 24px);
}
body.pipio-pro :is(.modal-backdrop,.pipio-pay-overlay,.p64-overlay){
 padding:max(12px,env(safe-area-inset-top,0px)) 12px max(14px,env(safe-area-inset-bottom,0px));
}
body.pipio-pro :is(.modal,.pipio-pay-card,.p64-card,.p64-panel,[role="dialog"]):focus-visible{
 outline:2px solid #a788ea;outline-offset:2px;
}
body.pipio-pro :is(.modal,.pipio-pay-card,.p64-card,.p64-panel) :is(button,a,input,select,textarea){max-width:100%}
body.pipio-pro .p79-sheet-wrap:not([hidden]) .p79-sheet{animation:pp-g1-sheet-in .24s var(--pp-g1-ease) both}
/* 6. Feedback and subtle entrance animation; no effects on video, webcam, canvas, or LIVE stages. */
body.pipio-pro .toast,body.pipio-pro #toast-root > *{
 overflow-wrap:anywhere;max-width:min(420px,calc(100vw - 28px));
}
body.pipio-pro .pipio-catalog-card{animation:pp-g1-rise .34s var(--pp-g1-ease) both}
body.pipio-pro .pipio-catalog-grid .pipio-catalog-card:nth-child(2){animation-delay:45ms}
body.pipio-pro .pipio-catalog-grid .pipio-catalog-card:nth-child(3){animation-delay:80ms}
body.pipio-pro .pipio-catalog-grid .pipio-catalog-card:nth-child(n+4){animation-delay:100ms}
/* 7. Mobile-first constraints. Preserve portrait LIVE full-bleed media rules. */
@media(max-width:749px){
 body.pipio-pro .app-shell .main{padding-inline:max(14px,env(safe-area-inset-left,0px)) max(14px,env(safe-area-inset-right,0px))!important}
 body.pipio-pro .mobilebar{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
 body.pipio-pro .mobilebar .mobnav{min-width:0;min-height:52px}
 body.pipio-pro .pipio-catalog-grid{gap:12px}
 body.pipio-pro .pipio-catalog-info{min-height:unset;padding:12px}
 body.pipio-pro .pipio-catalog-title{font-size:13px}
 body.pipio-pro :is(.pipio-catalog-categories,.p481-access-options,.filterbar){-webkit-overflow-scrolling:touch}
 body.pipio-pro :is(.modal,.pipio-pay-card,.p64-card,.p64-panel){
  max-height:calc(100dvh - max(16px,env(safe-area-inset-top,0px)) - max(16px,env(safe-area-inset-bottom,0px)));
  border-radius:20px;
 }
 body.pipio-pro .modal{padding:18px}
 body.pipio-pro .toast{left:14px;right:14px;bottom:calc(78px + env(safe-area-inset-bottom,0px));width:auto}
}
@media(max-width:380px){
 body.pipio-pro .p481-access-pill{font-size:12px;padding-inline:11px}
 body.pipio-pro .pipio-category-pill{font-size:12px;padding-inline:12px}
 body.pipio-pro .mobilebar .mobnav{font-size:10px}
}
@media(orientation:landscape) and (max-height:540px){
 body.pipio-pro :is(.modal,.pipio-pay-card,.p64-card,.p64-panel){max-height:calc(100dvh - 12px)}
 body.pipio-pro .modal-backdrop{padding-block:6px}
 body.pipio-pro .loading-cover{min-height:260px}
}
/* Keyboard remains usable on narrow mobile screens; never reposition active RTC media. */
@media(max-width:749px){
 body.pipio-pro :is(.modal,.pipio-pay-card,.p64-card,.p64-panel){scroll-padding-bottom:calc(12px + var(--pp-keyboard-offset,0px))}
}
/* 8. Reduced motion/accessibility. Safe on lower-end phones and PWA. */
@media(prefers-reduced-motion:reduce){
 body.pipio-pro :is(.pipio-catalog-card,.pp-skeleton,.pipio-skeleton){animation:none!important}
 body.pipio-pro .loading-cover::before{animation:none!important}
 body.pipio-pro *,body.pipio-pro *::before,body.pipio-pro *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@keyframes pp-g1-spin{to{transform:rotate(360deg)}}
@keyframes pp-g1-shimmer{to{background-position-x:-210%}}
@keyframes pp-g1-rise{from{opacity:.35;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pp-g1-sheet-in{from{opacity:.8;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}