/* H5 app skin migrated from /pages design drafts. PC is intentionally untouched. */
@media (max-width: 768px) {
  :root {
    --bg: #0a0f18;
    --card: #121826;
    --card-hover: #182133;
    --border: rgba(150, 175, 255, .16);
    --text: #dbe6ff;
    --text-muted: #93a4c7;
    --primary: #79cfff;
    --primary-red: #9f9cff;
    --primary-light: rgba(121, 207, 255, .14);
    --accent: #79cfff;
    --accent2: #9f9cff;
    --gold: #d78bff;
    --green: #3fb950;
    --nav-bg: rgba(13, 17, 23, .96);
    --radius: 12px;
    --radius-sm: 8px;
    --tabbar-h: 62px;
    --accent-gradient: linear-gradient(135deg, #79cfff, #9f9cff 58%, #d78bff);
    --nav-gradient: linear-gradient(90deg, #dff5ff 0%, #8acbff 48%, #d78bff 100%);
    --nav-gradient-diag: linear-gradient(135deg, #dff5ff 0%, #8acbff 48%, #d78bff 100%);
    --panel-gradient: linear-gradient(135deg, rgba(121, 207, 255, .22), rgba(159, 156, 255, .18), rgba(215, 139, 255, .20));
  }

  html {
    background: #0d1117;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    max-width: 100% !important;
    min-height: 100vh;
    margin: 0 auto !important;
    background: var(--bg) !important;
    color: var(--text);
    line-height: 0 !important;
    overflow-x: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    padding-bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)) !important;
  }

  body > * {
    line-height: normal;
  }

  body, input, button, textarea, select {
    font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .site-header,
  .site-footer,
  .ad-pc-only,
  .pc-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .main-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 0 12px !important;
    overflow-x: hidden;
  }

  .main-content {
    min-width: 0;
    max-width: 100%;
  }

  .h5-header {
    display: block !important;
    position: sticky;
    top: 0;
    z-index: 300;
    height: auto !important;
    background: #000 !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .h5-header .header {
    min-height: 54px;
    padding: 4px 14px 7px !important;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .h5-header .logo-img {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    overflow: hidden;
    background: #111 url("/assets/img/wap-ui/logo.webp") center / cover no-repeat;
  }

  .h5-header .logo-img i {
    display: none !important;
  }

  .h5-header .search-bar {
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  }

  .h5-header .search-bar input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font-size: 13px;
  }

  .h5-header .search-bar input::placeholder {
    color: var(--text-muted);
  }

  .h5-header .search-bar:focus-within,
  .ot-search-box:focus-within,
  .ot-lite-search-box:focus-within,
  .h5-drawer-search form:focus-within {
    border-color: rgba(121, 207, 255, .60) !important;
    box-shadow: 0 0 0 3px rgba(121, 207, 255, .16), inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  .h5-header .download-btn {
    height: 38px;
    min-width: 84px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 19px;
    background: var(--accent-gradient);
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(121, 207, 255, .18);
  }

  .h5-header .title {
    min-width: 0;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .h5-top-nav {
    margin-left: -14px;
    margin-right: -14px;
    padding: 4px 14px 5px !important;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }

  .h5-top-nav .nav-list {
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overscroll-behavior-x: contain;
  }

  .h5-top-nav a {
    padding: 9px 0 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    position: relative;
  }

  .ot-lite-tab,
  .dy-tab,
  .nv-cat {
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: var(--card) !important;
    color: var(--text-muted) !important;
  }

  .app-tab {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-muted) !important;
  }

  .h5-top-nav a.active {
    color: #fff !important;
    background: transparent !important;
  }

  .ot-lite-tab.active,
  .dy-tab.active,
  .nv-cat:hover {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), #ff6a55) !important;
  }

  .app-tab.active {
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
  }

  .h5-top-nav a.active::after {
    content: "" !important;
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -6px;
    height: 3px;
    border-radius: 3px;
    background: var(--nav-gradient);
  }

  .ot-lite-tab.active::after {
    display: none !important;
  }

  .h5-home-ad-wrap,
  .ad-h5-mid,
  .banner,
  .home-ad-wrap {
    margin: 8px 0 10px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--border);
    background: var(--card);
  }

  .h5-home-ad-wrap img,
  .ad-h5-mid img,
  .banner img {
    display: block;
    width: 100% !important;
    height: auto;
    max-height: 120px;
    object-fit: cover;
  }

  .h5-home-icon-ads,
  .friend-icons-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px !important;
    padding: 8px 0 12px !important;
    margin: 0 !important;
  }

  .h5-home-icon-ads a,
  .friend-icon-item {
    min-width: 0;
    padding: 8px 4px;
    border-radius: 10px;
    color: var(--text) !important;
    background: transparent;
  }

  .h5-home-icon-ads a:active,
  .friend-icon-item:active {
    background: var(--border);
  }

  .h5-home-icon-ads img,
  .friend-icon-item img,
  .friend-icon-item .fi-placeholder {
    width: 38px !important;
    height: 38px !important;
    border-radius: 9px !important;
    object-fit: cover;
  }

  .h5-home-icon-ads span,
  .friend-icon-item span {
    max-width: 100%;
    color: var(--text);
    font-size: 10px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .exchange-links-bar {
    background: var(--bg) !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .exchange-links-wrap {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .exchange-links-wrap::-webkit-scrollbar {
    display: none;
  }

  .exchange-links-label {
    flex: 0 0 auto;
    border-right: 0 !important;
    color: var(--text-muted) !important;
  }

  .exchange-link-item {
    flex: 0 0 auto;
    border-radius: 999px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
  }

  .announcement,
  .notice {
    margin: 8px 0 12px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: #fff;
    font-size: 12px;
  }

  .video-section,
  .section,
  .nv-topcats .box,
  .nv-side .box,
  .app-box,
  .dy-card,
  .video-info,
  .sidebar-block,
  .tag-header,
  .exchange-form {
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  .video-section,
  .section {
    margin: 12px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .mobile-only > .video-section:first-child,
  .mobile-only > .section:first-child {
    margin-top: 0 !important;
  }

  .section-header,
  .section-head,
  .section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 16px 0 10px !important;
    gap: 10px;
  }

  .section-header .title,
  .section-head .title,
  .section-title h2 {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.2;
  }

  .section-header .bar,
  .section-title::before {
    display: none !important;
  }

  .section-header .more,
  .section-head .more,
  .more-link {
    color: var(--text-muted) !important;
    font-size: 11px !important;
    font-weight: 700;
  }

  .section-header-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .section-header-row--center{justify-content:center;}
  .section-header-row--center .title{width:100%;display:flex;align-items:center;justify-content:center;text-align:center;}
  .section-header-row--center .bar{margin-right:10px;}

  .video-grid,
  .video-sub-grid,
  .manga-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100%;
  }

  .manga-grid-3,
  .nv-list,
  .nv-rec {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .video-card,
  .nv-item,
  .app-item,
  .dy-item {
    min-width: 0;
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    overflow: hidden;
    box-shadow: none !important;
    transform: none !important;
  }

  .video-card:active,
  .nv-item:active,
  .app-item:active,
  .dy-item:active {
    transform: scale(.98) !important;
    border-color: var(--accent) !important;
  }

  .video-card .thumbnail,
  .video-card-thumb,
  .thumb {
    position: relative;
    overflow: hidden;
    background: #0b0d12 !important;
    aspect-ratio: 16 / 9;
    border-radius: 0 !important;
  }

  .video-card .thumbnail img,
  .video-card-thumb img,
  .thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .manga-grid-3 .thumbnail,
  .manga-grid-3 .video-card-thumb,
  .nv-cover,
  .nv-rec-cover {
    aspect-ratio: 3 / 4 !important;
  }

  .video-card .info,
  .video-card-body,
  .nv-body {
    padding: 8px 9px 10px !important;
  }

  .video-title,
  .video-card-title,
  .video-card .info h3,
  .nv-title,
  .app-name {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .video-card .meta,
  .video-card-meta,
  .nv-meta,
  .nv-desc,
  .app-btn {
    color: var(--text-muted) !important;
    font-size: 10px !important;
  }

  .video-card .thumbnail .views,
  .video-card .thumbnail .duration,
  .video-card-views,
  .video-card-duration,
  .duration,
  .views {
    border-radius: 4px !important;
    background: rgba(0, 0, 0, .68) !important;
    color: #fff !important;
    font-size: 10px !important;
    padding: 2px 6px !important;
  }

  .listfooter,
  .pager,
  .pagination,
  .pagination-wrap {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 0 !important;
    margin: 0 !important;
    flex-wrap: wrap;
  }

  .listfooter .btn,
  .pager a,
  .pagination li a,
  .pagination li span,
  .btn,
  .btn-primary,
  .nv-btn,
  .dy-btn {
    min-height: 34px;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: var(--card) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .mobile-only .listfooter .btn {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--gold)) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(247, 129, 102, .22);
  }

  .mobile-only .listfooter .btn i {
    background: rgba(255, 255, 255, .16) !important;
    border: 1px solid rgba(255, 255, 255, .20) !important;
  }

  .pager a.on,
  .pagination li.active a,
  .pagination li.active span,
  .btn-primary,
  .nv-btn.primary,
  .dy-btn {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), var(--gold)) !important;
    color: #fff !important;
  }

  .nv-hero {
    display: none !important;
  }

  .nv-wrap {
    display: block !important;
  }

  .nv-topcats .box {
    padding: 10px !important;
    margin: 0 0 12px !important;
  }

  .nv-cat-list,
  .dy-tabs,
  .app-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nv-cat-list::-webkit-scrollbar,
  .dy-tabs::-webkit-scrollbar,
  .app-tabs::-webkit-scrollbar {
    display: none;
  }

  .nv-cat,
  .dy-tab,
  .app-tab {
    flex: 0 0 auto;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .nv-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  .nv-cover {
    width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b0d12 !important;
  }

  .nv-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .nv-chip {
    display: none !important;
  }

  .nv-chip:last-child {
    display: inline-flex !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .nv-head,
  .mg-head {
    max-width: 100% !important;
    overflow: hidden !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
  }

  .nv-actions,
  .mg-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .nv-chapter,
  .mg-chapter {
    max-width: 100%;
    overflow: hidden;
    border-radius: 10px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
  }

  .nv-chapter-title,
  .mg-chapter-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nv-reader,
  .reader-card,
  .chapter-content {
    max-width: 100%;
    overflow-x: hidden;
  }

  .app-wrap {
    padding: 0 0 14px !important;
  }

  .app-box {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  .app-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .app-cover {
    border-radius: 10px !important;
    background: #0b0d12 !important;
  }

  .dating-shell {
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
    background: var(--bg) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .dy-top {
    padding: 14px 0 10px !important;
  }

  .dy-list {
    gap: 10px !important;
  }

  .dy-item {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    padding: 10px !important;
  }

  .dy-cover {
    border-radius: 8px !important;
  }

  .dy-title {
    color: #fff !important;
  }

  .dy-modal-card,
  .modal {
    width: min(332px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 78px) !important;
    overflow-y: auto;
    border-radius: 16px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
  }

  .modal-overlay {
    max-width: 100%;
    margin: 0 auto;
  }

  .modal .m-title,
  .modal .m-sub,
  .dy-modal-card .m-title,
  .dy-modal-card .m-sub {
    color: var(--text) !important;
  }

  .modal .m-close,
  .dy-modal-card .m-close {
    color: var(--text-muted) !important;
  }

  .bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: var(--tabbar-h) !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: space-around !important;
    align-items: center !important;
    z-index: 9999 !important;
    padding: 2px 0 8px !important;
    background: linear-gradient(180deg, rgba(18, 24, 34, .96), rgba(9, 13, 20, .98)) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 -18px 36px rgba(0, 0, 0, .30);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .bottom-nav .nav-item {
    min-width: 0;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: rgba(255,255,255,.86) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.1;
    text-decoration: none;
  }

  .bottom-nav .nav-icon-wrap {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 18px rgba(0,0,0,.18);
  }

  .bottom-nav .nav-icon {
    width: auto !important;
    height: auto !important;
    font-size: 20px !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: rgba(255,255,255,.82) !important;
  }

  .bottom-nav .nav-item.active {
    color: #fff !important;
  }

  .bottom-nav .nav-item.active span {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .bottom-nav .nav-item.active .nav-icon {
    color: #79cfff !important;
    filter: drop-shadow(0 0 10px rgba(121, 207, 255, .22));
  }

  .bottom-nav .nav-item.active .nav-icon-wrap {
    background: linear-gradient(180deg, rgba(121, 207, 255, .18), rgba(215, 139, 255, .10));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 22px rgba(121, 207, 255, .16);
  }

  .ad-h5-bottom {
    display: none !important;
  }

  .short-feed,
  .short-bottomsheet,
  .short-bottomsheet-mask {
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .short-item {
    width: 100% !important;
  }

  .mobile-only input,
  .mobile-only textarea,
  .mobile-only select {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: #0b0f16 !important;
    color: var(--text) !important;
    outline: none !important;
  }

  .mobile-only input:focus,
  .mobile-only textarea:focus,
  .mobile-only select:focus {
    border-color: rgba(247, 129, 102, .75) !important;
    box-shadow: 0 0 0 3px rgba(247, 129, 102, .10) !important;
  }

  .mobile-only form button,
  .mobile-only button[type="submit"] {
    border-radius: 999px !important;
    border: 0 !important;
    background: linear-gradient(135deg, var(--accent), var(--gold)) !important;
    color: #fff !important;
    font-weight: 900 !important;
  }

  .mobile-only .uc-pill,
  .mobile-only a.vc-tag {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    border: 1px solid var(--border) !important;
    background: var(--card) !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .mobile-only .uc-pill.active,
  .mobile-only a.vc-tag:hover {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--accent), #ff6a55) !important;
    color: #fff !important;
  }

  .mobile-only > div[style*="padding:15px"],
  .mobile-only > div[style*="padding: 15px"],
  .mobile-only > div[style*="background:#1a1a1a"],
  .mobile-only > div[style*="background:rgba(255,255,255,.06)"] {
    border-radius: 12px !important;
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
  }

  .mobile-only a[href="/user/upgrade"],
  .mobile-only a[href="/user/recharge"],
  .mobile-only a[href="/user/favs"],
  .mobile-only a[href="/user/plays"],
  .mobile-only a[href="/user/orders"],
  .mobile-only a[href="/user/invite"],
  .mobile-only a[href="/apps/"] {
    border-radius: 12px;
  }

  /* Final mobile skin pass: wins against older inline H5 styles. */
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
  }

  .container,
  .main-wrap,
  .main-content,
  .dating-shell,
  .nv-page,
  .mg-page,
  .app-wrap,
  .user-page {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .h5-header,
  .h5-top-nav,
  .ot-lite-top,
  .dating-shell,
  .nv-wrap,
  .mg-wrap,
  .app-wrap {
    background: #0d1117 !important;
  }

  .h5-top-nav {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px 0 7px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .h5-top-nav .nav-list,
  .ot-lite-tabs,
  .nv-cat-list,
  .dy-provinces,
  .dy-cities,
  .dy-tabs,
  .app-tabs {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    padding: 0 0 2px !important;
    margin: 0 !important;
    scrollbar-width: none !important;
  }

  .h5-top-nav .nav-list::-webkit-scrollbar,
  .ot-lite-tabs::-webkit-scrollbar,
  .nv-cat-list::-webkit-scrollbar,
  .dy-provinces::-webkit-scrollbar,
  .dy-cities::-webkit-scrollbar,
  .dy-tabs::-webkit-scrollbar,
  .app-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .h5-top-nav a,
  .ot-lite-tab,
  .nv-cat,
  .dy-pill,
  .dy-tab,
  .app-tab {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    border: 1px solid #21262d !important;
    background: #161b22 !important;
    color: #8b949e !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }

  .h5-top-nav a.active,
  .ot-lite-tab.active,
  .nv-cat.active,
  .dy-pill.active,
  .dy-tab.active,
  .app-tab.active {
    border-color: transparent !important;
    background: var(--accent-gradient) !important;
    color: #fff !important;
  }

  /* App center follows pages/fuli.html: text tabs + separators + underline,
     so opt it out from the generic pill-tab rules above. */
  .app-wrap .app-tabs {
    display: flex !important;
    gap: 0 !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    padding: 12px 14px 0 !important;
    margin: 0 !important;
  }

  .app-wrap .app-tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 6px 0 10px !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(230, 237, 243, .62) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    position: relative !important;
  }

  .app-wrap .app-tab + .app-tab {
    border-left: 1px solid rgba(255,255,255,.06) !important;
  }

  .app-wrap .app-tab.active {
    border: 0 !important;
    background: transparent !important;
    color: #fff !important;
  }

  .app-wrap .app-tab.active::after {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    right: 8px !important;
    bottom: -2px !important;
    height: 3px !important;
    border-radius: 2px !important;
    background: var(--nav-gradient) !important;
  }

  .video-card,
  .nv-item,
  .nv-head,
  .nv-chapter,
  .mg-head,
  .mg-chapter,
  .dy-item,
  .dy-top,
  .app-box,
  .app-item,
  .user-card,
  .uc-card,
  .bottom-nav,
  .section-card,
  .daily-pop-frame {
    background: #161b22 !important;
    border-color: #21262d !important;
    box-shadow: none !important;
  }

  .video-grid,
  .video-sub-grid {
    gap: 10px !important;
  }

  .nv-list,
  .nv-rec,
  .manga-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .nv-title,
  .video-title,
  .video-card-title,
  .dy-title,
  .app-name {
    color: #fff !important;
    letter-spacing: 0 !important;
  }

  .bottom-nav {
    background: rgba(22, 27, 34, .98) !important;
    border-top: 1px solid #21262d !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .pwa-guide {
    background: #161b22 !important;
    border: 1px solid #30363d !important;
    border-radius: 18px !important;
  }

  .pwa-guide-steps div {
    background: #0d1117 !important;
    border-color: #30363d !important;
  }

  .pwa-guide-ok {
    background: var(--accent-gradient) !important;
  }

  .dy-top {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    background: rgba(13, 17, 23, .96) !important;
    border-bottom: 1px solid #21262d !important;
  }

  .dy-card,
  .dy-action,
  .dy-cover,
  .dy-warn {
    border-radius: 12px !important;
  }

  .dy-sheet {
    width: min(362px, calc(100vw - 28px)) !important;
    max-height: calc(100vh - 96px) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }

  .nv-detail,
  .mg-detail,
  .manga-reader,
  .nv-reader {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .nv-head,
  .mg-head {
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding: 10px !important;
    background: #161b22 !important;
  }

  .nv-poster,
  .mg-poster {
    width: 100% !important;
    max-width: 112px !important;
    aspect-ratio: 3 / 4 !important;
  }

  .nv-info,
  .mg-info,
  .nv-meta,
  .mg-meta,
  .nv-row,
  .mg-row {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .nv-actions,
  .mg-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .nv-btn,
  .mg-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .nv-chapter,
  .mg-chapter,
  .chapter-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .nv-chapter .t,
  .mg-chapter .t,
  .chapter-row .t,
  .chapter-title {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .mobile-only[style*="padding:15px"],
  .mobile-only[style*="padding: 15px"],
  .mobile-only[style*="padding:18px"],
  .mobile-only[style*="padding: 18px"] {
    background: #0d1117 !important;
    color: #c9d1d9 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .mobile-only div[style*="background:#1a1a1a"],
  .mobile-only div[style*="background: #1a1a1a"],
  .mobile-only div[style*="background:rgba(255,255,255,.06)"],
  .mobile-only div[style*="background: rgba(255,255,255,.06)"],
  .mobile-only form[style*="border:1px solid"],
  .mobile-only form[style*="border: 1px solid"] {
    background: #161b22 !important;
    border: 1px solid #21262d !important;
    border-radius: 12px !important;
    color: #c9d1d9 !important;
    box-sizing: border-box !important;
  }

  .mobile-only [style*="color:rgba(255,255,255,.65)"],
  .mobile-only [style*="color: rgba(255,255,255,.65)"],
  .mobile-only [style*="color:rgba(255,255,255,.7)"],
  .mobile-only [style*="color: rgba(255,255,255,.7)"] {
    color: #8b949e !important;
  }

  .reader-topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 22000 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    margin: 0 auto 10px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: rgba(13, 17, 23, .96) !important;
    border-bottom: 1px solid #21262d !important;
    box-sizing: border-box !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  .reader-topbar-inflow {
    margin: -10px -10px 10px !important;
    width: calc(100% + 20px) !important;
  }

  .reader-top-btn {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .08) !important;
    color: #f0f6fc !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .reader-top-btn i {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .reader-top-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #f0f6fc !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nv-bottom-nav,
  .mr-bottom-nav {
    height: 48px !important;
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .18) !important;
  }

  .nv-bottom-nav .nv-bottom-btn,
  .mr-bottom-nav .mr-bottom-btn {
    height: 48px !important;
    background: #f8fafc !important;
    color: #111827 !important;
    border-right: 1px solid rgba(15, 23, 42, .10) !important;
    font-size: 0 !important;
    font-weight: 900 !important;
    position: relative !important;
  }

  .nv-bottom-nav .nv-bottom-btn::before,
  .mr-bottom-nav .mr-bottom-btn::before {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  .nv-bottom-nav .nv-bottom-btn:nth-child(1)::before,
  .mr-bottom-nav .mr-bottom-btn:nth-child(1)::before {
    content: "上一章" !important;
  }

  .nv-bottom-nav .nv-bottom-btn:nth-child(2)::before,
  .mr-bottom-nav .mr-bottom-btn:nth-child(2)::before {
    content: "目录" !important;
  }

  .nv-bottom-nav .nv-bottom-btn:nth-child(3)::before,
  .mr-bottom-nav .mr-bottom-btn:nth-child(3)::before {
    content: "下一章" !important;
  }

  .nv-bottom-nav .nv-bottom-btn.disabled,
  .mr-bottom-nav .mr-bottom-btn.disabled {
    color: rgba(17, 24, 39, .35) !important;
  }

  .h5-back-top {
    right: 14px !important;
    bottom: calc(18px + env(safe-area-inset-bottom) + var(--h5-bottom-stack, 62px)) !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background: var(--accent-gradient) !important;
    color: transparent !important;
    box-shadow: 0 10px 24px rgba(127, 138, 255, .28) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  .h5-back-top i {
    display: none !important;
  }

  .h5-back-top::before {
    content: "" !important;
    width: 18px !important;
    height: 14px !important;
    border: 0 !important;
    background: #fff !important;
    clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    transform: translateY(-1px) !important;
  }

  body.reader-18mh-page {
    max-width: 100% !important;
    background: #fff4f6 !important;
    color: #2f3340 !important;
    box-shadow: 0 18px 48px rgba(244, 114, 123, .12) !important;
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
  }

  body.reader-18mh-page .container,
  body.reader-18mh-page .main-wrap {
    max-width: 100% !important;
    background: #fff4f6 !important;
  }

  body.reader-18mh-page .main-wrap {
    padding-top: 0 !important;
  }

  body.reader-18mh-page .reader-topbar {
    height: 52px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    background: #fff !important;
    border-bottom: 1px solid #f0dfe3 !important;
    color: #2f3340 !important;
    box-shadow: 0 6px 18px rgba(244, 114, 123, .08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.reader-18mh-page .reader-topbar-inflow {
    margin: -10px -10px 10px !important;
    width: calc(100% + 20px) !important;
  }

  body.reader-18mh-page .reader-top-btn {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    background: #fff3f4 !important;
    color: #ff5a66 !important;
    border: 1px solid #ffd7dc !important;
    border-radius: 10px !important;
  }

  body.reader-18mh-page .reader-top-title {
    color: #2f3340 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  body.reader-18mh-page .reader-top-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  body.reader-18mh-page .reader-vip-link {
    height: 34px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: #ff5a66 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 14px rgba(255, 90, 102, .22) !important;
  }

  body.reader-18mh-page .nv-reader,
  body.reader-18mh-page .manga-reader {
    max-width: 430px !important;
    background: #fff4f6 !important;
    color: #2f3340 !important;
  }

  body.reader-18mh-page .nv-content {
    margin-top: 10px !important;
    background: #fff !important;
    color: #323846 !important;
    border: 1px solid #f0dfe3 !important;
    border-radius: 14px !important;
    padding: 16px 14px !important;
    line-height: var(--reader-line-height, 1.95) !important;
    box-shadow: 0 10px 28px rgba(244, 114, 123, .08) !important;
  }

  body.reader-18mh-page .nv-content p {
    color: #323846 !important;
  }

  body.reader-18mh-manga {
    background: #fff4f6 !important;
  }

  html body.reader-18mh-manga {
    padding-bottom: calc(52px + env(safe-area-inset-bottom)) !important;
    background: #fff4f6 !important;
  }

  body.reader-18mh-manga .manga-reader {
    height: auto !important;
    min-height: 100vh !important;
    background: #fff4f6 !important;
  }

  body.reader-18mh-manga .mr-list {
    padding: 10px 10px 64px !important;
    background: #fff4f6 !important;
  }

  body.reader-18mh-manga .mr-page {
    margin: 0 0 10px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(244, 114, 123, .08) !important;
  }

  body.reader-18mh-page .nv-bottom-nav,
  body.reader-18mh-page .mr-bottom-nav {
    height: 52px !important;
    background: #fff !important;
    border-top: 1px solid #f0dfe3 !important;
    box-shadow: 0 -8px 24px rgba(244, 114, 123, .12) !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn,
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn {
    height: 52px !important;
    background: #fff !important;
    color: #404656 !important;
    border-right: 1px solid #f0dfe3 !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn:nth-child(2),
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn:nth-child(2) {
    color: #ff5a66 !important;
  }

  body.reader-18mh-page .h5-back-top {
    background: rgba(255, 255, 255, .92) !important;
    border: 1px solid #ffd7dc !important;
    box-shadow: 0 8px 20px rgba(244, 114, 123, .18) !important;
  }

  body.reader-18mh-page .h5-back-top::before {
    border-bottom-color: #ff5a66 !important;
  }

  body.reader-18mh-page .h5-actions-mask {
    background: rgba(255, 216, 221, .55) !important;
  }

  body.reader-18mh-page .h5-actions-panel {
    background: #fff !important;
    border: 1px solid #f0dfe3 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 42px rgba(244, 114, 123, .18) !important;
  }

  body.reader-18mh-page .h5-act,
  body.reader-18mh-page .h5-set-btn,
  body.reader-18mh-page .h5-actions-close {
    background: #fff3f4 !important;
    border-color: #ffd7dc !important;
    color: #404656 !important;
  }

  body.reader-18mh-page .h5-actions-title,
  body.reader-18mh-page .h5-settings-title {
    color: #2f3340 !important;
  }

  body.reader-18mh-page .h5-drawer,
  body.reader-18mh-page .h5-drawer-head,
  body.reader-18mh-page .h5-drawer-search {
    background: #fff !important;
    color: #2f3340 !important;
    border-color: #f0dfe3 !important;
  }

  body.reader-18mh-page .h5-drawer-logo,
  body.reader-18mh-page .h5-dnav-toggle,
  body.reader-18mh-page .h5-dnav-item,
  body.reader-18mh-page .h5-dnav-child {
    color: #2f3340 !important;
  }

  body.reader-18mh-page .h5-search-icon,
  body.reader-18mh-page .h5-drawer-close {
    background: #fff3f4 !important;
    color: #ff5a66 !important;
    border: 1px solid #ffd7dc !important;
  }

  body.reader-18mh-page .h5-dnav-child,
  body.reader-18mh-page .h5-dnav-item {
    background: #fff3f4 !important;
    border: 1px solid #ffd7dc !important;
    border-radius: 10px !important;
  }

  body.reader-18mh-page {
    --reader-font-size: 22px;
    --reader-line-height: 1.62;
    background: #fff !important;
    color: #333 !important;
    box-shadow: none !important;
    padding-bottom: calc(50px + env(safe-area-inset-bottom)) !important;
  }

  body.reader-18mh-page .container,
  body.reader-18mh-page .main-wrap,
  body.reader-18mh-page .nv-reader,
  body.reader-18mh-page .manga-reader,
  html body.reader-18mh-manga,
  body.reader-18mh-manga .mr-list {
    background: #fff !important;
  }

  body.reader-18mh-page .reader-topbar {
    min-height: 52px !important;
    height: auto !important;
    padding: 2px 4px 0 !important;
    margin: 0 auto !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: none !important;
    color: #333 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.reader-18mh-page .reader-topbar-inflow {
    margin: -10px -10px 0 !important;
    width: calc(100% + 20px) !important;
  }

  body.reader-18mh-page .reader-top-left,
  body.reader-18mh-page .reader-top-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  body.reader-18mh-page .reader-top-btn,
  body.reader-18mh-page .reader-user-btn {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #777 !important;
    box-shadow: none !important;
    display: grid !important;
    place-items: center !important;
  }

  body.reader-18mh-page .reader-grid-btn {
    color: #999 !important;
  }

  body.reader-18mh-page .reader-back-btn {
    color: #333 !important;
  }

  body.reader-18mh-page .reader-user-btn {
    color: #aaa !important;
    text-decoration: none !important;
  }

  body.reader-18mh-page .reader-top-btn i,
  body.reader-18mh-page .reader-user-btn i {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  body.reader-18mh-page .reader-back-btn i {
    font-size: 22px !important;
  }

  body.reader-18mh-page .reader-top-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.reader-18mh-page .reader-top-title--clamp2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.reader-18mh-page .reader-vip-link {
    display: none !important;
  }

  body.reader-18mh-page .nv-content {
    margin: 0 !important;
    padding: 8px 14px 70px !important;
    background: #fff !important;
    color: #333 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: var(--reader-font-size, 22px) !important;
    line-height: var(--reader-line-height, 1.62) !important;
  }

  body.reader-18mh-page .nv-content p {
    margin: 0 0 18px !important;
    color: #333 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
  }

  body.reader-18mh-manga .mr-list {
    padding: 0 15px 64px !important;
  }

  body.reader-18mh-manga .mr-page {
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body.reader-18mh-page .nv-bottom-nav,
  body.reader-18mh-page .mr-bottom-nav {
    height: 50px !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    box-shadow: none !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn,
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn {
    height: 50px !important;
    background: #fff !important;
    color: #333 !important;
    border-right: 0 !important;
    font-size: 0 !important;
    font-weight: 900 !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn::before,
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn::before {
    font-size: 18px !important;
    line-height: 1 !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn:nth-child(1)::before,
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn:nth-child(1)::before {
    content: "‹ 上一章" !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn:nth-child(2)::before,
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn:nth-child(2)::before {
    content: "返回书页" !important;
    font-weight: 500 !important;
  }

  body.reader-18mh-page .nv-bottom-nav .nv-bottom-btn:nth-child(3)::before,
  body.reader-18mh-page .mr-bottom-nav .mr-bottom-btn:nth-child(3)::before {
    content: "下一章 ›" !important;
  }

  body.reader-18mh-page .h5-back-top {
    background: #ff5656 !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 18px rgba(255, 86, 86, .25) !important;
  }

  body.reader-18mh-page .h5-back-top::before {
    border-bottom-color: #fff !important;
  }

  body.reader-18mh-page .h5-actions-panel {
    background: #fff !important;
    border: 0 !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18) !important;
  }

  body.reader-18mh-page .h5-actions-mask {
    align-items: flex-start !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body.reader-18mh-page .h5-actions-panel {
    width: 100% !important;
    max-width: 430px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #eee !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08) !important;
    padding: 0 10px 10px !important;
  }

  body.reader-18mh-page .h5-actions-top {
    display: none !important;
  }

  body.reader-18mh-page .h5-actions-row {
    height: 60px !important;
    gap: 12px !important;
    padding: 0 !important;
    align-items: center !important;
  }

  body.reader-18mh-page .h5-act {
    flex: 0 0 42px !important;
    min-width: 42px !important;
    height: 50px !important;
    border-radius: 3px !important;
    padding: 4px 2px !important;
  }

  body.reader-18mh-page .h5-act i {
    font-size: 20px !important;
    color: #777 !important;
  }

  body.reader-18mh-page .h5-act span {
    font-size: 12px !important;
    color: #333 !important;
    font-weight: 500 !important;
  }

  body.reader-18mh-page .h5-settings {
    margin-top: 0 !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #eee !important;
  }

  body.reader-18mh-page .h5-act,
  body.reader-18mh-page .h5-set-btn,
  body.reader-18mh-page .h5-actions-close {
    background: #fff !important;
    border: 0 !important;
    color: #333 !important;
  }

  body.reader-18mh-page .reader-catalog-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 26000 !important;
    display: none !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    background: rgba(0, 0, 0, .48) !important;
  }

  body.reader-18mh-page .reader-catalog-mask.open {
    display: flex !important;
  }

  body.reader-18mh-page .reader-catalog-panel {
    width: min(72vw, 300px) !important;
    max-width: 320px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    background: #fff !important;
    color: #333 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    box-shadow: -12px 0 34px rgba(0, 0, 0, .18) !important;
  }

  body.reader-18mh-page .reader-catalog-head {
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    border-bottom: 1px solid #eee !important;
  }

  body.reader-18mh-page .reader-catalog-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }

  body.reader-18mh-page .reader-catalog-tab {
    height: 30px !important;
    padding: 0 8px !important;
    border: 1px solid #e8e8e8 !important;
    background: #fff !important;
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 28px !important;
  }

  body.reader-18mh-page .reader-catalog-tab.active {
    border-color: #ff5656 !important;
    color: #ff5656 !important;
  }

  body.reader-18mh-page .reader-catalog-close-btn {
    width: 36px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    color: #555 !important;
    display: grid !important;
    place-items: center !important;
  }

  body.reader-18mh-page .reader-catalog-close-btn i {
    font-size: 22px !important;
  }

  body.reader-18mh-page .reader-catalog-body {
    height: calc(100vh - 50px) !important;
    overflow: hidden !important;
  }

  body.reader-18mh-page .reader-catalog-panel-box {
    height: 100% !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.reader-18mh-page .reader-catalog-list {
    padding: 8px 12px 16px !important;
  }

  body.reader-18mh-page .reader-catalog-list a {
    display: block !important;
    padding: 12px 8px !important;
    border-bottom: 1px solid #f1f1f1 !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  body.reader-18mh-page .reader-catalog-list a.active {
    color: #ff5656 !important;
  }

  body.reader-18mh-page .reader-catalog-bookmarks {
    padding: 10px 12px 16px !important;
    background: #fff !important;
  }

  body.reader-18mh-page .reader-bookmark-toolbar {
    display: flex !important;
    justify-content: flex-start !important;
    padding: 0 0 10px !important;
  }

  body.reader-18mh-page .reader-bookmark-save-btn {
    height: 32px !important;
    padding: 0 12px !important;
    border: 1px solid #ff5656 !important;
    background: #fff !important;
    color: #ff5656 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 30px !important;
  }

  body.reader-18mh-page .reader-bookmark-item {
    display: block !important;
    padding: 12px 8px !important;
    border-bottom: 1px solid #f1f1f1 !important;
    text-decoration: none !important;
    color: #333 !important;
  }

  body.reader-18mh-page .reader-bookmark-item-title {
    display: block !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    word-break: break-word !important;
  }

  body.reader-18mh-page .reader-bookmark-item-meta {
    display: block !important;
    margin-top: 4px !important;
    color: #8d8d8d !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body.reader-18mh-page .reader-bookmark-item.active .reader-bookmark-item-title {
    color: #ff5656 !important;
  }

  body.reader-18mh-page .reader-bookmark-empty {
    padding: 36px 8px !important;
    color: #8d8d8d !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    text-align: center !important;
  }

  body.reader-18mh-page .reader-pop-mask {
    position: fixed !important;
    inset: 0 !important;
    z-index: 26100 !important;
    display: none !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    background: rgba(0, 0, 0, .48) !important;
  }

  body.reader-18mh-page .reader-pop-mask.open {
    display: flex !important;
  }

  body.reader-18mh-page .reader-pop-panel {
    width: min(72vw, 310px) !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #fff !important;
    color: #222 !important;
    box-shadow: -12px 0 34px rgba(0, 0, 0, .18) !important;
    overflow: auto !important;
  }

  body.reader-18mh-page .reader-pop-head {
    height: 50px !important;
    padding: 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #eee !important;
  }

  body.reader-18mh-page .reader-pop-head b {
    color: #222 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  body.reader-18mh-page .reader-pop-head button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #777 !important;
    display: grid !important;
    place-items: center !important;
  }

  body.reader-18mh-page .reader-replace-body,
  body.reader-18mh-page .reader-settings-body {
    padding: 14px 12px !important;
  }

  body.reader-18mh-page .reader-replace-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto 1fr 26px !important;
    gap: 6px !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    font-size: 13px !important;
  }

  body.reader-18mh-page .reader-replace-row input {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    padding: 0 6px !important;
    color: #222 !important;
    background: #fff !important;
  }

  body.reader-18mh-page .reader-replace-row button {
    height: 24px !important;
    border-radius: 50% !important;
    border: 1px solid #aaa !important;
    background: #fff !important;
    color: #777 !important;
    font-weight: 900 !important;
  }

  body.reader-18mh-page .reader-replace-actions,
  body.reader-18mh-page .reader-setting-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
  }

  body.reader-18mh-page .reader-replace-actions button,
  body.reader-18mh-page .reader-setting-actions button {
    flex: 1 !important;
    height: 36px !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    background: #fff !important;
    color: #333 !important;
    font-weight: 800 !important;
  }

  body.reader-18mh-page .reader-replace-actions button:nth-child(2),
  body.reader-18mh-page .reader-setting-actions button:first-child {
    background: #ff5661 !important;
    border-color: #ff5661 !important;
    color: #fff !important;
  }

  body.reader-18mh-page .reader-pop-tip {
    margin-top: 14px !important;
    color: #333 !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  body.reader-18mh-page .reader-setting-line {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    color: #222 !important;
    font-size: 13px !important;
  }

  body.reader-18mh-page .reader-theme-dot {
    width: 23px !important;
    height: 23px !important;
    border-radius: 50% !important;
    border: 1px solid #d8d8d8 !important;
    background: var(--dot) !important;
    padding: 0 !important;
    position: relative !important;
  }

  body.reader-18mh-page .reader-theme-dot.active {
    border-color: var(--ring, #ff5661) !important;
    box-shadow: 0 0 0 2px rgba(255, 86, 97, .18) !important;
  }

  body.reader-18mh-page .reader-font-btn {
    width: 42px !important;
    height: 36px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #ff5661 !important;
    color: #fff !important;
    font-weight: 900 !important;
  }

  body.reader-18mh-page .reader-setting-line em {
    font-style: normal !important;
    font-size: 14px !important;
    min-width: 20px !important;
    text-align: center !important;
    color: #222 !important;
  }

  body.reader-18mh-page .nv-content {
    background: var(--reader-bg, #fff) !important;
    color: var(--reader-text, #333) !important;
  }

  body.reader-18mh-page .nv-content p {
    color: var(--reader-text, #333) !important;
  }

  body.reader-18mh-page .h5-drawer {
    width: min(84vw, 330px) !important;
    background: #fff !important;
    color: #333 !important;
    box-shadow: 16px 0 38px rgba(0, 0, 0, .18) !important;
  }

  body.reader-18mh-page .h5-drawer-head {
    height: 50px !important;
    padding: 0 12px !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid #eee !important;
  }

  body.reader-18mh-page .h5-drawer-head-close {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #f5f5f5 !important;
    color: #555 !important;
    display: grid !important;
    place-items: center !important;
  }

  body.reader-18mh-page .h5-drawer-logo {
    flex: 1 1 auto !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #333 !important;
  }

  body.reader-18mh-page .h5-drawer-nav {
    padding: 12px !important;
  }

  body.reader-18mh-page .h5-dnav-toggle {
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    background: #f8f8f8 !important;
    color: #333 !important;
  }

  body.reader-18mh-page .h5-dnav-children {
    padding: 8px 0 10px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.reader-18mh-page .h5-dnav-child,
  body.reader-18mh-page .h5-dnav-item {
    margin: 0 !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    color: #333 !important;
    text-align: center !important;
    font-size: 13px !important;
  }

  .ot-search-box,
  .ot-lite-search-box,
  .h5-drawer-search form,
  .h5-search-form {
    min-height: 42px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  .ot-search-box,
  .ot-lite-search-box {
    padding: 0 13px !important;
  }

  .ot-search-box input,
  .ot-lite-search-box input,
  .h5-search-input,
  .h5-drawer-search input {
    background: transparent !important;
    border: 0 !important;
    color: rgba(255,255,255,.94) !important;
    font-size: 14px !important;
    outline: 0 !important;
  }

  .ot-search-btn,
  .ot-lite-search-btn,
  .h5-search-submit,
  .h5-drawer-search button {
    height: 40px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--accent-gradient) !important;
    color: #fff !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(121, 207, 255, .16) !important;
  }
}

@media (max-width: 768px) {
  body.reader-18mh-page {
    --reader-font-size: 17px !important;
    --reader-line-height: 1.72 !important;
  }

  body.reader-18mh-page .reader-topbar {
    min-height: 52px !important;
    height: auto !important;
    padding: 2px 4px 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  body.reader-18mh-page .reader-top-left,
  body.reader-18mh-page .reader-top-right {
    gap: 8px !important;
    padding-top: 0 !important;
  }

  body.reader-18mh-page .reader-top-btn,
  body.reader-18mh-page .reader-user-btn {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  body.reader-18mh-page .reader-top-btn i,
  body.reader-18mh-page .reader-user-btn i {
    font-size: 20px !important;
  }

  body.reader-18mh-page .reader-back-btn i {
    font-size: 22px !important;
  }

  body.reader-18mh-page .reader-top-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.reader-18mh-page .reader-top-title--clamp2 {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.reader-18mh-page .h5-drawer-overlay {
    z-index: 32000 !important;
  }

  body.reader-18mh-page .h5-drawer {
    z-index: 32100 !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.reader-18mh-page .h5-drawer-nav {
    padding-bottom: 84px !important;
  }

  body.reader-18mh-page .h5-drawer-head-close {
    width: 38px !important;
    height: 38px !important;
    background: #fff1f2 !important;
    border: 1px solid #ffd5da !important;
    color: #ff5a66 !important;
    box-shadow: none !important;
  }

  body.reader-18mh-page .h5-drawer-search {
    position: sticky !important;
    bottom: 0 !important;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
  }

  body.reader-18mh-page .nv-bottom-nav,
  body.reader-18mh-page .mr-bottom-nav {
    z-index: 18000 !important;
  }

  body.reader-18mh-page .nv-content {
    font-size: var(--reader-font-size, 17px) !important;
    line-height: var(--reader-line-height, 1.72) !important;
    padding-top: 8px !important;
  }

  body.reader-18mh-page .nv-content p {
    margin-bottom: 13px !important;
  }

  .ot-search,
  .ot-lite-search {
    padding: 10px 14px 12px !important;
  }

  .ot-search-form,
  .ot-lite-search-form,
  .h5-search-form,
  .search-form {
    gap: 6px !important;
  }

  .ot-search-box,
  .ot-lite-search-box,
  .h5-search-form,
  .search-form {
    height: 42px !important;
    padding: 0 4px 0 14px !important;
    border-radius: 8px !important;
    background: #151a22 !important;
    border: 1px solid #202733 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
  }

  .ot-search-box input,
  .ot-lite-search-box input,
  .h5-search-input,
  .search-form input {
    height: 100% !important;
    padding: 0 !important;
    color: #dbe3ee !important;
    font-size: 13px !important;
  }

  .ot-search-box input::placeholder,
  .ot-lite-search-box input::placeholder,
  .h5-search-input::placeholder,
  .search-form input::placeholder {
    color: #7d8795 !important;
  }

  .ot-search-btn,
  .ot-lite-search-btn,
  .h5-search-submit,
  .search-form button {
    height: 36px !important;
    min-width: 54px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    background: #8b63e6 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    box-shadow: 0 10px 22px rgba(79, 45, 148, .22) !important;
  }

  .ot-search-btn:hover,
  .ot-lite-search-btn:hover,
  .h5-search-submit:hover,
  .search-form button:hover {
    background: #966ef0 !important;
  }

  .ot-search-btn:active,
  .ot-lite-search-btn:active,
  .h5-search-submit:active,
  .search-form button:active {
    background: #7e57d6 !important;
  }

  .ot-lite-top--flush{margin-left:-4px!important;margin-right:-4px!important;border-radius:0!important;}
  .ot-lite-top--flush .ot-lite-tabs--flush{display:flex!important;gap:0!important;overflow:hidden!important;flex-wrap:nowrap!important;padding:0!important;}
  .ot-lite-top--flush .ot-lite-tab{flex:1 1 0%!important;height:44px!important;padding:0!important;border:none!important;border-radius:0!important;background:transparent!important;font-size:15px!important;color:rgba(255,255,255,.75)!important;}
  .ot-lite-top--flush .ot-lite-tab.active{color:#fff!important;}
  .ot-lite-top--flush .ot-lite-search--flush{padding:10px 12px 12px!important;}
}

@media (max-width: 768px) {
  .container,
  .main-wrap,
  body.reader-18mh-page .container,
  body.reader-18mh-page .main-wrap {
    max-width: 100% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  body.reader-18mh-page {
    max-width: 100% !important;
    margin: 0 !important;
  }

  body.reader-18mh-page .nv-reader,
  body.reader-18mh-page .manga-reader,
  body.reader-18mh-page .reader-topbar,
  body.reader-18mh-page .reader-topbar-inflow,
  body.reader-18mh-page .h5-actions-panel,
  body.reader-18mh-page .nv-bottom-nav,
  body.reader-18mh-page .mr-bottom-nav {
    max-width: 100% !important;
  }

  body.reader-18mh-page .reader-topbar-inflow {
    width: calc(100% + 8px) !important;
    margin: -10px -4px 0 !important;
  }

  body.reader-18mh-page .h5-drawer-overlay {
    z-index: 32000 !important;
  }

  body.reader-18mh-page .h5-drawer {
    z-index: 32100 !important;
    width: min(88vw, 350px) !important;
    display: flex !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
  }

  .h5-drawer,
  body.reader-18mh-page .h5-drawer {
    background: linear-gradient(180deg, #fbfbfd 0%, #f3f4f8 100%) !important;
    color: #111827 !important;
    box-shadow: 18px 0 40px rgba(15, 23, 42, .16) !important;
  }

  .h5-drawer-overlay,
  body.reader-18mh-page .h5-drawer-overlay {
    background: rgba(15, 23, 42, .42) !important;
  }

  .h5-drawer-head,
  body.reader-18mh-page .h5-drawer-head {
    padding: 12px 14px !important;
    background: rgba(255, 255, 255, .78) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .20) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .h5-drawer-body,
  body.reader-18mh-page .h5-drawer-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .h5-drawer-nav,
  body.reader-18mh-page .h5-drawer-nav {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 14px 14px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .h5-dnav-group,
  body.reader-18mh-page .h5-dnav-group {
    padding: 8px 12px 10px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, .88) !important;
    border: 1px solid rgba(226, 232, 240, .95) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05) !important;
  }

  .h5-dnav-toggle,
  body.reader-18mh-page .h5-dnav-toggle {
    min-height: 46px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  .h5-dnav-toggle span,
  body.reader-18mh-page .h5-dnav-toggle span {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .h5-dnav-toggle span i,
  body.reader-18mh-page .h5-dnav-toggle span i {
    font-size: 19px !important;
    color: #64748b !important;
  }

  .h5-dnav-arrow,
  body.reader-18mh-page .h5-dnav-arrow {
    font-size: 20px !important;
    color: #94a3b8 !important;
  }

  .h5-dnav-children,
  .h5-dnav-children-flow,
  body.reader-18mh-page .h5-dnav-children,
  body.reader-18mh-page .h5-dnav-children-flow {
    gap: 10px 12px !important;
    padding: 10px 2px 2px !important;
  }

  .h5-dnav-children-grid3,
  body.reader-18mh-page .h5-dnav-children-grid3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
  }

  .h5-dnav-child,
  body.reader-18mh-page .h5-dnav-child {
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #374151 !important;
    white-space: nowrap !important;
  }

  .h5-dnav-item,
  body.reader-18mh-page .h5-dnav-item {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2px !important;
    text-align: left !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
  }

  body.reader-18mh-page .reader-top-btn,
  body.reader-18mh-page .reader-user-btn {
    width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    color: #8b8b93 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.reader-18mh-page .reader-top-btn i,
  body.reader-18mh-page .reader-user-btn i {
    font-size: 22px !important;
  }

  body.reader-18mh-page .nv-bottom-nav,
  body.reader-18mh-page .mr-bottom-nav {
    display: flex !important;
    z-index: 18000 !important;
    background: #f8fafc !important;
    border-top: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .18) !important;
  }

  body.reader-18mh-page .bottom-nav {
    display: none !important;
  }

  body.reader-18mh-page .h5-back-top {
    background: var(--accent-gradient) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: 0 14px 28px rgba(127, 138, 255, .28) !important;
  }

  body.reader-18mh-page .h5-back-top::before {
    border: 0 !important;
    background: #fff !important;
    clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
    -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  }
}