/*
Theme Name: Accesex Pre Theme
Version: 4.8
*/
:root{--bg:#050507;--pink:#ff2fa8;--pink2:#ff76c8;--muted:#b9b3c5;--bottom-nav-h:64px}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;min-height:100%;background:#050507;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{background:#050507}
a{color:inherit;text-decoration:none}
.pre-app{min-height:100dvh;padding:0 18px calc(var(--bottom-nav-h) + 24px)}
.pre-topbar{position:fixed;top:10px;left:10px;z-index:70;margin:0;padding:0;background:transparent!important;backdrop-filter:none!important}
.pre-brand{display:block;transform:none!important;text-align:left}
.pre-logo-text{line-height:.78;font-style:italic;font-weight:900;letter-spacing:-.05em;text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 18px rgba(255,47,168,.55)}
.pre-logo-text .pre{display:block;color:#ffd1ec;font-size:1.25rem}
.pre-logo-text .name{display:block;color:var(--pink);font-size:1.72rem;margin-top:-2px}
.pre-logo-text .dot{color:#ff9ad8}.pre-logo-text .spark{color:#fff}
.pre-url{display:none!important}
.pre-topnav{display:none!important}
.pre-shell{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:240px minmax(380px,520px) 240px;gap:20px;padding-top:16px}
.pre-side{padding-top:86px;display:flex;flex-direction:column;gap:14px}
.pre-glass{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:22px;padding:18px;backdrop-filter:blur(16px)}
.pre-glass h2{margin:0 0 10px;font-size:1.15rem}.pre-glass p{margin:0;color:var(--muted);line-height:1.45}
.pre-phone-frame{border-radius:38px;padding:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 80px rgba(0,0,0,.55)}
.pre-feed-card{position:relative;overflow:hidden;border-radius:30px;min-height:720px;background:#09090d;border:1px solid rgba(255,255,255,.08)}
.pre-video-stage{min-height:610px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);background:#050507}
.pre-card-overlay{position:absolute;left:0;right:0;bottom:0;padding:20px 18px}
.pre-creator-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.pre-follow{border:0;border-radius:999px;padding:12px 18px;background:linear-gradient(135deg,var(--pink),var(--pink2));color:#fff;font-weight:800}
.pre-caption{color:#ddd;max-width:74%;line-height:1.45;margin-bottom:16px}.pre-actions{display:flex;gap:16px}
.pre-rail-actions{position:absolute;right:14px;bottom:130px;display:flex;flex-direction:column;gap:14px}.pre-round-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
.pre-bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:90;width:min(560px,calc(100vw - 26px));height:var(--bottom-nav-h);display:flex;justify-content:space-around;align-items:center;border-radius:26px;background:rgba(8,8,12,.88);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px)}
.pre-bottom-nav a{font-size:.85rem;font-weight:700}.pre-bottom-nav a.active{color:#ff76c8}
.pre-page-wrap{min-height:100dvh;padding:70px 18px calc(var(--bottom-nav-h) + 40px)}.pre-page-card{width:min(860px,100%);margin:0 auto;padding:34px;background:rgba(18,18,24,.78);border:1px solid rgba(255,255,255,.10);border-radius:30px}
.acx-pre-dynamic-feed .pre-phone-frame{max-width:520px;margin-left:auto;margin-right:auto;margin-bottom:22px}
@media(max-width:980px){.pre-shell{display:block;max-width:520px}.pre-side{display:none}.pre-phone-frame{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.pre-feed-card{border-radius:28px;min-height:calc(100dvh - 94px)}.pre-video-stage{min-height:calc(100dvh - 94px)}.pre-bottom-nav{bottom:8px}}
@media(max-width:560px){
  html,body{overflow-x:hidden;overflow-y:auto!important;min-height:100%}
  body{overscroll-behavior-y:auto}
  .pre-app{height:auto!important;min-height:100dvh;overflow:visible!important;padding:0 8px calc(var(--bottom-nav-h) + 10px)!important}
  .pre-topbar{top:10px!important;left:12px!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;position:fixed!important}
  .pre-logo-text .pre{font-size:1.12rem}.pre-logo-text .name{font-size:1.55rem}
  .pre-shell{height:auto!important;max-width:none;margin:0 auto;padding-top:0!important}
  .pre-page-wrap{padding:0 8px calc(var(--bottom-nav-h) + 18px)!important}
  .pre-page-card{padding:0 0 64px!important;border:0!important;background:transparent!important;border-radius:0!important;min-height:auto!important}
  .pre-page-card h1{display:none!important}
  .pre-phone-frame{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;margin-bottom:0!important}
  .pre-feed-card{height:auto!important;min-height:auto!important;border-radius:0!important;border:0!important;margin:0 auto!important;overflow:hidden}
  .pre-video-stage{height:auto!important;min-height:0!important;aspect-ratio:9/16;max-height:calc(100dvh - 70px)}
  .pre-video-stage video{width:100%!important;height:100%!important;object-fit:cover!important}
  .pre-card-overlay{padding:0 14px 18px!important;bottom:0!important}
  .pre-caption{max-width:78%;font-size:.92rem!important;margin-bottom:10px!important}
  .pre-actions{flex-wrap:wrap;gap:10px!important;font-size:.82rem!important;padding-right:52px}
  .pre-rail-actions{right:10px!important;bottom:106px!important;gap:12px!important}
  .pre-round-btn{width:38px!important;height:38px!important}
  .pre-follow{padding:10px 16px!important;font-size:.9rem!important}
  .pre-bottom-nav{width:calc(100vw - 18px)!important;height:52px!important;bottom:6px!important;border-radius:20px!important}
  .pre-bottom-nav a{font-size:.72rem!important}
}


/* ===== v2.7 mobile safe-top strip ===== */
@media(max-width:560px){
  :root{
    --pre-mobile-safe-top: 36px;
  }

  body{
    background:#050507 !important;
  }

  .pre-app{
    padding-top:var(--pre-mobile-safe-top) !important;
    background:#050507 !important;
  }

  .pre-app::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:var(--pre-mobile-safe-top);
    background:#050507;
    z-index:120;
    pointer-events:none;
  }

  .pre-topbar{
    top:calc(var(--pre-mobile-safe-top) + 8px) !important;
    left:12px !important;
    z-index:121 !important;
  }

  .acx-pre-single-feed{
    height:calc(100dvh - var(--pre-mobile-safe-top) - 62px) !important;
  }

  .acx-pre-single-feed .pre-phone-frame,
  .acx-pre-single-feed .pre-feed-card,
  .acx-pre-single-feed .pre-video-stage{
    height:100% !important;
  }

  .pre-video-stage{
    max-height:calc(100dvh - var(--pre-mobile-safe-top) - 62px) !important;
  }
}


/* ===== v2.8 tighter mobile safe-top + full-width feed ===== */
@media(max-width:560px){
  :root{
    --pre-mobile-safe-top: 22px;
  }

  .pre-app{
    padding-top:var(--pre-mobile-safe-top) !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .pre-app::before{
    height:var(--pre-mobile-safe-top) !important;
  }

  .pre-topbar{
    top:calc(var(--pre-mobile-safe-top) + 6px) !important;
    left:10px !important;
  }

  .pre-page-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .pre-page-card{
    width:100vw !important;
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .acx-pre-single-feed{
    width:100vw !important;
    max-width:none !important;
    height:calc(100dvh - var(--pre-mobile-safe-top) - 58px) !important;
  }

  .acx-pre-single-feed .pre-phone-frame,
  .acx-pre-single-feed .pre-feed-card,
  .acx-pre-single-feed .pre-video-stage{
    width:100vw !important;
    max-width:none !important;
  }

  .pre-video-stage{
    max-height:calc(100dvh - var(--pre-mobile-safe-top) - 58px) !important;
  }

  .pre-feed-card{
    border-radius:0 !important;
  }

  .pre-video-stage video{
    width:100vw !important;
    max-width:none !important;
  }

  .pre-bottom-nav{
    width:calc(100vw - 18px) !important;
  }
}


/* ===== v2.9 regular page spacing fix ===== */
@media(max-width:560px){
  body:not(.home) .pre-page-wrap{
    padding-top:76px !important;
  }

  body:not(.home) .pre-page-card{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  body:not(.home) .pre-topbar{
    top:28px !important;
  }

  body:not(.home) .pre-logo-text .pre{
    font-size:1rem !important;
  }

  body:not(.home) .pre-logo-text .name{
    font-size:1.38rem !important;
  }
}


/* ===== v3.0 remove WordPress admin bar from app front-end ===== */
html{
  margin-top:0 !important;
}

#wpadminbar{
  display:none !important;
}


/* ===== v3.2 responsive display experiment =====
   Goal:
   - keep app chrome stable
   - vertical media fills the feed
   - wide/square media is centered, not stretched
   - desktop/laptop shows a centered app frame
   - landscape phone gets a wider video-player style frame
*/

/* Desktop/laptop: do not let the app become a giant stretched billboard */
@media (min-width:981px){
  .acx-pre-single-feed{
    width:min(520px, 100%) !important;
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .acx-pre-single-feed .pre-phone-frame{
    max-width:520px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .acx-pre-single-feed .pre-feed-card{
    height:min(720px, calc(100dvh - 116px)) !important;
    min-height:0 !important;
  }

  .acx-pre-single-feed .pre-video-stage{
    height:100% !important;
    min-height:0 !important;
  }
}

/* Default media behavior: vertical-native fills the frame */
.acx-pre-single-feed .pre-video-stage{
  position:relative !important;
  overflow:hidden !important;
  background:#050507 !important;
}

.acx-pre-single-feed .pre-video-stage video,
.acx-pre-single-feed .pre-video-stage img[data-acx-image]{
  width:100% !important;
  height:100% !important;
  object-position:center center !important;
  background:#000 !important;
}

/* Wide and square media should be contained, centered, and not distorted */
.acx-pre-feed-item.acx-media-wide .pre-video-stage video,
.acx-pre-feed-item.acx-media-wide .pre-video-stage img[data-acx-image],
.acx-pre-feed-item.acx-media-square .pre-video-stage video,
.acx-pre-feed-item.acx-media-square .pre-video-stage img[data-acx-image]{
  object-fit:contain !important;
}

/* Vertical media fills like the current app behavior */
.acx-pre-feed-item.acx-media-vertical .pre-video-stage video,
.acx-pre-feed-item.acx-media-vertical .pre-video-stage img[data-acx-image]{
  object-fit:cover !important;
}

/* Phone landscape: let media frame breathe wider while keeping app controls stable */
@media (orientation:landscape) and (max-height:560px){
  :root{
    --pre-mobile-safe-top:0px;
  }

  .pre-app{
    padding-top:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:0 !important;
  }

  .pre-app::before{
    display:none !important;
  }

  .pre-topbar{
    top:8px !important;
    left:10px !important;
    transform:scale(.86);
    transform-origin:top left;
  }

  .pre-page-wrap{
    padding:0 !important;
  }

  .pre-page-card{
    width:100vw !important;
    max-width:none !important;
    padding:0 !important;
  }

  .acx-pre-single-feed{
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    margin:0 !important;
  }

  .acx-pre-single-feed .pre-phone-frame{
    width:100vw !important;
    max-width:none !important;
    height:100dvh !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  .acx-pre-single-feed .pre-feed-card{
    width:100vw !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:0 !important;
    border:0 !important;
  }

  .acx-pre-single-feed .pre-video-stage{
    width:100vw !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:none !important;
    aspect-ratio:auto !important;
  }

  .pre-bottom-nav{
    width:min(520px, calc(100vw - 28px)) !important;
    height:46px !important;
    bottom:6px !important;
    border-radius:18px !important;
  }

  .pre-bottom-nav a{
    font-size:.7rem !important;
  }

  .pre-card-overlay{
    bottom:44px !important;
    padding:0 14px 8px !important;
  }
}

/* Desktop regular pages should still fit nicely */
@media (min-width:981px){
  .pre-page-card{
    max-width:900px !important;
  }

  .pre-page-card .acx-pre-single-feed{
    max-width:520px !important;
  }
}


/* ===== v3.3 desktop/laptop frame polish + fullscreen button ===== */

/* Desktop/laptop feed should feel like a centered app, not a broken webpage */
@media (min-width: 821px){
  body.home .pre-page-wrap,
  body.page .pre-page-wrap{
    min-height: calc(100dvh - 32px) !important;
  }

  .pre-page-wrap{
    display:flex !important;
    justify-content:center !important;
    align-items:flex-start !important;
    padding:28px 20px 90px !important;
  }

  .pre-page-card{
    width:min(560px, 100%) !important;
    max-width:560px !important;
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pre-page-card > h1:first-child{
    display:none !important;
  }

  .acx-pre-single-feed{
    width:min(520px, 100%) !important;
    max-width:520px !important;
    margin:0 auto !important;
  }

  .acx-pre-single-feed .pre-phone-frame{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    padding:0 !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }

  .acx-pre-single-feed .pre-feed-card{
    width:100% !important;
    height:min(760px, calc(100dvh - 132px)) !important;
    min-height:560px !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }

  .acx-pre-single-feed .pre-video-stage{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    background:#000 !important;
  }

  .pre-bottom-nav{
    left:50% !important;
    transform:translateX(-50%) !important;
    width:min(520px, calc(100vw - 42px)) !important;
    max-width:520px !important;
  }
}

/* Bigger laptops/desktops can show a slightly taller app frame */
@media (min-width: 1100px) and (min-height: 760px){
  .acx-pre-single-feed .pre-feed-card{
    height:min(820px, calc(100dvh - 132px)) !important;
  }
}

/* Fullscreen media button */
.acx-pre-fullscreen-btn{
  position:absolute;
  right:14px;
  top:108px;
  z-index:76;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:1.35rem;
  font-weight:900;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}

.acx-pre-fullscreen-btn:hover{
  background:rgba(255,47,168,.82);
}

/* Hide duplicate fullscreen button on non-active slides */
.acx-pre-feed-item:not(.is-active) .acx-pre-fullscreen-btn{
  display:none !important;
}

/* In fullscreen, let media fill cleanly */
.pre-video-stage:fullscreen,
.pre-video-stage:-webkit-full-screen{
  background:#000 !important;
  width:100vw !important;
  height:100vh !important;
}

.pre-video-stage:fullscreen video,
.pre-video-stage:fullscreen img,
.pre-video-stage:-webkit-full-screen video,
.pre-video-stage:-webkit-full-screen img{
  width:100vw !important;
  height:100vh !important;
  object-fit:contain !important;
  background:#000 !important;
}

/* On desktop, keep wide media contained without wrecking the app chrome */
@media (min-width:821px){
  .acx-pre-feed-item.acx-media-wide .pre-video-stage video,
  .acx-pre-feed-item.acx-media-wide .pre-video-stage img[data-acx-image],
  .acx-pre-feed-item.acx-media-square .pre-video-stage video,
  .acx-pre-feed-item.acx-media-square .pre-video-stage img[data-acx-image]{
    object-fit:contain !important;
  }
}

/* Phone portrait keeps immersive behavior */
@media (max-width:820px) and (orientation:portrait){
  .acx-pre-fullscreen-btn{
    right:14px;
    top:108px;
  }
}


/* ===== v3.4 fixed desktop box + media fit + visible fullscreen ===== */

/* Desktop/laptop: fixed media box. Media fits into it, no top cropping. */
@media (min-width:821px){
  .pre-page-wrap{
    min-height:100dvh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px 20px 96px !important;
  }

  .pre-page-card{
    width:560px !important;
    max-width:calc(100vw - 40px) !important;
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .pre-page-card > h1:first-child{
    display:none !important;
  }

  .acx-pre-single-feed{
    width:560px !important;
    max-width:calc(100vw - 40px) !important;
    margin:0 auto !important;
  }

  .acx-pre-single-feed .pre-phone-frame{
    width:560px !important;
    max-width:calc(100vw - 40px) !important;
    height:760px !important;
    max-height:calc(100dvh - 120px) !important;
    margin:0 auto !important;
    padding:0 !important;
    border-radius:30px !important;
    overflow:hidden !important;
  }

  .acx-pre-single-feed .pre-feed-card{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    border-radius:30px !important;
    overflow:hidden !important;
    background:#000 !important;
  }

  .acx-pre-single-feed .pre-video-stage{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:none !important;
    background:#000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Desktop rule: all media fits inside the fixed box. No cropping. */
  .acx-pre-single-feed .pre-video-stage video,
  .acx-pre-single-feed .pre-video-stage img[data-acx-image]{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#000 !important;
  }

  .pre-bottom-nav{
    left:50% !important;
    transform:translateX(-50%) !important;
    width:min(560px, calc(100vw - 40px)) !important;
    max-width:560px !important;
    bottom:18px !important;
  }
}

/* Phone portrait keeps immersive vertical feel, except wide media still contains from v3.2 */
@media (max-width:820px) and (orientation:portrait){
  .acx-pre-feed-item.acx-media-vertical .pre-video-stage video,
  .acx-pre-feed-item.acx-media-vertical .pre-video-stage img[data-acx-image]{
    object-fit:cover !important;
  }

  .acx-pre-feed-item.acx-media-wide .pre-video-stage video,
  .acx-pre-feed-item.acx-media-wide .pre-video-stage img[data-acx-image],
  .acx-pre-feed-item.acx-media-square .pre-video-stage video,
  .acx-pre-feed-item.acx-media-square .pre-video-stage img[data-acx-image]{
    object-fit:contain !important;
  }
}

/* Make fullscreen control obvious and not buried in the rail */
.acx-pre-fullscreen-btn,
.acx-pre-fullscreen-fixed-btn{
  position:absolute !important;
  left:14px !important;
  top:72px !important;
  right:auto !important;
  z-index:120 !important;
  min-width:46px !important;
  height:46px !important;
  padding:0 13px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.78) !important;
  color:#fff !important;
  font-size:1.15rem !important;
  font-weight:950 !important;
  cursor:pointer !important;
  backdrop-filter:blur(10px) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.38) !important;
}

.acx-pre-fullscreen-btn:hover,
.acx-pre-fullscreen-fixed-btn:hover{
  background:rgba(255,47,168,.86) !important;
}

.acx-pre-feed-item:not(.is-active) .acx-pre-fullscreen-btn,
.acx-pre-feed-item:not(.is-active) .acx-pre-fullscreen-fixed-btn{
  display:none !important;
}

/* Browser fullscreen mode */
.pre-video-stage:fullscreen,
.pre-feed-card:fullscreen,
video:fullscreen,
.pre-video-stage:-webkit-full-screen,
.pre-feed-card:-webkit-full-screen,
video:-webkit-full-screen{
  width:100vw !important;
  height:100vh !important;
  background:#000 !important;
}

.pre-video-stage:fullscreen video,
.pre-video-stage:fullscreen img,
.pre-feed-card:fullscreen video,
.pre-feed-card:fullscreen img,
.pre-video-stage:-webkit-full-screen video,
.pre-video-stage:-webkit-full-screen img,
.pre-feed-card:-webkit-full-screen video,
.pre-feed-card:-webkit-full-screen img{
  width:100vw !important;
  height:100vh !important;
  object-fit:contain !important;
  background:#000 !important;
}


/* ===== v3.6 custom viewer mode =====
   Uses a custom overlay instead of browser fullscreen,
   so Pre controls can stay available.
*/

.acx-viewer-overlay{
  position:fixed;
  inset:0;
  z-index:2147482500;
  background:#000;
  color:#fff;
  display:none;
  overflow:hidden;
}

.acx-viewer-overlay.is-open{
  display:block;
}

body.acx-viewer-open{
  overflow:hidden !important;
}

.acx-viewer-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}

.acx-viewer-stage video,
.acx-viewer-stage img{
  width:100vw;
  height:100vh;
  object-fit:contain;
  background:#000;
  display:block;
}

.acx-viewer-close,
.acx-viewer-sound,
.acx-viewer-play,
.acx-viewer-prev,
.acx-viewer-next{
  position:absolute;
  z-index:2147482520;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.64);
  color:#fff;
  border-radius:999px;
  font-weight:950;
  cursor:pointer;
  backdrop-filter:blur(10px);
  box-shadow:0 12px 30px rgba(0,0,0,.34);
}

.acx-viewer-close{
  left:14px;
  top:calc(12px + env(safe-area-inset-top));
  width:46px;
  height:46px;
  font-size:1.6rem;
  line-height:1;
}

.acx-viewer-sound{
  right:14px;
  top:calc(12px + env(safe-area-inset-top));
  min-width:86px;
  height:42px;
  padding:0 14px;
  font-size:.88rem;
}

.acx-viewer-play{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:72px;
  height:72px;
  font-size:1.6rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.acx-viewer-overlay.show-play .acx-viewer-play{
  opacity:1;
}

.acx-viewer-prev,
.acx-viewer-next{
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:68px;
  font-size:2rem;
  border-radius:18px;
}

.acx-viewer-prev{
  left:14px;
}

.acx-viewer-next{
  right:82px;
}

.acx-viewer-meta{
  position:absolute;
  left:16px;
  right:94px;
  bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:2147482510;
  text-shadow:0 2px 18px rgba(0,0,0,.9);
  pointer-events:none;
}

.acx-viewer-meta strong{
  display:block;
  font-size:1rem;
  margin-bottom:5px;
}

.acx-viewer-caption{
  font-size:.95rem;
  color:rgba(255,255,255,.92);
  font-weight:750;
}

.acx-viewer-rail{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:2147482515;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.acx-viewer-rail .acx-pre-rail{
  position:static !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  align-items:center !important;
}

.acx-viewer-rail .acx-rail-btn,
.acx-viewer-rail .acx-rail-form button{
  pointer-events:auto !important;
}

.acx-viewer-hint{
  position:absolute;
  left:50%;
  bottom:calc(10px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:2147482525;
  color:rgba(255,255,255,.55);
  font-size:.76rem;
  pointer-events:none;
}

@media(max-width:820px){
  .acx-viewer-prev{
    left:10px;
  }

  .acx-viewer-next{
    right:74px;
  }

  .acx-viewer-prev,
  .acx-viewer-next{
    width:42px;
    height:58px;
    font-size:1.6rem;
  }

  .acx-viewer-rail{
    right:10px;
    gap:10px;
  }

  .acx-viewer-meta{
    left:14px;
    right:84px;
    bottom:calc(20px + env(safe-area-inset-bottom));
  }
}

/* repurpose v3.4 fullscreen button as custom viewer launcher */
.acx-pre-fullscreen-fixed-btn{
  z-index:130 !important;
}


/* ===== v3.7 viewer nav + persistent sound ===== */

/* Desktop viewer left-side nav */
.acx-viewer-side-nav{
  position:absolute;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:2147482525;
  display:none;
  flex-direction:column;
  gap:12px;
}

.acx-viewer-side-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  min-height:48px;
  padding:0 18px;
  border-radius:18px;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.34);
}

.acx-viewer-side-nav a:hover{
  background:rgba(255,47,168,.82);
}

@media(min-width:981px){
  .acx-viewer-side-nav{
    display:flex;
  }

  .acx-viewer-prev{
    left:154px !important;
  }
}

/* Mobile keeps bottom nav */
@media(max-width:980px){
  .acx-viewer-side-nav{
    display:none !important;
  }
}

/* Slightly cleaner fullscreen overlay spacing */
.acx-viewer-overlay .acx-viewer-meta{
  max-width:min(720px, calc(100vw - 130px));
}


/* ===== v4.3 server-rendered About page support ===== */

@media (min-width:821px){
  body.acx-about-server-rendered .pre-page-wrap{
    display:block !important;
    width:100% !important;
    min-height:auto !important;
    padding:70px 18px calc(var(--bottom-nav-h) + 40px) !important;
  }

  body.acx-about-server-rendered .pre-page-card{
    width:min(860px, 100%) !important;
    max-width:860px !important;
    margin:0 auto !important;
    padding:34px !important;
    background:rgba(18,18,24,.78) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:30px !important;
  }

  body.acx-about-server-rendered .acx-pre-about-info-card{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* ===== v4.6 desktop full-viewer video dragline/scrubber ===== */
.acx-viewer-scrubber{
  display:none;
}

@media(min-width:981px){
  .acx-viewer-scrubber{
    position:absolute;
    left:190px;
    right:112px;
    bottom:16px;
    z-index:2147482530;
    height:22px;
    display:block;
    cursor:pointer;
    touch-action:none;
  }

  .acx-viewer-scrubber::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:9px;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,.24);
    box-shadow:0 2px 14px rgba(0,0,0,.55);
  }

  .acx-viewer-scrubber-fill{
    position:absolute;
    left:0;
    top:9px;
    width:0%;
    height:4px;
    border-radius:999px;
    background:linear-gradient(90deg,#ff2fa8,#ff76c8);
    box-shadow:0 0 18px rgba(255,47,168,.55);
  }

  .acx-viewer-scrubber-knob{
    position:absolute;
    left:0%;
    top:50%;
    width:14px;
    height:14px;
    transform:translate(-50%,-50%);
    border-radius:999px;
    background:#fff;
    border:2px solid #ff2fa8;
    box-shadow:0 2px 18px rgba(0,0,0,.65),0 0 16px rgba(255,47,168,.65);
    opacity:.95;
  }

  .acx-viewer-scrubber:not(.is-ready){
    opacity:.35;
  }

  .acx-viewer-hint{
    bottom:44px;
  }

  .acx-viewer-meta{
    bottom:52px;
  }
}


/* ===== v4.8 mobile protection scope fix ===== */
@media (max-width: 768px){

  .acx-pre-fullscreen-btn,
  .acx-pre-fullscreen-fixed-btn,
  .acx-viewer-prev,
  .acx-viewer-next{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

}