:root {
      --bg: #fff2f5;
      --glow-1: rgba(255, 178, 204, 0.5);
      --glow-2: rgba(255, 222, 180, 0.32);
      --glow-3: rgba(216, 184, 255, 0.28);
      --paper: #fffdfb;
      --ink: #5b3f4c;
      --ink-soft: #a3808f;
      --ink-faint: #c9aebb;
      --rose: #f4a9bd;
      --rose-deep: #e2688d;
      --rose-line: #ffd9e4;
      --success: #3f8b6e;
      --danger: #c45270;
      --shadow-page: 0 18px 38px -18px rgba(226, 104, 141, 0.5);
    }

    * { box-sizing: border-box; font-synthesis: none; -webkit-tap-highlight-color: transparent; }
    html, body { margin: 0; padding: 0; min-height: 100%; }
    body {
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      justify-content: center;
      /* 三处柔光 */
      background:
        radial-gradient(620px 400px at 12% -8%, var(--glow-1), transparent 60%),
        radial-gradient(560px 400px at 105% 5%, var(--glow-2), transparent 55%),
        /* 底部这层原来在 50% 115%，弧顶正好落在按钮下方，看着像“上下两块被切开”；
           推到 142% 并加长渐隐后，只留一点点底部柔光，不再有可见分界 */
        radial-gradient(520px 380px at 50% 142%, var(--glow-3), transparent 78%),
        var(--bg);
      /* 必须写在 background 简写【之后】：简写会把 background-repeat 重置为 repeat，
         而这些柔光都带固定尺寸，一旦平铺就会在右上角多出一份副本 */
      background-repeat: no-repeat;
      color: var(--ink);
      font-family: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
    }

    svg { display: block; }
    .hand { font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif; }

    .screen {
      width: 100%;
      max-width: 420px;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      padding: 0 30px calc(26px + env(safe-area-inset-bottom, 0px));
    }

    .hero {
      padding: calc(64px + env(safe-area-inset-top, 0px)) 0 26px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .badge-wrap { position: relative; margin-bottom: 20px; }
    .badge-ring {
      position: absolute;
      inset: -10px;
      border: 1.5px dashed var(--rose-line);
      border-radius: 32px;
      animation: spin 24s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    .badge {
      position: relative;
      width: 80px;
      height: 80px;
      overflow: hidden;
      border-radius: 24px;
      background: linear-gradient(150deg, #ffd3e2, #f4a9bd 55%, #e2688d);
      box-shadow: var(--shadow-page);
    }

    .badge img { width: 100%; height: 100%; display: block; object-fit: cover; }
    .hero h1 { margin: 0 0 8px; color: var(--rose-deep); font-size: 27px; font-weight: 600; letter-spacing: 0; }
    .hero p { margin: 0; color: var(--ink-soft); font-size: 13.5px; }

    form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
    .field-group { display: flex; flex-direction: column; gap: 6px; }
    .field-group .fl { padding-left: 4px; color: var(--ink-soft); font-size: 12px; font-weight: 500; }

    .field {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 2px 6px 2px 16px;
      border: 1.5px solid var(--rose-line);
      border-radius: 16px;
      background: var(--paper);
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .field:focus-within {
      border-color: var(--rose-deep);
      box-shadow: 0 0 0 4px rgba(226, 104, 141, 0.1);
    }

    .field svg.leading {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      color: var(--ink-faint);
      transition: color 0.18s ease;
    }

    .field:focus-within svg.leading { color: var(--rose-deep); }
    .field input {
      flex: 1;
      min-width: 0;
      padding: 14px 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 16px;
    }

    .field input::placeholder { color: var(--ink-faint); }
    .eye-btn {
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--ink-faint);
      cursor: pointer;
      transition: color 0.15s ease;
    }

    .eye-btn:hover, .eye-btn:focus-visible { color: var(--rose-deep); }
    .eye-btn svg { width: 18px; height: 18px; }

    .submit-btn {
      min-height: 52px;
      margin-top: 10px;
      padding: 14px 16px;
      border: 0;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--rose), var(--rose-deep));
      box-shadow: 0 14px 28px -14px rgba(226, 104, 141, 0.7);
      color: #fff;
      cursor: pointer;
      font: inherit;
      font-size: 15.5px;
      font-weight: 600;
      letter-spacing: 0;
      transition: opacity 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
    }

    .submit-btn:hover { box-shadow: 0 16px 32px -14px rgba(226, 104, 141, 0.8); }
    .submit-btn:active { transform: scale(0.98); }
    .submit-btn:disabled { opacity: 0.42; box-shadow: none; cursor: not-allowed; }

    #loginAlert { min-height: 20px; margin: -4px 0 -6px; text-align: center; }
    .alert-box { font-size: 13px; font-weight: 500; }
    .alert-err { color: var(--danger); }
    .alert-ok { color: var(--success); }
    .caption { margin: 0; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

    .icp-footer {
      margin-top: auto;
      padding-top: 30px;
      text-align: center;
      font-size: 12px;
    }

    .icp-footer a { color: var(--ink-faint); text-decoration: none; }
    .icp-footer a:hover { color: var(--rose-deep); }
    .w2cat-android .icp-footer { display: none; }

    .decor { position: fixed; z-index: -1; color: var(--rose-line); pointer-events: none; }
    .decor svg { width: 100%; height: 100%; }
    .decor.d1 { width: 24px; top: 9%; left: 9%; opacity: 0.8; transform: rotate(-14deg); }
    .decor.d2 { width: 16px; top: 22%; right: 11%; opacity: 0.7; transform: rotate(12deg); }
    .decor.d3 { width: 20px; bottom: 16%; left: 10%; opacity: 0.6; transform: rotate(8deg); }
    .decor.d4 { width: 13px; right: 9%; bottom: 30%; opacity: 0.6; transform: rotate(-8deg); }

    @media (min-width: 421px) {
      body { align-items: center; padding: 24px 0; }
      .screen {
        min-height: min(760px, calc(100vh - 48px));
        padding-bottom: 34px;
        border-radius: 34px;
        background: var(--paper);
        box-shadow: 0 34px 64px -26px rgba(226, 104, 141, 0.4);
      }
      .hero { padding-top: 48px; }
    }

    @media (max-height: 680px) {
      .hero { padding-top: calc(34px + env(safe-area-inset-top, 0px)); padding-bottom: 18px; }
      .badge { width: 68px; height: 68px; border-radius: 20px; }
      .badge-ring { border-radius: 27px; }
      form { gap: 12px; }
      .icp-footer { padding-top: 18px; }
    }

    @media (prefers-reduced-motion: reduce) { .badge-ring { animation: none; } }