@media (max-width: 991.98px) { body.home-page { padding-top: 64px; } }
:root {
      --bg: #191c1f;
      --bg2: #24272b;
      --bg3: #2d3035;
      --card: #303338;
      --card2: #34383d;
      --ink: #d7dbe0;
      --muted: #8e959e;
      --muted2: #69717b;
      --rule: #3b3f45;
      --rule2: #454a51;
      --accent: #f1404b;
      --accent2: #ff8a18;
      --green: #36c275;
      --blue: #2688ff;
      --cyan: #2fc0d2;
      --purple: #8d6cff;
      --yellow: #ffb62e;
      --side-w: 150px;
      --radius: 5px;
      --nav-icon: 1.2em;
      --top-icon: 1.2em;
      --card-icon: 40px;
      --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font);
      font-size: 14px;
      line-height: 1.5;
      padding-top: 80px;
    }

    a {
      color: #b4b8bf;
      text-decoration: none;
      transition: color .18s ease, background-color .18s ease, border-color .18s ease;
    }

    a:hover {
      color: var(--accent);
    }
    button, input { font: inherit; }

    .topbar {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 100;
      height: 80px;
      padding: 10px 0;
      background: #212120;
      border-bottom: 0;
    }

    .topbar-inner {
      max-width: 1400px;
      width: 1400px;
      max-width: calc(100% - 20px);
      height: 60px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 0 18px;
      border-radius: 5px;
      background: transparent;
      backdrop-filter: blur(15px);
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: 168px;
      color: var(--accent);
      font-size: 22px;
      font-weight: 700;
      letter-spacing: .2px;
      line-height: 60px;
      white-space: nowrap;
    }

    .logo-mark {
      position: relative;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 62% 36%, #fff 0 6px, transparent 7px),
        conic-gradient(from -28deg, var(--accent) 0 67%, transparent 67% 79%, var(--accent2) 79% 100%);
      box-shadow: 0 2px 10px rgba(0,0,0,.18);
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      left: 16px;
      top: 10px;
      width: 6px;
      height: 18px;
      border-radius: 4px;
      background: #fff;
    }

    .topnav {
      display: flex;
      gap: 2px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .topnav li {
      position: relative;
    }

    .topnav a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 60px;
      padding: 0 11px;
      color: #b4b8bf;
      font-size: 16px;
      font-family: var(--font);
      font-weight: 400;
      transition: color .18s ease, background .18s ease;
    }

    .topnav a:hover,
    .topnav a.active {
      color: var(--accent);
      background: transparent;
    }

    .topnav li::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 20px;
      height: 4px;
      border-radius: 4px;
      background: var(--accent);
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity .18s ease;
    }

    .topnav li:has(a.active)::after,
    .topnav li:hover::after {
      opacity: 1;
    }

    .top-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 12px;
      color: #b4b8bf;
      font-size: 14px;
      font-family: var(--font);
    }

    .top-tool {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #b4b8bf;
      font-size: 14px;
      white-space: nowrap;
    }

    .top-tool:hover {
      color: var(--accent);
    }

    .hero {
      height: 270px;
      margin-top: -80px;
      padding-top: 80px;
      background:
        linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.68)),
        radial-gradient(circle at 8% 35%, rgba(255,48,72,.24), transparent 22%),
        radial-gradient(circle at 33% 20%, rgba(255,138,24,.18), transparent 21%),
        radial-gradient(circle at 78% 42%, rgba(38,136,255,.2), transparent 26%),
        linear-gradient(90deg, #181818, #36312e 30%, #202226 65%, #171717);
      position: relative;
      overflow: hidden;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.05) 0 1px, transparent 1px);
      background-size: 96px 72px;
      opacity: .38;
    }

    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(90deg, transparent 0 130px, rgba(255,255,255,.04) 131px 132px);
      opacity: .65;
    }

    .search-wrap {
      position: relative;
      z-index: 1;
      width: 800px;
      margin: 0 auto;
      padding-top: 110px;
      display: grid;
      grid-template-columns: 1fr 50px;
    }

    .search-wrap input {
      height: 50px;
      border: 0;
      outline: 0;
      padding: 9px 20px;
      color: #d9dde2;
      background: #24282d;
      border-radius: var(--radius) 0 0 var(--radius);
      font-size: 16px;
      box-shadow: none !important;
    }

    .search-wrap input::placeholder { color: #737b84; }

    .search-wrap button {
      height: 50px;
      border: 0;
      background: var(--accent);
      color: #fff;
      border-radius: 0 var(--radius) var(--radius) 0;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background-color .2s ease, color .2s ease;
    }

    .search-wrap button:hover {
      background: #d12768;
      color: #fff;
    }

    .search-wrap button svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .page {
      width: 1400px;
      max-width: calc(100% - 20px);
      margin: 16px auto 0;
      display: grid;
      grid-template-columns: var(--side-w) minmax(0, 1fr);
      gap: 15px;
      align-items: start;
      transition: grid-template-columns .22s ease;
    }

    body.nav-collapsed {
      --side-w: 60px;
    }

    @media (min-width: 768px) {
      body.aside-stopped .side {
        height: var(--aside-stop-height, 150px);
        max-height: var(--aside-stop-height, 150px);
        min-height: 46px;
      }
    }

    .side {
      grid-column: 1;
      grid-row: 1;
      position: sticky;
      top: 96px;
      height: 600px;
      max-height: calc(100vh - 101px);
      min-height: 150px;
      background: #2d2e2f;
      border-radius: var(--radius);
      border-right: 0;
      color: #9ca3ad;
      transition: width .22s ease, height .22s ease, max-height .22s ease;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .side-list {
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .side a {
      display: flex;
      align-items: center;
      gap: 10px;
      height: 44px;
      padding: 8px 11px;
      border-radius: 3px;
      overflow: hidden;
      white-space: nowrap;
      font-size: 15px;
      color: #b4b8bf;
      transition: background .16s ease, color .16s ease;
    }

    .side a:hover,
    .side a.active {
      background: #2c3035;
      color: #fff;
    }

    .nav-ico {
      flex: 0 0 var(--nav-icon);
      width: var(--nav-icon);
      height: var(--nav-icon);
      display: grid;
      place-items: center;
      color: #aab1ba;
      font-size: 1.2em;
      vertical-align: -0.1em;
    }

    .nav-ico svg *,
    .topnav svg *,
    .top-right svg *,
    .notice > svg *,
    .collapse-btn svg *,
    .mobile-menu svg *,
    .backtop svg *,
    .search-wrap button svg * {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    body.side-following .side {
      height: 890px;
      max-height: calc(100vh - 101px);
    }

    .nav-ico svg {
      width: var(--nav-icon);
      height: var(--nav-icon);
    }

    .topnav svg,
    .top-right svg {
      width: var(--top-icon);
      height: var(--top-icon);
      flex: 0 0 var(--top-icon);
      font-size: 1em;
      vertical-align: -0.1em;
    }

    .side a.active .nav-ico,
    .side a:hover .nav-ico {
      color: var(--accent);
    }

    body.nav-collapsed .side a {
      justify-content: center;
      width: 40px;
      padding: 0;
    }

    body.nav-collapsed .side-list {
      padding: 10px;
      align-items: center;
    }

    body.nav-collapsed .side-bottom {
      padding: 11px 10px 5px;
      align-items: flex-end;
    }

    body.nav-collapsed .side-text {
      width: 0;
      opacity: 0;
      overflow: hidden;
    }

    .side-bottom {
      margin-top: auto;
      padding: 11px 22px 5px 25px;
      border-top: 0;
      flex: 0 0 auto;
      min-height: 46px;
      display: flex;
      align-items: flex-end;
      position: relative;
    }

    .side-bottom::before {
      content: "";
      position: absolute;
      left: 28px;
      right: 28px;
      top: 0;
      height: 1px;
      background: #3b3f45;
    }

    .collapse-btn {
      width: 100%;
      height: 30px;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #a8adb5;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 11px;
      cursor: pointer;
      font-size: 15px;
      line-height: 30px;
      padding: 0;
      font-family: var(--font);
      font-weight: 400;
    }

    .collapse-btn:hover { color: #fff; background: transparent; }
    .collapse-btn svg { transition: transform .2s ease; }
    .collapse-btn svg {
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      font-size: 22px;
      vertical-align: -0.1em;
    }
    .collapse-btn .collapse-mark {
      fill: currentColor;
      stroke: none;
    }
    .collapse-btn .collapse-line {
      fill: none;
      stroke: currentColor;
      stroke-width: 2.2;
      stroke-linecap: round;
    }
    body.nav-collapsed .collapse-btn svg { transform: rotate(180deg); }
    body.nav-collapsed .collapse-label { display: none; }
    body.nav-collapsed .collapse-btn {
      justify-content: center;
    }
    body.nav-collapsed .side-bottom::before {
      left: 10px;
      right: 10px;
    }

    .main {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
    }

    .notice {
      min-height: 78px;
      margin-bottom: 16px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--rule);
      background: #3c3c3c;
      color: #b4b8bf;
      border-radius: var(--radius);
      font-size: 14px;
      position: relative;
      align-items: flex-start;
      flex-direction: column;
    }

    .notice > svg {
      position: absolute;
      left: 16px;
      top: 14px;
      width: var(--top-icon);
      height: var(--top-icon);
      color: #b4b8bf;
    }

    .notice > span {
      padding-left: 22px;
      line-height: 18px;
    }

    .notice::after {
      content: "欢迎入驻！";
      color: #8f949b;
      font-size: 14px;
      line-height: 22px;
    }

    .notice .ad {
      margin-left: auto;
      position: absolute;
      right: 12px;
      top: 10px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      height: 28px;
      padding: 0 12px;
      border-radius: 4px;
      color: var(--accent2);
      border: 1px solid var(--accent2);
      font-size: 14px;
      background: transparent;
      font-weight: 600;
    }

    .notice .ad span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 16px;
      min-width: 20px;
      padding: 0 4px;
      border: 1px solid currentColor;
      border-radius: 2px;
      font-size: 10px;
      line-height: 1;
    }

    .module {
      margin-bottom: 16px;
      border: 0;
      border-radius: var(--radius);
      background: var(--bg2);
      overflow: hidden;
    }

    .module-head {
      height: 34px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #c8cdd3;
      font-weight: 700;
      font-size: 16px;
    }

    @media (min-width: 992px) {
      .module-head::after {
        content: "";
        order: 2;
        height: 1px;
        margin: 1px 10px 0 4px;
        flex: 1 1 auto;
        background: var(--rule);
        transform: scaleX(0);
        transform-origin: left center;
        opacity: 0;
        transition: transform .48s ease, opacity .18s ease;
        pointer-events: none;
      }

      .module:hover .module-head::after {
        transform: scaleX(1);
        opacity: 1;
      }

      .module-head .more {
        order: 3;
        margin-left: 0;
      }
    }

    .module-head .dot {
      width: 5px;
      height: 14px;
      border-radius: 4px;
      background: var(--accent);
      box-shadow: 7px 5px 0 rgba(255,48,72,.55);
      transform: rotate(38deg);
      margin-right: 5px;
    }

    .module-head .more {
      margin-left: auto;
      color: #727982;
      font-size: 13px;
      font-weight: 400;
    }

    .site-grid {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 10px;
      padding: 8px 16px 16px;
    }

    .site-card {
      min-height: 82px;
      padding: 10px 10px 34px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: var(--card);
      border: 0;
      border-radius: 5px;
      transition: background .16s ease, transform .16s ease;
      position: relative;
      overflow: hidden;
    }

    .site-card:hover {
      background: var(--card2);
      transform: translateY(-1px);
    }

    #hot .site-card {
      min-height: 96px;
      padding-bottom: 38px;
    }

    .site-card:hover .site-meta h3,
    .friend a:hover,
    .module-head .more:hover {
      color: var(--accent);
    }

    .site-card:hover .site-icon {
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        0 0 0 4px rgba(255,255,255,.035),
        0 8px 18px rgba(241,64,75,.22);
      filter: brightness(1.12) saturate(1.08);
    }

    .site-card:hover .site-icon::before {
      opacity: 1;
      transform: translateX(34px) rotate(28deg);
    }

    .site-icon {
      flex: 0 0 var(--card-icon);
      width: var(--card-icon);
      height: var(--card-icon);
      border-radius: 9px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--accent);
      font-size: 13px;
      font-weight: 800;
      overflow: hidden;
      position: relative;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.12);
      transition: box-shadow .18s ease, filter .18s ease;
    }

    .site-icon::before {
      content: "";
      position: absolute;
      left: -28px;
      top: -10px;
      width: 16px;
      height: 60px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
      opacity: 0;
      transform: translateX(0) rotate(28deg);
      transition: opacity .18s ease, transform .38s ease;
      pointer-events: none;
    }

    .site-icon::after {
      content: none;
    }

    .site-icon span {
      display: block;
      max-width: 34px;
      overflow: hidden;
      text-align: center;
      white-space: nowrap;
      line-height: 1;
      text-overflow: ellipsis;
      transform: translateY(.5px);
    }
    .site-icon.red { background: #e41e35; }
    .site-icon.blue { background: #2678d9; }
    .site-icon.green { background: #19a567; }
    .site-icon.orange { background: #f28b1c; }
    .site-icon.purple { background: #7657d9; }
    .site-icon.gray { background: #68717c; }
    .site-icon.cyan { background: #2aa9bd; }

    .site-meta {
      min-width: 0;
      flex: 1 1 auto;
    }

    .site-meta h3 {
      margin: 0 0 4px;
      color: #d6dbe1;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .site-meta small {
      display: block;
      color: #7c838d;
      font-size: 12px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .site-meta p {
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 32px;
      margin: 0;
      padding: 0;
      color: #757d86;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-top: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    #hot .site-meta p {
      height: 34px;
      border-top: 1px solid #3f4349;
    }

    .site-meta b {
      color: var(--accent);
      font-weight: 500;
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      max-width: 88px;
      height: 20px;
      line-height: 20px;
      padding: 0 6px;
      border-radius: 3px;
      background: rgba(255,48,72,.12);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .site-meta b::before {
      content: "";
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      background: currentColor;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h7l2 2h9v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zM3 4h8l2 2H3z'/%3E%3C/svg%3E") center/contain no-repeat;
    }

    .site-meta p::after {
      content: "›";
      margin-left: auto;
      width: 16px;
      height: 16px;
      border: 1px solid #777e87;
      border-radius: 50%;
      color: #9ba2aa;
      display: inline-grid;
      place-items: center;
      font-size: 14px;
      line-height: 1;
    }

    .friend {
      padding: 14px 18px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px 18px;
      background: #2d2e2f;
      color: #b4b8bf;
      font-size: 14px;
      line-height: 1.7;
    }

    .friend a {
      color: #b4b8bf;
    }

    #rank {
      width: 1400px;
      max-width: calc(100vw - 20px);
      margin: 16px auto 0;
    }
    #rank .cleanup-empty { color: #79838e; font-size: 12px; }
    @media(max-width:767.98px) {
      #rank .cleanup-head { flex-wrap: wrap; align-items: center; gap: 7px; }
      #rank #lowTrafficTitle { flex: 0 1 auto; font-size: 14px; white-space: nowrap; }
      #rank .cleanup-note { flex: 0 0 calc(100% - 25px); width: calc(100% - 25px); margin: 0 0 6px 25px; font-size: 11px; line-height: 1.7; }
    }

    .footer {
      width: 1400px;
      max-width: calc(100% - 20px);
      margin: 16px auto 34px;
      color: #5f666e;
      text-align: center;
      font-size: 12px;
    }

    .backtop {
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 2px;
      background: #30343a;
      color: #9da5ad;
      border: 1px solid #3b4148;
    }

    .backtop:hover {
      color: #fff;
      background: var(--accent);
    }

    @media (max-width: 1199.98px) and (min-width: 768px) {
      .site-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 991.98px) and (min-width: 768px) {
      .site-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 767.98px) {
      body {
        min-width: 0;
        padding-top: 0;
        background: #171a1d;
        color: #b9bec6;
        font-size: 14px;
        font-weight: 400;
      }
      .topbar {
        position: absolute;
        height: 64px;
        padding: 0;
        background: transparent;
        pointer-events: none;
      }
      .topbar-inner,
      .page,
      .footer {
        width: 100%;
      }
      .topbar-inner {
        position: relative;
        height: 64px;
        max-width: none;
        padding: 0;
        border-radius: 0;
        background: #202122;
        box-shadow: 0 5px 16px rgba(0,0,0,.24);
        pointer-events: auto;
      }
      .topnav,
      .top-right {
        display: none;
      }
      .topbar-inner::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 22px;
        height: 22px;
        transform: translateY(-50%);
        color: #b7bcc4;
        background: currentColor;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
      }
      .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        min-width: 0;
        gap: 8px;
        line-height: 1;
        transform: translate(-50%, -50%);
        font-size: 20px;
        font-weight: 700;
        color: #ff2434;
      }
      .logo-mark {
        width: 31px;
        height: 31px;
      }
      .logo-mark::after {
        left: 13px;
        top: 8px;
        width: 5px;
        height: 15px;
      }
      .logo > span:last-child {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        gap: 3px;
        letter-spacing: .5px;
      }
      .logo > span:last-child::after {
        content: "YSDH.TV";
        display: block;
        text-align: center;
        color: #ff2434;
        font-size: 7px;
        line-height: 1;
        letter-spacing: 1.6px;
        font-weight: 600;
      }
      .hero {
        height: 184px;
        margin-top: 0;
        padding: 84px 12px 0;
        background:
          linear-gradient(rgba(4,5,6,.64), rgba(7,8,9,.84)),
          radial-gradient(circle at 12% 24%, rgba(201,29,39,.45) 0 12px, transparent 13px),
          radial-gradient(circle at 36% 38%, rgba(245,161,32,.38) 0 18px, transparent 19px),
          radial-gradient(circle at 68% 28%, rgba(32,107,201,.35) 0 18px, transparent 19px),
          radial-gradient(circle at 86% 58%, rgba(151,31,42,.42) 0 20px, transparent 21px),
          repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 74px),
          repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 72px),
          linear-gradient(135deg, #111315 0 18%, #302824 18% 36%, #14171a 36% 54%, #2b211e 54% 72%, #121416 72% 100%);
      }
      .hero::before {
        opacity: .36;
        background:
          linear-gradient(135deg, rgba(255,255,255,.18), transparent 34%),
          repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 76px),
          repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 72px);
        background-size: 76px 72px;
        mix-blend-mode: screen;
      }
      .hero::after {
        opacity: 1;
        background: linear-gradient(to bottom, transparent 0, rgba(23,26,29,0) 74%, #171a1d 100%);
      }
      .search-wrap {
        width: 100%;
        height: 48px;
        padding-top: 0;
        grid-template-columns: minmax(0, 1fr) 50px;
        border-radius: 5px;
        box-shadow: 0 8px 18px rgba(0,0,0,.22);
      }
      .search-wrap input {
        height: 48px;
        padding: 8px 18px;
        border-radius: 5px 0 0 5px;
        background: #282b2e;
        color: #c6cbd2;
        font-size: 16px;
        font-weight: 400;
      }
      .search-wrap input::placeholder {
        color: #747b83;
      }
      .search-wrap button {
        height: 48px;
        border-radius: 0 5px 5px 0;
        background: #f1404b;
      }
      .search-wrap button svg {
        width: 23px;
        height: 23px;
      }
      .page {
        margin-top: 0;
        display: block;
        max-width: none;
        background: #171a1d;
      }
      .side {
        position: fixed;
        inset: 92px auto 12px 12px;
        z-index: 110;
        width: 251px;
        height: auto;
        max-height: none;
        min-height: 0;
        border-radius: 4px;
        background: #252727;
        transform: translateX(calc(-100% - 24px));
        transition: transform .22s ease;
        box-shadow: 12px 0 28px rgba(0,0,0,.28);
      }
      body.mobile-open .side {
        transform: translateX(0);
      }
      body.nav-collapsed .side {
        transform: translateX(-100%);
      }
      body.mobile-side-open .side {
        transform: translateX(0);
      }
      .side-list {
        padding: 18px 22px 12px;
        gap: 1px;
      }
      .side a {
        height: 43px;
        padding: 0;
        gap: 15px;
        background: transparent;
        color: #b9bec6;
        font-size: 15px;
        font-weight: 400;
      }
      .side a:hover,
      .side a.active {
        background: transparent;
        color: #d5d9de;
      }
      .nav-ico {
        --nav-icon: 19px;
        color: #b9bec6;
      }
      .side-bottom {
        padding: 11px 34px 18px;
      }
      .side-bottom::before {
        left: 34px;
        right: 34px;
      }
      .collapse-btn {
        height: 34px;
        color: #b9bec6;
        font-size: 16px;
      }
      .main {
        padding: 24px 12px 12px;
        background: #171a1d;
      }
      .notice {
        min-height: 42px;
        height: 42px;
        margin: 0 0 27px;
        padding: 0 10px;
        border: 0;
        border-radius: 5px;
        background: #2a2c2e;
        color: #b8bec6;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 500;
      }
      .notice::after {
        content: none;
      }
      .notice > svg {
        position: static;
        width: 17px;
        height: 17px;
        color: #b8bec6;
      }
      .notice > span {
        padding-left: 0;
        line-height: 42px;
      }
      .notice .ad {
        right: 10px;
        top: 8px;
        height: 26px;
        padding: 0 10px;
        border-radius: 6px;
        color: #ff8a18;
        border-color: #ff8a18;
        font-size: 13px;
        font-weight: 600;
        background: transparent;
      }
      .module {
        margin-bottom: 20px;
        border: 0;
        border-radius: 0;
        background: transparent;
        overflow: visible;
      }
      .module-head {
        height: 22px;
        margin-bottom: 8px;
        padding: 0;
        border: 0;
        color: #bfc4cb;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
      }
      .module-head .dot {
        width: 6px;
        height: 14px;
        margin: 0 9px 0 4px;
        border-radius: 3px;
        background: #f1404b;
        box-shadow: 6px 5px 0 rgba(241,64,75,.78);
      }
      .module-head .more {
        display: none;
      }
      .site-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 11px;
        padding: 0;
      }
      .site-card {
        min-height: 68px;
        height: 68px;
        padding: 0 12px;
        gap: 10px;
        border: 0;
        border-radius: 5px;
        background: #2b2d2f;
        box-shadow: none;
      }
      #hot .site-card {
        min-height: 68px;
        height: 68px;
        padding: 0 12px;
      }
      .site-card:hover {
        background: #323538;
        transform: none;
      }
      .site-icon {
        --card-icon: 48px;
        font-size: 15px;
        border-radius: 9px;
      }
      .site-meta h3 {
        margin: 0;
        color: #bfc4cb;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 600;
      }
      .site-meta small,
      .site-meta p {
        display: none;
      }
      .friend {
        grid-template-columns: repeat(2, 1fr);
        background: #2b2d2f;
        color: #b4b8bf;
      }
      #rank {
        width: auto;
        max-width: none;
        margin-left: 0;
      }
      .mobile-menu {
        display: grid !important;
        pointer-events: auto;
      }
      body.mobile-top-open .mobile-menu svg {
        display: none;
      }
      body.mobile-top-open .mobile-menu::before {
        content: "×";
        display: block;
        color: #b7bcc4;
        font-size: 40px;
        line-height: 20px;
        font-weight: 300;
      }
      .mobile-top-panel {
        display: block;
      }
      body.mobile-top-open .mobile-top-panel {
        transform: translateX(0);
      }
      .mobile-side-toggle {
        display: grid;
      }

      .mobile-menu {
        position: absolute;
      }
      body.mobile-controls-hidden .mobile-side-toggle,
      body.mobile-controls-hidden .backtop {
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
      }
      body.mobile-top-open .mobile-side-toggle,
      body.mobile-side-open .mobile-side-toggle {
        opacity: 0;
        pointer-events: none;
      }
      .backtop {
        right: 12px;
        bottom: 94px;
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 5px;
        background: rgba(54,56,58,.92);
        color: #c8cdd3;
        transition: opacity .18s ease, transform .18s ease, background .18s ease;
      }
    }

    .mobile-menu {
      position: fixed;
      left: 31px;
      top: 34px;
      z-index: 130;
      width: 24px;
      height: 24px;
      border: 0;
      border-radius: 3px;
      background: transparent;
      color: #b7bcc4;
      place-items: center;
      display: none;
      padding: 0;
    }

    .mobile-top-panel {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 120;
      width: min(365px, 80vw);
      padding: 92px 22px 22px;
      background: #2c2e30;
      transform: translateX(-100%);
      transition: transform .22s ease;
      display: none;
      box-shadow: 12px 0 30px rgba(0,0,0,.35);
    }

    .mobile-top-nav {
      padding: 16px 0;
      border-radius: 5px;
      background: #333537;
    }

    .mobile-top-nav a {
      height: 48px;
      padding: 0 28px;
      display: flex;
      align-items: center;
      gap: 16px;
      color: #bdc2c9;
      font-size: 15px;
      font-weight: 400;
    }

    .mobile-top-nav a svg {
      width: 17px;
      height: 17px;
      flex: 0 0 17px;
    }

    .mobile-user-card {
      height: 66px;
      margin-top: 28px;
      padding: 10px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-radius: 4px;
      color: #fff;
      background: linear-gradient(135deg, #3d65e8 0%, #20b8f3 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .mobile-user-avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: #e8ebef;
      display: grid;
      place-items: center;
      color: #9aa0a8;
      border: 3px solid rgba(255,255,255,.7);
    }

    .mobile-user-title {
      display: block;
      font-size: 17px;
      line-height: 1.15;
      font-weight: 700;
    }

    .mobile-user-desc {
      display: block;
      margin-top: 3px;
      font-size: 13px;
      line-height: 1.15;
      color: rgba(255,255,255,.88);
      font-weight: 400;
    }

    .mobile-auth-row {
      margin-top: 12px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 5px;
    }

    .mobile-auth-row a {
      height: 40px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 400;
      background: #273745;
      color: #28a8ff;
    }

    .mobile-auth-row a:nth-child(2) {
      color: #21d254;
      background: #253b31;
    }

    .mobile-auth-row a:nth-child(3) {
      color: #ff7e18;
      background: #433326;
    }

    .mobile-auth-row svg {
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
    }

    .mobile-side-toggle {
      position: fixed;
      left: 12px;
      right: auto;
      top: auto;
      bottom: 94px;
      z-index: 90;
      width: 46px;
      height: 46px;
      border: 0;
      border-radius: 4px;
      background: rgba(43,45,47,.96);
      color: #c3c8cf;
      place-items: center;
      display: none;
      padding: 0;
      transition: opacity .18s ease, transform .18s ease, background .18s ease;
      box-shadow: 0 3px 10px rgba(0,0,0,.16);
    }

    .mobile-side-toggle:hover {
      background: #34373a;
    }

    .mobile-side-toggle svg {
      width: 22px;
      height: 22px;
    }

    .mobile-top-panel svg *,
    .mobile-side-toggle svg * {
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .mobile-side-toggle svg path[fill="currentColor"] {
      fill: currentColor;
      stroke: none;
    }

    @media (max-width: 767.98px) {
      .mobile-top-panel {
        display: block;
      }

      .mobile-side-toggle {
        display: grid;
      }

      .mobile-menu {
        position: absolute !important;
      }

      body.mobile-top-open > .mobile-top-panel {
        transform: translateX(0) !important;
      }

      body.mobile-side-open .page > .side {
        transform: translateX(0) !important;
      }

      body.mobile-controls-hidden > .mobile-side-toggle,
      body.mobile-controls-hidden > .backtop {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(10px) !important;
      }
    }

    .promo-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}
    .promo-modal.open{display:flex}
    .promo-box{width:560px;max-width:100%;border-radius:8px;background:#2d2e2f;box-shadow:0 24px 70px rgba(0,0,0,.42);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
    .promo-head{height:58px;padding:0 18px;display:flex;align-items:center;gap:10px;background:#252728;color:#f0f3f6;font-size:20px;font-weight:700}
    .promo-head .ad-badge{height:24px;min-width:34px;padding:0 7px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:var(--accent);font-size:13px}
    .promo-close{margin-left:auto;width:32px;height:32px;border:0;border-radius:4px;background:#35383b;color:#b4b8bf;cursor:pointer;font-size:22px;line-height:1}
    .promo-body{padding:18px}
    .promo-note{margin:0 0 14px;color:#aeb4bc;line-height:1.7;background:#252729;border-radius:5px;padding:10px 12px}
    .promo-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
    .promo-plan{position:relative;min-height:94px;padding:14px 10px;border:1px solid #3e4247;border-radius:6px;background:#333537;color:#d9dde2;text-align:center;cursor:pointer}
    .promo-plan:hover,.promo-plan.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(241,64,75,.14)}
    .promo-plan b{display:block;margin-bottom:5px;color:#fff;font-size:17px}.promo-plan strong{display:block;color:var(--accent);font-size:21px;line-height:1.1}.promo-plan small{color:#8f969f}
    .promo-tag{position:absolute;right:8px;top:-8px;height:20px;padding:0 7px;border-radius:10px;background:#ff8a18;color:#fff;font-size:11px;line-height:20px}
    .promo-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.promo-fields input{height:42px;border:0;outline:0;border-radius:5px;background:#252729;color:#d7dbe0;padding:0 12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
    .pay-btn{width:100%;height:44px;margin-top:12px;border:0;border-radius:5px;background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
    @media(max-width:767.98px){.promo-box{width:100%}.promo-body{padding:14px}.promo-plans{gap:7px}.promo-plan{min-height:86px;padding:12px 6px}.promo-plan b{font-size:14px}.promo-plan strong{font-size:18px}.promo-fields{grid-template-columns:1fr}}


    .mobile-cat-toggle,
    .mobile-search-toggle,
    .mobile-category-panel,
    .mobile-search-panel { display: none; }
    @media (max-width: 991.98px) {
      .topbar {
        position: absolute !important;
        height: 64px !important;
        padding: 0 !important;
        background: #202122 !important;
        pointer-events: auto !important;
      }
      .topbar-inner {
        width: 100% !important;
        max-width: none !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
        background: #202122 !important;
        box-shadow: 0 5px 16px rgba(0,0,0,.24) !important;
        pointer-events: auto !important;
      }
      .topbar-inner::after { content: none !important; }
      .topnav,
      .top-right { display: none !important; }
      .topbar .logo {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        min-width: 0 !important;
        height: 64px !important;
        line-height: 64px !important;
        margin: 0 auto !important;
        gap: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        color: #ff2434 !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
      }
      .topbar .logo-mark {
        width: 31px !important;
        height: 31px !important;
        flex: 0 0 31px !important;
      }
      .topbar .logo-mark::after {
        left: 13px !important;
        top: 8px !important;
        width: 5px !important;
        height: 15px !important;
      }
      .mobile-cat-toggle,
      .mobile-search-toggle {
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 5px;
        display: grid;
        place-items: center;
        padding: 0;
        color: #c6ccd4;
        background: transparent;
        cursor: pointer;
        flex: 0 0 38px;
        z-index: 3;
      }
      .mobile-cat-toggle svg,
      .mobile-search-toggle svg,
      .mobile-search-line svg {
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      body.mobile-search-open .mobile-search-toggle svg { display: none; }
      body.mobile-search-open .mobile-search-toggle::before {
        content: "×";
        color: #c6ccd4;
        font-size: 38px;
        line-height: 28px;
        font-weight: 300;
      }
      .mobile-category-panel {
        position: fixed;
        left: 12px;
        right: 12px;
        top: 76px;
        z-index: 220;
        padding: 10px;
        border-radius: 5px;
        background: #262829;
        box-shadow: 0 16px 38px rgba(0,0,0,.35);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      body.mobile-category-open .mobile-category-panel { display: grid; }
      .mobile-category-panel a {
        height: 38px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c5cad1;
        background: #303234;
        font-size: 14px;
      }
      .mobile-category-panel a:hover { color: #fff; background: #383b3e; }
      .mobile-search-panel {
        position: fixed;
        left: 0;
        right: 0;
        top: 64px;
        z-index: 210;
        padding: 14px 12px 16px;
        background: #202122;
        box-shadow: 0 12px 26px rgba(0,0,0,.28);
      }
      body.mobile-search-open .mobile-search-panel { display: block; }
      .mobile-search-form {
        margin: 0;
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        border: 2px solid #f1404b;
        border-radius: 5px;
        overflow: hidden;
        background: #282a2d;
      }
      .mobile-search-tabs {
        display: grid;
        grid-template-columns: 1fr;
        background: #242628;
        border-right: 1px solid #383b3e;
      }
      .mobile-search-tabs button {
        height: 36px;
        border: 0;
        border-bottom: 1px solid #34373a;
        color: #9fa6ae;
        background: transparent;
        font-size: 13px;
        cursor: pointer;
      }
      .mobile-search-tabs button:last-child { border-bottom: 0; }
      .mobile-search-tabs button.active {
        color: #fff;
        background: rgba(241,64,75,.16);
      }
      .mobile-search-line {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 54px;
        min-height: 108px;
      }
      .mobile-search-line input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 0 14px;
        color: #d9dde3;
        background: #282a2d;
        font-size: 15px;
      }
      .mobile-search-line input::placeholder { color: #717983; }
      .mobile-search-line button {
        border: 0;
        display: grid;
        place-items: center;
        color: #fff;
        background: #f1404b;
        cursor: pointer;
      }
      .hero .search-wrap { display: none !important; }
      .mobile-menu,
      .mobile-side-toggle { display: none !important; }
    }


    #hot .site-card {
      box-shadow: inset 0 0 0 1px rgba(241,64,75,.16), 0 8px 20px rgba(0,0,0,.12);
    }
    #hot .site-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(241,64,75,.14), transparent 42%);
      opacity: .65;
      pointer-events: none;
    }
    #hot .site-card::after {
      content: "置顶";
      position: absolute;
      right: 0;
      top: 0;
      z-index: 3;
      height: 23px;
      padding: 0 9px 0 11px;
      border-radius: 0 5px 0 9px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      background: linear-gradient(135deg, #f1404b, #ff8a18);
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 6px 16px rgba(241,64,75,.24);
    }
    #hot .site-card:hover::after {
      background: linear-gradient(135deg, #ff5260, #ff9a2e);
    }


    @media (max-width: 991.98px) {
      .topbar .logo > span:last-child {
        display: inline !important;
        position: static !important;
        flex-direction: row !important;
        gap: 0 !important;
        letter-spacing: .2px !important;
      }
      .topbar .logo > span:last-child::after {
        content: none !important;
        display: none !important;
      }
      .mobile-category-panel {
        display: none;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 12px !important;
      }
      body.mobile-category-open .mobile-category-panel { display: grid !important; }
      .mobile-primary-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }
      .mobile-primary-nav a,
      .mobile-subcats a {
        min-width: 0;
        height: 36px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #c5cad1;
        background: #303234;
        font-size: 13px;
      }
      .mobile-primary-nav a:first-child {
        color: #fff;
        background: rgba(241,64,75,.2);
      }
      .mobile-sub-title {
        padding: 2px 2px 0;
        color: #7d848d;
        font-size: 12px;
      }
      .mobile-subcats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
      }
      .mobile-subcats a {
        height: 32px;
        color: #9fa6ae;
        background: #292b2d;
        font-size: 12px;
      }
      .mobile-subcats a:hover,
      .mobile-primary-nav a:hover {
        color: #fff;
        background: #383b3e;
      }
      .mobile-search-form {
        grid-template-columns: 94px minmax(0, 1fr) !important;
        min-height: 48px !important;
      }
      .mobile-search-select {
        height: 48px;
        display: block;
        position: relative;
        background: #242628;
        border-right: 1px solid #383b3e;
      }
      .mobile-search-select::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 50%;
        width: 7px;
        height: 7px;
        border-right: 1px solid #9fa6ae;
        border-bottom: 1px solid #9fa6ae;
        transform: translateY(-65%) rotate(45deg);
        pointer-events: none;
      }
      .mobile-search-select select {
        width: 100%;
        height: 48px;
        border: 0;
        outline: 0;
        padding: 0 26px 0 13px;
        appearance: none;
        -webkit-appearance: none;
        color: #d8dde3;
        background: transparent;
        font-size: 14px;
      }
      .mobile-search-tabs { display: none !important; }
      .mobile-search-line {
        min-height: 48px !important;
        grid-template-columns: minmax(0, 1fr) 50px !important;
      }
    }

      /* 首页置顶角标低调版 */

    #hot .site-card::before {
      opacity: .28 !important;
      background: linear-gradient(135deg, rgba(241,64,75,.09), transparent 46%) !important;
    }
    #hot .site-card::after {
      height: 18px !important;
      padding: 0 7px !important;
      border-radius: 0 5px 0 7px !important;
      color: #f2c6ca !important;
      background: rgba(241,64,75,.15) !important;
      border-left: 1px solid rgba(241,64,75,.22) !important;
      border-bottom: 1px solid rgba(241,64,75,.18) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: .5px !important;
      box-shadow: none !important;
    }
    #hot .site-card:hover::after {
      color: #fff !important;
      background: rgba(241,64,75,.28) !important;
    }


    .mobile-search-select select,
    .mobile-search-select select option {
      color-scheme: dark;
      color: #d8dde3 !important;
      background: #242628 !important;
    }


    /* 首页置顶角标信息页色系修正版 */
    #hot .site-card::before {
      opacity: .16 !important;
      background: linear-gradient(135deg, rgba(241,64,75,.06), transparent 48%) !important;
    }
    #hot .site-card::after {
      height: 18px !important;
      padding: 0 7px !important;
      border-radius: 0 5px 0 7px !important;
      color: #d89096 !important;
      background: rgba(241,64,75,.08) !important;
      border-left: 1px solid rgba(241,64,75,.12) !important;
      border-bottom: 1px solid rgba(241,64,75,.10) !important;
      font-size: 10px !important;
      font-weight: 500 !important;
      letter-spacing: .4px !important;
      box-shadow: none !important;
    }
    #hot .site-card:hover::after {
      color: #f1404b !important;
      background: rgba(241,64,75,.13) !important;
    }
    #hot .site-card::after { content: none !important; display: none !important; }


    /* 首页移动端链接尺寸修正版 */
    @media (max-width: 991.98px) {
      .site-grid {
        gap: 8px !important;
      }
      .site-card,
      #hot .site-card {
        min-height: 58px !important;
        height: 58px !important;
        padding: 0 9px !important;
        gap: 8px !important;
        border-radius: 5px !important;
      }
      .site-icon {
        --card-icon: 38px !important;
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
      }
      .site-meta h3 {
        font-size: 13px !important;
      }
      .mobile-menu,
      .mobile-side-toggle,
      .mobile-top-panel {
        display: none !important;
      }
      .mobile-search-toggle {
        display: grid !important;
        margin-left: 0 !important;
      }
    }


    /* 首页移动端分类与置顶最终修正版 */
    #hot .site-card::before {
      opacity: .08 !important;
      background: linear-gradient(135deg, rgba(255,255,255,.04), transparent 48%) !important;
    }
    #hot .site-card::after {
      content: "• 置顶" !important;
      top: 7px !important;
      right: 8px !important;
      height: auto !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      color: #aab1ba !important;
      background: transparent !important;
      font-size: 10px !important;
      font-weight: 500 !important;
      line-height: 1 !important;
      letter-spacing: .2px !important;
      box-shadow: none !important;
    }
    #hot .site-card:hover::after {
      color: #d89096 !important;
      background: transparent !important;
    }
    @media (max-width: 991.98px) {
      .mobile-category-panel {
        grid-template-columns: 1fr !important;
      }
      .mobile-primary-nav {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
      }
      .mobile-sub-title,
      .mobile-subcats {
        display: none !important;
      }
      .mobile-top-panel,
      .mobile-menu {
        display: none !important;
      }
      .mobile-side-toggle {
        display: grid !important;
        left: auto !important;
        right: 12px !important;
        bottom: 148px !important;
        z-index: 120 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }
      .backtop {
        display: grid !important;
        right: 12px !important;
        bottom: 94px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }
      body.mobile-side-open .mobile-side-toggle {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        background: rgba(52,55,58,.96) !important;
      }
      body.mobile-controls-hidden > .mobile-side-toggle,
      body.mobile-controls-hidden > .backtop {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
      }
    }


    /* 首页最终视觉统一修正 */
    .notice::after { content: none !important; }
    .traffic-sites {
      width: 100%;
      padding-left: 22px;
      display: flex;
      align-items: center;
      gap: 9px;
      color: #8f949b;
      font-size: 13px;
      line-height: 22px;
      flex-wrap: wrap;
    }
    .traffic-sites b {
      color: #aeb4bc;
      font-size: 13px;
      font-weight: 600;
    }
    .traffic-sites a {
      height: 22px;
      padding: 0 7px;
      border-radius: 4px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #969da6;
      background: rgba(255,255,255,.035);
      font-size: 12px;
    }
    .traffic-sites a:hover { color: #d6dbe1; background: rgba(255,255,255,.06); }
    .traffic-sites em {
      color: #8fb4ff;
      font-style: normal;
      font-size: 11px;
    }
    .module-icon {
      width: 18px;
      height: 18px;
      margin-right: 5px;
      border-radius: 4px;
      display: inline-grid;
      place-items: center;
      color: #aab1ba;
      flex: 0 0 18px;
    }
    .module-icon svg {
      width: 17px;
      height: 17px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .module:hover .module-icon { color: #c8cdd3; }
    #hot .module-icon { color: #d0ae73; }
    #online .module-icon { color: #8fb4ff; }
    #new .module-icon { color: #9fd7b8; }
    #app .module-icon { color: #d4a8ff; }
    #search .module-icon { color: #9fd7d2; }
    #anime .module-icon { color: #b9a5ff; }
    #short .module-icon { color: #ffba7a; }
    #resource .module-icon { color: #b6c0cc; }
    #music .module-icon { color: #ffb7d0; }
    #cloud .module-icon { color: #93c6ff; }
    #download .module-icon { color: #b7d99a; }
    #rank .module-icon { color: #d8b56f; }
    #famous .module-icon { color: #ff8d75; }
    #new .module-icon { color: #9fd7b8; }
    #app .module-icon { color: #d4a8ff; }
    #search .module-icon { color: #9fd7d2; }
    #anime .module-icon { color: #8fc7e8; }
    #short .module-icon { color: #b7d99a; }
    #resource .module-icon { color: #b6c0cc; }
    #music .module-icon { color: #f1ce83; }
    #cloud .module-icon { color: #93c6ff; }
    #download .module-icon { color: #c4b4ec; }
    #hot .site-card::before {
      opacity: .12 !important;
      background: linear-gradient(135deg, rgba(208,174,115,.09), transparent 46%) !important;
    }
    #hot .site-card::after {
      content: "置顶" !important;
      top: 7px !important;
      right: 8px !important;
      height: 17px !important;
      padding: 0 7px !important;
      border: 0 !important;
      border-radius: 10px !important;
      color: #d0ae73 !important;
      background: rgba(208,174,115,.105) !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      line-height: 17px !important;
      letter-spacing: .3px !important;
      box-shadow: none !important;
    }
    #hot .site-card:hover::after {
      color: #f0d49a !important;
      background: rgba(208,174,115,.16) !important;
    }
    #hot .site-card::after { content: none !important; display: none !important; }
    @media (max-width: 991.98px) {
      .mobile-side-toggle {
        left: 12px !important;
        right: auto !important;
        bottom: 26px !important;
        display: grid !important;
      }
      .backtop {
        right: 12px !important;
        bottom: 26px !important;
        display: grid !important;
      }
      body.mobile-controls-hidden > .mobile-side-toggle,
      body.mobile-controls-hidden > .backtop {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(10px) !important;
      }
      body.mobile-side-open .mobile-side-toggle {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
      }
      .notice {
        height: auto !important;
        min-height: 78px !important;
        padding: 10px 88px 10px 10px !important;
        align-items: flex-start !important;
      }
      .notice > span { line-height: 20px !important; }
      .traffic-sites {
        padding-left: 22px;
        gap: 6px;
        line-height: 20px;
      }
      .traffic-sites b {
        width: 100%;
        font-size: 12px;
      }
      .traffic-sites a {
        height: 20px;
        padding: 0 6px;
        font-size: 11px;
      }
    }


    /* 首页最终细节修正 */
    #hot .site-card {
      box-shadow: none !important;
      border-color: transparent !important;
    }
    #hot .site-card::before {
      opacity: .10 !important;
      background: linear-gradient(135deg, rgba(241,64,75,.08), transparent 48%) !important;
    }
    #hot .site-card::after {
      content: "置顶" !important;
      top: 7px !important;
      right: 8px !important;
      height: 17px !important;
      padding: 0 7px !important;
      border: 0 !important;
      border-radius: 9px !important;
      color: #fff !important;
      background: #f1404b !important;
      font-size: 10px !important;
      font-weight: 600 !important;
      line-height: 17px !important;
      letter-spacing: .3px !important;
      box-shadow: 0 3px 10px rgba(241,64,75,.18) !important;
    }
    #hot .site-card:hover::after {
      color: #fff !important;
      background: #d93641 !important;
    }
    #hot .site-card::after { content: none !important; display: none !important; }
    .promo-color-link {
      padding-left: 22px;
      display: inline-flex;
      align-items: center;
      width: fit-content;
      color: #ff8a18;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      letter-spacing: .2px;
      background: linear-gradient(90deg, #ff8a18, #f1404b 58%, #8fb4ff);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .promo-color-link:hover {
      filter: brightness(1.18);
    }
    @media (max-width: 991.98px) {
      .mobile-side-toggle {
        left: calc(50% - 54px) !important;
        right: auto !important;
        bottom: 22px !important;
        display: grid !important;
      }
      .backtop {
        left: calc(50% + 8px) !important;
        right: auto !important;
        bottom: 22px !important;
        display: grid !important;
      }
      body.mobile-side-open .mobile-side-toggle {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(10px) !important;
      }
      body.mobile-controls-hidden > .mobile-side-toggle,
      body.mobile-controls-hidden > .backtop {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(10px) !important;
      }
      .notice {
        min-height: 58px !important;
        padding: 10px 88px 10px 10px !important;
      }
      .promo-color-link {
        padding-left: 22px;
        font-size: 13px;
        line-height: 20px;
      }
    }

    /* 首页自助专区与置顶最终修正版 */
    #hot .site-card::after {
      content: "置顶" !important;
      color: #d89096 !important;
      background: rgba(241,64,75,.08) !important;
      border: 0 !important;
      box-shadow: none !important;
    }
    #hot .site-card:hover::after {
      color: #f1404b !important;
      background: rgba(241,64,75,.13) !important;
    }
    #hot .site-card::after { content: none !important; display: none !important; }
    .promo-color-link { display: none !important; }
    .promo-link-grid {
      width: 100%;
      padding-left: 22px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, auto));
      justify-content: start;
      align-items: center;
      gap: 6px 14px;
      line-height: 22px;
    }
    .promo-link-grid a {
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      background: transparent !important;
    }
    .promo-link-grid .c1 { color: #ff7a82; }
    .promo-link-grid .c2 { color: #8fb4ff; }
    .promo-link-grid .c3 { color: #75d79d; }
    .promo-link-grid .c4 { color: #ffb66b; }
    .promo-link-grid .c5 { color: #b9a5ff; }
    .promo-link-grid .c6 { color: #9fd7d2; }
    .promo-link-grid .c7 { color: #ff9fc5; }
    .promo-link-grid .c8 { color: #d8b56f; }
    .promo-link-grid .c9 { color: #9fd7b8; }
    .promo-link-grid .c10 { color: #93c6ff; }
    .promo-link-grid a:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 3px;
    }
    @media (max-width: 991.98px) {
      .mobile-side-toggle {
        left: 12px !important;
        bottom: 72px !important;
      }
      .backtop {
        left: auto !important;
        right: 12px !important;
        bottom: 72px !important;
      }
      .notice {
        min-height: 92px !important;
        padding: 10px 84px 10px 10px !important;
      }
      .promo-link-grid {
        grid-template-columns: repeat(3, minmax(0, auto));
        gap: 5px 10px;
        padding-left: 22px;
        line-height: 20px;
      }
      .promo-link-grid a {
        font-size: 12px;
      }
    }

    /* 首页自助专区排版最终修正 */
    .notice {
      display: grid !important;
      grid-template-columns: 16px 1fr auto !important;
      align-items: start !important;
      gap: 8px 8px !important;
      padding: 12px 14px !important;
      flex-wrap: initial !important;
      flex-direction: initial !important;
      min-height: 86px !important;
    }
    .notice > svg {
      position: static !important;
      grid-column: 1;
      grid-row: 1;
      margin-top: 3px;
    }
    .notice > span {
      grid-column: 2;
      grid-row: 1;
      padding-left: 0 !important;
      line-height: 22px !important;
    }
    .notice .ad {
      position: static !important;
      grid-column: 3;
      grid-row: 1;
      justify-self: end;
      align-self: start;
      margin-left: 0 !important;
    }
    .promo-link-grid {
      grid-column: 1 / -1;
      grid-row: 2;
      width: 100% !important;
      flex: initial !important;
      min-width: 0;
      margin-top: 2px;
      padding-left: 0 !important;
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-start !important;
      align-items: center !important;
      gap: 6px 10px !important;
      line-height: 24px !important;
    }
    .promo-link-grid a {
      font-size: 14px !important;
    }
    @media (max-width: 991.98px) {
      .mobile-side-toggle {
        bottom: 96px !important;
      }
      .backtop {
        bottom: 96px !important;
      }
      .notice {
        min-height: 96px !important;
        padding: 10px !important;
        display: grid !important;
        grid-template-columns: 16px 1fr auto !important;
        align-items: start !important;
        gap: 8px 7px !important;
      }
      .notice > svg {
        grid-column: 1;
        grid-row: 1;
        margin-top: 3px;
      }
      .notice > span {
        grid-column: 2;
        grid-row: 1;
        line-height: 20px !important;
      }
      .notice .ad {
        grid-column: 3;
        grid-row: 1;
        position: static !important;
        justify-self: end;
        align-self: start;
        height: 24px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        white-space: nowrap;
        margin-left: 0 !important;
      }
      .notice .ad span {
        height: 14px !important;
        min-width: 18px !important;
        font-size: 9px !important;
      }
      .promo-link-grid {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100% !important;
        margin-top: 4px !important;
        padding-left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 5px 3px !important;
        line-height: 20px !important;
      }
      .promo-link-grid a {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 13px !important;
        letter-spacing: -.35px;
      }
    }

    /* 自助专区价值强化设计 */
    .notice {
      background:
        radial-gradient(circle at 18px 12px, rgba(241,64,75,.12), transparent 34px),
        linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
        #3c3c3c !important;
      border-color: rgba(255,255,255,.07) !important;
    }
    .notice-title {
      display: inline-flex !important;
      align-items: center;
      gap: 9px;
      min-width: 0;
      padding-left: 0 !important;
    }
    .notice-title b {
      color: #e2e6eb;
      font-size: 15px;
      font-weight: 700;
      white-space: nowrap;
    }
    .notice-title em {
      height: 20px;
      padding: 0 7px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      color: #d89096;
      background: rgba(241,64,75,.08);
      font-size: 11px;
      font-style: normal;
      font-weight: 500;
      white-space: nowrap;
    }
    .promo-link-grid {
      gap: 8px 8px !important;
      line-height: 1 !important;
    }
    .promo-link-grid a {
      min-height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      border: 1px solid rgba(255,255,255,.055);
      background: rgba(255,255,255,.045) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.08);
      transition: transform .16s ease, background .16s ease, color .16s ease;
    }
    .promo-link-grid a::before {
      content: "";
      width: 5px;
      height: 5px;
      margin-right: 5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor;
      opacity: .8;
      flex: 0 0 auto;
    }
    .promo-link-grid a:hover {
      transform: translateY(-1px);
      text-decoration: none !important;
      background: rgba(255,255,255,.075) !important;
      border-color: rgba(255,255,255,.09);
    }
    @media (max-width: 991.98px) {
      .notice {
        min-height: 112px !important;
      }
      .notice-title {
        gap: 6px;
      }
      .notice-title b {
        font-size: 14px;
      }
      .notice-title em {
        height: 18px;
        padding: 0 6px;
        font-size: 10px;
      }
      .promo-link-grid {
        gap: 6px 4px !important;
      }
      .promo-link-grid a {
        min-height: 26px;
        padding: 0 3px;
        border-radius: 5px;
        font-size: 13px !important;
        letter-spacing: -.45px;
      }
    .promo-link-grid a::before {
        width: 4px;
        height: 4px;
        margin-right: 3px;
      }
    }

/* Unified home search: one form shared by desktop and mobile controls. */
.home-page .top-search-button {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 4px !important;
  justify-content: center !important;
  color: #b4b8bf !important;
  background: transparent !important;
  cursor: pointer !important;
}
.home-page .top-search-button:hover { color: #fff !important; background: #303234 !important; }
.home-search-backdrop,.mobile-drawer-backdrop { display: none; }
.home-page.home-search-open .home-search-backdrop {
  position: fixed;
  inset: 80px 0 0;
  z-index: 440;
  display: block;
  width: 100%;
  height: calc(100vh - 80px);
  padding: 0;
  border: 0;
  background: rgba(7,9,11,.72);
  backdrop-filter: blur(3px);
  cursor: default;
}
.home-page.home-search-open .search-wrap {
  position: fixed !important;
  left: 50% !important;
  top: 104px !important;
  z-index: 450 !important;
  width: min(760px,calc(100vw - 40px)) !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.38) !important;
}
.home-page.home-search-open .home-search-toggle > .css-icon,
.home-page.home-search-open .home-search-toggle > svg { visibility: hidden !important; }
.home-page.home-search-open .home-search-toggle {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6ccd4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 21px 21px !important;
}

/* Keep the home search centered and readable across the first viewport. */
.home-page .hero {
  min-height: 330px;
  height: auto;
  padding-bottom: 30px;
}
.home-page .hero-inner {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 58px;
}
.home-page .hero-copy {
  text-align: center;
  color: #f0f2f4;
}
.home-page .hero-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #ff8a98;
  font-size: 12px;
  letter-spacing: 0;
}
.home-page .hero-copy h2 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.home-page .hero-copy h2 span {
  color: #ff5360;
  font-weight: 500;
}
.home-page .hero-copy p {
  margin: 10px 0 22px;
  color: #aeb5bd;
  font-size: 14px;
}
.home-page .hero-inner .search-wrap {
  width: min(800px, 100%);
  margin: 0 auto;
  padding-top: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 92px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(24,28,32,.92);
  box-shadow: 0 16px 40px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.06);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.home-page .hero-inner .search-wrap:focus-within { border-color: rgba(255,115,126,.7); box-shadow: 0 18px 48px rgba(0,0,0,.38), 0 0 0 4px rgba(241,64,75,.12); }
.home-page .home-search-leading { display:grid; place-items:center; color:#ef7983; background:rgba(255,255,255,.035); }
.home-page .home-search-leading .css-icon { font-size:20px; }
.home-page .hero-inner .search-wrap input { min-width:0; height:54px; padding:0 16px; border-radius:0; background:transparent; font-size:16px; }
.home-page .hero-inner .search-wrap button { display:flex; align-items:center; justify-content:center; gap:7px; height:54px; border-radius:0; background:#e64652; font-size:13px; font-weight:650; }
.home-page .hero-inner .search-wrap button:hover { background:#f05a65; }
.home-page .home-search-button-label { display:inline; }
.home-page .hero { min-height:0; margin-top:0; padding:12px 0; }
.home-page .hero-inner { padding-top:0; }

@media (min-width: 992px) {
  .home-page .mobile-top-panel,.home-page .mobile-drawer-backdrop { display: none !important; }
}

@media (max-width: 767.98px) {
  .home-page .hero {
    min-height: 370px !important;
    height: auto !important;
    padding: 82px 12px 22px !important;
  }
  .home-page .hero-inner {
    width: 100%;
    padding-top: 18px;
  }
  .home-page .hero-copy h2 {
    font-size: 25px;
  }
  .home-page .hero-copy p {
    max-width: 300px;
    margin: 9px auto 18px;
    font-size: 13px;
    line-height: 1.5;
  }
  .home-page .hero-eyebrow {
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .home-page .hero-inner .search-wrap {
    width: 100%;
    grid-template-columns: 46px minmax(0, 1fr) 68px;
  }
  .home-page .hero-inner .search-wrap input { height:50px; padding:0 12px; font-size:14px; }
  .home-page .hero-inner .search-wrap button { height:50px; }
  .home-page .home-search-leading { min-width:46px; }
  .home-page .home-search-button-label { display:none; }
  .home-page .hero .search-wrap {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    transform: none !important;
  }
  .home-page.home-search-open .home-search-backdrop {
    inset: 64px 0 0;
    height: calc(100vh - 64px);
  }
  .home-page.home-search-open .hero .search-wrap {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: 78px !important;
    z-index: 450 !important;
    width: auto !important;
    transform: none !important;
  }

  .home-page .mobile-top-panel {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 520 !important;
    width: min(400px,82vw) !important;
    height: 100dvh !important;
    max-height: none !important;
    padding: 0 24px 28px !important;
    display: block !important;
    overflow-y: auto !important;
    color: #bdc2c9 !important;
    background: #2b2d2f !important;
    box-shadow: 16px 0 44px rgba(0,0,0,.45) !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease !important;
  }
  .home-page.mobile-top-open .mobile-top-panel { transform: translateX(0) !important; }
  .home-page.mobile-top-open { overflow: hidden; }
  .home-page .mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 510;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0,0,0,.68);
    opacity: 0;
    pointer-events: none;
    transition: opacity .24s ease;
  }
  .home-page.mobile-top-open .mobile-drawer-backdrop { display: block; opacity: 1; pointer-events: auto; }
  .home-page .mobile-drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 88px;
    margin: 0 -24px 12px;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 42px minmax(0,1fr) 42px;
    align-items: center;
    gap: 8px;
    background: #2b2d2f;
  }
  .home-page .mobile-drawer-close,.home-page .mobile-drawer-search {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    display: grid;
    place-items: center;
    color: #b8bec6;
    background: transparent;
    cursor: pointer;
  }
  .home-page .mobile-drawer-close .css-icon,.home-page .mobile-drawer-search .css-icon { font-size: 24px; }
  .home-page .mobile-drawer-logo {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ff3040;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
  }
  .home-page .mobile-drawer-logo .logo-mark { width: 34px; height: 34px; flex: 0 0 34px; }
  .home-page .mobile-drawer-logo .logo-mark::after { left: 14px; top: 9px; width: 5px; height: 16px; }
  .home-page .mobile-top-nav {
    margin: 0 !important;
    padding: 14px 0 !important;
    border-radius: 5px !important;
    background: #333537 !important;
  }
  .home-page .mobile-top-nav a {
    height: 50px !important;
    padding: 0 28px !important;
    gap: 16px !important;
    color: #c2c7ce !important;
    font-size: 15px !important;
  }
  .home-page .mobile-top-nav a:hover,.home-page .mobile-top-nav a:first-child { color: #fff !important; background: rgba(255,255,255,.035) !important; }
  .home-page .mobile-top-nav .css-icon { width: 18px; height: 18px; color: #aeb5bd; }
  .home-page .mobile-user-card { margin-top: 30px !important; }
  .home-page .mobile-auth-row a { text-decoration: none !important; }
}
@media (max-width: 767.98px) {
  .home-page .hero { min-height:0 !important; padding:8px 12px !important; }
  .home-page .hero-inner { padding-top:0; }
}

@media (max-width: 420px) {
  .home-page .mobile-top-panel { width: 84vw !important; padding-left: 18px !important; padding-right: 18px !important; }
  .home-page .mobile-drawer-head { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .home-page .mobile-drawer-logo { font-size: 18px; }
  .home-page .mobile-top-nav a { padding: 0 22px !important; }
  .home-page .mobile-user-card { padding: 9px 12px !important; }
  .home-page .mobile-user-desc { font-size: 11px !important; }
}

/* Home category backgrounds: paid and famous stay flat; other categories use panels. */
.home-page .main > #hot,
.home-page .main > #famous {
  background: transparent !important;
}

.home-page .main > #online,
.home-page .main > #new,
.home-page .main > #app,
.home-page .main > #search,
.home-page .main > #anime,
.home-page .main > #short,
.home-page .main > #resource,
.home-page .main > #music,
.home-page .main > #cloud,
.home-page .main > #download {
  background: #242628 !important;
}

/* The home hero contains one clear search action. Keep it prominent after the
   traffic/category shortcuts were removed, with matching control heights at
   every viewport size. */
@media (min-width: 768px) {
  .home-page .hero {
    min-height: 168px !important;
    height: auto !important;
    padding: 34px 0 !important;
  }
  .home-page .hero-inner { padding-top: 0 !important; }
  .home-page .hero-inner .search-wrap,
  .home-page .hero-inner .search-wrap input,
  .home-page .hero-inner .search-wrap button {
    height: 70px !important;
  }
  .home-page.home-search-open .hero-inner .search-wrap {
    height: 64px !important;
  }
  .home-page.home-search-open .hero-inner .search-wrap input,
  .home-page.home-search-open .hero-inner .search-wrap button {
    height: 64px !important;
  }
}

@media (max-width: 767.98px) {
  .home-page .hero {
    min-height: 116px !important;
    height: auto !important;
    padding: 26px 12px 26px !important;
  }
  .home-page .hero-inner { padding-top: 0 !important; }
  .home-page .hero .search-wrap,
  .home-page .hero .search-wrap input,
  .home-page .hero .search-wrap button {
    height: 64px !important;
  }
  .home-page.home-search-open .hero .search-wrap { height: 64px !important; }
}

@media (max-width: 991.98px) {
  .mobile-side-toggle {
    left: 12px !important;
    right: auto !important;
  }
}

/* Keep the homepage search in the original wide hero layout and place the
   latest real-traffic row directly beneath it. */
.home-page .hero {
  height: auto !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 100px 0 18px !important;
}
.home-page .hero-inner {
  width: 100% !important;
  max-width: none !important;
  padding-top: 0 !important;
}
.home-page .hero-inner .search-wrap {
  width: min(800px, calc(100% - 40px)) !important;
  height: 50px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 50px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.home-page .hero-inner .search-wrap input,
.home-page .hero-inner .search-wrap button {
  height: 50px !important;
}
.home-page .hero-inner .search-wrap input {
  padding: 9px 20px !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
  background: #24282d !important;
  font-size: 16px !important;
}
.home-page .hero-inner .search-wrap button {
  border-radius: 0 var(--radius) var(--radius) 0 !important;
  background: var(--accent) !important;
}
.home-page .hero-inner .search-wrap:focus-within { border: 0 !important; box-shadow: none !important; }
.home-page .hero-inner .search-wrap button:hover { background: #d12768 !important; }
.home-page.home-search-open .hero-inner .search-wrap { height: 50px !important; padding-top: 0 !important; }
.home-page .hero-inner .traffic-sites {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: min(800px, calc(100% - 40px));
  margin: 10px auto 0;
  padding: 0;
  gap: 8px;
  color: #8f949b;
  font-size: 13px;
  line-height: 22px;
}
.home-page .traffic-sites b { color: #aeb4bc; font-size: 13px; }
.home-page .traffic-sites a {
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #969da6;
  background: rgba(255,255,255,.035);
  font-size: 12px;
}
.home-page .traffic-sites a:hover { color: #d6dbe1; background: rgba(255,255,255,.06); }
.home-page .traffic-sites em { color: #8fb4ff; font-style: normal; font-size: 11px; }
.home-page .traffic-sites-empty { color: #777f89; font-size: 12px; }
.home-page .traffic-sites .link-invalid-badge { min-height: 17px; padding: 0 5px; font-size: 10px; }

@media (max-width: 991.98px) {
  .home-page .hero {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    padding: 12px 12px 8px !important;
  }
  .home-page .hero-inner .search-wrap {
    width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    grid-template-columns: minmax(0, 1fr) 50px !important;
  }
  .home-page .hero-inner .search-wrap input,
  .home-page .hero-inner .search-wrap button { height: 50px !important; }
  .home-page .hero-inner .traffic-sites {
    width: 100%;
    margin-top: 8px;
    gap: 5px;
    line-height: 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .home-page .traffic-sites::-webkit-scrollbar { display: none; }
  .home-page .traffic-sites b { width: auto; flex: 0 0 auto; font-size: 12px; }
  .home-page .traffic-sites a { height: 20px; padding: 0 6px; flex: 0 0 auto; font-size: 11px; }
}