:root {
      color-scheme: light;
      --brand: #A8732E;
      --ink: #392D20;
      --gold: #A8732E;
      --light-gold: #EFD5A7;
      --text: #392D20;
      --muted: #807B75;
      --card: rgba(255, 255, 255, 0.88);
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      min-height: 100%;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: #e8dfd1 url("download-assets/preview-background.png") center top / cover no-repeat fixed;
      display: flex;
      justify-content: center;
    }

    .page {
      width: min(100vw, 430px);
      min-height: 100vh;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255, 247, 238, .12), rgba(255, 247, 238, .24)),
        url("download-assets/preview-background.png") center top / 100% 100% no-repeat;
      box-shadow: 0 0 40px rgba(57, 45, 32, .18);
    }

    .hero {
      position: relative;
      padding: 34px 22px 24px;
      text-align: center;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: -80px -80px auto;
      height: 250px;
      background: radial-gradient(circle, rgba(239, 213, 167, 0.22), transparent 60%);
      filter: blur(10px);
      z-index: -1;
    }


    .app-icon {
      width: 96px;
      height: 96px;
      margin: 0 auto 14px;
      border-radius: 26px;
      overflow: hidden;
      background: #EFD5A7;
      border: 1px solid rgba(255, 255, 255, 0.84);
      box-shadow: 0 18px 35px rgba(57, 45, 32, 0.28);
    }

    .app-icon img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    h1 {
      margin: 0;
      font-size: 28px;
      line-height: 1.25;
      letter-spacing: 0.22em;
      color: var(--ink);
      text-indent: 0.22em;
      font-weight: 800;
    }

    .tag {
      display: inline-block;
      margin-left: 8px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(216, 173, 91, 0.18);
      border: 1px solid rgba(216, 173, 91, 0.42);
      color: #8a6228;
      font-size: 12px;
      letter-spacing: 0;
      text-indent: 0;
      vertical-align: middle;
      font-weight: 700;
    }

    .subtitle {
      margin: 8px 0 0;
      color: #514536;
      font-size: 14px;
      letter-spacing: 0.12em;
    }



    .actions {
      display: grid;
      grid-template-columns: 1fr;
      width: min(100%, 240px);
      margin: 26px auto 0;
    }

    .btn {
      appearance: none;
      border: 0;
      border-radius: 14px;
      min-height: 48px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      font-family: inherit;
      box-shadow: 0 12px 24px rgba(168, 115, 46, 0.18);
    }

    .btn-primary {
      color: var(--ink);
      background: linear-gradient(120deg, #EFD5A7, #C49B63);
    }


    .content {
      padding: 0 14px 30px;
    }

    .card {
      border-radius: 22px;
      background: var(--card);
      border: 1px solid rgba(223, 188, 121, 0.45);
      box-shadow: 0 18px 40px rgba(57, 45, 32, 0.12);
      padding: 18px 14px;
      margin-bottom: 16px;
      backdrop-filter: blur(10px);
    }

    .section-title {
      margin: 0 0 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--ink);
      font-size: 18px;
      font-weight: 800;
    }

    .section-title::before {
      content: "";
      width: 5px;
      height: 20px;
      border-radius: 999px;
      background: linear-gradient(180deg, #EFD5A7, #A8732E);
    }

    .preview-list {
      display: flex;
      justify-content: center;
      gap: 12px;
      overflow-x: auto;
      padding: 2px 0 8px;
      scroll-snap-type: x mandatory;
    }

    .preview-list::-webkit-scrollbar {
      height: 4px;
    }

    .preview-list::-webkit-scrollbar-thumb {
      background: rgba(168, 115, 46, 0.28);
      border-radius: 999px;
    }

    .preview {
      width: 158px;
      height: 280px;
      flex: 0 0 auto;
      object-fit: cover;
      object-position: top center;
      border-radius: 16px;
      border: 1px solid rgba(216, 173, 91, 0.36);
      box-shadow: 0 10px 25px rgba(57, 45, 32, 0.12);
      background: #fff;
      scroll-snap-align: start;
    }

    .preview-contain {
      object-fit: contain;
    }

    .intro {
      margin: 0;
      color: #514536;
      font-size: 14px;
      line-height: 1.9;
    }

    .version {
      display: grid;
      gap: 8px;
      color: #6e5a43;
      font-size: 13px;
    }

    .safe-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .safe-tags span {
      padding: 6px 10px;
      border-radius: 999px;
      color: #73501f;
      background: rgba(216, 173, 91, 0.16);
      border: 1px solid rgba(216, 173, 91, 0.34);
      font-size: 12px;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 34px;
      transform: translateX(-50%) translateY(12px);
      max-width: min(86vw, 360px);
      padding: 12px 16px;
      border-radius: 999px;
      color: #fff;
      background: rgba(57, 45, 32, 0.9);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      z-index: 10;
      font-size: 14px;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.btn:disabled{opacity:.6;cursor:wait}

/* Registration preview is rendered as layout/text, not an interactive form. */
.register-preview{background:#ece4d7 url("download-assets/preview-background.png") center/100% 100%;padding:10px 10px 8px;color:#30291f;overflow:hidden}
.preview-brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.preview-brand img{width:28px;height:28px;border-radius:7px}
.preview-brand strong{font-family:serif;font-size:15px;line-height:20px;letter-spacing:1px}
.preview-brand small{font-size:5px;letter-spacing:1px}
.preview-form{margin-top:8px;padding:7px;background:rgba(255,255,255,.55);border-radius:6px;display:grid;gap:4px}
.preview-form span{background:#fff;border-radius:3px;height:17px;padding:4px 5px;font-size:6px;color:#777}
.preview-form small{font-size:5px;color:#8b693b}.preview-form b{background:linear-gradient(90deg,#e8ce9a,#b88f51);text-align:center;font-size:8px;padding:5px;border-radius:3px}