/* 2026-10 改版测试版：新页头 / 新页尾 / 新登录弹窗（hv_header / hv_footer / hv_login）。
   layout_index.html 里只有 hvChrome 的页面才引入（带测试 cookie 的浏览器，所有用 layout_index 的 PC 页面）。
   内容宽度默认 1200；首页、完结、免费页的 home_v2.css 会按屏幕宽度改 --hv-w */
:root { --hv-w: 1200px; }

/* ===== 新页头（hv_header.html）：插画横幅 + 淡紫悬浮胶囊 ===== */
.hvh { position: relative; min-width: 1000px; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; text-align: left; }
.hvh *, .hvh *::before, .hvh *::after, .hvf *, .hvf *::before, .hvf *::after { box-sizing: border-box; }
.hvh a, .hvf a { text-decoration: none; }
.hvh button { font-family: inherit; cursor: pointer; }
.hvh-serif { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif; }
.hvh-hide { position: absolute; left: -9999px; }
.hvh-grow { flex: 1; }
.hvh-banner { height: 100px; background-color: #8F8CF2; background-image: url(../img/index/title/headerBackground.png); background-image: image-set(url(../img/index/title/headerBackground.webp) type("image/webp"), url(../img/index/title/headerBackground.png) type("image/png")); background-position: center top; background-repeat: no-repeat; background-size: auto 100px; }
.hvh-banner-in { width: var(--hv-w); height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.hvh a.hvh-glass, .hvh button.hvh-glass { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 15px; border: 0; border-radius: 17px; background: rgba(255, 255, 255, 0.86); color: #4B47D6; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 12px rgba(60, 50, 150, 0.18); cursor: pointer; transition: background .15s; }
.hvh a.hvh-glass:hover, .hvh button.hvh-glass:hover { background: #FFFFFF; color: #4B47D6; }
.hvh a.hvh-solid, .hvh button.hvh-solid { display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border: 0; border-radius: 17px; background: #7E7CFB; color: #FFFFFF; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75), 0 6px 14px rgba(80, 70, 200, 0.35); cursor: pointer; transition: background .15s; }
.hvh a.hvh-solid:hover, .hvh button.hvh-solid:hover { background: #6C69F2; color: #FFFFFF; }
.hvh-split { width: 1px; height: 16px; margin: 0 4px; background: rgba(255, 255, 255, 0.6); }
.hvh a.hvh-glass-ico { position: relative; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.86); color: #4B47D6; box-shadow: 0 4px 12px rgba(60, 50, 150, 0.18); }
.hvh a.hvh-glass-ico:hover { background: #FFFFFF; }
.hvh-num { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #F2485B; color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; border: 2px solid #FFFFFF; }
.hvh-user { position: relative; margin-left: 2px; }
.hvh-avatar { display: flex; align-items: center; gap: 4px; height: 92px; }
.hvh-avatar img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #FFFFFF; box-shadow: 0 4px 10px rgba(60, 50, 150, 0.3); }
/* 头像下拉：showMeun() 会把 display 改成 flex */
.hvh-menu { position: absolute; right: -8px; top: 70px; z-index: 3000; padding-top: 8px; flex-direction: column; }
.hvh-menu-in { width: 220px; padding: 8px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 16px 36px rgba(31, 29, 58, 0.18); }
.hvh-menu-in > a, .hvh-menu-sub { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; height: 36px; border-radius: 8px; font-size: 13px; color: #1F1D3A; cursor: pointer; }
.hvh-menu-in > a:hover, .hvh-menu-sub:hover { background: #F4F3FF; color: #5B57E8; }
.hvh a.hvh-menu-me { height: auto; justify-content: flex-start; gap: 10px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid #F0EFF6; border-radius: 8px 8px 0 0; }
.hvh-menu-me img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.hvh-menu-me span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hvh-menu-me b { font-size: 14px; color: #1F1D3A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hvh-menu-me em, .hvh-menu-r { font-style: normal; font-size: 12px; color: #75728C; }
.hvh a.hvh-menu-out { margin-top: 4px; border-top: 1px solid #F0EFF6; border-radius: 0 0 8px 8px; color: #6B6880; }
/* 二级菜单往左展开，页面右侧放不下 */
.hvh-menu .submenu-child { left: auto; right: 100%; top: -8px; width: 168px; padding: 8px; margin-right: 6px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 36px rgba(31, 29, 58, 0.18); }
.hvh-menu .submenu-child a { display: block; padding: 0 10px; height: 34px; line-height: 34px; border-radius: 8px; font-size: 13px; color: #1F1D3A; white-space: nowrap; }
.hvh-menu .submenu-child a:hover { background: #F4F3FF; color: #5B57E8; }
.hvh-menu .submenu-child em { font-style: normal; font-size: 12px; color: #999999; }
.hvh-menu .lang-check { color: #5B57E8; }

/* 胶囊：外层高度 0，胶囊叠在横幅底边 8px 和首屏上 */
.hvh-bar-wrap { position: relative; z-index: 60; height: 0; }
/* 其他页面（没有深色首屏）：胶囊下面留出位置，正文从胶囊下方开始 */
.hvh-gap { height: 62px; }
.hvh-bar { position: absolute; left: 0; right: 0; top: -8px; width: var(--hv-w); height: 54px; margin: 0 auto; padding: 0 9px 0 20px; display: flex; align-items: center; gap: 24px; border-radius: 27px; background: rgba(233, 231, 255, 0.68); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 10px 30px rgba(14, 10, 40, 0.25); transition: background .2s, box-shadow .2s; }
.hvh-bar-wrap.is-fixed .hvh-bar { position: fixed; top: 10px; background: rgba(222, 219, 255, 0.82); box-shadow: 0 10px 30px rgba(14, 10, 40, 0.3); }
.hvh a.hvh-logo { display: flex; align-items: center; gap: 8px; flex: none; color: #2E2A6B; }
.hvh-logo img { width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 0 0 2px #FFFFFF, 0 4px 10px rgba(46, 42, 107, 0.3); } /* logo 自带淡紫底，和胶囊颜色接近：白描边 + 投影把边缘拉出来 */
.hvh-logo b { font-size: 17px; white-space: nowrap; letter-spacing: 1px; }
.hvh-line { width: 1px; height: 20px; background: rgba(75, 71, 214, 0.2); flex: none; }
.hvh-nav { display: flex; align-items: center; gap: 6px; flex: none; }
.hvh-nav a { position: relative; flex: none; white-space: nowrap; display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 17px; font-size: 15px; color: #3A3570; transition: background .15s, color .15s; }
.hvh-nav a:hover { background: rgba(126, 124, 251, 0.14); color: #4B47D6; }
.hvh-nav a.on, .hvh-nav a.on:hover { background: #7E7CFB; color: #FFFFFF; box-shadow: 0 4px 10px rgba(126, 124, 251, 0.35); }
.hvh-new { margin-left: 4px; padding: 0 5px; border-radius: 7px; background: #FF7A2F; color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 14px; }
.hvh-search { position: relative; flex: none; display: flex; align-items: center; gap: 8px; width: 230px; height: 36px; padding: 0 5px 0 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.6); }
.hvh-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; font-family: inherit; color: #1F1D3A; }
.hvh-search:focus-within { background: #FFFFFF; box-shadow: 0 0 0 2px rgba(126, 124, 251, 0.35); }
.hvh-search button { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: #7E7CFB; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.hvh-search button:hover { background: #6C69F2; }
/* ===== 新页尾（hv_footer.html） ===== */
.hvf.hvf-gap { margin-top: 70px; }
.hvf { min-width: 1000px; padding: 48px 0 0; background: linear-gradient(180deg, #2A2550 0%, #1F1B3F 100%); color: #B7B4D6; font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; font-size: 13px; text-align: left; }
.hvf-in { width: var(--hv-w); margin: 0 auto; }
.hvf-grid { display: grid; grid-template-columns: 330px repeat(3, 1fr) 270px; gap: 32px; }
.hvf-logo { display: flex; align-items: center; gap: 10px; }
.hvf-logo img { width: 40px; height: 40px; border-radius: 10px; }
.hvf-logo b { font-size: 20px; color: #FFFFFF; letter-spacing: 1px; }
.hvf-brand p { margin: 14px 0 0; font-size: 13px; line-height: 1.8; color: #B7B4D6; }
.hvf-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.hvf-pills a, .hvf-links a { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(255, 255, 255, 0.08); color: #DCDAF2; font-size: 12px; transition: background .15s, color .15s; }
.hvf-pills a:hover, .hvf-links a:hover { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.hvf-col { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.hvf-col b { margin-bottom: 4px; font-size: 15px; color: #FFFFFF; }
.hvf-col a { font-size: 13px; color: #B7B4D6; }
.hvf-col a:hover { color: #FFFFFF; }
.hvf-qrs { display: flex; gap: 22px; justify-content: flex-end; }
.hvf-qrs div { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; color: #B7B4D6; }
.hvf-qrs span { display: block; width: 116px; height: 116px; padding: 6px; border-radius: 12px; background: #FFFFFF; }
.hvf-qrs img { display: block; width: 100%; height: 100%; }
.hvf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.hvf-links b { margin-right: 8px; font-size: 14px; color: #FFFFFF; }
.hvf-legal { margin-top: 24px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 1.9; color: #9D9AC2; }
.hvf-legal p { margin: 0; }
.hvf-legal-row { display: flex; align-items: center; gap: 24px; margin-top: 14px; }
.hvf-badges { display: flex; align-items: center; gap: 10px; flex: none; }
.hvf-badges img { display: block; border-radius: 4px; }
.hvf-legal-txt i { display: inline-block; width: 1px; height: 10px; margin: 0 10px; background: rgba(255, 255, 255, 0.2); }
.hvf-legal-txt a { color: #9D9AC2; }
.hvf-legal-txt a:hover { color: #FFFFFF; }

/* ===== 新登录弹窗（hv_login.html）：单栏 + 顶上一条 Q 版人物 ===== */
.hvl-mark { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 99999; align-items: center; justify-content: center; padding: 20px; background: rgba(20, 16, 48, 0.5); font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; text-align: left; }
.hvl-mark *, .hvl-mark *::before, .hvl-mark *::after { box-sizing: border-box; }
.hvl { position: relative; width: 420px; max-height: 100%; overflow-y: auto; border-radius: 22px; background: #FFFFFF; box-shadow: 0 30px 70px rgba(10, 8, 40, 0.35); animation: hvl-in .2s ease-out; }
@keyframes hvl-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.hvl form { margin: 0; }
.hvl a { text-decoration: none; }
.hvl button { font-family: inherit; cursor: pointer; }
.hvl-art { height: 104px; background: #E9E7FF url(../img/index/login/back.png) center 0 / 420px auto no-repeat; }
.hvl a.hvl-close { position: absolute; right: 14px; top: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.8); color: #6B6880; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.hvl a.hvl-close:hover { background: #FFFFFF; color: #1F1D3A; }
.hvl-form { padding: 6px 32px 22px; }
.hvl-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #F3F2F9; }
.hvl-tabs button { flex: 1; height: 34px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; color: #6B6880; white-space: nowrap; }
.hvl-tabs button:hover { color: #4B47D6; }
.hvl-tabs button.on { background: #FFFFFF; color: #4B47D6; font-weight: 700; box-shadow: 0 2px 6px rgba(31, 29, 58, 0.1); cursor: default; }
.hvl-field { display: flex; align-items: center; gap: 10px; height: 46px; margin: 14px 0 0; padding: 0 6px 0 14px; border-radius: 12px; background: #F6F5FB; border: 1.5px solid transparent; color: #9C99B5; cursor: text; transition: background .15s, border-color .15s, box-shadow .15s; }
.hvl-tabs + .hvl-field { margin-top: 18px; }
.hvl-field svg { flex: none; }
.hvl-field:focus-within { background: #FFFFFF; border-color: #7E7CFB; box-shadow: 0 0 0 4px rgba(126, 124, 251, 0.14); color: #7E7CFB; }
.hvl-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: 15px; font-family: inherit; color: #1F1D3A; }
.hvl-field input::placeholder { color: #A9A6BF; }
.hvl-eye { flex: none; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9C99B5; display: flex; align-items: center; justify-content: center; }
.hvl-eye:hover, .hvl-eye.on { color: #5B57E8; }
.hvl a.hvl-code { flex: none; height: 34px; padding: 0 12px; border-radius: 9px; background: #ECEBFE; color: #4B47D6; font-size: 13px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; transition: background .15s; }
.hvl a.hvl-code:hover { background: #E1DFFD; }
.hvl a.hvl-code.wait { background: #F0EFF6; color: #9C99B5; font-weight: 400; cursor: default; }
/* 出错提示：layout 的 message_header() 会把 display 改成 block */
.hvl-alert { position: relative; margin-top: 8px; padding: 0 20px 0 22px; color: #D63649; font-size: 12px; line-height: 18px; }
.hvl-alert svg { position: absolute; left: 3px; top: 2px; }
.hvl-alert i { position: absolute; right: 0; top: 0; font-style: normal; font-size: 16px; line-height: 18px; color: #C9C6D9; cursor: pointer; }
.hvl-alert i:hover { color: #6B6880; }
.hvl-agree { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; margin-top: 16px; font-size: 12px; color: #6B6880; }
.hvl-agree a { color: #5B57E8; }
.hvl-agree a:hover { text-decoration: underline; }
/* 协议勾选框：layout 的 consent() 换的是 img 的 src（check_1_on.png / check_1.png），这里按 src 画成圆角方框，原图不显示 */
.hvl-agree img { flex: none; width: 15px; height: 15px; padding: 15px 0 0; margin-right: 6px; border-radius: 5px; border: 1.5px solid #CFCDE0; background: #FFFFFF; cursor: pointer; overflow: hidden; }
.hvl-agree img[src$="check_1_on.png"] { border-color: #7E7CFB; background: #7E7CFB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.hvl button.hvl-go { display: block; width: 100%; height: 46px; margin-top: 14px; border: 0; border-radius: 23px; background: linear-gradient(135deg, #8B89FF 0%, #6E6BF0 100%); color: #FFFFFF; font-size: 16px; font-weight: 700; letter-spacing: 2px; box-shadow: 0 10px 22px rgba(110, 107, 240, 0.32); transition: filter .15s, transform .15s; }
.hvl button.hvl-go:hover { filter: brightness(1.05); transform: translateY(-1px); }
.hvl a.hvl-forget { display: block; margin-top: 10px; text-align: right; font-size: 12px; color: #8E8BA6; }
.hvl a.hvl-forget:hover { color: #5B57E8; }
.hvl-oauth { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #F0EFF6; }
.hvl-oauth span { margin-right: auto; font-size: 12px; color: #A9A6BF; }
.hvl-oauth a { width: 34px; height: 34px; border-radius: 50%; background: #F6F5FB; display: flex; align-items: center; justify-content: center; transition: transform .15s, background .15s; }
.hvl-oauth a:hover { transform: translateY(-2px); background: #ECEBFE; }
.hvl-oauth img { width: 22px; height: 22px; }