:root {
color-scheme: dark;
      --ink: #f9fbff;
      --muted: #b9c7dc;
      --dim: #7f90aa;
      --line: rgba(255, 255, 255, 0.15);
      --line-strong: rgba(243, 201, 105, 0.36);
      --panel: rgba(12, 19, 32, 0.76);
      --panel-solid: #101827;
      --gold: #f4ca69;
      --gold-deep: #b9812d;
      --aqua: #64e7df;
      --cyan: #35bad3;
      --rose: #ff827b;
      --night: #060910;
      font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}
html:not(.kpr) body {
          filter: blur(10px);
          -webkit-filter: blur(10px);
        }
.page-index {
margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--night);
      text-rendering: optimizeLegibility;
}

.page-index a {
color: inherit; text-decoration: none;
}

.page-index img {
display: block;
      max-inline-size: 100%;
      height: auto;
}

.page-index::before {
content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(118deg, rgba(6, 9, 16, 0.2), rgba(6, 9, 16, 0.94) 56%, #060910),
        url("honor-of-kings-02.jpg") center top / cover no-repeat;
}

.page-index::after {
content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(244, 202, 105, 0.08), transparent 30%, rgba(100, 231, 223, 0.08)),
        radial-gradient(circle at 78% 18%, rgba(100, 231, 223, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(6, 9, 16, 0.02), #060910 84%);
      pointer-events: none;
}

.page-index .site-header,
.page-index .hero-section,
.page-index .feature-section,
.page-index .gallery-section,
.page-index .download-section,
.page-index .refund-section,
.page-index .site-footer {
width: calc(100vw - 32px);
      max-width: 1180px;
      margin-inline: auto;
}

.page-index .site-header {
position: sticky;
      top: 12px;
      z-index: 10;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 20px;
      min-height: 74px;
      padding: 12px 14px;
      margin-top: 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(7, 10, 18, 0.72);
      backdrop-filter: blur(18px) saturate(135%);
      -webkit-backdrop-filter: blur(18px) saturate(135%);
      box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

.page-index .brand {
display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 190px;
}

.page-index .brand-mark {
display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 229, 154, 0.58);
      border-radius: 8px;
      color: #221403;
      background: linear-gradient(135deg, #fff2b4, #e5ad4e 56%, #99601f);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 26px rgba(223, 159, 61, 0.26);
      font-weight: 900;
}

.page-index .brand strong,
.page-index .brand small {
display: block;
}

.page-index .brand strong {
font-size: 17px;
}

.page-index .brand small {
margin-top: 3px; color: var(--muted); font-size: 12px;
}

.page-index .top-nav {
display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #dce7f7;
      font-size: 14px;
}

.page-index .top-nav a {
padding: 10px 12px;
      border-radius: 8px;
}

.page-index .top-nav a:hover {
background: rgba(255, 255, 255, 0.08);
}

.page-index .header-cta {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 8px;
      color: #201303;
      background: linear-gradient(135deg, #ffe99e, #d89638);
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
}

.page-index .hero-section {
min-height: calc(100vh - 104px);
      padding: 70px 0 58px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
}

.page-index .eyebrow {
display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      color: var(--aqua);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0;
}

.page-index .eyebrow::before {
content: "";
      width: 26px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
}

.page-index h1,
.page-index h2,
.page-index h3,
.page-index p {
margin-top: 0;
}

.page-index h1 {
max-width: 840px;
      margin-bottom: 20px;
      font-size: clamp(40px, 6vw, 74px);
      line-height: 1.03;
      letter-spacing: 0;
}

.page-index h2 {
margin-bottom: 14px;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.13;
      letter-spacing: 0;
}

.page-index h3 {
margin-bottom: 10px;
      font-size: 20px;
      letter-spacing: 0;
}

.page-index .hero-lede {
max-width: 740px;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.85;
}

.page-index .hero-actions,
.page-index .hero-metrics {
display: flex;
      flex-wrap: wrap;
      gap: 12px;
}

.page-index .hero-actions {
margin-top: 28px;
}

.page-index .button {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 21px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      font-family: inherit;
      font-size: 15px;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-index .button:hover {
transform: translateY(-2px);
}

.page-index .button.primary {
color: #1f1304;
      background: linear-gradient(135deg, #fff0a8, #e0a044 58%, #a86d25);
      box-shadow: 0 16px 34px rgba(199, 139, 44, 0.28);
}

.page-index .button.secondary {
color: #031414;
      background: linear-gradient(135deg, #8af7ee, #35bfd7);
      box-shadow: 0 16px 34px rgba(53, 191, 215, 0.2);
}

.page-index .button.ghost {
border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.07);
}

.page-index .hero-metrics {
margin-top: 28px;
      color: var(--muted);
}

.page-index .hero-metrics span {
min-width: 184px;
      padding: 13px 15px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page-index .hero-metrics strong {
display: block;
      margin-bottom: 5px;
      color: var(--gold);
      font-size: 22px;
}

.page-index .hero-showcase {
position: relative;
      display: grid;
      gap: 16px;
}

.page-index .showcase-frame {
position: relative;
      min-height: 360px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.06);
      box-shadow: 0 32px 90px rgba(0, 0, 0, 0.46);
      overflow: hidden;
}

.page-index .showcase-frame::after {
content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(6, 9, 16, 0.04), rgba(6, 9, 16, 0.62));
      pointer-events: none;
}

.page-index .showcase-frame img {
inline-size: 100%;
      height: 390px;
      object-fit: cover;
      object-position: 36% center;
      transform: scale(1.03);
}

.page-index .showcase-badge {
position: absolute;
      right: 18px;
      bottom: 18px;
      z-index: 1;
      min-width: 172px;
      padding: 14px 16px;
      border: 1px solid rgba(100, 231, 223, 0.35);
      border-radius: 8px;
      background: rgba(7, 12, 22, 0.76);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
}

.page-index .showcase-badge span,
.page-index .panel-top span,
.page-index .prep-list span {
display: block;
}

.page-index .showcase-badge span {
color: var(--aqua);
      font-size: 12px;
      font-weight: 800;
}

.page-index .showcase-badge strong {
display: block;
      margin-top: 5px;
      font-size: 22px;
}

.page-index .hero-panel {
border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(12, 19, 32, 0.82);
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
      overflow: hidden;
}

.page-index .panel-top {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 17px 18px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, rgba(100, 231, 223, 0.13), rgba(244, 202, 105, 0.08));
}

.page-index .panel-top span {
color: var(--aqua); font-size: 14px;
}

.page-index .prep-list {
display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1px;
      padding: 0;
      margin: 0;
      list-style: none;
      background: var(--line);
}

.page-index .prep-list li {
min-height: 96px;
      padding: 17px;
      background: rgba(10, 16, 27, 0.94);
}

.page-index .prep-list span {
margin-bottom: 12px;
      color: var(--gold);
      font-weight: 900;
}

.page-index .prep-list strong {
color: #eef5ff;
      line-height: 1.45;
}

.page-index .feature-section,
.page-index .gallery-section,
.page-index .download-section,
.page-index .refund-section {
padding: 72px 0;
}

.page-index .section-heading {
max-width: 740px;
      margin-bottom: 30px;
}

.page-index .section-heading h2 {
max-width: 680px;
}

.page-index .feature-grid,
.page-index .device-grid {
display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
}

.page-index .feature-card,
.page-index .device-card {
position: relative;
      min-height: 252px;
      padding: 23px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.032));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      overflow: hidden;
      transform: translateY(0);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-index .feature-card::before,
.page-index .device-card::before {
content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--aqua));
}

.page-index .feature-card:hover,
.page-index .device-card:hover {
transform: translateY(-5px);
      border-color: rgba(243, 201, 105, 0.42);
      box-shadow: 0 26px 62px rgba(0, 0, 0, 0.3);
}

.page-index .feature-card p,
.page-index .device-card p,
.page-index .download-copy p,
.page-index .refund-section p,
.page-index .site-footer p {
color: var(--muted);
      line-height: 1.76;
}

.page-index .feature-icon {
display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      margin-bottom: 30px;
      border: 1px solid rgba(244, 202, 105, 0.3);
      border-radius: 8px;
      color: var(--gold);
      background: rgba(244, 202, 105, 0.08);
      font-weight: 900;
      font-size: 22px;
}

.page-index .image-gallery {
display: grid;
      grid-template-columns: 1.1fr 0.95fr 0.95fr;
      gap: 16px;
}

.page-index .gallery-card {
position: relative;
      min-height: 300px;
      margin: 0;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24);
      overflow: hidden;
      transform: translateY(0);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-index .gallery-card:hover {
transform: translateY(-5px);
      border-color: rgba(243, 201, 105, 0.42);
      box-shadow: 0 26px 62px rgba(0, 0, 0, 0.3);
}

.page-index .gallery-card:first-child {
grid-row: span 2;
}

.page-index .gallery-card img {
inline-size: 100%;
      height: 300px;
      object-fit: cover;
}

.page-index .gallery-card:first-child img {
height: 618px;
}

.page-index .gallery-card.focus-right img {
object-position: right center;
}

.page-index .gallery-card.focus-left img {
object-position: left center;
}

.page-index .gallery-card figcaption {
position: absolute;
      left: 14px;
      right: 14px;
      bottom: 14px;
      padding: 13px 14px;
      border: 1px solid rgba(255, 255, 255, 0.13);
      border-radius: 8px;
      color: #f4f8ff;
      background: rgba(7, 10, 18, 0.68);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      font-weight: 800;
}

.page-index .download-section {
display: grid;
      grid-template-columns: 0.7fr 1.3fr;
      gap: 30px;
      align-items: start;
}

.page-index .download-copy {
position: sticky;
      top: 112px;
}

.page-index .device-grid {
grid-template-columns: repeat(3, 1fr);
}

.page-index .device-card {
display: flex;
      flex-direction: column;
      min-height: 286px;
}

.page-index .device-card h3 {
font-size: 22px;
}

.page-index .device-card .button {
align-self: stretch;
      margin-top: auto;
}

.page-index .refund-section {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 50px;
      padding: 32px;
      border: 1px solid rgba(255, 130, 123, 0.42);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(255, 130, 123, 0.18), rgba(100, 231, 223, 0.1) 45%, rgba(244, 202, 105, 0.12));
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

.page-index .refund-section > div {
max-width: 760px;
}

.page-index .refund-section h2 {
margin-bottom: 10px;
}

.page-index .button.refund-button {
flex-shrink: 0;
      color: #2a0704;
      background: linear-gradient(135deg, #ffd9d5, #ff827b);
      box-shadow: 0 16px 34px rgba(255, 130, 123, 0.22);
}

.page-index .site-footer {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 28px 0 42px;
      border-top: 1px solid var(--line);
}

.page-index .site-footer p {
margin-bottom: 0;
}

.page-index .site-footer a {
color: var(--gold);
      font-weight: 900;
      white-space: nowrap;
}

@media (min-width: 941px) {
.page-index .hero-section {
grid-template-columns: 1.02fr 0.98fr;
        gap: 44px;
}

.page-index .hero-panel {
margin-top: 0;
        align-self: end;
}
}

@media (max-width: 1040px) {
.page-index .site-header {
grid-template-columns: auto auto;
}

.page-index .top-nav {
display: none;
}

.page-index .header-cta {
justify-self: end;
}

.page-index .feature-grid,
.page-index .download-section,
.page-index .device-grid {
grid-template-columns: 1fr 1fr;
}

.page-index .image-gallery {
grid-template-columns: 1fr 1fr;
}

.page-index .gallery-card:first-child {
grid-column: span 2;
        grid-row: auto;
}

.page-index .gallery-card:first-child img {
height: 360px;
}

.page-index .download-copy {
position: static;
}
}

@media (max-width: 640px) {
.page-index::before {
background:
          linear-gradient(180deg, rgba(6, 9, 16, 0.56), #060910 70%),
          url("honor-of-kings-02.jpg") center top / auto 48vh no-repeat;
}
}

@media (max-width: 720px) {
.page-index .site-header,
.page-index .hero-section,
.page-index .feature-section,
.page-index .gallery-section,
.page-index .download-section,
.page-index .refund-section,
.page-index .site-footer {
width: calc(100vw - 22px);
}

.page-index .site-header {
top: 8px;
        min-height: 64px;
        gap: 10px;
        padding: 10px;
}

.page-index .brand {
min-width: 0;
}

.page-index .brand small,
.page-index .header-cta {
display: none;
}

.page-index .hero-section {
min-height: auto;
        padding-top: 46px;
        padding-bottom: 36px;
}

.page-index h1 {
font-size: 38px;
}

.page-index .hero-lede {
font-size: 16px;
}

.page-index .hero-actions .button,
.page-index .device-card .button {
flex: 1 1 220px;
}

.page-index .hero-metrics span {
flex: 1 1 160px;
}

.page-index .showcase-frame {
min-height: 260px;
}

.page-index .showcase-frame img {
height: 280px;
}

.page-index .showcase-badge {
left: 14px;
        right: 14px;
        bottom: 14px;
        min-width: 0;
}

.page-index .prep-list,
.page-index .feature-grid,
.page-index .image-gallery,
.page-index .download-section,
.page-index .device-grid {
grid-template-columns: 1fr;
}

.page-index .gallery-card:first-child {
grid-column: auto;
}

.page-index .gallery-card,
.page-index .feature-card,
.page-index .device-card {
min-height: auto;
}

.page-index .gallery-card img,
.page-index .gallery-card:first-child img {
height: 235px;
}

.page-index .refund-section,
.page-index .site-footer {
display: block;
}

.page-index .button.refund-button {
display: flex;
        width: 100%;
        margin-top: 18px;
}

.page-index .site-footer a {
display: inline-block;
        margin-top: 12px;
}
}

.page-xunlan {
margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--night);
      text-rendering: optimizeLegibility;
}

.page-xunlan a {
color: inherit; text-decoration: none;
}

.page-xunlan img {
display: block; max-inline-size: -webkit-fill-available;
}

.page-xunlan::before {
content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(118deg, rgba(6, 9, 16, 0.2), rgba(6, 9, 16, 0.94) 56%, #060910),
        url("honor-of-kings-02.jpg") center top / cover no-repeat;
}

.page-xunlan::after {
content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(244, 202, 105, 0.08), transparent 30%, rgba(100, 231, 223, 0.08)),
        radial-gradient(circle at 78% 18%, rgba(100, 231, 223, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(6, 9, 16, 0.02), #060910 84%);
      pointer-events: none;
}

.page-xunlan .site-header,
.page-xunlan .guide-hero,
.page-xunlan .device-page-section,
.page-xunlan .refund-section,
.page-xunlan .site-footer {
width: calc(100vw - 32px);
      max-width: 1180px;
      margin-inline: auto;
}

.page-xunlan .site-header {
position: sticky;
      top: 12px;
      z-index: 10;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 20px;
      min-height: 74px;
      padding: 12px 14px;
      margin-top: 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(7, 10, 18, 0.72);
      backdrop-filter: blur(18px) saturate(135%);
      -webkit-backdrop-filter: blur(18px) saturate(135%);
      box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

.page-xunlan .brand {
display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 190px;
}

.page-xunlan .brand-mark {
display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 229, 154, 0.58);
      border-radius: 8px;
      color: #221403;
      background: linear-gradient(135deg, #fff2b4, #e5ad4e 56%, #99601f);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 26px rgba(223, 159, 61, 0.26);
      font-weight: 900;
}

.page-xunlan .brand strong,
.page-xunlan .brand small {
display: block;
}

.page-xunlan .brand strong {
font-size: 17px;
}

.page-xunlan .brand small {
margin-top: 3px; color: var(--muted); font-size: 12px;
}

.page-xunlan .top-nav {
display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #dce7f7;
      font-size: 14px;
}

.page-xunlan .top-nav a {
padding: 10px 12px;
      border-radius: 8px;
}

.page-xunlan .top-nav a:hover {
background: rgba(255, 255, 255, 0.08);
}

.page-xunlan .header-cta {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 8px;
      color: #201303;
      background: linear-gradient(135deg, #ffe99e, #d89638);
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
}

.page-xunlan .guide-hero {
display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 28px;
      align-items: center;
      min-height: calc(100vh - 118px);
      padding: 62px 0 46px;
}

.page-xunlan .guide-copy {
max-width: 680px;
}

.page-xunlan .eyebrow {
display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      color: var(--aqua);
      font-size: 13px;
      font-weight: 900;
}

.page-xunlan .eyebrow::before {
content: "";
      width: 26px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
}

.page-xunlan h1,
.page-xunlan h2,
.page-xunlan h3,
.page-xunlan p {
margin-top: 0;
}

.page-xunlan h1 {
max-width: 840px;
      margin-bottom: 20px;
      font-size: clamp(40px, 6vw, 74px);
      line-height: 1.03;
      letter-spacing: 0;
}

.page-xunlan h2 {
margin-bottom: 14px;
      font-size: clamp(28px, 4vw, 46px);
      line-height: 1.13;
      letter-spacing: 0;
}

.page-xunlan h3 {
margin-bottom: 10px;
      font-size: 20px;
      letter-spacing: 0;
}

.page-xunlan .guide-copy p {
color: var(--muted);
      line-height: 1.78;
}

.page-xunlan .quick-buy {
display: grid;
      gap: 14px;
      padding: 22px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(12, 19, 32, 0.9), rgba(12, 19, 32, 0.62));
      box-shadow: 0 30px 82px rgba(0, 0, 0, 0.38);
}

.page-xunlan .quick-buy .button {
min-height: 58px;
      font-size: 18px;
}

.page-xunlan .button {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 21px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-weight: 900;
      white-space: nowrap;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-xunlan .button:hover {
transform: translateY(-2px);
}

.page-xunlan .button.primary {
color: #1f1304;
      background: linear-gradient(135deg, #fff0a8, #e0a044 58%, #a86d25);
      box-shadow: 0 16px 34px rgba(199, 139, 44, 0.28);
}

.page-xunlan .button.secondary {
color: #031414;
      background: linear-gradient(135deg, #8af7ee, #35bfd7);
      box-shadow: 0 16px 34px rgba(53, 191, 215, 0.2);
}

.page-xunlan .button.ghost {
border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.07);
}

.page-xunlan .device-page-section {
display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      padding: 38px 0 72px;
}

.page-xunlan .device-option {
position: relative;
      display: flex;
      flex-direction: column;
      min-height: 310px;
      padding: 24px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
      box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
      overflow: hidden;
      transform: translateY(0);
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.page-xunlan .device-option::before {
content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 3px;
      background: linear-gradient(90deg, var(--gold), var(--aqua));
}

.page-xunlan .device-option:hover {
transform: translateY(-5px);
      border-color: rgba(243, 201, 105, 0.42);
      box-shadow: 0 26px 62px rgba(0, 0, 0, 0.3);
}

.page-xunlan .device-tag {
display: inline-flex;
      align-self: flex-start;
      margin-bottom: 26px;
      padding: 7px 10px;
      border: 1px solid rgba(100, 231, 223, 0.28);
      border-radius: 8px;
      color: var(--aqua);
      background: rgba(100, 231, 223, 0.08);
      font-size: 13px;
      font-weight: 900;
}

.page-xunlan .device-option h2 {
font-size: 26px;
      margin-bottom: 10px;
}

.page-xunlan .device-option p {
color: var(--muted);
      line-height: 1.76;
}

.page-xunlan .device-option .button {
align-self: stretch;
      margin-top: auto;
}

.page-xunlan .refund-section {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 50px;
      padding: 32px;
      border: 1px solid rgba(255, 130, 123, 0.42);
      border-radius: \\
      8px;
      background: linear-gradient(135deg, rgba(255, 130, 123, 0.18), rgba(100, 231, 223, 0.1) 45%, rgba(244, 202, 105, 0.12));
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26);
}

.page-xunlan .refund-section > div {
max-width: 760px;
}

.page-xunlan .refund-section h2 {
margin-bottom: 10px;
}

.page-xunlan .refund-section p {
color: var(--muted);
      line-height: 1.76;
}

.page-xunlan .refund-button {
flex-shrink: 0;
      color: #2a0704;
      background: linear-gradient(135deg, #ffd9d5, #ff827b);
      box-shadow: 0 16px 34px rgba(255, 130, 123, 0.22);
}

.page-xunlan .site-footer {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 28px 0 42px;
      border-top: 1px solid var(--line);
}

.page-xunlan .site-footer p {
margin-bottom: 0;
      color: var(--muted);
      line-height: 1.76;
}

.page-xunlan .site-footer a {
color: var(--gold);
      font-weight: 900;
      white-space: nowrap;
}

@media (max-width: 1040px) {
.page-xunlan .site-header {
grid-template-columns: auto auto;
}

.page-xunlan .top-nav {
display: none;
}

.page-xunlan .header-cta {
justify-self: end;
}

.page-xunlan .device-page-section {
grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 640px) {
.page-xunlan::before {
background:
          linear-gradient(180deg, rgba(6, 9, 16, 0.56), #060910 70%),
          url("honor-of-kings-02.jpg") center top / auto 48vh no-repeat;
}
}

@media (max-width: 720px) {
.page-xunlan .site-header,
.page-xunlan .guide-hero,
.page-xunlan .device-page-section,
.page-xunlan .refund-section,
.page-xunlan .site-footer {
width: calc(100vw - 22px);
}

.page-xunlan .site-header {
top: 8px;
        min-height: 64px;
        gap: 10px;
        padding: 10px;
}

.page-xunlan .brand {
min-width: 0;
}

.page-xunlan .brand small,
.page-xunlan .header-cta {
display: none;
}

.page-xunlan .guide-hero {
grid-template-columns: 1fr;
        min-height: auto;
        padding-top: 46px;
        padding-bottom: 36px;
}

.page-xunlan h1 {
font-size: 38px;
}

.page-xunlan .guide-copy p {
font-size: 16px;
}

.page-xunlan .quick-buy .button {
flex: 1 1 220px;
}

.page-xunlan .device-page-section {
grid-template-columns: 1fr;
}

.page-xunlan .device-option {
min-height: auto;
}

.page-xunlan .refund-section,
.page-xunlan .site-footer {
display: block;
}

.page-xunlan .refund-button {
display: flex; margin-top: 18px;
}

.page-xunlan .site-footer a {
display: inline-block;
        margin-top: 12px;
}
}

.page-moyue {
margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--night);
      text-rendering: optimizeLegibility;
}

.page-moyue a {
color: inherit; text-decoration: none;
}

.page-moyue img {
display: block; max-inline-size: -webkit-fill-available;
}

.page-moyue::before {
content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background:
        linear-gradient(118deg, rgba(6, 9, 16, 0.2), rgba(6, 9, 16, 0.94) 56%, #060910),
        url("honor-of-kings-02.jpg") center top / cover no-repeat;
}

.page-moyue::after {
content: "";
      position: fixed;
      inset: 0;
      z-index: -1;
      background:
        linear-gradient(90deg, rgba(244, 202, 105, 0.08), transparent 30%, rgba(100, 231, 223, 0.08)),
        radial-gradient(circle at 78% 18%, rgba(100, 231, 223, 0.2), transparent 28%),
        linear-gradient(180deg, rgba(6, 9, 16, 0.02), #060910 84%);
      pointer-events: none;
}

.page-moyue .site-header,
.page-moyue .refund-hero,
.page-moyue .refund-form-section,
.page-moyue .site-footer {
width: calc(100vw - 32px);
      max-width: 1180px;
      margin-inline: auto;
}

.page-moyue .site-header {
position: sticky;
      top: 12px;
      z-index: 10;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 20px;
      min-height: 74px;
      padding: 12px 14px;
      margin-top: 12px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(7, 10, 18, 0.72);
      backdrop-filter: blur(18px) saturate(135%);
      -webkit-backdrop-filter: blur(18px) saturate(135%);
      box-shadow: 0 22px 55px rgba(0, 0, 0, 0.34);
}

.page-moyue .brand {
display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 190px;
}

.page-moyue .brand-mark {
display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 229, 154, 0.58);
      border-radius: 8px;
      color: #221403;
      background: linear-gradient(135deg, #fff2b4, #e5ad4e 56%, #99601f);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 26px rgba(223, 159, 61, 0.26);
      font-weight: 900;
}

.page-moyue .brand strong,
.page-moyue .brand small {
display: block;
}

.page-moyue .brand strong {
font-size: 17px;
}

.page-moyue .brand small {
margin-top: 3px; color: var(--muted); font-size: 12px;
}

.page-moyue .top-nav {
display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #dce7f7;
      font-size: 14px;
}

.page-moyue .top-nav a {
padding: 10px 12px;
      border-radius: 8px;
}

.page-moyue .top-nav a:hover {
background: rgba(255, 255, 255, 0.08);
}

.page-moyue .header-cta {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      padding: 0 16px;
      border-radius: 8px;
      color: #201303;
      background: linear-gradient(135deg, #ffe99e, #d89638);
      font-size: 14px;
      font-weight: 900;
      white-space: nowrap;
}

.page-moyue .refund-hero {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 52px 0 38px;
}

.page-moyue .refund-hero > div {
max-width: 760px;
}

.page-moyue .eyebrow {
display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      color: var(--aqua);
      font-size: 13px;
      font-weight: 900;
}

.page-moyue .eyebrow::before {
content: "";
      width: 26px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
}

.page-moyue h1,
.page-moyue h2,
.page-moyue h3,
.page-moyue p {
margin-top: 0;
}

.page-moyue h1 {
max-width: 840px;
      margin-bottom: 18px;
      font-size: clamp(32px, 5vw, 58px);
      line-height: 1.08;
      letter-spacing: 0;
}

.page-moyue h2 {
margin-bottom: 14px;
      font-size: clamp(24px, 3.5vw, 38px);
      line-height: 1.13;
      letter-spacing: 0;
}

.page-moyue .refund-hero p {
color: var(--muted);
      font-size: 17px;
      line-height: 1.82;
      max-width: 680px;
}

.page-moyue .button {
display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 21px;
      border: 1px solid transparent;
      border-radius: 8px;
      font-weight: 900;
      white-space: nowrap;
      cursor: pointer;
      font-family: inherit;
      font-size: 15px;
      transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.page-moyue .button:hover {
transform: translateY(-2px);
}

.page-moyue .button.primary {
color: #1f1304;
      background: linear-gradient(135deg, #fff0a8, #e0a044 58%, #a86d25);
      box-shadow: 0 16px 34px rgba(199, 139, 44, 0.28);
}

.page-moyue .button.ghost {
border-color: rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.07);
}

.page-moyue .refund-button {
color: #2a0704;
      background: linear-gradient(135deg, #ffd9d5, #ff827b);
      box-shadow: 0 16px 34px rgba(255, 130, 123, 0.22);
}

.page-moyue .refund-form-section {
display: grid;
      grid-template-columns: 1.35fr 0.65fr;
      gap: 18px;
      padding: 10px 0 72px;
      align-items: start;
}

.page-moyue .refund-form {
display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      padding: 28px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
      box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
}

.page-moyue .refund-form label {
display: flex;
      flex-direction: column;
      gap: 8px;
}

.page-moyue .refund-form label span {
color: var(--muted);
      font-size: 14px;
      font-weight: 700;
}

.page-moyue .refund-form input,
.page-moyue .refund-form select,
.page-moyue .refund-form textarea {
width: 100%;
      padding: 13px 15px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 8px;
      color: var(--ink);
      background: rgba(7, 10, 18, 0.6);
      font-size: 15px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-moyue .refund-form input::placeholder,
.page-moyue .refund-form textarea::placeholder {
color: var(--dim);
}

.page-moyue .refund-form input:focus,
.page-moyue .refund-form select:focus,
.page-moyue .refund-form textarea:focus {
border-color: rgba(100, 231, 223, 0.5);
      box-shadow: 0 0 0 3px rgba(100, 231, 223, 0.1);
}

.page-moyue .refund-form select {
appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b9c7dc' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 38px;
}

.page-moyue .refund-form select option {
background: var(--panel-solid);
      color: var(--ink);
}

.page-moyue .refund-form textarea {
resize: vertical;
      min-height: 120px;
}

.page-moyue .wide-field {
grid-column: 1 / -1;
}

.page-moyue .form-actions {
grid-column: 1 / -1;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 6px;
}

.page-moyue .refund-note {
padding: 28px;
      border: 1px solid rgba(244, 202, 105, 0.3);
      border-radius: 8px;
      background: linear-gradient(135deg, rgba(244, 202, 105, 0.1), rgba(100, 231, 223, 0.06));
      box-shadow: 0 22px 58px rgba(0, 0, 0, 0.22);
}

.page-moyue .refund-note h2 {
font-size: 22px;
      margin-bottom: 12px;
      color: var(--gold);
}

.page-moyue .refund-note p {
color: var(--muted);
      line-height: 1.8;
      margin-bottom: 24px;
}

.page-moyue .refund-note .button {
width: 100%;
}

.page-moyue .refund-toast {
position: fixed;
      left: 50%;
      bottom: 34px;
      z-index: 100;
      width: calc(100vw - 32px);
      max-width: 440px;
      padding: 18px 22px;
      border: 1px solid rgba(100, 231, 223, 0.5);
      border-radius: 8px;
      background: linear-gradient(180deg, rgba(12, 19, 32, 0.97), rgba(12, 19, 32, 0.92));
      box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(100, 231, 223, 0.18);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      opacity: 0;
      transform: translate(-50%, 24px);
      pointer-events: none;
      transition: opacity 0.32s ease, transform 0.32s ease;
}

.page-moyue .refund-toast.show {
opacity: 1;
      transform: translate(-50%, 0);
      pointer-events: auto;
}

.page-moyue .refund-toast strong {
display: block;
      margin-bottom: 6px;
      color: var(--aqua);
      font-size: 16px;
}

.page-moyue .refund-toast p {
margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.7;
}

.page-moyue .refund-toast.error {
border-color: rgba(255, 130, 123, 0.55);
      box-shadow: 0 26px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 130, 123, 0.2);
}

.page-moyue .refund-toast.error strong {
color: var(--rose);
}

.page-moyue .site-footer {
display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 28px 0 42px;
      border-top: 1px solid var(--line);
}

.page-moyue .site-footer p {
margin-bottom: 0;
      color: var(--muted);
      line-height: 1.76;
}

.page-moyue .site-footer a {
color: var(--gold);
      font-weight: 900;
      white-space: nowrap;
}

@media (max-width: 1040px) {
.page-moyue .site-header {
grid-template-columns: auto auto;
}

.page-moyue .top-nav {
display: none;
}

.page-moyue .header-cta {
justify-self: end;
}

.page-moyue .refund-form-section {
grid-template-columns: 1fr;
}
}

@media (max-width: 640px) {
.page-moyue::before {
background:
          linear-gradient(180deg, rgba(6, 9, 16, 0.56), #060910 70%),
          url("honor-of-kings-02.jpg") center top / auto 48vh no-repeat;
}
}

@media (max-width: 720px) {
.page-moyue .site-header,
.page-moyue .refund-hero,
.page-moyue .refund-form-section,
.page-moyue .site-footer {
width: calc(100vw - 22px);
}

.page-moyue .site-header {
top: 8px;
        min-height: 64px;
        gap: 10px;
        padding: 10px;
}

.page-moyue .brand {
min-width: 0;
}

.page-moyue .brand small,
.page-moyue .header-cta {
display: none;
}

.page-moyue .refund-hero {
flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        padding-top: 36px;
        padding-bottom: 24px;
}

.page-moyue h1 {
font-size: 32px;
}

.page-moyue .refund-hero p {
font-size: 15px;
}

.page-moyue .refund-form {
grid-template-columns: 1fr;
        padding: 20px;
}

.page-moyue .form-actions .button {
flex: 1 1 200px;
}

.page-moyue .site-footer {
display: block;
}

.page-moyue .site-footer a {
display: inline-block;
        margin-top: 12px;
}
}