/* AUTO-GENERATED by scripts/build-shell-css.sh — do not edit by hand */
/* sources: base.css + header.css + footer.css + eightPop.css */

/* ===== base.css ===== */
/* Basic reset: keep layout deterministic */
html,
body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: #0A0A0A;
  font-family: PingFang SC, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
}

img {
  display: block;
}

/* 去掉浏览器默认输入框 focus 光圈 / outline；组件可自行保留边框高亮 */
input,
textarea,
select {
  outline: none;
  outline-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  outline: none;
  outline-color: transparent;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

html {
  scrollbar-width: thin;
  scrollbar-color: #3A3A3A #0A0A0A;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #0A0A0A;
}

::-webkit-scrollbar-thumb {
  background: #3A3A3A;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4A4A4A;
}

/* 语义标题：避免浏览器默认 h1–h3 margin 影响现有布局 */
h1,
h2,
h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* 仅供爬虫/读屏的语义内容，不影响视觉布局 */
.seo-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared breadcrumb for every site page, including account pages. */
.site-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:#999;font-size:14px;line-height:20px;min-width:0}
.site-breadcrumb a{color:inherit;text-decoration:none}
.site-breadcrumb a:hover{color:#fff}
.site-breadcrumb [aria-current]{color:#ff5000;overflow-wrap:anywhere}
@media(max-width:767px){.site-breadcrumb{font-size:12px}}

/* One PC breadcrumb size across both shared and legacy page templates. */
@media (min-width: 768px) {
  html body nav[aria-label="面包屑"][class],
  html body nav[aria-label="面包屑"][class] :is(a, span) {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ===== header.css ===== */
.site-header {
    position: sticky;
    top: 0;
    align-self: stretch;
    width: 100%;
    height: 72px;
    background: #181818;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 100;
    box-sizing: border-box;
}

.header-inner {
    width: 1554px;
    min-width: 0;
    max-width: calc(100% - 32px);
    height: 72px;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    display: flex;
    box-sizing: border-box;
}

.brand-lockup {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo {
    width: 133px;
    height: auto;
    display: block;
}

.brand-title {
    color: white;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.brand-subtitle-en {
    color: #A69CB8;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 18px;
    word-wrap: break-word;
}

.header-nav {
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
    display: flex;
    flex-shrink: 0;
}

.nav-link-active {
    color: #FADC44;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word;
    text-decoration: none;
}

.nav-link {
    color: #F5F5F5;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word;
    text-decoration: none;
}

.nav-link:hover {
    color: #FADC44;
}

.header-gap {
    width: 24px;
    height: 9px;
    position: relative;
    flex-shrink: 0;
}

.header-search {
    flex: 1 1 0;
    min-width: 160px;
    max-width: 462px;
    height: 40px;
    padding-left: 14px;
    padding-right: 14px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex;
    margin-left: auto;
}

.search-icon-wrap {
    width: 15px;
    height: 15px;
    position: relative;
    overflow: hidden;
    display: block;
    object-fit: contain;
}

.search-icon-wrap--h5 {
    display: none;
}

.search-input {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    outline-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    color: #F5F5F5;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
}

.search-input:focus,
.search-input:focus-visible {
    border: none;
    outline: none;
    outline-color: transparent;
    box-shadow: none;
}

.search-input::placeholder {
    color: #A3A3A3;
}

.header-app-icon {
    width: auto;
    height: 31px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.header-app-icon img {
    width: auto;
    height: 31px;
    display: block;
}

/*.header-app-icon[hidden],
.header-separator[hidden] {
    display: none !important;
}*/

.header-separator {
    width: 1px;
    height: 12px;
    background: white;
}

.header-account {
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    display: flex;
    text-decoration: none;
    color: inherit;
}

.account-avatar {
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 1249px;
    background: rgba(255, 255, 255, 0.05);
}

.account-avatar-ring {
    width: 40px;
    height: 40px;
    left: 0px;
    top: 0px;
    position: absolute;
    object-fit: cover;
    display: none;
    border-radius: 9999px;
}

.account-avatar-body {
    width: 20px;
    height: 9px;
    left: 10px;
    top: 21px;
    position: absolute;
    background: #FADC44;
    border-radius: 9999px;
}

.account-avatar-head {
    width: 10px;
    height: 11px;
    left: 15px;
    top: 9px;
    position: absolute;
    background: #FADC44;
    border-radius: 7.50px 1.25px 7.50px 7.50px;
}

.account-avatar-photo {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.account-label {
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #FADC44;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    word-wrap: break-word;
}

.account-label--logged {
    color: white;
}

@media (max-width: 767px) {
    .site-header {
        height: 48px;
        background: #181818;
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0 16px;
        overflow: hidden;
    }

    .header-inner {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        height: 48px;
        justify-content: flex-start;
        align-items: center;
        gap: 12px;
    }

    .brand-lockup {
        position: static;
        left: auto;
        transform: none;
        flex-shrink: 0;
    }

    .brand-logo {
        width: auto;
        height: 32px;
        max-width: 110px;
        object-fit: contain;
        object-position: left center;
    }

    .header-nav,
    .header-gap,
    .header-app-icon,
    .header-separator,
    .header-account {
        display: none;
    }

    .header-search {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        height: auto;
        padding: 6px 16px;
        border-radius: 999px;
        gap: 8px;
    }

    .search-icon-wrap--pc {
        display: none;
    }

    .search-icon-wrap--h5 {
        display: block;
        order: 2;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    .search-input {
        order: 1;
        font-size: 12px;
        line-height: 18px;
        height: auto;
        color: white;
    }

    .search-input::placeholder {
        color: rgba(255, 255, 255, 0.60);
    }
}


/* ===== footer.css ===== */
/* Shared footer: Figma PC 45098:189107 / H5 44979:231973. */
.footer-box { width:100%; background:#282828; border-top:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.55); box-sizing:border-box; }
.footer-outer { width:1520px; max-width:calc(100% - 64px); margin:0 auto; padding:36px 20px; box-sizing:border-box; }
.footer-box a { color:inherit; text-decoration:none; }
.footer-box a:hover { color:#ff4b02; }
.footer-box :is(a,button):focus-visible { outline:2px solid #ff4b02; outline-offset:4px; }
.footer-main { display:flex; align-items:flex-start; justify-content:space-between; gap:40px; }
.footer-heading { margin:0; color:#fff; font-size:18px; font-weight:600; line-height:24px; }
.footer-community { display:flex; flex-direction:column; gap:16px; min-width:0; max-width:330px; }
.footer-socials { display:flex; gap:24px; }
.footer-social { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:16px; line-height:22px; white-space:nowrap; }
.footer-social-circle { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.08); }
.footer-social-circle img { width:28px; height:28px; }
.footer-columns { display:flex; align-items:flex-start; gap:48px; min-width:0; }
.footer-column,.footer-downloads { display:flex; flex-direction:column; gap:18px; font-size:16px; line-height:22px; }
.footer-column { min-width:72px; }
.footer-column-primary,.footer-column-overflow { display:flex; flex-direction:column; gap:18px; }
.footer-column--split { display:grid; grid-template-columns:repeat(2, max-content); gap:18px 24px; }
.footer-column--split > .footer-heading { grid-column:1 / -1; text-align:center; }
.footer-official { max-width:330px; }
.footer-addresses { display:flex; flex-direction:column; gap:18px; overflow-wrap:anywhere; }
.footer-addresses--compact { gap:0; font-size:14px; line-height:20px; }
.footer-downloads { flex-shrink:0; }
.footer-download-platforms { display:flex; gap:36px; }
.footer-download-platform { display:flex; flex-direction:column; align-items:center; gap:8px; }
.footer-qr { width:80px; height:80px; padding:6px; border-radius:4px; display:flex; align-items:center; justify-content:center; background:#fff; color:#777!important; font-size:12px; text-align:center; }
.footer-qr [data-footer-qr] { display:block; width:68px; height:68px; }
.footer-qr img,.footer-qr canvas { display:block; width:68px; height:68px; image-rendering:pixelated; }
.footer-qr--empty { background:rgba(255,255,255,.05); color:rgba(255,255,255,.4)!important; }
.footer-copy { margin-top:24px; padding-top:24px; border-top:1px solid rgba(255,255,255,.05); text-align:center; font-size:14px; line-height:20px; }
.footer-mobile,.footer-label-mobile,.h5-tabbar { display:none; }
@media(min-width:768px) and (max-width:860px) {
 .footer-main { flex-wrap:wrap; }
 .footer-columns { gap:32px; }
}
@media(max-width:767px) {
 .footer-box { border:0; background:#0f0f0f; padding:0 16px 18px; }
 .footer-outer { width:100%; max-width:none; padding:0; }
 .footer-pc,.footer-label-pc { display:none; }
 .footer-label-mobile { display:inline; }
 .footer-mobile { display:flex; flex-direction:column; align-items:center; gap:18px; padding:18px 16px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(255,255,255,.05); }
 .footer-brand-lockup { display:block; flex-shrink:0; }
 .footer-logo { display:block; width:125px; height:38.5px; object-fit:contain; }
 .footer-mobile-legal { display:flex; flex-direction:column; gap:10px; width:100%; font-size:12px; line-height:18px; }
 .footer-mobile-legal p { margin:0; }
 .footer-mobile-copy { text-align:center; }
 .footer-links { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; width:100%; font-size:12px; line-height:18px; }
 .footer-links a { display:flex; align-items:center; white-space:nowrap; }
 .footer-link-divider { width:1px; height:12px; background:rgba(255,255,255,.1); }
 .footer-mobile-divider { width:calc(100% - 8px); height:1px; background:rgba(255,255,255,.1); }
 .footer-icons { display:flex; align-items:center; gap:16px; width:100%; }
 .footer-icons a,.footer-icons img { display:block; width:38px; height:38px; flex-shrink:0; }
}

/* Friend links share the configured moreSites list, Figma 45098:188315. */
.footer-friends { width:100%; background:transparent; }
.footer-friends-inner { width:1740px; max-width:100%; margin:0 auto; padding:32px 20px; box-sizing:border-box; }
.footer-friends h2 { margin:0 0 18px; color:rgba(255,255,255,.9); font-size:24px; line-height:32px; font-weight:600; }
.footer-friends-links { display:flex; flex-wrap:wrap; gap:18px 12px; }
.footer-friends-links a { display:block; flex:0 0 auto; width:auto; max-width:100%; padding:9px 24px; box-sizing:border-box; border-radius:6px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.55); text-align:center; text-decoration:none; font-size:16px; line-height:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.footer-friends-links a:hover { color:#ff4b02; background:rgba(255,255,255,.08); }
.footer-friends-links a:focus-visible { outline:2px solid #ff4b02; outline-offset:3px; }
@media(max-width:860px) {
 .footer-friends-inner { padding:28px 32px; }
}
@media(max-width:767px) {
 .footer-friends { background:#0f0f0f; }
 .footer-friends-inner { padding:24px 16px; }
 .footer-friends h2 { margin-bottom:12px; font-size:16px; line-height:22px; }
 .footer-friends-links { gap:10px 8px; }
 .footer-friends-links a { padding:11px 16px; font-size:12px; line-height:18px; }
}

/* ===== eightPop.css ===== */
/* Shared entry dialogs: Figma 40001:93528 and 40071:449452. */
.eight-pop-mask{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.76);padding:16px;box-sizing:border-box}
.eight-pop-mask.is-open{display:flex}
.eight-pop-mask[hidden],.entry-dialog[hidden]{display:none!important}
.entry-dialog{display:flex;flex-direction:column;align-items:center;gap:24px;width:440px;max-width:100%;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.entry-dialog:focus{outline:none}
.eight-pop-card{flex-shrink:0;display:flex;flex-direction:column;align-items:center;width:100%;padding:36px;gap:36px;box-sizing:border-box;border:1px solid rgba(255,255,255,.2);border-radius:40px;background:#0d0d0d;color:rgba(255,255,255,.9)}
.eight-pop-icon{display:block;width:78px;height:78px;flex-shrink:0}
.eight-pop-copy{display:flex;flex-direction:column;gap:24px;width:100%}
.eight-pop-title{margin:0;text-align:center;font-size:24px;line-height:32px;font-weight:500}
.eight-pop-desc{margin:0;text-align:justify;font-size:18px;line-height:24px;font-weight:400;overflow-wrap:anywhere}
.eight-pop-actions{display:flex;flex-direction:column;gap:18px;width:100%}
.eight-pop-btn{width:100%;min-height:46px;padding:12px 16px;border:0;border-radius:12px;font-family:inherit;font-size:16px;line-height:22px;font-weight:600;color:#fff;cursor:pointer}
.eight-pop-btn--confirm{background:#ff4b02}
.eight-pop-btn--exit{background:#1a1a1a}
.entry-dialog-close{display:flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border:0;background:transparent;padding:0;cursor:pointer}
.entry-dialog-close img{display:block;width:36px;height:36px}
.entry-dialog :is(button,a):focus-visible{outline:2px solid #ff4b02;outline-offset:3px}
.entry-ad-dialog{width:min(400px,calc((100vh - 108px)*.66445));width:min(400px,calc((100dvh - 108px)*.66445));overflow:visible}
.entry-ad-art{display:block;flex-shrink:0;width:100%;aspect-ratio:400/602;border-radius:40px;overflow:hidden;background:#0d0d0d}
.entry-ad-art img{display:block;width:100%;height:100%;object-fit: fill}
@media(max-width:480px){
 .eight-pop-card{padding:28px 24px;gap:28px;border-radius:32px}
 .eight-pop-copy{gap:20px}
 .eight-pop-desc{font-size:16px;line-height:24px}
 .entry-ad-art{border-radius:32px}
}
@media(max-height:680px){
 .eight-pop-card{padding:20px 24px;gap:20px}
 .eight-pop-copy{gap:16px}
 .eight-pop-icon{width:64px;height:64px}
 .eight-pop-desc{font-size:16px;line-height:22px}
 .eight-pop-actions{gap:12px}
 .entry-dialog{gap:16px}
}

/* 本地占位图保持 cover；实际广告图片使用 fill。 */
.entry-ad-art img[src*="/static/images/placeholder-"] { object-fit: cover; }

/* The mobile card keeps its original layout and copy. */
.eight-pop-age-mark,.eight-pop-content{display:contents}
.eight-pop-desktop{display:none}
@media(min-width:861px){
 .entry-dialog--age{width:800px}
 .eight-pop-mobile{display:none}
 .eight-pop-desktop{display:inline}
 .eight-pop-card{flex-direction:row;align-items:stretch;height:360px;max-height:calc(100dvh - 108px);padding:0;gap:0;border:0;border-radius:20px;overflow:hidden}
 .eight-pop-age-mark{display:flex;align-items:center;justify-content:center;flex:0 0 224px;background:#1a1a1a}
 .eight-pop-icon{width:96px;height:96px}
 .eight-pop-content{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:center;gap:24px;padding:40px;overflow-y:auto}
 .eight-pop-copy{gap:16px}
 .eight-pop-title{text-align:left;font-weight:600;color:#fff}
 .eight-pop-desc{text-align:left;font-size:16px;line-height:22px;color:rgba(255,255,255,.55)}
 .eight-pop-actions{flex-direction:row;gap:24px;align-items:center}
 .eight-pop-btn{flex-shrink:0;min-height:48px;height:48px}
 .eight-pop-btn--confirm{width:240px;border-radius:8px}
 .eight-pop-btn--exit{width:96px;padding-inline:0;background:transparent;font-weight:400;color:rgba(255,255,255,.55)}
}
@media(min-width:861px) and (max-height:500px){
 .eight-pop-content{justify-content:flex-start}
}

/* Figma 45143:19741. The grid grows with available ads; only its content scrolls. */
#eightPop .entry-grid-dialog{width:400px;max-width:100%;overflow:visible;gap:24px}
#eightPop .entry-grid-content{width:100%;min-height:0;max-height:602px;max-height:min(602px,calc(100dvh - 92px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:0}
#eightPop .entry-grid-content .drama-icon-ads{--entry-grid-gap:26px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:20px var(--entry-grid-gap);width:100%;}
#eightPop .entry-grid-content .home-ad{flex:0 0 calc((100% - var(--entry-grid-gap) - var(--entry-grid-gap) - var(--entry-grid-gap))/4);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;width:100%;color:rgba(255,255,255,.9);font-size:14px;line-height:20px;text-decoration:none}
#eightPop .entry-grid-content .home-ad img{display:block;width:100%;height:auto;aspect-ratio:1;max-width:80px;box-sizing:border-box;border:1px solid rgba(255,255,255,.3);border-radius:12px;object-fit:fill}
#eightPop .entry-grid-content .home-ad span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
@media(max-width:431px){#eightPop .entry-grid-content .drama-icon-ads{--entry-grid-gap:clamp(12px,6vw,26px)}}