* { box-sizing: border-box; }



    :root {

      --bg-1: #050c1f;

      --bg-2: #091735;

      --bg-3: #13254b;

      --card: rgba(17, 31, 66, 0.9);

      --card-2: rgba(12, 24, 52, 0.94);

      --line: rgba(255, 255, 255, 0.08);

      --line-strong: rgba(120, 153, 255, 0.22);

      --text: #ffffff;

      --muted: rgba(255,255,255,0.76);

      --muted-2: rgba(255,255,255,0.56);

      --muted-3: rgba(255,255,255,0.42);

      --orange-1: #ffbf57;

      --orange-2: #ff8d2a;

      --orange-3: #ff6b1a;

      --blue-1: #6d8dff;

      --blue-2: #4f78ff;

      --blue-3: #3158d9;

      --green: #4ade80;

      --blue-glow: rgba(79, 120, 255, 0.26);

      --orange-glow: rgba(255, 144, 52, 0.24);

      --shadow-lg: 0 24px 60px rgba(0,0,0,0.30);

      --shadow-md: 0 16px 34px rgba(0,0,0,0.24);

      --radius-xl: 28px;

      --radius-lg: 22px;

      --radius-md: 16px;

    }



    html { scroll-behavior: smooth; }



    body {

      margin: 0;

      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",

        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

      color: var(--text);

      background:

        radial-gradient(circle at 50% -8%, rgba(98, 130, 255, 0.30), transparent 25%),

        radial-gradient(circle at 85% 12%, rgba(255, 146, 65, 0.10), transparent 18%),

        radial-gradient(circle at 12% 35%, rgba(56, 93, 255, 0.12), transparent 20%),

        linear-gradient(180deg, #020611 0%, #071126 16%, #08142b 54%, #050b18 100%);

      min-height: 100vh;

      overflow-x: hidden;

    }



    body::before,

    body::after {

      content: "";

      position: fixed;

      border-radius: 50%;

      filter: blur(60px);

      pointer-events: none;

      z-index: 0;

    }

    body::before {

      width: 180px;

      height: 180px;

      top: 80px;

      left: -40px;

      background: rgba(85, 118, 255, 0.18);

    }

    body::after {

      width: 220px;

      height: 220px;

      bottom: 60px;

      right: -80px;

      background: rgba(255, 152, 83, 0.12);

    }



    a { text-decoration: none; color: inherit; }



    .wrap {

      max-width: 480px;

      margin: 0 auto;

      min-height: 100vh;

      padding: 18px 14px 42px;

      position: relative;

      z-index: 1;

    }



    .hero-glow {

      position: absolute;

      inset: 10px 18px auto 18px;

      height: 220px;

      border-radius: 999px;

      background: radial-gradient(circle, rgba(88, 123, 255, 0.18), transparent 60%);

      filter: blur(26px);

      z-index: -1;

    }



    .section-head {

      text-align: center;

      margin: 20px 0 16px;

      position: relative;

    }



    .section-head .eyebrow {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      padding: 8px 14px;

      border-radius: 999px;

      background: rgba(255, 173, 77, 0.09);

      color: #ffd18b;

      border: 1px solid rgba(255, 173, 77, 0.18);

      font-size: 12px;

      font-weight: 800;

      margin-bottom: 14px;

      box-shadow: 0 8px 18px rgba(0,0,0,0.12);

    }



    .section-head h2 {

      margin: 0;

      font-size: 34px;

      line-height: 1.2;

      letter-spacing: 0.3px;

      text-shadow: 0 10px 28px rgba(0,0,0,0.36);

    }



    .section-sub {

      margin: 12px auto 0;

      max-width: 310px;

      font-size: 13px;

      line-height: 1.7;

      color: var(--muted-2);

    }



    .top-points {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 10px;

      margin: 18px 0 16px;

    }



    .top-point {

      border-radius: 16px;

      padding: 12px 10px;

      text-align: center;

      background: linear-gradient(180deg, rgba(18,30,64,0.82), rgba(11,21,45,0.88));

      border: 1px solid rgba(255,255,255,0.06);

      box-shadow: var(--shadow-md);

    }



    .top-point b {

      display: block;

      font-size: 15px;

      margin-bottom: 5px;

      color: #edf2ff;

    }



    .top-point span {

      font-size: 11px;

      color: var(--muted-3);

      line-height: 1.5;

    }



    .card {

      border-radius: var(--radius-xl);

      padding: 22px 18px 18px;

      margin-bottom: 16px;

      position: relative;

      overflow: hidden;

      background:

        radial-gradient(circle at top right, rgba(255, 149, 58, 0.10), transparent 26%),

        linear-gradient(180deg, rgba(24,40,78,0.94), rgba(14,26,54,0.97));

      border: 1px solid rgba(255,255,255,0.08);

      box-shadow:

        0 22px 50px rgba(0,0,0,0.26),

        inset 0 1px 0 rgba(255,255,255,0.05);

    }



    .card::before {

      content: "";

      position: absolute;

      inset: 0 auto auto 0;

      width: 100%;

      height: 1px;

      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);

      opacity: 0.65;

    }



    .card.web {

      background:

        radial-gradient(circle at 100% 0%, rgba(110, 132, 255, 0.16), transparent 30%),

        radial-gradient(circle at 0% 100%, rgba(63, 111, 255, 0.08), transparent 30%),

        linear-gradient(180deg, rgba(21,38,77,0.96), rgba(9,20,48,0.98));

      border: 1px solid rgba(135, 158, 255, 0.18);

      box-shadow:

        0 24px 52px rgba(0, 10, 35, 0.42),

        inset 0 1px 0 rgba(255,255,255,0.05),

        0 0 0 1px rgba(77, 107, 220, 0.08);

    }



    .corner {

      position: absolute;

      right: 16px;

      top: 16px;

      font-size: 12px;

      font-weight: 900;

      padding: 7px 12px;

      border-radius: 999px;

      color: #1f2937;

      background: linear-gradient(90deg, var(--orange-1), var(--orange-2));

      box-shadow: 0 8px 18px rgba(255, 144, 52, 0.20);

    }



    .web .corner {

      color: #edf2ff;

      background: linear-gradient(90deg, rgba(93,123,255,0.22), rgba(68,95,221,0.16));

      border: 1px solid rgba(116, 146, 255, 0.20);

      box-shadow: none;

    }



    .mini {

      display: inline-flex;

      align-items: center;

      gap: 8px;

      font-size: 13px;

      font-weight: 800;

      margin-bottom: 14px;

      padding: 9px 12px;

      border-radius: 999px;

      background: rgba(255,255,255,0.04);

      border: 1px solid rgba(255,255,255,0.06);

      color: #ffd18b;

    }



    .web .mini {

      color: #cbd7ff;

      background: rgba(120, 145, 255, 0.08);

      border-color: rgba(120, 145, 255, 0.12);

    }



    .card h3 {

      font-size: 30px;

      line-height: 1.18;

      margin: 0 0 8px;

      letter-spacing: 0.2px;

    }



    .card-desc {

      margin: 0 0 14px;

      font-size: 14px;

      line-height: 1.7;

      color: var(--muted);

    }



    .quick-tips {

      display: flex;

      gap: 8px;

      flex-wrap: wrap;

      margin: 0 0 14px;

    }



    .quick-tip {

      font-size: 12px;

      color: #eaf0ff;

      background: rgba(255,255,255,0.05);

      border: 1px solid rgba(255,255,255,0.07);

      border-radius: 999px;

      padding: 7px 11px;

      font-weight: 700;

    }



    .input-group {

      margin: 14px 0 10px;

      position: relative;

    }



    .input-group input {

      width: 100%;

      padding: 17px 16px;

      border-radius: 16px;

      background: linear-gradient(180deg, rgba(3,13,34,0.72), rgba(6,17,40,0.9));

      border: 1px solid rgba(147, 170, 255, 0.16);

      color: #fff;

      font-size: 20px;

      letter-spacing: 0.4px;

      outline: none;

      transition: all 0.3s ease;

      box-shadow:

        inset 0 2px 10px rgba(0,0,0,0.16),

        0 12px 24px rgba(3, 10, 28, 0.2);

    }



    .input-group input:focus {

      border-color: #5b7fff;

      background: rgba(4, 14, 34, 0.96);

      box-shadow:

        0 0 0 3px rgba(91, 127, 255, 0.18),

        0 16px 28px rgba(4, 12, 28, 0.28);

    }



    .input-group input::placeholder {

      color: rgba(255,255,255,0.34);

      font-size: 16px;

      letter-spacing: 0;

    }



    .help-row {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 10px;

      margin: 10px 0 14px;

    }



    .status-text {

      font-size: 13px;

      display: none;

      padding-left: 4px;

    }



    .error-text { color: #ff7c7c; }

    .loading-text { color: #9cb2ff; animation: pulse 1.5s infinite; }



    .help-link {

      display: inline-flex;

      align-items: center;

      gap: 6px;

      font-size: 13px;

      font-weight: 800;

      color: #a8bcff;

      cursor: pointer;

      user-select: none;

      transition: all .2s ease;

    }



    .help-link:hover {

      color: #d7e1ff;

      transform: translateY(-1px);

    }



    .help-link small {

      font-size: 12px;

      color: rgba(255,255,255,0.42);

      font-weight: 700;

    }



    @keyframes pulse {

      0% {opacity: 0.6;}

      50% {opacity: 1;}

      100% {opacity: 0.6;}

    }



    .btn {

      display: block;

      width: 100%;

      text-align: center;

      padding: 16px 14px;

      border-radius: 18px;

      font-size: 18px;

      font-weight: 900;

      transition: all .2s ease;

      cursor: pointer;

      border: none;

      outline: none;

    }



    .btn:active { transform: scale(0.985); }



    .btn:disabled {

      opacity: 0.42;

      cursor: not-allowed;

      transform: none;

      filter: grayscale(60%);

    }



    .btn-main {

      background: linear-gradient(90deg, var(--orange-1), var(--orange-2), var(--orange-3));

      color: #101828;

      box-shadow: 0 16px 30px rgba(255, 127, 31, 0.22);

    }



    .btn-sub {

      background: linear-gradient(90deg, #5a80ff, #4469ea);

      color: #ffffff;

      border: 1px solid rgba(135, 158, 255, 0.22);

      box-shadow:

        0 18px 36px rgba(79, 120, 255, 0.24),

        inset 0 1px 0 rgba(255,255,255,0.12);

    }



    .btn-sub:hover:not(:disabled) {

      transform: translateY(-1px);

      box-shadow:

        0 22px 38px rgba(79, 120, 255, 0.30),

        inset 0 1px 0 rgba(255,255,255,0.14);

    }



    .hint {

      margin-top: 10px;

      font-size: 12px;

      color: var(--muted-2);

      text-align: center;

      line-height: 1.7;

    }



    .safe-strip {

      margin-top: 14px;

      border-radius: 16px;

      padding: 12px 14px;

      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));

      border: 1px solid rgba(255,255,255,0.06);

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 8px;

      text-align: center;

    }



    .safe-strip div {

      font-size: 11px;

      line-height: 1.5;

      color: #dfe8ff;

    }



    .safe-strip b {

      display: block;

      font-size: 13px;

      color: #fff;

      margin-bottom: 3px;

    }



    .features {

      margin: 16px 0 18px;

      display: flex;

      flex-wrap: wrap;

      gap: 8px;

    }



    .feature {

      font-size: 12px;

      color: #eef2ff;

      background: rgba(255,255,255,0.05);

      border: 1px solid rgba(255,255,255,0.07);

      border-radius: 999px;

      padding: 8px 11px;

      font-weight: 700;

    }



    .chooser, .faq {

      background: linear-gradient(180deg, rgba(18,31,62,0.94), rgba(10,21,47,0.96));

      border: 1px solid rgba(255,255,255,0.08);

      border-radius: 26px;

      padding: 18px;

      box-shadow: 0 18px 40px rgba(0,0,0,0.24);

      margin-top: 16px;

      position: relative;

      overflow: hidden;

    }



    .chooser::after,

    .faq::after {

      content: "";

      position: absolute;

      top: -20px;

      right: -20px;

      width: 100px;

      height: 100px;

      background: radial-gradient(circle, rgba(95, 124, 255, 0.16), transparent 65%);

      pointer-events: none;

    }



    .chooser h3, .faq h3 {

      margin: 0 0 14px;

      font-size: 20px;

    }



    .choose-item, .faq-item {

      display: flex;

      gap: 12px;

      align-items: flex-start;

      padding: 13px 0;

      border-bottom: 1px solid rgba(255,255,255,0.07);

    }



    .faq-item { display: block; }



    .choose-item:last-child, .faq-item:last-child { border-bottom: none; }



    .num {

      width: 28px;

      height: 28px;

      border-radius: 50%;

      background: rgba(255, 173, 77, 0.14);

      color: #ffd18b;

      display: inline-flex;

      align-items: center;

      justify-content: center;

      font-size: 13px;

      font-weight: 900;

      flex: 0 0 28px;

      margin-top: 2px;

    }



    .choose-item strong, .faq-item strong {

      display: block;

      font-size: 15px;

      margin-bottom: 5px;

    }



    .choose-item span, .faq-item span {

      font-size: 13px;

      color: var(--muted);

      line-height: 1.75;

    }



    .bottom-note {

      margin-top: 14px;

      text-align: center;

      font-size: 12px;

      color: var(--muted-3);

      line-height: 1.7;

    }



    .overlay {

      position: fixed;

      inset: 0;

      background: rgba(4, 9, 19, 0.85);

      backdrop-filter: blur(6px);

      z-index: 9999;

      display: none;

      align-items: center;

      justify-content: center;

      opacity: 0;

      transition: opacity 0.3s ease;

      padding: 16px;

    }



    .overlay.show {

      display: flex;

      opacity: 1;

    }



    .overlay-content {

      text-align: center;

      color: white;

      background: var(--card-2);

      padding: 30px;

      border-radius: 24px;

      border: 1px solid var(--line);

      min-width: 280px;

      box-shadow: 0 20px 40px rgba(0,0,0,0.5);

    }



    .spinner {

      width: 44px;

      height: 44px;

      border: 4px solid rgba(255,255,255,0.1);

      border-top-color: #5b7fff;

      border-radius: 50%;

      animation: spin 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;

      margin: 0 auto 16px;

    }



    @keyframes spin {

      to { transform: rotate(360deg); }

    }



    .modal {

      position: fixed;

      inset: 0;

      z-index: 10000;

      display: none;

      align-items: center;

      justify-content: center;

      padding: 16px;

      background: rgba(5, 10, 22, 0.88);

      backdrop-filter: blur(8px);

      opacity: 0;

      transition: opacity .25s ease;

    }



    .modal.show {

      display: flex;

      opacity: 1;

    }



    .modal-card {

      width: 100%;

      max-width: 420px;

      background:

        radial-gradient(circle at top right, rgba(103,129,255,0.16), transparent 28%),

        linear-gradient(180deg, rgba(19,31,64,0.96), rgba(10,18,40,0.98));

      border: 1px solid rgba(255,255,255,0.08);

      border-radius: 24px;

      box-shadow: 0 26px 60px rgba(0,0,0,0.42);

      overflow: hidden;

    }



    .modal-head {

      display: flex;

      align-items: center;

      justify-content: space-between;

      gap: 12px;

      padding: 16px 18px 12px;

      border-bottom: 1px solid rgba(255,255,255,0.08);

    }



    .modal-head h4 {

      margin: 0;

      font-size: 18px;

      color: #fff;

    }



    .modal-close {

      width: 34px;

      height: 34px;

      border-radius: 50%;

      border: 1px solid rgba(255,255,255,0.10);

      background: rgba(255,255,255,0.05);

      color: #fff;

      font-size: 18px;

      cursor: pointer;

    }



    .modal-body {

      padding: 16px 16px 18px;

    }



    .modal-body p {

      margin: 0 0 12px;

      font-size: 13px;

      line-height: 1.75;

      color: var(--muted);

    }



    .guide-image-wrap {

      border-radius: 18px;

      overflow: hidden;

      border: 1px solid rgba(255,255,255,0.08);

      background: rgba(255,255,255,0.03);

      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);

    }



    .guide-image-wrap img {

      display: block;

      width: 100%;

      height: auto;

    }



    .guide-tip {

      margin-top: 12px;

      padding: 12px 14px;

      border-radius: 14px;

      background: rgba(99, 124, 255, 0.08);

      border: 1px solid rgba(99, 124, 255, 0.14);

      font-size: 12px;

      line-height: 1.7;

      color: #d9e4ff;

    }



    @media (max-width: 390px) {

      .section-head h2 { font-size: 29px; }

      .card h3 { font-size: 26px; }

      .top-points { gap: 8px; }

      .top-point { padding: 10px 8px; }

    }

    .privilege-modal {
      position: fixed;
      inset: 0;
      z-index: 12000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(5, 3, 8, 0.78);
      backdrop-filter: blur(8px);
    }

    .privilege-modal.show {
      display: flex;
    }

    .privilege-card {
      width: 100%;
      max-width: 420px;
      border-radius: 22px;
      padding: 22px 20px 18px;
      background: linear-gradient(165deg, #2a0a0c 0%, #140506 100%);
      border: 2px solid rgba(255, 215, 0, 0.55);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 215, 0, 0.12);
      color: #f8f4e8;
      position: relative;
    }

    .privilege-badge {
      display: inline-block;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.12em;
      color: #1a0506;
      background: linear-gradient(90deg, #ffe566, #ffd700, #c9a227);
      margin-bottom: 12px;
    }

    .privilege-card h3 {
      margin: 0 0 12px;
      font-size: 20px;
      font-weight: 900;
      color: #ffd700;
      line-height: 1.35;
    }

    .privilege-card p {
      margin: 0 0 18px;
      font-size: 13px;
      line-height: 1.85;
      color: rgba(248, 244, 232, 0.78);
    }

    .privilege-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .privilege-actions button {
      flex: 1;
      min-width: 120px;
      height: 46px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 900;
      cursor: pointer;
      border: none;
    }

    .privilege-cancel {
      background: rgba(255, 255, 255, 0.06);
      color: #e8eeff;
      border: 1px solid rgba(255, 255, 255, 0.14);
    }

    .privilege-confirm {
      background: linear-gradient(135deg, #ffe566 0%, #ffd700 45%, #c9a227 100%);
      color: #1a0506;
      box-shadow: 0 14px 32px rgba(255, 215, 0, 0.22);
    }