:root {
      --accent: #0a84ff;
      --muted: rgba(255,255,255,0.62);
      --bg: #1a1a1a;
      --app-vh: 1vh;
      --app-vw: 1vw;
      --app-full-h: max(100vh, calc(var(--app-vh) * 100));
      --app-full-w: max(100vw, calc(var(--app-vw) * 100));
      --android-status-bar-height: 0px;
      --android-nav-bar-height: 0px;
      --ui-btn-bg: rgba(255,255,255,0.14);
      --ui-btn-color: rgba(255,255,255,0.95);
      --ui-btn-border: 1px solid rgba(255,255,255,0.22);
      --ui-btn-radius: 10px;
      --ui-btn-shadow: none;
      --ui-btn-backdrop: none;
      --ui-btn-padding: 10px 14px;
      --ui-btn-font-size: 14px;
      --ui-btn-line-height: 1;
      --ui-btn-disabled-opacity: 0.6;
      --ui-btn-transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
      --page-side-padding: 6px;
      --tab-header-height: 36px;
      --tab-title-size: 14px;
      --bottom-nav-gap: 20px;
      --safe-top: max(env(safe-area-inset-top), var(--android-status-bar-height));
      --safe-bottom: max(env(safe-area-inset-bottom), var(--android-nav-bar-height));
      --header-offset: calc(54px + var(--safe-top));
      --shell-top-reserved: calc(var(--header-offset) + 6px);
      --shell-bottom-reserved: calc(98px + var(--bottom-nav-gap) + var(--safe-bottom));
    }
    html, body {
      margin: 0;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      background: var(--bg);
    }
    html {
      height: 100%;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      scrollbar-gutter: stable both-edges;
    }
    body {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: rgba(255,255,255,0.92);
      min-height: calc(var(--app-vh) * 100);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      -webkit-tap-highlight-color: transparent;
      overscroll-behavior-y: none;
    }
    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
      touch-action: manipulation;
    }
    button {
      -webkit-appearance: none;
      appearance: none;
    }
    @media (pointer: coarse) {
      input,
      select,
      textarea {
        font-size: 16px;
      }
    }
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      background: linear-gradient(180deg, rgba(20,20,20,0.78) 0%, rgba(20,20,20,0.42) 48%, rgba(20,20,20,0) 78%);
      backdrop-filter: none;
      border-bottom: none;
      padding: calc(var(--safe-top) - 1px) 12px 14px;
      margin-top: 0;
      z-index: 100;
      box-sizing: border-box;
    }
    header h1 {
      margin: 0;
      text-align: center;
      white-space: nowrap;
      overflow: visible;
      text-overflow: clip;
      min-height: 34px;
      min-width: 0;
      color: rgba(255,255,255,0.95);
    }
    .header-bar {
      display: none;  /* header 已废弃，功能移至悬浮按钮和独立分段栏 */
    }
    .brand-wordmark {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      width: auto;
      height: auto;
      min-height: 34px;
      padding: 4px 0 2px;
      box-sizing: border-box;
      font-family: Baskerville, 'Times New Roman', serif;
      font-size: 23px;
      letter-spacing: 1.75px;
      font-weight: 400;
      line-height: 1;
      color: #fff;
      user-select: none;
    }
    .brand-wordmark.is-hidden {
      visibility: hidden;
      pointer-events: none;
    }
    .brand-wordmark .brand-main,
    .brand-wordmark .brand-tail,
    .brand-wordmark .brand-i-char {
      letter-spacing: inherit;
      white-space: pre;
    }
    .brand-wordmark .brand-main {
      display: inline-flex;
      align-items: center;
    }
    .brand-wordmark .brand-main .brand-char {
      display: inline-block;
      letter-spacing: inherit;
    }
    .brand-wordmark .brand-main .brand-char-a,
    .brand-wordmark .brand-main .brand-char-i1,
    .brand-wordmark .brand-main .brand-char-v,
    .brand-wordmark .brand-main .brand-char-e,
    .brand-wordmark .brand-main .brand-char-s {
      margin-right: 4px;
    }
    .brand-wordmark .brand-i-wrap {
      position: relative;
      display: inline-flex;
      width: 22px;
      margin: 0 1.75px;
      justify-content: center;
      align-items: flex-start;
      flex: 0 0 22px;
    }
    .brand-wordmark .brand-sparkle {
      position: absolute;
      left: 6px;
      top: -7px;
      width: auto;
      height: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      line-height: 1;
      font-weight: 600;
      transform: none;
      z-index: 2;
      color: rgba(255, 255, 255, 0.98);
      text-shadow: 0 0 1px rgba(8, 11, 18, 0.42), 0 1px 3px rgba(0, 0, 0, 0.42);
      pointer-events: none;
    }
    .brand-wordmark.is-text {
      font-family: 'PingFang SC', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: rgba(255,255,255,0.94);
    }
    .container {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      min-height: calc(var(--app-vh) * 100);
      padding: 6px var(--page-side-padding) calc(116px + env(safe-area-inset-bottom));
      overflow-x: clip;
    }
    body.is-tryon-header-segment-visible .container {
      padding-top: 48px; /* space for fixed segment bar */
    }
    @media (max-width: 420px) {
      .brand-wordmark {
        width: auto;
        height: auto;
        min-height: 30px;
        padding: 3px 0 1px;
        font-size: 20px;
        letter-spacing: 1.35px;
        transform: translateY(-1px);
      }
      .brand-wordmark .brand-main,
      .brand-wordmark .brand-tail,
      .brand-wordmark .brand-i-char {
        letter-spacing: inherit;
      }
      .brand-wordmark .brand-main .brand-char-a,
      .brand-wordmark .brand-main .brand-char-i1,
      .brand-wordmark .brand-main .brand-char-v,
      .brand-wordmark .brand-main .brand-char-e,
      .brand-wordmark .brand-main .brand-char-s {
        margin-right: 4px;
      }
      .brand-wordmark .brand-i-wrap {
        width: 20px;
        margin: 0 1.35px;
        flex-basis: 20px;
      }
      .brand-wordmark .brand-sparkle {
        left: 5px;
        top: -5px;
        font-size: 9px;
      }
      .task-counter-btn {
        padding: 6px 10px;
        font-size: 11px;
      }
    }
    @media (min-width: 768px) {
      .container {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
    .card { border: 1px solid #eee; border-radius: 14px; padding: 12px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
    /* 模板图片区：去掉外框/留白，让图片紧密衔接 */
    .tpl-section { border: none; border-radius: 0; padding: 0; background: #1a1a1a; box-shadow: none; }
    /* 双列瀑布流：与页面一起滚动（不再分列独立滚动） */
    .masonry { display: flex; gap: 10px; align-items: flex-start; background: #1a1a1a; }
    .masonry-col { flex: 1 1 0; min-width: 0; padding-right: 0; display: flex; flex-direction: column; gap: 10px; }
    .tpl { position: relative; cursor: pointer; border: none; border-radius: 10px; padding: 0; display: block; width: 100%; break-inside: avoid; margin: 0; background: #111; overflow: hidden; aspect-ratio: 9 / 16; }
    .scenario-group,
    .tpl {
      content-visibility: auto;
      contain-intrinsic-size: 1px 640px;
    }
    /* 以原始比例展示完整图片，不裁切，居中显示 */
    .tpl img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; display: block; background: #111; }
    .imgbox { position: relative; background: #111; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 0; container-type: inline-size; aspect-ratio: 9 / 16; isolation: isolate; }
    .imgbox img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      position: relative;
      z-index: 1;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
      -webkit-user-select: none;
    }
    .imgbox.skeleton::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, rgba(255,255,255,0.06) 8%, rgba(255,255,255,0.16) 18%, rgba(255,255,255,0.06) 33%);
      background-size: 220% 100%;
      animation: img-skeleton 1.2s ease-in-out infinite;
      pointer-events: none;
    }
    .tpl-home-top-layer > .imgbox {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .tpl-home-top-layer > .tpl-product-mini-stack,
    .tpl-home-top-layer > .fav-btn,
    .tpl-home-top-layer > .try-icon,
    .tpl-home-top-layer > .home-share-btn {
      position: absolute;
    }
    @keyframes img-skeleton {
      0% { background-position: 0% 0%; }
      100% { background-position: -120% 0%; }
    }

    /* 试穿结果替换：淡入淡出 + “魔术感”动画（避免生硬切换） */
    .fade-swap {
      opacity: 1;
      transform: translateZ(0) scale(1);
      filter: none;
      transition:
        opacity 420ms ease-in-out,
        transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
      will-change: opacity, transform, filter;
    }
    .fade-swap.is-fading {
      opacity: 0;
      transform: translateZ(0) scale(0.97) rotate(-0.25deg);
      filter: blur(6px) saturate(0.9);
    }
    .fade-swap.is-reveal {
      opacity: 1;
      transform: translateZ(0) scale(1.03);
      filter: blur(0px) saturate(1.08);
    }

    /* 魔术闪光：叠加在图片容器上（不引入新素材） */
    .imgbox.magic-burst::after {
      content: "";
      position: absolute;
      inset: -12%;
      pointer-events: none;
      background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.95) 0 6px, rgba(255,255,255,0) 18px),
        radial-gradient(circle at 80% 25%, rgba(255,255,255,0.85) 0 5px, rgba(255,255,255,0) 18px),
        radial-gradient(circle at 65% 75%, rgba(255,255,255,0.9) 0 6px, rgba(255,255,255,0) 20px),
        radial-gradient(circle at 30% 80%, rgba(255,255,255,0.8) 0 5px, rgba(255,255,255,0) 18px),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.65) 0 10px, rgba(255,255,255,0) 34px);
      mix-blend-mode: screen;
      opacity: 0;
      filter: blur(6px);
      transform: translateZ(0) scale(0.92) rotate(-1deg);
      animation: magicBurst 560ms ease-out both;
    }
    @keyframes magicBurst {
      0% { opacity: 0; filter: blur(7px); transform: translateZ(0) scale(0.88) rotate(-1.2deg); }
      18% { opacity: 0.95; }
      100% { opacity: 0; filter: blur(0px); transform: translateZ(0) scale(1.28) rotate(1.2deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .fade-swap { transition: none !important; }
      .imgbox.magic-burst::after { animation: none !important; }
      .product-card { transition: none !important; }
    }
    .row { display: flex; gap: 8px; align-items: center; }

    /* 按钮统一收口：所有主按钮类型都走同一套变量引擎 */
    :where(button, .btn, .overlay-btn, .task-counter-btn, .tryon-action-btn, .fav-btn, .try-icon, .home-share-btn, .sms-send-btn, .scenario-show-more, .task-center-back, .scene-more-back, .icon-btn) {
      --ui-btn-bg-local: var(--ui-btn-bg);
      --ui-btn-color-local: var(--ui-btn-color);
      --ui-btn-border-local: var(--ui-btn-border);
      --ui-btn-radius-local: var(--ui-btn-radius);
      --ui-btn-shadow-local: var(--ui-btn-shadow);
      --ui-btn-backdrop-local: var(--ui-btn-backdrop);
      --ui-btn-padding-local: var(--ui-btn-padding);
      --ui-btn-font-size-local: var(--ui-btn-font-size);
      --ui-btn-line-height-local: var(--ui-btn-line-height);
      --ui-btn-transition-local: var(--ui-btn-transition);
      appearance: none;
      -webkit-appearance: none;
      background: var(--ui-btn-bg-local);
      color: var(--ui-btn-color-local);
      border: var(--ui-btn-border-local);
      border-radius: var(--ui-btn-radius-local);
      box-shadow: var(--ui-btn-shadow-local);
      backdrop-filter: var(--ui-btn-backdrop-local);
      padding: var(--ui-btn-padding-local);
      font-size: var(--ui-btn-font-size-local);
      line-height: var(--ui-btn-line-height-local);
      cursor: pointer;
      transition: var(--ui-btn-transition-local);
    }

    button,
    .btn {
      --ui-btn-bg-local: var(--accent);
      --ui-btn-color-local: #fff;
      --ui-btn-border-local: 1px solid transparent;
      --ui-btn-shadow-local: 0 1px 4px rgba(0,0,0,0.12);
    }

    :where(button, .btn, .overlay-btn, .task-counter-btn, .tryon-action-btn, .fav-btn, .try-icon, .home-share-btn, .sms-send-btn, .scenario-show-more, .task-center-back, .scene-more-back, .icon-btn):disabled {
      opacity: var(--ui-btn-disabled-opacity);
      cursor: not-allowed;
      pointer-events: none;
    }

    :where(button, .btn, .overlay-btn, .task-counter-btn, .tryon-action-btn, .fav-btn, .try-icon, .home-share-btn, .sms-send-btn, .scenario-show-more, .task-center-back, .scene-more-back, .icon-btn):focus-visible {
      outline: 2px solid rgba(10,132,255,0.72);
      outline-offset: 1px;
    }
    .muted { color: var(--muted); font-size: 12px; }
    input, select, textarea { box-sizing: border-box; max-width: 100%; }
    .results img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: #111; }
    .results .item { border: none; border-radius: 0; padding: 0; display: inline-block; width: 100%; break-inside: avoid; margin-bottom: 0; aspect-ratio: 9 / 16; background: #111; }
    footer { text-align: center; color: rgba(255,255,255,0.5); font-size: 12px; padding: 18px; }

    /* 隐藏“下拉加载更多...”提示，但保留哨兵元素用于无限滚动触发 */
    #tplSentinel {
      height: 1px;
      padding: 0 !important;
      margin: 0 !important;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
      user-select: none;
    }

    /* 预览遮罩 */
    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      /* 手机上留出可见边界（含安全区），避免弹窗贴边/出屏 */
      padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
      box-sizing: border-box;
    }
    .modal.open { display: flex; }
    .modal .content { max-width: 88vw; max-height: 88vh; position: relative; box-sizing: border-box; }
    .modal .content { overflow: auto; -webkit-overflow-scrolling: touch; }
    .modal img { max-width: 100%; max-height: 88vh; display: block; border-radius: 0; }
    .modal .close { position: absolute; top: 10px; right: 10px; background: #fff; color: #111; border: none; border-radius: 16px; padding: 8px 12px; cursor: pointer; z-index: 5; }
    body.my-modal-open {
      overflow: hidden;
    }

    .header-back-btn {
      width: 28px;
      height: 28px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(0,0,0,0.28);
      color: rgba(255,255,255,0.96);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(10px);
    }
    .header-back-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      transform: translateX(-1px);
    }

    /* 预览弹窗：确保内容区有稳定宽度，避免图片被收缩为 0 */
    #imgPreview .content { width: min(980px, 92vw); }
    #imgPreview .imgbox { width: 100%; }
    #imgPreview,
    #imgPreview .content,
    #imgPreview .imgbox {
      overscroll-behavior: contain;
    }
    #imgPreview {
      padding: 0 !important;
      align-items: flex-start !important;
      justify-content: flex-start !important;
      background: rgba(0,0,0,0.96);
    }

    /* 全屏大图预览：无按钮遮挡，仅右上角关闭 */
    #fullImagePreview {
      padding: 0;
      background: rgba(0,0,0,0.96);
      z-index: 13050;
    }
    #fullImagePreview .content {
      width: var(--app-full-w);
      height: var(--app-full-h);
      max-width: var(--app-full-w);
      max-height: var(--app-full-h);
      overflow: hidden;
    }
    #fullImagePreview .imgbox {
      width: var(--app-full-w);
      height: var(--app-full-h);
      display: flex;
      align-items: center;
      justify-content: center;
      touch-action: pan-x pan-y;
    }
    #fullImagePreview img {
      width: var(--app-full-w);
      height: var(--app-full-h);
      object-fit: contain;
    }
    #fullImagePreview .close {
      position: absolute;
      top: max(12px, env(safe-area-inset-top));
      right: max(12px, env(safe-area-inset-right));
      background: rgba(255,255,255,0.85);
      color: #111;
      border: none;
      border-radius: 16px;
      padding: 8px 12px;
      cursor: pointer;
      z-index: 5;
    }

    /* 下载成功 toast：底部居中极简提示 */
    .preview-download-toast {
      position: fixed;
      bottom: calc(32px + env(safe-area-inset-bottom));
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: rgba(30,30,32,0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: rgba(255,255,255,0.92);
      padding: 10px 20px;
      border-radius: 999px;
      font-size: 14px;
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.26s ease, transform 0.26s ease;
      pointer-events: none;
      white-space: nowrap;
    }
    .preview-download-toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* 视频预览：全屏播放 */
    #videoPreview {
      padding: 0 !important;
      align-items: stretch !important;
      justify-content: stretch !important;
      background: #000;
      z-index: 13100 !important;
    }
    #videoPreview .content { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; margin: 0; padding: 0; border-radius: 0; }
    #videoPreview .imgbox { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; background: #000; display: flex; align-items: center; justify-content: center; aspect-ratio: auto !important; overflow: visible !important; container-type: normal !important; isolation: auto !important; padding-top: 50px; box-sizing: border-box; }
    #videoPreview video { position: relative; width: 100%; max-height: 100%; object-fit: contain; z-index: 1; }
    .video-loading-indicator {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 15;
      color: #fff;
    }
    .video-loading-spinner {
      width: 48px; height: 48px;
      border: 4px solid rgba(255,255,255,0.2);
      border-top-color: #fff;
      border-radius: 50%;
      animation: video-spin 0.8s linear infinite;
    }
    @keyframes video-spin { to { transform: rotate(360deg); } }
    .video-loading-text {
      margin-top: 20px;
      font-size: 16px;
      color: rgba(255,255,255,0.85);
      text-align: center;
    }

    /* 登录/注册弹窗：随页面大小动态缩放 */
    .auth-modal .content {
      width: min(520px, 92vw);
      padding: clamp(16px, 3.2vw, 28px);
    }
    .auth-modal h3 { font-size: clamp(16px, 2vw, 20px); }
    .auth-modal input {
      font-size: clamp(13px, 1.8vw, 15px);
      padding: clamp(9px, 2vw, 12px) !important;
      border-radius: clamp(7px, 1.8vw, 9px) !important;
    }
    .auth-modal button {
      font-size: clamp(13px, 1.8vw, 15px);
      padding: clamp(9px, 2vw, 12px) clamp(12px, 2.4vw, 16px);
      border-radius: clamp(9px, 2vw, 11px);
    }
    .auth-modal .muted { font-size: clamp(11px, 1.5vw, 12px); }
    .legal-consent {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      color: rgba(255,255,255,0.78);
      font-size: 12px;
      line-height: 1.45;
      user-select: none;
    }
    .legal-consent input[type="checkbox"] {
      width: 14px;
      height: 14px;
      margin-top: 2px;
      flex: 0 0 14px;
      accent-color: #0a84ff;
    }
    .legal-consent a {
      color: rgba(255,255,255,0.9);
      text-decoration: underline;
    }

    #legalDocModal {
      z-index: 6200;
    }
    #legalDocModal .content.card.legal-doc-content {
      width: min(760px, 94vw);
      max-width: min(760px, 94vw);
      max-height: min(88vh, calc(var(--app-full-h) - 20px - var(--safe-top) - var(--safe-bottom)));
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px !important;
      background: linear-gradient(180deg, rgba(22,22,26,0.98) 0%, rgba(12,12,14,0.98) 100%);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 16px;
    }
    #legalDocModal .legal-doc-header {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 40px;
    }
    #legalDocTitle {
      flex: 1 1 auto;
      text-align: center;
      font-size: 18px;
      line-height: 1.25;
      color: rgba(255,255,255,0.95);
      padding: 0 44px 0 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #legalDocClose {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      max-height: 40px;
      padding: 0 !important;
      border-radius: 999px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      line-height: 0;
    }
    #legalDocClose svg {
      width: 20px;
      height: 20px;
      min-width: 20px;
      min-height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    #legalDocModal .legal-doc-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 6px 2px 4px;
    }
    #legalDocModal .legal-doc-body .legal-rendered {
      margin: 0;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      line-height: 1.6;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    @media (max-width: 680px) {
      #legalDocModal .content.card.legal-doc-content {
        width: min(96vw, 760px);
        max-width: min(96vw, 760px);
        max-height: calc(var(--app-full-h) - 16px - var(--safe-top) - var(--safe-bottom));
        padding: 10px !important;
      }
      #legalDocTitle {
        font-size: 16px;
      }
      #legalDocModal .legal-doc-body .legal-rendered {
        font-size: 13px;
        line-height: 1.55;
      }
    }

    /* 注册弹窗：黑底白字（仅作用于注册界面） */
    #registerModal .content.card {
      background: var(--bg);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.95);
      box-shadow: none;
    }
    #registerModal h3 { color: rgba(255,255,255,0.95); font-size: 16px; }
    #registerModal input,
    #registerModal select {
      font-size: 13px !important;
      padding: 10px !important;
    }
    #registerModal .close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(30,30,30,0.32);
      border: none;
      border-radius: 50%;
      color: #fff;
      padding: 0;
      z-index: 5;
      transition: background 0.18s;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    #registerModal .close:hover,
    #registerModal .close:focus {
      background: rgba(60,60,60,0.48);
    }
    #registerModal .close svg {
      width: 20px;
      height: 20px;
      stroke: #fff;
      fill: none;
      stroke-width: 2.2;
      pointer-events: none;
      display: block;
    }
    #registerModal input,
    #registerModal select {
      background: rgba(255,255,255,0.08) !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      color: rgba(255,255,255,0.92) !important;
    }
    #registerModal input::placeholder { color: rgba(255,255,255,0.55); }
    #registerModal select option { background: #1a1a1e; color: rgba(255,255,255,0.92); }
    #registerModal .muted { color: rgba(255,255,255,0.55); }

    /* 注册表单布局 */
    #registerModal .reg-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: stretch;
      font-size: 13px;
    }
    #registerModal .reg-form > input,
    #registerModal .reg-form > select {
      width: 100%;
      box-sizing: border-box;
      font-size: 13px;
    }
    /* 表单中段：左栏(性别/年龄/身高/体重) + 右栏(头像缩略图+上传按钮) */
    #registerModal .reg-body {
      display: flex;
      flex-direction: row;
      gap: 12px;
      align-items: stretch;
    }
    #registerModal .reg-body-fields {
      flex: 1 1 50%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #registerModal .reg-body-fields select,
    #registerModal .reg-body-fields input {
      width: 100%;
      box-sizing: border-box;
      font-size: 13px;
    }
    #registerModal .reg-body-avatar {
      flex: 1 1 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    /* 注册按钮：全宽 */
    #registerModal .reg-submit-btn {
      width: 100%;
      padding: 11px 0;
      border: none;
      border-radius: 10px;
      background: #2563eb;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.5px;
      cursor: pointer;
      transition: background 0.15s;
    }
    #registerModal .reg-submit-btn:hover { background: #1d4ed8; }
    #registerModal .reg-submit-btn:active { background: #1e40af; }
    #registerModal .reg-hint {
      margin: 2px 0 0;
      text-align: center;
      font-size: 11px;
      opacity: 0.7;
    }

    /* 登录弹窗：黑底白字（仅作用于登录界面） */
    #loginModal {
      z-index: 1200;
    }
    #loginModal .content.card {
      width: min(520px, 92vw);
      max-width: min(520px, 92vw);
      max-height: 88vh;
      overflow: auto;
      display: block;
      background: var(--bg);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.95);
      box-shadow: none;
    }
    #loginModal #loginPwdPanel,
    #loginModal #loginSmsPanel {
      width: 100%;
    }
    #loginModal h3 { color: rgba(255,255,255,0.95); }
    #loginModal .close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(30,30,30,0.32);
      border: none;
      border-radius: 50%;
      color: #fff;
      padding: 0;
      z-index: 5;
      transition: background 0.18s;
      position: absolute;
      top: 10px;
      right: 10px;
    }
    #loginModal .close:hover,
    #loginModal .close:focus {
      background: rgba(60,60,60,0.48);
    }
    #loginModal .close svg {
      width: 20px;
      height: 20px;
      stroke: #fff;
      fill: none;
      stroke-width: 2.2;
      pointer-events: none;
      display: block;
    }
    #loginModal input {
      background: rgba(255,255,255,0.08) !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      color: rgba(255,255,255,0.92) !important;
    }
    #loginModal input::placeholder { color: rgba(255,255,255,0.55); }
    #loginModal .muted { color: rgba(255,255,255,0.55); }
    #loginModal a { color: rgba(255,255,255,0.85); }
    html.platform-android-webview #loginModal {
      align-items: flex-start;
      justify-content: center;
      padding-top: max(72px, calc(56px + env(safe-area-inset-top)));
      padding-bottom: max(20px, env(safe-area-inset-bottom));
      overflow-y: auto;
    }
    html.platform-android-webview #loginModal .content.card {
      margin: 0 auto;
    }
    html.platform-android-webview .scene-horizontal-row,
    html.platform-android-webview .today-inspiration-row {
      touch-action: pan-x pan-y;
      overscroll-behavior-x: contain;
    }
    html.platform-android-webview .product-tray-scroller,
    html.platform-android-webview .product-card {
      touch-action: none;
    }

    /* Android WebView 渲染修复：
       content-visibility:auto 在部分 WebView 版本中会错误跳过可见元素的渲染；
       isolation:isolate / container-type:inline-size / perspective / transform-style:preserve-3d
       会在 WebView 合成层中造成子图黑屏；全部禁用，改用安全的等效方案。 */
    html.platform-android-webview .scenario-group,
    html.platform-android-webview .tpl {
      content-visibility: visible !important;
      contain-intrinsic-size: auto !important;
    }
    html.platform-android-webview .imgbox {
      isolation: auto !important;
      container-type: normal !important;
    }
    /* videoPreview: Android WebView 禁止在 video 及其父级使用 CSS transform，
       否则会干扰 SurfaceTexture 合成导致黑屏 */
    html.platform-android-webview #videoPreview,
    html.platform-android-webview #videoPreview .content,
    html.platform-android-webview #videoPreview .imgbox {
      transform: none !important;
      perspective: none !important;
      transform-style: flat !important;
      filter: none !important;
      -webkit-filter: none !important;
      isolation: auto !important;
      contain: none !important;
      will-change: auto !important;
    }
    html.platform-android-webview #videoPreview video {
      transform: none !important;
      -webkit-transform: none !important;
      filter: none !important;
      opacity: 1 !important;
    }
    html.platform-android-webview .video-back-btn,
    html.platform-android-webview .video-overlay-btn.icon-btn {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    /* #imgPreview .imgbox 专属规则覆盖了上方全局修复，需单独禁用 3D 变换上下文 */
    html.platform-android-webview #imgPreview .imgbox {
      perspective: none !important;
      transform-style: flat !important;
    }
    /* previewRelated 瀑布流：
       WebView 在多层嵌套 overflow:hidden + border-radius 的容器中无法正确合成子图片。
       逐层消除额外合成层触发条件，同时让 img 拥有独立渲染层。 */
    html.platform-android-webview #imgPreview .content {
      -webkit-overflow-scrolling: auto !important;
    }
    html.platform-android-webview #imgPreview .preview-related-col .tpl {
      content-visibility: visible !important;
      contain-intrinsic-size: auto !important;
      overflow: visible !important;
    }
    html.platform-android-webview #imgPreview .preview-related-col .imgbox {
      perspective: none !important;
      transform-style: flat !important;
      isolation: auto !important;
      container-type: normal !important;
      overflow: visible !important;
    }
    html.platform-android-webview #imgPreview .preview-related-col .imgbox img {
      position: relative !important;
      z-index: 10 !important;
      will-change: transform !important;
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
    }

    /* Android WebView 渲染修复：头像指南示例图
       WebView 中 <img> 在嵌套容器里无法正确合成渲染；
       采用与 product-card 相同的方案：用 background-image 替代 <img> */
    html.platform-android-webview #avatarGuideModal .content {
      -webkit-overflow-scrolling: auto !important;
    }
    html.platform-android-webview #avatarGuideModal .eg-card {
      background-size: cover !important;
      background-position: center !important;
      background-repeat: no-repeat !important;
    }
    html.platform-android-webview #avatarGuideModal .eg-card img {
      display: none !important;
    }

    /* 注册头像上传：自定义按钮 + 缩略图 */
    #registerModal .file-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      height: 32px;
      padding: 0 10px;
      border-radius: 8px;
      cursor: pointer;
      user-select: none;
      background: rgba(255,255,255,0.10);
      border: 1px dashed rgba(255,255,255,0.28);
      color: rgba(255,255,255,0.85);
      text-decoration: none;
      line-height: 1;
      white-space: nowrap;
      font-size: 12px;
      transition: background 0.15s, border-color 0.15s;
    }
    #registerModal .file-btn svg { flex-shrink: 0; opacity: 0.8; }
    #registerModal .file-btn:hover {
      background: rgba(255,255,255,0.16);
      border-color: rgba(255,255,255,0.38);
    }
    #registerModal .avatar-thumb {
      width: 96px;
      height: 128px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
    }
    #registerModal .avatar-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }
    #registerModal .avatar-thumb .placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.50);
    }
    #registerModal .avatar-thumb .placeholder svg { width: 22px; height: 22px; fill: currentColor; }

    /* 注册：头像质量提示弹窗（参考样式，不使用真实照片素材） */
    #avatarGuideModal {
      z-index: 4950 !important;
    }
    #avatarGuideModal.open {
      display: flex !important;
      align-items: flex-start;
      justify-content: center;
      padding-top: max(56px, calc(48px + env(safe-area-inset-top)));
      padding-bottom: max(14px, env(safe-area-inset-bottom));
      overflow-y: auto;
    }
    #avatarGuideModal .content.card {
      background: var(--bg);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      width: min(520px, 92vw);
      max-width: min(520px, 92vw);
      padding: 18px;
      border-radius: 16px;
      box-shadow: none;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-height: calc(100vh - 72px);
      margin: 0 auto;
    }
    @supports (height: 100svh) {
      #avatarGuideModal .content.card {
        max-height: calc(100svh - 72px);
      }
    }
    #avatarGuideModal h3 { margin: 0 0 10px; font-size: 18px; }
    #avatarGuideModal .muted { color: rgba(255,255,255,0.62); }
    #avatarGuideModal .eg-title { margin-top: 12px; font-weight: 600; font-size: 13px; }
    #avatarGuideModal .eg-sub { margin-top: 4px; font-size: 12px; color: rgba(255,255,255,0.55); }
    #avatarGuideModal .eg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
    #avatarGuideModal .eg-card {
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.08);
      aspect-ratio: 3 / 4;
    }
    #avatarGuideModal .eg-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    #avatarGuideModal .eg-card.good { background: linear-gradient(180deg, rgba(10,132,255,0.18), rgba(255,255,255,0.06)); }
    #avatarGuideModal .eg-card.bad { background: linear-gradient(180deg, rgba(176,0,32,0.18), rgba(255,255,255,0.06)); }
    #avatarGuideModal .eg-badge {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 22px;
      height: 22px;
      border-radius: 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      color: #fff;
    }
    #avatarGuideModal .eg-badge.good { background: rgba(0,160,80,0.92); }
    #avatarGuideModal .eg-badge.bad { background: rgba(176,0,32,0.92); }
    #avatarGuideModal .guide-actions { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 10px; }
    #avatarGuideModal .primary {
      display: block;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      background: rgba(255,255,255,0.92);
      color: #111;
      border: none;
      border-radius: 12px;
      padding: 13px 14px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
    }
    #avatarGuideModal .secondary {
      display: block;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.92);
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 12px;
      padding: 13px 14px;
      font-size: 15px;
      cursor: pointer;
    }

    /* 数字孪生生成：动画 + 计时 */
    #elementGenModal {
      z-index: 4200 !important;
    }
    #elementGenModal .content.card {
      background: rgba(0,0,0,0.92);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      width: min(520px, 92vw);
      padding: 18px;
      border-radius: 16px;
      box-shadow: none;
    }
    .spinner {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 4px solid rgba(255,255,255,0.18);
      border-top-color: rgba(255,255,255,0.92);
      animation: spin 900ms linear infinite;
      margin: 10px auto 12px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    #elementGenModal .gen-title { text-align: center; font-weight: 700; margin: 0; }
    #elementGenModal .gen-sub { text-align: center; margin-top: 6px; color: rgba(255,255,255,0.62); font-size: 12px; }
    #elementGenModal .gen-timer { text-align: center; margin-top: 10px; font-size: 13px; }
    #elementGenModal .gen-timer b { font-variant-numeric: tabular-nums; }

    /* Ensure source picker stays above My page-mode overlay and close button */
    #photoSourceModal {
      z-index: 1600 !important;
    }

    #photoSourceModal .content.card {
      background: rgba(0,0,0,0.92);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      width: min(420px, 92vw);
      padding: 16px;
      border-radius: 14px;
      box-shadow: none;
    }
    #photoSourceModal h3 {
      margin: 0 0 10px;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: 0.2px;
      text-align: center;
    }
    #photoSourceModal .photo-source-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
    }
    #photoSourceModal .photo-source-actions .primary,
    #photoSourceModal .photo-source-actions .secondary {
      width: 100%;
      border-radius: 12px;
      padding: 11px 14px;
      border: 1px solid rgba(255,255,255,0.2);
      cursor: pointer;
    }
    #photoSourceModal .photo-source-actions .primary {
      background: rgba(255,255,255,0.92);
      color: #111;
      font-weight: 700;
    }
    #photoSourceModal .photo-source-actions .secondary {
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.92);
    }

    /* 底部商品缩略图：堆叠卡片（扑克牌） */
    .product-tray {
      position: absolute;
      left: 12px;
      right: auto;
      bottom: calc(10px + env(safe-area-inset-bottom));
      padding: 0;
      background: transparent;
      z-index: 6;
      pointer-events: auto;
    }
    .product-tray-scroller {
      position: relative;
      width: 128px;
      height: 170px;
      overflow: visible;
      user-select: none;
      cursor: pointer;
      touch-action: none;
      overscroll-behavior: contain;
    }
    .product-tray-scroller::-webkit-scrollbar { width: 0; height: 0; }
    .product-card {
      --tx: 0px;
      --ty: 0px;
      --drag-x: 0px;
      --drag-y: 0px;
      --drag-r: 0deg;
      --s: 1;
      --flip-ms: 520ms;
      width: 92px;
      height: 128px;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 10px 22px rgba(0,0,0,0.35);
      backdrop-filter: blur(10px);
      position: absolute;
      left: 0;
      top: 0;
      transform: translate3d(calc(var(--stack-x, 0px) + var(--tx) + var(--drag-x)), calc(var(--stack-y, 0px) + var(--ty) + var(--drag-y)), 0) rotate(var(--drag-r)) scale(var(--s));
      transition: transform var(--flip-ms) cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      -webkit-user-drag: none;
      touch-action: none;
      will-change: transform, opacity;
    }
    .product-card.is-dragging-out {
      transition: none !important;
      z-index: 12000 !important;
    }
    .product-card.is-releasing-to-bottom {
      transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 150ms ease !important;
      z-index: 12000 !important;
    }
    .product-card.is-committing-swipe {
      transition: transform 220ms cubic-bezier(0.12, 0.76, 0.26, 1), opacity 170ms ease !important;
      z-index: 12000 !important;
      opacity: 0.96;
    }
    .product-card.is-active {
      --s: 1.045;
    }
    .product-card img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
      background: #fff;
      display: block;
      border-radius: inherit;
      pointer-events: none;
      -webkit-user-drag: none;
      user-select: none;
    }
    .product-tray-count {
      position: absolute;
      left: 6px;
      top: 6px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.75);
      color: #111;
      font-size: 11px;
      font-weight: 700;
      line-height: 1;
      pointer-events: auto;
      z-index: 8;
      backdrop-filter: blur(8px);
    }
    .product-price {
      position: absolute;
      left: 8px;
      bottom: 8px;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,0.52);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.95);
      font-size: 12px;
      line-height: 1;
      text-shadow: 0 1px 2px rgba(0,0,0,0.7);
      backdrop-filter: blur(8px);
    }
    .product-card:not(.is-active) .product-price { opacity: 0; }

    /* 首页今日灵感：登录态顶部横扫 */
    .today-inspiration-section {
      padding: 4px 2px 8px;
      margin-bottom: 4px;
    }
    .today-inspiration-title {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: rgba(255,255,255,0.93);
      letter-spacing: 0.6px;
      padding: 2px 0 8px calc(12px + 2em);
      text-transform: none;
    }
    /* HOME 标题统一：今日灵感 / 横扫图 / 双瀑布 */
    .scenario-group.is-horizontal > .scenario-label,
    .scene-waterfall-title-slot .scenario-label.is-waterfall-inset-title {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.6px;
      text-transform: none;
    }
    /* 横扫图标题整体向右平移约 4 个字宽 */
    .scenario-group.is-horizontal > .scenario-label {
      padding-left: calc(2px + 2em);
      text-align: left;
    }
    .today-inspiration-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 0 2px 0;
      perspective: 1400px;
      transform-style: preserve-3d;
      --today-edge-spacer: 0px;
    }
    .today-inspiration-row::before,
    .today-inspiration-row::after {
      content: '';
      flex: 0 0 var(--today-edge-spacer);
      pointer-events: none;
    }
    .today-inspiration-row::-webkit-scrollbar { display: none; }
    .today-inspiration-row .tpl {
      flex: 0 0 82vw;
      max-width: 82vw;
      scroll-snap-align: center;
      scroll-snap-stop: always;
    }

    /* 横向滑动行：竖图紧密排列 */
    .scene-horizontal-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      overflow-x: auto;
      overflow-y: visible;
      scroll-snap-type: x proximity;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0;
      scrollbar-width: none;
      perspective: 1400px;
      transform-style: preserve-3d;
    }
    .scene-horizontal-row::-webkit-scrollbar { display: none; }
    .scene-horizontal-row .tpl {
      flex: 0 0 82vw;
      max-width: 82vw;
      scroll-snap-align: center;
      scroll-snap-stop: always;
      overflow: visible;
    }
    .today-inspiration-row .tpl {
      overflow: visible;
    }
    .scene-horizontal-row .tpl,
    .today-inspiration-row .tpl {
      --home-card-scale: 0.95;
      --home-card-rot: 0deg;
      --home-card-z: 0px;
      --home-card-shift: 0px;
      --home-card-shadow: 0.24;
      transform-style: preserve-3d;
      transform-origin: center center;
      transform: translate3d(var(--home-card-shift), 0, var(--home-card-z)) rotateY(var(--home-card-rot)) scale(var(--home-card-scale));
      transition: none;
      box-shadow: 0 16px 36px rgba(0,0,0,var(--home-card-shadow));
      opacity: 0.96;
      will-change: auto;
    }
    .scene-horizontal-row.is-home-sweep-ready .tpl,
    .today-inspiration-row.is-home-sweep-ready .tpl {
      will-change: transform;
      transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 220ms ease, opacity 220ms ease;
    }
    html.motion-mobile.browser-chrome.platform-ios .scene-horizontal-row,
    html.motion-mobile.browser-chrome.platform-ios .today-inspiration-row {
      perspective: 1100px;
    }
    html.motion-mobile.browser-chrome.platform-ios .scene-horizontal-row .tpl,
    html.motion-mobile.browser-chrome.platform-ios .today-inspiration-row .tpl {
      backface-visibility: hidden;
      transform-style: flat;
    }
    .scene-horizontal-row .tpl.is-home-active,
    .today-inspiration-row .tpl.is-home-active {
      opacity: 1;
    }
    html.home-sweep-lite .scene-horizontal-row,
    html.home-sweep-lite .today-inspiration-row {
      scroll-snap-type: x mandatory;
      perspective: none;
      transform-style: flat;
    }
    html.home-sweep-lite .scene-horizontal-row .tpl,
    html.home-sweep-lite .today-inspiration-row .tpl {
      --home-card-scale: 0.985;
      --home-card-rot: 0deg;
      --home-card-z: 0px;
      --home-card-shadow: 0.22;
      transform-style: flat;
      box-shadow: 0 10px 24px rgba(0,0,0,0.24);
      opacity: 0.94;
      will-change: auto;
      transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
    }
    html.home-sweep-lite .scene-horizontal-row .tpl.is-home-active,
    html.home-sweep-lite .today-inspiration-row .tpl.is-home-active {
      --home-card-scale: 1;
      --home-card-shadow: 0.3;
      opacity: 1;
    }
    .scene-horizontal-row .tpl .imgbox,
    .today-inspiration-row .tpl .imgbox {
      border-radius: inherit;
      overflow: hidden;
    }
    .today-inspiration-row .today-inspiration-card {
      border: none;
      box-sizing: border-box;
      box-shadow: 0 10px 24px rgba(0,0,0,0.24);
    }
    .today-inspiration-row .today-inspiration-card .imgbox {
      border: 6px solid rgba(212, 175, 55, 0.96);
      box-sizing: border-box;
      box-shadow: inset 0 0 0 2px rgba(255, 239, 170, 0.52);
    }
    .today-inspiration-row .today-inspiration-card .imgbox > img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
    .scene-horizontal-row .tpl:only-child {
      margin-left: auto;
      margin-right: auto;
    }
    /* 下方两列竖图 */
    .scene-verticals {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: start;
    }
    .scene-waterfall-head {
      display: none;
      align-items: flex-end;
      justify-content: space-between;
      gap: 8px;
      min-height: 28px;
      margin: 0 0 8px;
    }
    .scenario-group.is-waterfall .scene-waterfall-head {
      display: flex;
    }
    .scene-waterfall-col {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .scene-waterfall-title-slot,
    .scene-waterfall-more-tail {
      position: relative;
      height: 0;
      padding-top: 35.56%;
      flex: 0 0 auto;
    }
    .scene-waterfall-title-slot .scenario-label.is-waterfall-inset-title {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.6px;
      color: rgba(255,255,255,0.9);
      background: transparent;
      border: none;
      backdrop-filter: none;
      text-transform: none;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      z-index: 1;
    }
    .scene-waterfall-more-tail {
      display: flex;
    }
    .scene-waterfall-more-tail .scenario-show-more {
      position: absolute;
      inset: 0;
      margin: 0;
      padding: 0 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .scenario-group.is-waterfall .scene-waterfall-head .scenario-label {
      margin: 0;
      padding: 0 2px;
      text-align: left;
      background: transparent;
      border: none;
      backdrop-filter: none;
    }
    .scenario-group.is-waterfall .scene-waterfall-head .scenario-show-more {
      display: none !important;
    }
    /* 场景分隔 */
    .scenario-group {
      margin-bottom: 18px;
    }
    #homeView .scenario-group {
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }
    #homeView .today-inspiration-row .tpl,
    #homeView .scene-horizontal-row .tpl {
      content-visibility: visible;
      contain-intrinsic-size: auto;
    }
    .scenario-group.is-horizontal .scene-verticals {
      display: none;
    }
    .scenario-group.is-waterfall .scene-horizontal-row {
      display: none;
    }
    .scenario-group.is-waterfall .scene-verticals {
      display: grid;
    }
    .scenario-label {
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      text-align: center;
      color: rgba(255,255,255,0.92);
      padding: 12px 14px;
      margin: 8px 0 10px;
      background: rgba(0,0,0,0.45);
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(6px);
      font-family: 'Georgia', 'Times New Roman', serif;
    }
    .scenario-show-more {
      margin-top: 4px;
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,0.93);
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.6px;
      text-transform: none;
      padding: 6px 2px;
      cursor: pointer;
    }
    .scenario-show-more::after {
      content: '\2192';
      font-size: 11px;
      opacity: 0.85;
    }
    .scenario-show-more.is-expanded::after {
      content: '\2193';
    }

    /* HOME：按钮整体降低透明度（更接近不透明） */
    #homeView button,
    #homeView .btn {
      opacity: 0.96;
    }
    #homeView button[disabled],
    #homeView .btn[disabled] {
      opacity: 0.72;
    }
    #homeView .tpl {
      --home-fav-right: 10px;
      --home-fav-bottom: 10px;
      --home-action-right: 10px;
      --home-action-bottom: 50px;
      --home-action-size: 32px;
      --home-icon-size: 16px;
      --home-fav-bg: rgba(8,8,10,0.86);
      --home-fav-border: rgba(255,255,255,0.42);
      --home-action-bg: rgba(8,8,10,0.86);
      --home-action-border: rgba(255,255,255,0.42);
    }

    /* 首页卡片商品堆叠（iOS mini stack 对齐） */
    .tpl-product-mini-stack {
      position: absolute;
      left: 8px;
      bottom: 8px;
      --mini-card-width: 42px;
      --mini-card-height: 56px;
      --mini-stack-step: 8px;
      --mini-count: 1;
      width: calc(var(--mini-card-width) + var(--mini-stack-step) * max(0, var(--mini-count) - 1));
      height: var(--mini-card-height);
      pointer-events: none;
      z-index: 80;
    }
    .tpl-product-mini-stack.is-fallback-visible {
      filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28));
    }
    .tpl-product-mini-stack.is-draggable {
      pointer-events: none;
      touch-action: none;
    }
    .tpl-product-mini-card {
      --mini-drag-x: 0px;
      --mini-drag-y: 0px;
      --mini-drag-r: 0deg;
      --mini-stack-index: 0;
      position: absolute;
      left: calc(var(--mini-stack-index) * var(--mini-stack-step));
      top: 0;
      width: var(--mini-card-width);
      height: var(--mini-card-height);
      border-radius: 10px;
      background: #f2f2f4;
      border: 1px solid rgba(0,0,0,0.26);
      overflow: hidden;
      box-shadow: 0 3px 10px rgba(0,0,0,0.35);
      pointer-events: auto;
      transform: translate3d(var(--mini-drag-x), var(--mini-drag-y), 0) rotate(var(--mini-drag-r));
      transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
      touch-action: none;
      user-select: none;
      isolation: isolate;
    }
    .tpl-product-mini-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #f2f2f4;
      z-index: 1;
      pointer-events: none;
    }
    .tpl-product-mini-card.is-fallback {
      border-color: rgba(255,255,255,0.72);
      box-shadow: 0 5px 14px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.22) inset;
    }
    .tpl-product-mini-card.is-fallback::before {
      background: linear-gradient(145deg, rgba(255,255,255,0.86), rgba(232,232,238,0.9));
    }
    html.platform-android-webview #imgPreview .tpl-product-mini-card {
      isolation: auto;
      background-color: #f2f2f4 !important;
      background-size: contain !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      overflow: hidden !important;
      box-shadow: 0 3px 10px rgba(0,0,0,0.35) !important;
    }
    html.platform-android-webview #imgPreview .tpl-product-mini-card::before {
      display: none !important;
    }
    html.platform-android-webview #imgPreview .tpl-product-mini-card img {
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
      z-index: 1 !important;
      transform: none !important;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      background: transparent !important;
      display: block !important;
      mix-blend-mode: normal !important;
      opacity: 1 !important;
      visibility: visible !important;
      filter: none !important;
    }
    html.platform-android-webview #imgPreview .tpl-product-mini-price {
      position: absolute !important;
      z-index: 3 !important;
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    .tpl-product-mini-price {
      position: absolute;
      left: 4px;
      bottom: 4px;
      max-width: calc(100% - 8px);
      padding: 1px 5px;
      border-radius: 999px;
      background: rgba(0,0,0,0.58);
      border: 1px solid rgba(255,255,255,0.24);
      color: rgba(255,255,255,0.96);
      font-size: 10px;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 3;
      pointer-events: none;
    }
    .tpl-product-mini-card.is-dragging-out {
      transition: none !important;
      z-index: 999 !important;
    }
    .tpl-product-mini-card.is-releasing-to-bottom {
      transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 130ms ease !important;
      z-index: 999 !important;
    }
    .tpl-product-mini-card img {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: transparent;
    }
    .tpl-product-mini-count {
      position: absolute;
      right: -2px;
      top: -4px;
      min-width: 18px;
      height: 18px;
      padding: 0 4px;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      color: #0f0f10;
      border: 1px solid rgba(0,0,0,0.24);
      font-size: 10px;
      line-height: 16px;
      text-align: center;
      font-weight: 700;
    }

    /* 双瀑布：关联商品堆叠加大 */
    .scene-verticals .tpl-product-mini-stack {
      bottom: 18px;
      --mini-card-width: 60px;
      --mini-card-height: 80px;
      --mini-stack-step: 11px;
    }
    #homeView .scene-verticals .tpl-product-mini-stack {
      --mini-card-width: 60px;
      --mini-card-height: 80px;
      --mini-stack-step: 11px;
    }
      #tryonView .tryon-card .tpl-product-mini-stack {
        --mini-card-width: 60px;
        --mini-card-height: 80px;
        --mini-stack-step: 11px;
    }
    #favView .gallery-item .tpl-product-mini-stack {
      bottom: 14px;
        --mini-card-width: 60px;
        --mini-card-height: 80px;
        --mini-stack-step: 11px;
    }
    #homeView .scene-verticals .tpl {
      --home-action-size: 32px;
      --home-icon-size: 16px;
    }
    .scene-verticals .fav-btn .fav-icon path {
      stroke-width: 2;
    }
    #homeView .scene-verticals .fav-btn .fav-icon,
    #homeView .scene-verticals .try-icon svg,
    #homeView .scene-verticals .home-share-btn svg {
      width: 16px !important;
      height: 16px !important;
      transform: none !important;
    }
    #sceneMorePage .scene-verticals .fav-btn .fav-icon,
    #sceneMorePage .scene-verticals .try-icon svg,
    #sceneMorePage .scene-verticals .home-share-btn svg {
      width: 16px !important;
      height: 16px !important;
      transform: none !important;
    }
    .scene-verticals .tpl-product-mini-price {
      font-size: 10px;
      bottom: 5px;
    }

    /* 场景更多页：商品堆叠与试穿页一致 */
    .scene-more-grid .tpl-product-mini-stack {
      --mini-card-width: 60px;
      --mini-card-height: 80px;
      --mini-stack-step: 11px;
    }
    #homeView .scene-more-grid .tpl {
      --home-action-size: 32px;
    }
    #sceneMorePage .tpl {
      --home-action-size: 32px;
      --home-icon-size: 16px;
    }

    /* 横扫图：关联商品堆叠再加大一档 */
    #homeView .scene-horizontal-row .tpl-product-mini-stack,
    #homeView .today-inspiration-row .tpl-product-mini-stack {
      left: 16px;
      /* 视觉对齐：补偿 mini-stack 额外高度与阴影观感 */
      bottom: 7px;
      --mini-card-width: 100px;
      --mini-card-height: 132px;
      --mini-stack-step: 20px;
      height: 144px;
      pointer-events: none;
      touch-action: none;
      z-index: 80;
    }
    #homeView .scene-horizontal-row .tpl,
    #homeView .today-inspiration-row .tpl {
      --home-fav-bottom: 31px;
      --home-action-bottom: 83px;
    }
    .scene-horizontal-row .tpl-product-mini-card,
    .today-inspiration-row .tpl-product-mini-card {
      border-radius: 16px;
    }
    .scene-horizontal-row .tpl-product-mini-price,
    .today-inspiration-row .tpl-product-mini-price {
      font-size: 11px;
      padding: 2px 6px;
      left: 6px;
      bottom: 6px;
    }
    .scene-horizontal-row .tpl-product-mini-count,
    .today-inspiration-row .tpl-product-mini-count {
      right: -4px;
      top: -8px;
      min-width: 26px;
      height: 26px;
      line-height: 24px;
      font-size: 12px;
    }

    .scene-horizontal-row .tpl-product-mini-stack.is-compact-all,
    .today-inspiration-row .tpl-product-mini-stack.is-compact-all {
      display: grid;
      grid-template-columns: repeat(var(--mini-grid-cols, 3), minmax(0, 1fr));
      grid-template-rows: repeat(var(--mini-grid-rows, 2), minmax(0, 1fr));
      gap: 4px;
      border-radius: 14px;
      overflow: hidden;
      background: rgba(8,8,8,0.28);
      border: 1px solid rgba(255,255,255,0.22);
      backdrop-filter: blur(2px);
    }
    .scene-horizontal-row .tpl-product-mini-stack.is-compact-all .tpl-product-mini-card,
    .today-inspiration-row .tpl-product-mini-stack.is-compact-all .tpl-product-mini-card {
      position: relative;
      left: auto !important;
      top: auto !important;
      width: auto;
      height: auto;
      border-radius: 10px;
      box-shadow: none;
      opacity: 1 !important;
    }
    .scene-horizontal-row .tpl-product-mini-stack.is-compact-all .tpl-product-mini-count,
    .today-inspiration-row .tpl-product-mini-stack.is-compact-all .tpl-product-mini-count {
      display: none;
    }

    body.is-mini-stack-dragging .scene-horizontal-row,
    body.is-mini-stack-dragging .today-inspiration-row {
      touch-action: none !important;
      overscroll-behavior: contain !important;
    }

    /* 预览：右上透明按钮（视频/下载/试穿-还原） */
    .overlay-actions-right {
      position: absolute;
      right: 0.6em;
      top: auto;
      bottom: calc(0.6em + env(safe-area-inset-bottom));
      transform: none;
      display: flex;
      flex-direction: column;
      gap: 0.45em;
      /* 改为接收事件，并由 JS 在容器层阻止冒泡，避免点击穿透到图片 */
      pointer-events: auto;
      z-index: 12;
      align-items: flex-end;
    }
    .overlay-actions-right .overlay-btn {
      pointer-events: auto;
      background: rgba(0,0,0,0.22);
      border: 1px solid rgba(255,255,255,0.18);
      backdrop-filter: blur(10px);
    }

    /* ImagePreview：主图商品堆叠与右下按钮组定制 */
    #imgPreview #productTray {
      left: 22px;
      bottom: 20px;
    }
    #imgPreview .overlay-actions-right {
      bottom: calc(var(--preview-action-base-bottom, 20px) + env(safe-area-inset-bottom));
    }
    #imgPreview .overlay-actions-right .overlay-btn,
    #imgPreview #previewTryBtn {
      background: rgba(8,8,10,0.88);
      border: 1px solid rgba(255,255,255,0.42);
      backdrop-filter: blur(10px);
    }
    #imgPreview .overlay-actions-right .overlay-btn.icon-btn,
    #imgPreview .overlay-actions-right .try-icon {
      position: static;
      top: auto;
      bottom: auto;
      right: auto;
      left: auto;
      transform: none;
      z-index: auto;
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      padding: 0;
      margin: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      overflow: visible;
      flex-shrink: 0;
      aspect-ratio: auto;
      opacity: 0.9;
    }
    #imgPreview .overlay-actions-right .try-icon {
      margin-top: -20px;
      margin-right: 20px;
    }
    #imgPreview .overlay-actions-right .overlay-btn.icon-btn svg,
    #imgPreview .overlay-actions-right .try-icon svg {
      width: 16px;
      height: 16px;
      display: block;
    }
    #imgPreview .preview-fav-btn.is-on {
      color: rgba(255,255,255,0.98);
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.58);
    }
    #imgPreview .preview-fav-btn.is-on svg path {
      fill: currentColor;
      stroke: currentColor;
    }

    /* 三个页面：首页/试穿/收藏 */
    .view { display: none; }
    .view.is-active { display: block; }
    .view-title {
      margin: 2px 0 8px 0;
      color: rgba(255,255,255,0.92);
      font-size: var(--tab-title-size);
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    body.scene-more-open {
      overflow: hidden;
    }
    .scene-more-page {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: none;
      background: linear-gradient(180deg, rgba(8, 11, 19, 0.98), rgba(6, 9, 16, 0.98));
      min-height: calc(var(--app-vh) * 100);
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: none;
      touch-action: pan-y;
      padding: calc(10px + var(--safe-top)) 12px 0;
    }
    .scene-more-page.is-open {
      display: block;
    }
    .scene-more-topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 10px;
      min-height: 44px;
      position: relative;
    }
    .scene-more-back {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255,255,255,0.28);
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      flex: 0 0 auto;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .scene-more-back svg {
      width: 18px;
      height: 18px;
      stroke: rgba(255,255,255,0.95);
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      transform: translateX(-1px);
    }
    .scene-more-title {
      margin: 0;
      flex: 0 1 auto;
      text-align: center;
      color: rgba(255,255,255,0.93);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.6px;
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      text-transform: none;
    }
    .scene-more-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: start;
      padding-bottom: calc(100px + var(--bottom-nav-gap, 20px) + env(safe-area-inset-bottom) + var(--android-nav-bar-height, 0px));
    }
    .scene-more-col {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
    }
    .scene-more-odd-copy {
      min-height: 84px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 14px;
      box-sizing: border-box;
      width: 100%;
      color: rgba(255,255,255,0.93);
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.6px;
      line-height: 1.35;
      text-transform: none;
      pointer-events: none;
      user-select: none;
      opacity: 0.95;
      overflow-wrap: anywhere;
    }
    .tryon-topbar,
    .fav-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: var(--tab-header-height);
      margin-top: 0;
      margin-bottom: 6px;
    }
    .tryon-segment {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px;
      border-radius: 14px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
    }
    .tryon-seg-btn {
      min-width: 92px;
      height: 32px;
      padding: 0 12px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: transparent;
      color: rgba(255,255,255,0.82);
      font-size: 12px;
      font-weight: 600;
      box-shadow: none;
    }
    .tryon-seg-btn.is-active {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.22);
      color: var(--accent);
    }
    .tryon-tools-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .my-tools-card {
      border: 1px solid rgba(255,255,255,0.18);
    }
    .my-tools-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .my-tool-btn {
      min-height: 38px;
      padding: 9px 8px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 12px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.22);
      color: rgba(255,255,255,0.94);
      box-shadow: none;
      white-space: nowrap;
    }
    .my-tool-btn:hover {
      background: rgba(255,255,255,0.18);
    }
    .fav-topbar .task-counter-btn {
      padding: 6px 10px;
      font-size: 11px;
      min-height: 30px;
    }
    .fav-topbar {
      display: none;
      justify-content: flex-end;
    }
    /* scenario-group & scenario-label base styles moved to scene layout section */
    .gallery {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      background: var(--bg);
    }
    .gallery-item {
      position: relative;
      margin: 0;
      padding: 0;
      background: transparent;
      border-radius: 10px;
      overflow: hidden;
    }
    .gallery-item img { width: 100%; height: auto; display: block; object-fit: contain; background: var(--bg); }
    .empty-hint { color: rgba(255,255,255,0.6); font-size: 12px; padding: 12px 6px; }

    /* 我的试穿：分组横栏 + 双瀑布 */
    #tryonGrid.gallery {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      background: var(--bg);
    }
    #tryonView {
      padding-left: 6px !important;
      padding-right: 6px !important;
    }
    .tryon-section {
      margin-bottom: 8px;
    }
    .tryon-section .scenario-label {
      margin: 6px 0 8px;
      font-size: 16px;
      letter-spacing: 0.6px;
      text-transform: none;
    }
    .tryon-card {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: transparent;
      aspect-ratio: 9 / 16;
      cursor: pointer;
    }
    .tryon-card img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: var(--bg);
    }
    .tryon-card-actions {
      position: absolute;
      right: 10px;
      bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      z-index: 10;
    }
    .tryon-action-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      padding: 0;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(0,0,0,0.36);
      color: rgba(255,255,255,0.95);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: none;
    }
    .tryon-action-btn svg {
      width: 18px;
      height: 18px;
      display: block;
      stroke: rgba(255,255,255,0.92);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .tryon-action-btn.is-on {
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.34);
    }
    .tryon-action-btn.is-on svg.heart-icon {
      fill: rgba(255,255,255,0.95);
      stroke: rgba(255,255,255,0.95);
    }
    .tryon-action-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    #tryonView .tryon-action-btn {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      opacity: 0.9;
    }
    #tryonView .tryon-action-btn svg {
      width: 16px;
      height: 16px;
    }
    .tryon-card.is-pending {
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.04);
    }
    .tryon-card.is-pending::after,
    .tpl.is-tryon-pending .imgbox::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(8,12,18,0.34);
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
      pointer-events: none;
      z-index: 3;
    }
    .tpl.is-tryon-pending .imgbox {
      position: relative;
    }
    .tpl.is-tryon-pending .try-icon.overlay-try-btn {
      opacity: 0.52;
      cursor: not-allowed;
    }
    .tryon-pending-label {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.92);
      font-size: 14px;
      letter-spacing: 0.4px;
      text-align: center;
      padding: 8px;
      box-sizing: border-box;
    }
    .tryon-pending-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 11px;
      color: rgba(255,255,255,0.95);
      background: rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.2);
    }
    .task-counter-btn {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.28);
      color: rgba(255,255,255,0.95);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      box-shadow: none;
      white-space: nowrap;
      backdrop-filter: blur(10px);
    }
    /* 悬浮按钮：固定在主界面右上角 */
    .task-float-btn {
      position: fixed;
      top: 12px;
      right: 12px;
      z-index: 1100;
      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    }
    .tryon-header-segment {
      display: none;
      align-items: center;
      gap: 4px;
      position: fixed;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1090;
      background: rgba(0,0,0,0.75);
      border-radius: 999px;
      padding: 4px;
      backdrop-filter: blur(10px);
    }
    .header-tryon-seg-btn {
      display: none;
      min-height: 30px;
      min-width: 72px;
      padding: 5px 8px;
      font-size: 10px;
      line-height: 1;
      text-align: center;
      justify-content: center;
      align-items: center;
      color: rgba(255,255,255,0.95);
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.28);
    }
    .header-tryon-seg-btn.is-active {
      border-color: #0a84ff !important;
      background: #0a84ff !important;
      color: #ffffff !important;
    }
    @media (max-width: 420px) {
      .tryon-header-segment {
        gap: 3px;
      }
      .header-tryon-seg-btn {
        min-width: 64px;
        min-height: 28px;
        padding: 4px 7px;
        font-size: 10px;
      }
    }
    .task-counter-btn:hover { background: rgba(255,255,255,0.18); }
    .task-center-page {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1800;
      width: 100vw;
      min-height: calc(var(--app-vh) * 100);
      box-sizing: border-box;
      border: none;
      border-radius: 0;
      background: linear-gradient(180deg, rgba(20,24,31,0.98) 0%, rgba(14,18,26,0.98) 100%);
      padding: calc(8px + var(--safe-top)) 10px calc(96px + var(--safe-bottom));
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .task-center-page.is-active {
      display: block;
    }
    @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
      header {
        background: rgba(26,26,26,0.96);
      }
      .overlay-actions-right .overlay-btn,
      .task-counter-btn,
      .scene-more-back,
      .task-center-back {
        backdrop-filter: none !important;
        background: rgba(20,20,20,0.78);
      }
    }
    .task-center-topbar {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      min-height: 42px;
      margin-bottom: 10px;
    }
    .task-center-back {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(0,0,0,0.24);
      color: rgba(255,255,255,0.94);
      box-shadow: none;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .task-center-back svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .task-center-title {
      margin: 0;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 92px);
      text-align: center;
      font-size: 16px;
      letter-spacing: 0.4px;
      color: rgba(255,255,255,0.94);
    }
    .task-center-waterfall {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      border: none;
      border-radius: 0;
      padding: 0;
      background: transparent;
    }
    body.task-center-open {
      overflow: hidden;
    }
    .task-mini-card {
      display: block;
      width: 100%;
      margin: 0;
      break-inside: avoid;
      -webkit-column-break-inside: avoid;
      page-break-inside: avoid;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.025);
      position: relative;
    }
    .task-mini-card.is-placeholder {
      aspect-ratio: 9 / 16;
    }
    .task-mini-card.is-clickable {
      cursor: pointer;
    }
    .task-mini-card img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
      background: #111;
    }
    .task-mini-card.is-pending::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: rgba(8,12,18,0.34);
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
      pointer-events: none;
      z-index: 2;
    }
    .task-mini-text {
      width: 100%;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
      padding: 8px;
      box-sizing: border-box;
      position: relative;
      z-index: 3;
    }
    .task-mini-text .title {
      font-size: 22px;
      font-weight: 600;
      line-height: 1.25;
      color: rgba(255,255,255,0.96);
      text-shadow: 0 1px 2px rgba(0,0,0,0.35);
      word-break: break-word;
      padding: 0 10px;
    }
    .task-mini-text .sub {
      font-size: 14px;
      line-height: 1.2;
      color: rgba(255,255,255,0.86);
    }
    .tryon-delete-btn {
      position: absolute;
      right: 8px;
      top: 8px;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.22);
      color: rgba(255,255,255,0.92);
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      line-height: 1;
      box-shadow: none;
      z-index: 8;
    }

    /* 首页卡片：收藏按钮（右下角，灰底白心） */
    .fav-btn {
      position: absolute;
      right: var(--home-fav-right, 10px);
      bottom: var(--home-fav-bottom, 10px);
      width: var(--home-action-size, 44px);
      height: var(--home-action-size, 44px);
      min-width: var(--home-action-size, 44px);
      min-height: var(--home-action-size, 44px);
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--home-fav-bg, rgba(0,0,0,0.22));
      border: 1px solid var(--home-fav-border, rgba(255,255,255,0.18));
      color: rgba(255,255,255,0.92);
      pointer-events: auto;
      z-index: 90;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: none;
    }
    .fav-btn.is-on { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.30); }
    .fav-btn.is-on .fav-icon {
      fill: rgba(255,255,255,0.95);
      stroke: rgba(255,255,255,0.95);
    }
    #homeView .fav-btn,
    #homeView .try-icon,
    #homeView .home-share-btn { opacity: 0.9; }
    .fav-btn .fav-icon {
      width: var(--home-icon-size, 22px);
      height: var(--home-icon-size, 22px);
      display: block;
      stroke: rgba(255,255,255,0.9);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 底部导航：选中态 */
    .bottom-nav .nav-btn.is-active {
      color: var(--accent);
      background: rgba(255,255,255,0.14);
    }
    .bottom-nav .nav-btn.is-active .nav-icon {
      background: transparent;
      border: 1px solid transparent;
      box-shadow: none;
    }

    /* 商品详情弹窗：点击缩略图打开，含购买按钮 */
    #productDetailModal .content.card {
      width: min(760px, 92vw);
      max-height: 90vh;
      overflow: auto;
      background: rgba(0,0,0,0.92);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      box-shadow: none;
      border-radius: 16px;
      padding: 14px;
    }
    #productDetailModal { z-index: 2100; }
    @media (max-width: 640px) {
      #productDetailModal .content.card {
        padding-bottom: calc(14px + 70px + env(safe-area-inset-bottom));
        max-height: calc(90vh - 70px);
      }
    }
    #productDetailModal .pd-grid {
      display: grid;
      grid-template-columns: 180px 1fr;
      gap: 12px;
      align-items: start;
    }
    @media (max-width: 640px) {
      #productDetailModal .pd-grid { grid-template-columns: 1fr; }
    }
    #productDetailModal .pd-img {
      width: 100%;
      max-width: 180px;
      aspect-ratio: 3 / 4;
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.16);
      background: transparent;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: zoom-in;
    }
    @media (max-width: 640px) {
      #productDetailModal .pd-img {
        max-width: 150px;
      }
    }
    #productDetailModal .pd-img img {
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center;
      background: transparent;
      display: block;
      cursor: zoom-in;
    }

    html.platform-android-webview #productDetailModal .pd-img {
      min-height: 160px;
      background: transparent !important;
    }
    html.platform-android-webview #productDetailModal .pd-img img {
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      background: transparent !important;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      visibility: visible !important;
      opacity: 1 !important;
    }


    #productDetailModal .pd-title {
      font-weight: 700;
      font-size: 16px;
      line-height: 1.2;
      margin: 0;
    }
    #productDetailModal .pd-meta {
      margin-top: 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      grid-auto-flow: row;
      gap: 8px;
    }
    #productDetailModal .pd-meta-item {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
    }
    #productDetailModal .pd-meta-label {
      color: rgba(255,255,255,0.58);
      font-size: 11px;
      line-height: 1.2;
    }
    #productDetailModal .pd-meta-value {
      color: rgba(255,255,255,0.92);
      font-size: 13px;
      line-height: 1.35;
      word-break: break-word;
    }
    #productDetailModal .pd-actions {
      margin-top: 12px;
      display: flex;
      justify-content: center;
    }
    #productDetailModal .pd-buy {
      background: rgba(10,132,255,0.92);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      width: min(340px, 100%);
      min-height: 42px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 12px;
    }
    #productDetailModal .pd-buy[disabled] { opacity: 0.45; cursor: not-allowed; }
    #productDetailModal .close.icon-btn {
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.35);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.25);
      text-shadow: 0 1px 2px rgba(0,0,0,0.65);
      backdrop-filter: blur(10px);
    }
    #productDetailModal .close.icon-btn svg {
      width: 18px;
      height: 18px;
      display: block;
    }
    #productDetailModal .pd-edit {
      margin-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.12);
      padding-top: 10px;
    }
    #productDetailModal .pd-edit-title {
      margin: 0 0 8px 0;
      font-size: 13px;
      color: rgba(255,255,255,0.86);
      letter-spacing: 0.2px;
    }
    #productDetailModal .pd-edit-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px 10px;
    }
    #productDetailModal .pd-field {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }
    #productDetailModal .pd-field-label {
      font-size: 12px;
      color: rgba(255,255,255,0.72);
      line-height: 1;
    }
    #productDetailModal .pd-field input,
    #productDetailModal .pd-field select,
    #productDetailModal .pd-field textarea {
      width: 100%;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.08);
      color: #fff;
    }
    #productDetailModal .pd-season-ms {
      position: relative;
    }
    #productDetailModal .pd-season-input {
      cursor: pointer;
      padding-right: 30px !important;
    }
    #productDetailModal .pd-season-ms::after {
      content: '▾';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,0.66);
      font-size: 12px;
      pointer-events: none;
      transition: transform .16s ease, color .16s ease;
    }
    #productDetailModal .pd-season-ms.open::after {
      transform: translateY(-50%) rotate(180deg);
      color: rgba(106,168,255,0.95);
    }
    #productDetailModal .pd-season-panel {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 31;
      display: none;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(15,15,18,0.98);
      box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    }
    #productDetailModal .pd-season-ms.open .pd-season-panel {
      display: block;
    }
    #productDetailModal .pd-season-actions {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
    }
    #productDetailModal .pd-season-action {
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 12px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
    }
    #productDetailModal .pd-season-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #productDetailModal .pd-season-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
    }
    #productDetailModal .pd-season-item input[type="checkbox"] {
      width: 14px;
      height: 14px;
      min-width: 14px;
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      border-radius: 2px;
      accent-color: rgba(10,132,255,0.95);
      flex: 0 0 auto;
    }
    #productDetailModal .pd-tg-ms {
      position: relative;
    }
    #productDetailModal .pd-tg-input {
      cursor: pointer;
      padding-right: 30px !important;
    }
    #productDetailModal .pd-tg-ms::after {
      content: '▾';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,0.66);
      font-size: 12px;
      pointer-events: none;
      transition: transform .16s ease, color .16s ease;
    }
    #productDetailModal .pd-tg-ms.open::after {
      transform: translateY(-50%) rotate(180deg);
      color: rgba(106,168,255,0.95);
    }
    #productDetailModal .pd-tg-panel {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 30;
      display: none;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(15,15,18,0.98);
      box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    }
    #productDetailModal .pd-tg-ms.open .pd-tg-panel {
      display: block;
    }
    #productDetailModal .pd-tg-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #productDetailModal .pd-tg-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
    }
    #productDetailModal .pd-tg-item input[type="checkbox"] {
      width: 14px;
      height: 14px;
      min-width: 14px;
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      border-radius: 2px;
      accent-color: rgba(10,132,255,0.95);
      flex: 0 0 auto;
    }
    #productDetailModal .pd-field.span-2 {
      grid-column: 1 / -1;
    }
    #productDetailModal .pd-scn-ms {
      position: relative;
    }
    #productDetailModal .pd-scn-input {
      cursor: pointer;
      padding-right: 30px !important;
      white-space: normal;
      line-height: 1.35;
    }
    #productDetailModal .pd-scn-ms::after {
      content: '▾';
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,0.66);
      font-size: 12px;
      pointer-events: none;
      transition: transform .16s ease, color .16s ease;
    }
    #productDetailModal .pd-scn-ms.open::after {
      transform: translateY(-50%) rotate(180deg);
      color: rgba(106,168,255,0.95);
    }
    #productDetailModal .pd-scn-panel {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 32;
      display: none;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(15,15,18,0.98);
      box-shadow: 0 10px 24px rgba(0,0,0,0.45);
      max-height: 220px;
      overflow: auto;
    }
    #productDetailModal .pd-scn-ms.open .pd-scn-panel {
      display: block;
    }
    #productDetailModal .pd-scn-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px 8px;
    }
    #productDetailModal .pd-scn-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: rgba(255,255,255,0.9);
      white-space: nowrap;
    }
    #productDetailModal .pd-scn-item input[type="checkbox"] {
      width: 14px;
      height: 14px;
      min-width: 14px;
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      border-radius: 2px;
      accent-color: rgba(10,132,255,0.95);
      flex: 0 0 auto;
    }

    /* 用户试穿弹窗：统一视觉风格 */
    #userGarmentModal .content.card {
      width: min(760px, 92vw);
      max-height: calc(var(--app-full-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px);
      overflow: auto;
      position: relative;
      background: rgba(0,0,0,0.92);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      box-shadow: none;
      border-radius: 16px;
      padding: 14px;
    }
    #userGarmentModal .busy-mask {
      position: absolute;
      inset: 0;
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.62);
      backdrop-filter: blur(2px);
      border-radius: 16px;
    }
    #userGarmentModal .busy-mask.open {
      display: flex;
    }
    #userGarmentModal .busy-box {
      min-width: 220px;
      max-width: 82%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(12,12,14,0.95);
      color: rgba(255,255,255,0.95);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      line-height: 1.35;
    }
    #userGarmentModal .busy-spinner {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: rgba(106,168,255,1);
      animation: wm-spin 0.9s linear infinite;
      flex: 0 0 auto;
    }
    #userGarmentModal .close {
      background: rgba(0,0,0,0.9) !important;
      color: rgba(255,255,255,0.95) !important;
      border: 1px solid rgba(255,255,255,0.28) !important;
      box-shadow: none !important;
      padding: 8px 10px !important;
      border-radius: 14px !important;
    }
    #userGarmentModal h3 {
      margin: 0 0 8px 0;
      color: rgba(255,255,255,0.94);
      font-size: 18px;
      letter-spacing: 0.4px;
    }
    #userGarmentModal h4 {
      margin: 0 0 8px 0;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      letter-spacing: 0.3px;
    }
    #userGarmentModal .muted { color: rgba(255,255,255,0.62); }
    #userGarmentModal .user-garment-upload {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 10px 0;
      flex-wrap: wrap;
    }
    #userGarmentModal #userGarmentFile {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    #userGarmentModal .user-file-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      padding: 0 14px;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.34);
      color: rgba(255,255,255,0.96);
      text-decoration: none;
      line-height: 1;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 600;
    }
    #userGarmentModal .user-file-name {
      color: rgba(255,255,255,0.6);
      font-size: 12px;
      max-width: calc(100% - 120px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #userGarmentModal #userGarmentPreviewWrap {
      display: none;
      margin: 8px 0 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.06);
      overflow: hidden;
      aspect-ratio: 4 / 3;
    }
    #userGarmentModal #userGarmentPreview {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }
    #userGarmentModal .user-scene-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 4px;
      margin: 4px 0;
    }
    #userGarmentModal .user-scene-ms {
      position: relative;
      margin: 10px 0;
    }
    #userGarmentModal .user-scene-input {
      width: 100%;
      min-height: 38px;
      padding: 9px 34px 9px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.92);
      font-size: 13px;
      line-height: 1.3;
      cursor: pointer;
    }
    #userGarmentModal .user-scene-ms::after {
      content: '▾';
      position: absolute;
      right: 12px;
      top: 9px;
      color: rgba(255,255,255,0.65);
      pointer-events: none;
      transition: transform .16s ease;
    }
    #userGarmentModal .user-scene-ms.open::after {
      transform: rotate(180deg);
      color: rgba(106,168,255,0.95);
    }
    #userGarmentModal .user-scene-panel {
      display: none;
      position: static;
      margin-top: 6px;
      z-index: 40;
      padding: 6px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(15,15,18,0.98);
      box-shadow: 0 10px 24px rgba(0,0,0,0.45);
      max-height: none;
      overflow: visible;
    }
    #userGarmentModal .user-scene-ms.open .user-scene-panel {
      display: block;
    }
    #userGarmentModal .user-scene-actions {
      margin-top: 6px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    #userGarmentModal .user-scene-confirm-btn {
      min-height: 30px;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 12px;
      background: rgba(10,132,255,0.85);
      border: 1px solid rgba(106,168,255,0.92);
      color: rgba(255,255,255,0.96);
      box-shadow: none;
    }
    #userGarmentModal .user-scene-chip {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.16);
      color: rgba(255,255,255,0.92);
      border-radius: 999px;
      min-height: 30px;
      padding: 4px 6px;
      text-align: center;
      font-size: 11px;
      box-shadow: none;
      transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
    }
    #userGarmentModal .user-scene-chip:hover {
      background: rgba(255,255,255,0.2);
    }
    #userGarmentModal .user-scene-chip.is-active {
      background: rgba(10,132,255,0.38);
      border-color: rgba(255,255,255,0.16);
      transform: none;
    }
    #userGarmentModal .user-action-row {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    #userGarmentModal #userGarmentGenBtn {
      padding: 10px 16px;
      border-radius: 10px;
      font-weight: 700;
      box-shadow: none;
    }
    #userGarmentModal .user-wardrobe-section {
      margin-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.14);
      padding-top: 10px;
    }
    #userGarmentModal #userWardrobeGrid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    #userGarmentModal .user-wardrobe-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      overflow: hidden;
    }
    #userGarmentModal .user-wardrobe-thumb {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      display: block;
      background: rgba(255,255,255,0.04);
    }
    #userGarmentModal .user-wardrobe-meta {
      padding: 6px;
      font-size: 11px;
      color: rgba(255,255,255,0.75);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @media (max-width: 640px) {
      #userGarmentModal .content.card {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
      }
      #userGarmentModal #userWardrobeGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* 穿搭解析：与试穿弹窗一致的暗色风格 */
    #userFitCommentModal .content.card {
      width: min(760px, 92vw);
      max-height: calc(var(--app-full-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px);
      overflow: auto;
      position: relative;
      background: rgba(0,0,0,0.92);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      box-shadow: none;
      border-radius: 14px;
      padding: 14px;
      scrollbar-width: none;
    }
    #userFitCommentModal .content.card::-webkit-scrollbar { width: 0; height: 0; }
    #userFitCommentModal .close {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.92);
    }
    #userFitCommentModal h3 { margin: 0 0 8px; color: rgba(255,255,255,0.95); font-size: 18px; }
    #userFitCommentModal .muted { color: rgba(255,255,255,0.62); }
    #userFitCommentModal .fit-upload {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
      flex-wrap: wrap;
    }
    #userFitCommentModal #userFitCommentFile {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      border: 0;
      padding: 0;
      margin: 0;
      white-space: nowrap;
    }
    #userFitCommentModal .fit-file-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 6px 12px;
      border-radius: 10px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.92);
      font-size: 12px;
      cursor: pointer;
    }
    #userFitCommentModal .fit-file-name { font-size: 12px; color: rgba(255,255,255,0.7); }
    #userFitCommentModal .fit-row {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
      align-items: center;
    }
    #userFitCommentModal select {
      min-height: 34px;
      padding: 6px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.92);
    }
    #userFitCommentModal .fit-result {
      margin-top: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255,255,255,0.04);
    }
    #userFitCommentModal .fit-history {
      margin-top: 12px;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 10px;
      padding: 10px;
      background: rgba(255,255,255,0.04);
    }
    #userFitCommentModal .fit-history-item {
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      padding: 8px;
      margin-top: 8px;
      background: rgba(255,255,255,0.03);
    }

    /* 衣橱管理：与主界面一致的暗色风格 */
    #wardrobeManageModal .content.card {
      width: min(820px, 92vw);
      max-height: 90vh;
      overflow: auto;
      position: relative;
      background: rgba(0,0,0,0.92);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.92);
      box-shadow: none;
      border-radius: 16px;
      padding: 14px;
    }
    #wardrobeManageModal .busy-mask {
      position: absolute;
      inset: 0;
      z-index: 60;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.62);
      backdrop-filter: blur(2px);
      border-radius: 16px;
    }
    #wardrobeManageModal .busy-mask.open {
      display: flex;
    }
    #wardrobeManageModal .busy-box {
      min-width: 220px;
      max-width: 82%;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.2);
      background: rgba(12,12,14,0.95);
      color: rgba(255,255,255,0.95);
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      line-height: 1.35;
    }
    #wardrobeManageModal .busy-spinner {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.25);
      border-top-color: rgba(106,168,255,1);
      animation: wm-spin 0.9s linear infinite;
      flex: 0 0 auto;
    }
    @keyframes wm-spin {
      to { transform: rotate(360deg); }
    }
    #wardrobeManageModal .close {
      background: rgba(0,0,0,0.9) !important;
      color: rgba(255,255,255,0.95) !important;
      border: 1px solid rgba(255,255,255,0.28) !important;
      box-shadow: none !important;
      padding: 8px 10px !important;
      border-radius: 14px !important;
    }
    #wardrobeManageModal h3 {
      margin: 0 0 8px 0;
      color: rgba(255,255,255,0.94);
      font-size: 18px;
      letter-spacing: 0.4px;
    }
    #wardrobeManageModal h4 {
      margin: 0;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      letter-spacing: 0.3px;
    }
    #wardrobeManageModal .muted { color: rgba(255,255,255,0.62); }
    #wardrobeManageModal .user-wardrobe-section {
      margin-top: 12px;
      border-top: 1px solid rgba(255,255,255,0.14);
      padding-top: 10px;
    }
    #wardrobeManageModal #userWardrobeManageGrid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    #wardrobeManageModal .wardrobe-cat-head {
      grid-column: 1 / -1;
      margin: 4px 0 2px;
      padding: 6px 8px;
      border-radius: 10px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.14);
      font-size: 12px;
      color: rgba(255,255,255,0.86);
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    #wardrobeManageModal .user-wardrobe-card {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    #wardrobeManageModal .user-wardrobe-thumb {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      display: block;
      background: rgba(255,255,255,0.04);
    }
    #wardrobeManageModal .user-wardrobe-meta {
      padding: 6px;
      font-size: 11px;
      color: rgba(255,255,255,0.75);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #wardrobeManageModal .wardrobe-refine-badge {
      position: absolute;
      left: 8px;
      top: 8px;
      z-index: 8;
      background: rgba(176,0,32,0.78);
      border: 1px solid rgba(255,255,255,0.24);
      border-radius: 999px;
      color: #fff;
      font-size: 11px;
      line-height: 1;
      padding: 5px 8px;
    }
    #wardrobeManageModal .wardrobe-refine-btn {
      position: absolute;
      left: 8px;
      bottom: 34px;
      z-index: 8;
      background: rgba(10,132,255,0.45);
      border: 1px solid rgba(106,168,255,0.92);
      color: rgba(255,255,255,0.96);
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 11px;
      line-height: 1;
      box-shadow: none;
    }
    #wardrobeManageModal .wardrobe-refine-btn[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
    }
    @media (max-width: 640px) {
      #wardrobeManageModal .content.card {
        padding-bottom: calc(14px + env(safe-area-inset-bottom));
      }
      #wardrobeManageModal #userWardrobeManageGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* 覆盖在图片上的操作按钮：透明 + 左下角竖列 */
    .overlay-actions, .overlay-actions-left {
      position: absolute;
      left: 0.6em;
      bottom: 0.6em;
      display: flex;
      flex-direction: column;
      gap: 0.35em;
      align-items: flex-start;
      z-index: 12;
    }
    #videoPreview .overlay-actions {
      left: auto;
      right: 0.6em;
      bottom: calc(0.6em + 44px + env(safe-area-inset-bottom));
      align-items: flex-end;
    }
    #videoPreview #videoExitBtn2 {
      position: absolute;
      left: 16px;
      top: calc(56px + env(safe-area-inset-top));
      z-index: 20;
    }
    .video-back-btn {
      position: absolute;
      left: 16px;
      top: calc(56px + env(safe-area-inset-top));
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(120,120,120,0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      color: #fff;
      border: none;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
    }
    .video-back-btn svg {
      width: 20px;
      height: 20px;
    }
    .video-overlay-btn.icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(0,0,0,0.35);
      color: #fff;
      border: none;
      border-radius: 50%;
      padding: 0;
      cursor: pointer;
    }
    #favView .overlay-actions {
      left: auto;
      right: 0.6em;
      align-items: flex-end;
    }
    .overlay-btn {
      background: rgba(0,0,0,0.35);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 1.2em;
      padding: 0.45em 0.85em;
      box-shadow: none;
      text-shadow: 0 1px 2px rgba(0,0,0,0.65);
    }
    .overlay-btn:disabled { opacity: 0.45; cursor: not-allowed; }
    .icon-btn {
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .icon-btn svg { width: 20px; height: 20px; display: block; }

    /* 让按钮跟随图片容器大小缩放（优先按图片容器宽度） */
    @supports (container-type: inline-size) {
      .overlay-btn { font-size: clamp(12px, 4.6cqi, 22px); }
    }
    /* 兜底：不支持容器查询时，按视口宽度缩放 */
    @supports not (container-type: inline-size) {
      .overlay-btn { font-size: clamp(12px, 1.6vw, 20px); }
    }
    /* 收藏页按钮更小，避免遮挡内容 */
    #favView .overlay-btn { font-size: clamp(11px, 1.1vw, 16px); }
    #favView .overlay-btn.icon-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: 999px;
      opacity: 0.9;
    }
    #favView .overlay-btn.icon-btn svg {
      width: 16px;
      height: 16px;
      display: block;
    }
    /* 首页卡片：试穿/分享图标（右下按钮组上方） */
    .try-icon,
    .home-share-btn {
      position: absolute;
      right: var(--home-action-right, 10px);
      top: auto;
      bottom: var(--home-action-bottom, 58px);
      width: var(--home-action-size, 38px);
      height: var(--home-action-size, 38px);
      min-width: var(--home-action-size, 38px);
      min-height: var(--home-action-size, 38px);
      flex-shrink: 0;
      aspect-ratio: 1 / 1;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--home-action-bg, rgba(0,0,0,0.32));
      border: 1px solid var(--home-action-border, rgba(255,255,255,0.18));
      color: rgba(255,255,255,0.95);
      z-index: 90;
      pointer-events: auto;
      box-sizing: border-box;
      overflow: hidden;
      box-shadow: none;
    }
    .try-icon svg,
    .home-share-btn svg {
      width: var(--home-icon-size, 22px);
      height: var(--home-icon-size, 22px);
      display: block;
    }
    .home-share-btn svg {
      stroke: rgba(255,255,255,0.92);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    #imgPreview .close,
    #fullImagePreview .close {
      background: rgba(0,0,0,0.35);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.25);
      text-shadow: 0 1px 2px rgba(0,0,0,0.65);
      backdrop-filter: blur(10px);
    }
    /* 选中角标已移除（单图即点即试穿） */
    /* 右下角“我的”浮动按钮 */
    .fab { position: fixed; right: 16px; bottom: 20px; z-index: 1200; }
    .fab .btn { border-radius: 22px; padding: 12px 16px; }

    /* 底部固定导航（半透明，不随滑动变化） */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: calc(var(--bottom-nav-gap) + env(safe-area-inset-bottom));
      z-index: 1400;
      padding: 0 10px 0;
      display: flex;
      justify-content: center;
      pointer-events: none;
    }
    .bottom-nav .nav-wrap {
      pointer-events: auto;
      display: flex;
      gap: 4px;
      padding: 6px 10px 8px;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.06) 100%),
        rgba(42,42,46,0.42);
      border: 1px solid rgba(255,255,255,0.72);
      box-shadow: 0 10px 24px rgba(0,0,0,0.28);
      backdrop-filter: blur(18px) saturate(130%);
    }
    .bottom-nav .nav-btn {
      width: 56px;
      padding: 4px 0 2px;
      border-radius: 14px;
      background: transparent;
      border: none;
      box-shadow: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 2px;
      color: rgba(255,255,255,0.82);
    }
    .bottom-nav .nav-btn .nav-icon {
      width: 42px;
      height: 26px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid transparent;
    }
    .bottom-nav .nav-btn svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .bottom-nav .nav-btn .nav-label {
      display: block;
      font-size: 10px;
      line-height: 1;
      white-space: nowrap;
      color: inherit;
    }

    /* 我的：两列布局（大屏时头像占左半，表单占右半） */
    .my-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .my-col { flex: 1 1 320px; }
    .my-avatar-card img { border-radius: 8px; }

    /* 配置弹窗（原“我的”）：黑底白字 + 紧凑 + 尽量不出现滚动条 */
    #myModal .content.card {
      background: rgba(0,0,0,0.94);
      color: rgba(255,255,255,0.95);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: none;
      width: min(760px, 94vw);
      padding: 14px !important;
      border-radius: 16px;
      max-height: calc(var(--app-full-h) - 90px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scrollbar-width: none;
    }
    /* “我的”独立页面模式：不再作为弹窗覆盖层，保留顶部 Logo 与底部主导航可交互 */
    #myModal.is-page-active {
      display: block !important;
      position: fixed;
      left: 0;
      right: 0;
      top: var(--shell-top-reserved);
      bottom: calc(var(--shell-bottom-reserved) - 10px);
      z-index: 1200;
      background: transparent;
      padding: 0 var(--page-side-padding) 6px !important;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      pointer-events: auto;
    }
    #myModal.is-page-active .content.card {
      width: 100% !important;
      max-width: 100% !important;
      max-height: none !important;
      min-height: 0 !important;
      margin: 0 auto;
      overflow: visible !important;
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      padding: 0 !important;
      box-sizing: border-box;
    }
    #myModal.is-page-active .my-avatar-card {
      margin-top: 0 !important;
    }
    #myModal.is-page-active .my-col > .card,
    #myModal.is-page-active #logoutCard {
      margin-bottom: 8px !important;
    }
    #myModal.is-page-active #logoutCard {
      position: static !important;
      bottom: auto !important;
      z-index: auto !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
    }
    #myModal.is-page-active .close {
      display: inline-flex !important;
      position: fixed !important;
      top: calc(var(--shell-top-reserved) + 8px) !important;
      right: max(12px, calc(var(--page-side-padding) + 2px)) !important;
      left: auto !important;
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      min-height: 40px !important;
      max-width: 40px !important;
      max-height: 40px !important;
      padding: 0 !important;
      border-radius: 999px !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 1305 !important;
      pointer-events: auto !important;
      background: rgba(36, 38, 44, 0.92) !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
      color: rgba(255,255,255,0.95) !important;
      box-shadow: 0 4px 14px rgba(0,0,0,0.28) !important;
    }
    #myModal.is-page-active .close svg {
      width: 20px !important;
      height: 20px !important;
      min-width: 20px !important;
      min-height: 20px !important;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      pointer-events: none;
    }
    #myModal .content.card::-webkit-scrollbar { width: 0; height: 0; }
    #myModal .card {
      background: rgba(255,255,255,0.10);
      border-color: rgba(255,255,255,0.22);
      box-shadow: none;
    }
    #myModal h3, #myModal h4 { color: rgba(255,255,255,0.92); }
    #myModal h3 { font-size: 18px; letter-spacing: 0.6px; margin: 0 0 10px 0; }
    #myModal h4 { font-size: 13px; letter-spacing: 0.4px; margin: 0 0 8px 0 !important; }
    #myModal .muted { color: rgba(255,255,255,0.62); }
    #myModal .row { gap: 8px; }
    #myModal input, #myModal select, #myModal textarea {
      background: rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.96);
      border: 1.5px solid rgba(255,255,255,0.32) !important;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);
    }
    #myModal input:focus, #myModal select:focus, #myModal textarea:focus {
      outline: 2px solid rgba(106,168,255,0.8);
      outline-offset: 1px;
      border-color: rgba(106,168,255,0.9) !important;
    }
    #myModal input::placeholder, #myModal textarea::placeholder { color: rgba(255,255,255,0.55); }
    #myModal .close {
      background: rgba(0,0,0,0.9) !important;
      color: rgba(255,255,255,0.95) !important;
      border: 1px solid rgba(255,255,255,0.28) !important;
      box-shadow: none !important;
      top: 10px;
      right: 20px;
      left: auto;
      padding: 8px 10px !important;
      border-radius: 14px !important;
    }

    /* 配置弹窗：更紧凑 */
    #myModal .my-grid { gap: 8px; }
    #myModal .card { padding: 10px; border-radius: 12px; }
    #myModal .my-col > .card { margin-bottom: 8px !important; }
    #myModal .my-avatar-card { margin-top: 34px; }
    #myModal .imgbox { background: rgba(255,255,255,0.06) !important; }

    /* 配置弹窗按钮：更轻、更统一（保留主色按钮的辨识度） */
    #myModal button {
      border-radius: 10px;
      padding: 9px 12px;
      box-shadow: 0 0 0 1px rgba(0,0,0,0.28), 0 0 0 2px rgba(255,255,255,0.16);
    }
    #myModal #logoutBtn {
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.32);
      color: rgba(255,255,255,0.96);
    }

    /* 账号卡片更紧凑 */

    /* 头像区域：左侧用户信息，右侧头像（1/4），上传在下方 */
    #myModal .avatar-row { display: flex; gap: 10px; align-items: flex-start; }
    #myModal .avatar-info { flex: 1 1 auto; min-width: 0; max-width: 420px; display: flex; flex-direction: column; gap: 6px; }
    #myModal .avatar-info-user-line { order: 1; }
    #myModal .avatar-info-title-line { order: 2; }
    #myModal .avatar-info-gender-line { order: 3; }
    #myModal .avatar-photo { flex: 0 0 34%; max-width: 34%; min-width: 132px; }
    #myModal .avatar-preview-box {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      border-radius: 10px;
      min-height: 188px;
      background: #f5f5f5;
      overflow: hidden;
    }
    #myModal .avatar-preview-box img {
      width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: cover;
      object-position: top;
      display: none;
      border-radius: 10px;
    }
    #myModal .avatar-photo-actions {
      display: flex;
      justify-content: center;
      margin-top: 8px;
    }
    #myModal .avatar-photo-actions .file-btn { width: 100%; }
    #myModal .avatar-info-line { display: flex; justify-content: flex-start; gap: 10px; padding: 4px 0; font-size: 13px; align-items: center; }
    #myModal .avatar-info-line > .muted { flex: 0 0 44px; }
    #myModal .avatar-info-line input,
    #myModal .avatar-info-line select {
      flex: 0 1 220px;
      width: 220px;
      max-width: 100%;
      min-width: 0;
      text-align: left;
      padding: 8px 10px !important;
      border-radius: 10px !important;
    }
    #myModal .avatar-info-line .inline-controls {
      display: flex;
      gap: 12px;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      row-gap: 8px;
      min-width: 0;
    }
    /* Android/WebView 兼容：部分版本不支持 flex gap，补充 margin */
    #myModal .avatar-info-line .inline-controls > * + * { margin-left: 12px; }
    #myModal .avatar-info-line .inline-controls select {
      flex: 0 0 76px;
      width: 76px;
      max-width: 76px;
      padding: 8px 8px !important;
      text-align: center;
      text-align-last: center;
    }
    #myModal #myAvatar {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    #myModal #myAvatarCamera {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    #myModal .file-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      cursor: pointer;
      user-select: none;
      background: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.34);
      color: rgba(255,255,255,0.96);
      text-decoration: none;
      line-height: 1;
      white-space: nowrap;
    }
    #myModal .file-btn:hover { background: rgba(255,255,255,0.18); }
    #myModal .avatar-upload { margin-top: 8px; }
    #myModal #myAvatarPreview { width: 100% !important; height: 100% !important; object-fit: cover; object-position: top; margin: 0 !important; }
    #myModal input[type="file"] { width: 100%; }

    /* 上传区域：减少高度，信息更清晰 */
    #myModal .avatar-upload input[type="file"] { padding: 10px 10px; }

    /* 补充图：改为三列网格，更省空间 */
    #myAvatarSuppGrid {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px !important;
      align-items: start;
    }
    #myAvatarSuppGrid .imgbox { border-radius: 10px; overflow: hidden; }
    #myAvatarSuppGrid .muted { font-size: 11px; }
    #myAvatarSuppGrid button { padding: 8px 10px; border-radius: 10px; }

    /* 表单：两列更紧凑，窄屏仍保持 2*2 */
    #myModal #pwdFields input { flex: 1 1 calc(33.333% - 8px); min-width: 120px; }
    #myModal #myPhone,
    #myModal #myHeight,
    #myModal #myWeight,
    #myModal #myAge,
    #myModal #myGender {
      min-width: 0;
    }
    #myModal #myAddress { width: 100% !important; }

    #myModal .profile-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: start;
    }
    #myModal .profile-grid .field-block { min-width: 0; }
    #myModal .profile-grid .field-block.full { grid-column: 1 / -1; }
    #myModal #saveProfile,
    #myModal #profileMsg { grid-column: 1 / -1; }

    #myModal .field-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    #myModal .field-label {
      font-size: 12px;
      color: rgba(255,255,255,0.62);
    }

    @media (max-width: 520px) {
      #myModal .my-grid { flex-direction: column; }
      #myModal .content.card {
        padding-bottom: calc(14px + 56px + env(safe-area-inset-bottom));
        max-height: calc(92vh - 56px);
      }
      #myModal #pwdFields input { flex: 1 1 100%; }
      #myModal .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* 登录/注册弹窗 Tab 切换栏 */
    .auth-tabs {
      display: flex;
      gap: 0;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.16);
      margin-bottom: 12px;
    }
    .auth-tab {
      flex: 1;
      padding: 8px 0;
      background: transparent;
      border: none;
      color: rgba(255,255,255,0.62);
      font-size: 13px;
      cursor: pointer;
      transition: background 0.18s, color 0.18s;
    }
    .auth-tab.active {
      background: rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.95);
      font-weight: 600;
    }
    .auth-tab:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.16); }

    /* 发送验证码按钮 */
    .sms-send-btn {
      flex-shrink: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.92);
      font-size: 12px;
      cursor: pointer;
      white-space: nowrap;
    }
    .sms-send-btn:disabled {
      opacity: 0.5;
      cursor: default;
    }
    .sms-send-btn:not(:disabled):hover { background: rgba(255,255,255,0.22); }

    /* 短信注册弹窗 */
    #smsRegisterModal .content.card {
      background: var(--bg);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.95);
      box-shadow: none;
    }
    #smsRegisterModal h3 { color: rgba(255,255,255,0.95); }
    #smsRegisterModal .close {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.92);
    }
    #smsRegisterModal input {
      background: rgba(255,255,255,0.08) !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      color: rgba(255,255,255,0.92) !important;
    }
    #smsRegisterModal input::placeholder { color: rgba(255,255,255,0.55); }
    #smsRegisterModal .muted { color: rgba(255,255,255,0.55); }

    /* 找回密码弹窗 */
    #forgotModal .content.card {
      background: var(--bg);
      border: 1px solid rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.95);
      box-shadow: none;
    }
    #forgotModal h3 { color: rgba(255,255,255,0.95); }
    #forgotModal .close {
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.92);
    }
    #forgotModal input {
      background: rgba(255,255,255,0.08) !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      color: rgba(255,255,255,0.92) !important;
    }
    #forgotModal input::placeholder { color: rgba(255,255,255,0.55); }
    #forgotModal .muted { color: rgba(255,255,255,0.55); }

    /* 第二轮一致性：试穿工具区 */
    .tryon-tools {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .tool-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      padding: 8px 11px;
      font-size: 13px;
      line-height: 1;
      border-radius: 12px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.20);
    }
    .tool-chip:hover { background: rgba(255,255,255,0.18); }
    .tool-chip svg { flex: 0 0 auto; }

    @media (hover: none), (pointer: coarse) {
      #registerModal .file-btn:hover,
      #myModal .file-btn:hover,
      .task-counter-btn:hover,
      #userGarmentModal .user-scene-chip:hover,
      .sms-send-btn:not(:disabled):hover {
        background: rgba(255,255,255,0.14);
      }
      .my-tool-btn:hover,
      .tool-chip:hover {
        background: rgba(255,255,255,0.12);
      }
    }

    /* 第二轮一致性：认证弹窗 */
    .auth-modal .content.card {
      background: linear-gradient(180deg, rgba(24,24,27,0.97) 0%, rgba(12,12,14,0.97) 100%) !important;
      border: 1px solid rgba(255,255,255,0.20) !important;
      border-radius: 18px;
      box-shadow: 0 20px 50px rgba(0,0,0,0.42);
      color: rgba(255,255,255,0.95);
    }
    .auth-modal h3 {
      margin: 0 0 12px;
      font-size: 18px;
      letter-spacing: 0.2px;
      color: rgba(255,255,255,0.96);
    }
    .auth-modal .close {
      background: rgba(255,255,255,0.14) !important;
      border: 1px solid rgba(255,255,255,0.24) !important;
      color: rgba(255,255,255,0.95) !important;
      border-radius: 12px !important;
      min-width: 50px;
      padding: 7px 10px !important;
      box-shadow: none !important;
    }
    .auth-modal input,
    .auth-modal select,
    .auth-modal textarea {
      background: rgba(255,255,255,0.10) !important;
      border: 1px solid rgba(255,255,255,0.24) !important;
      color: rgba(255,255,255,0.94) !important;
      border-radius: 10px !important;
    }
    .auth-modal input:focus,
    .auth-modal select:focus,
    .auth-modal textarea:focus {
      outline: 2px solid rgba(10,132,255,0.72);
      outline-offset: 1px;
      border-color: rgba(10,132,255,0.82) !important;
    }
    .auth-modal button:not(.close):not(.sms-send-btn) {
      border-radius: 11px;
      font-weight: 600;
    }
    .auth-tabs {
      padding: 2px;
      border-radius: 14px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.18);
      margin-bottom: 12px;
    }
    .auth-tab {
      border-radius: 10px;
      font-weight: 500;
      color: rgba(255,255,255,0.70);
    }
    .auth-tab.active {
      background: rgba(10,132,255,0.24);
      color: rgba(255,255,255,0.96);
      font-weight: 600;
    }
    .auth-tab:not(:last-child) { border-right: none; }
    .sms-send-btn {
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.24);
    }

    /* 第二轮一致性：我的页（配置） */
    #myModal .content.card {
      width: min(920px, 96vw);
      max-height: calc(var(--app-full-h) - 16px);
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(21,21,24,0.98) 0%, rgba(12,12,14,0.98) 100%);
      padding-top: 48px !important;
    }
    #myModal h3 {
      text-align: center;
      font-size: 17px;
      letter-spacing: 0.2px;
      margin: 0 0 14px 0;
    }
    #myModal .close {
      left: auto;
      right: 20px;
      top: 10px;
      width: 34px;
      min-width: 34px;
      height: 34px;
      padding: 0 !important;
      border-radius: 999px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      line-height: 1;
      font-weight: 500;
    }

    @media (max-width: 680px) {
      .tryon-tools,
      .tryon-tools-row {
        justify-content: flex-start;
        gap: 6px;
      }
      .tool-chip {
        font-size: 12px;
        padding: 7px 10px;
      }
      .tryon-seg-btn {
        min-width: 88px;
        height: 30px;
        padding: 0 10px;
      }
      #myModal {
        padding: 0;
      }
      #myModal .content.card {
        width: 100vw;
        max-width: 100vw;
        min-height: var(--app-full-h);
        max-height: var(--app-full-h);
        border-radius: 0;
        border: 0;
        padding: calc(12px + var(--safe-top)) 12px calc(14px + var(--safe-bottom)) !important;
      }
      #myModal .my-avatar-card { margin-top: 42px; }
      #myModal .close {
        top: calc(10px + var(--safe-top));
        right: 20px;
        left: auto;
      }
    }

    /* 第三轮一致性：首页分组与卡片节奏 */
    .masonry,
    .masonry-col,
    .scene-horizontal-row,
    .scene-verticals,
    .gallery {
      gap: 6px;
    }
    .scene-horizontal-row,
    .today-inspiration-row {
      gap: 8px !important;
    }
    .scene-horizontal-row {
      padding-bottom: 0;
    }
    .scene-horizontal-row .tpl {
      flex: 0 0 82vw;
      max-width: min(82vw, 520px);
    }
    .scenario-group {
      margin-bottom: 14px;
    }
    .scenario-label {
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.2px;
      text-transform: none;
      text-align: left;
      color: rgba(255,255,255,0.90);
      padding: 6px 2px;
      margin: 2px 0 8px;
      background: transparent;
      border: none;
      backdrop-filter: none;
      line-height: 1.4;
      min-height: 1.4em;
    }
    .tpl,
    .gallery-item,
    .tryon-card {
      border-radius: 14px;
    }


    /* 回归修复：桌面 Chrome 的 HOME 横扫图 mini-stack 必须可鼠标拖动轮换 */
    html.motion-desktop.browser-chrome #homeView .scene-horizontal-row .tpl-product-mini-stack.is-draggable,
    html.motion-desktop.browser-chrome #homeView .today-inspiration-row .tpl-product-mini-stack.is-draggable {
      pointer-events: auto !important;
      touch-action: none !important;
      cursor: grab;
    }
    html.motion-desktop.browser-chrome #homeView .scene-horizontal-row .tpl-product-mini-stack.is-draggable:active,
    html.motion-desktop.browser-chrome #homeView .today-inspiration-row .tpl-product-mini-stack.is-draggable:active {
      cursor: grabbing;
    }

    /* 第三轮一致性：预览按钮层级 */
    #imgPreview .content {
      width: min(1080px, 96vw);
      max-height: 94vh;
    }
    #imgPreview .imgbox {
      --preview-action-size: 32px;
      --preview-action-gap: 10px;
      --preview-action-base-bottom: 20px;
      --preview-action-right: 25px;
      aspect-ratio: auto;
      min-height: min(78vh, 860px);
      border-radius: 16px;
      overflow: hidden;
      perspective: 1400px;
      transform-style: preserve-3d;
    }
    #imgPreview #previewImg {
      will-change: transform;
      transform-origin: center center;
      backface-visibility: hidden;
      transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      touch-action: pan-y;
    }
    html.motion-mobile.browser-safari #imgPreview #previewImg,
    html.motion-mobile.browser-chrome #imgPreview #previewImg {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      will-change: transform, opacity;
    }
    #imgPreview .overlay-actions-right {
      right: var(--preview-action-right);
      top: auto;
      bottom: calc(var(--preview-action-base-bottom) + env(safe-area-inset-bottom));
      transform: none;
      gap: var(--preview-action-gap);
      align-items: center;
    }
    #imgPreview .overlay-actions-right .icon-btn {
      width: var(--preview-action-size);
      height: var(--preview-action-size);
      margin: 0;
    }
    #imgPreview .close,
    #fullImagePreview .close {
      left: max(12px, env(safe-area-inset-left));
      right: auto;
      top: max(12px, env(safe-area-inset-top));
      width: 34px;
      min-width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* 第三轮一致性：我的页表单节奏 */
    #myModal .avatar-row {
      align-items: stretch;
      gap: 12px;
    }
    #myModal .avatar-photo {
      flex: 0 0 160px;
      max-width: 160px;
      min-width: 120px;
    }
    #myModal .avatar-info-line {
      padding: 6px 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    #myModal .avatar-info-line:last-child {
      border-bottom: none;
    }
    #myModal .avatar-info-line > .muted {
      flex-basis: 56px;
      font-size: 12px;
    }
    #myModal .avatar-info-line input,
    #myModal .avatar-info-line select {
      flex: 1 1 auto;
      width: 100%;
      min-height: 38px;
      padding: 10px 12px !important;
    }
    #myModal #pwdFields {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 8px;
    }
    #myModal #pwdFields input {
      width: 100%;
      min-width: 0;
      flex: none;
      min-height: 38px;
      padding: 10px 12px !important;
    }
    #myModal .profile-grid {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    #myModal .field-block input,
    #myModal .field-block select,
    #myModal .field-block textarea {
      width: 100%;
      min-height: 38px;
      padding: 10px 12px !important;
      box-sizing: border-box;
    }
    #myModal #saveProfile {
      width: 100%;
      min-height: 38px;
    }
    #myModal #profileMsg,
    #myModal #pwdMsg {
      min-height: 18px;
    }

    /* 保存提示为空时不占位，避免与下方账号操作按钮出现过大空隙 */
    #myModal #profileMsg:empty {
      display: none;
    }

    @media (max-width: 680px) {
      .scene-waterfall-title-slot,
      .scene-waterfall-more-tail {
        padding-top: 35.56%;
      }
      .today-inspiration-row .tpl {
        flex-basis: 84vw;
        max-width: 84vw;
      }
      .tpl-product-mini-stack {
        left: 6px;
        bottom: 6px;
        --mini-card-width: 38px;
        --mini-card-height: 50px;
        --mini-stack-step: 7px;
      }

      .scene-verticals .tpl-product-mini-stack {
        bottom: 16px;
        --mini-card-width: 48px;
        --mini-card-height: 62px;
        --mini-stack-step: 9px;
      }
      #homeView .scene-verticals .tpl-product-mini-stack {
        --mini-card-width: 55px;
        --mini-card-height: 71px;
        --mini-stack-step: 10px;
      }
      #tryonView .tryon-card .tpl-product-mini-stack {
        --mini-card-width: 54px;
        --mini-card-height: 70px;
        --mini-stack-step: 10px;
      }
      #favView .gallery-item .tpl-product-mini-stack {
        bottom: 12px;
        --mini-card-width: 60px;
        --mini-card-height: 80px;
        --mini-stack-step: 11px;
      }

      .scene-more-grid .tpl-product-mini-stack {
        --mini-card-width: 55px;
        --mini-card-height: 71px;
        --mini-stack-step: 10px;
      }

      #homeView .scene-horizontal-row .tpl-product-mini-stack,
      #homeView .today-inspiration-row .tpl-product-mini-stack {
        left: 14px;
        bottom: 10px;
        --mini-card-width: 86px;
        --mini-card-height: 116px;
        --mini-stack-step: 18px;
      }
      .scene-horizontal-row .tpl-product-mini-count,
      .today-inspiration-row .tpl-product-mini-count {
        right: -4px;
        top: -7px;
        min-width: 24px;
        height: 24px;
        line-height: 22px;
        font-size: 11px;
      }

      .scene-horizontal-row .tpl-product-mini-stack.is-compact-all,
      .today-inspiration-row .tpl-product-mini-stack.is-compact-all {
        width: 154px;
        height: 134px;
        padding: 4px;
        gap: 3px;
        border-radius: 12px;
      }
      .scene-horizontal-row .tpl-product-mini-stack.is-compact-all .tpl-product-mini-card,
      .today-inspiration-row .tpl-product-mini-stack.is-compact-all .tpl-product-mini-card {
        border-radius: 9px;
      }
      #imgPreview {
        padding: 0;
        background: rgba(0,0,0,0.96);
      }
      #imgPreview .content {
        width: var(--app-full-w);
        height: var(--app-full-h);
        max-width: var(--app-full-w);
        max-height: var(--app-full-h);
      }
      #imgPreview .imgbox {
        --preview-action-right: 25px;
        width: 100%;
        height: auto;
        min-height: 0;
        border-radius: 0;
      }
      #imgPreview #previewImg {
        width: 100%;
        height: auto;
        max-height: var(--app-full-h);
        object-fit: contain;
      }
      #imgPreview .overlay-actions-right {
        top: auto;
        bottom: calc(var(--preview-action-base-bottom, 20px) + env(safe-area-inset-bottom));
        transform: none;
        right: var(--preview-action-right, 25px);
      }
      #imgPreview .close,
      #fullImagePreview .close {
        left: 10px;
        top: calc(10px + env(safe-area-inset-top));
      }
      #myModal .avatar-row {
        flex-direction: column;
      }
      #myModal .avatar-photo {
        max-width: 45%;
        min-width: 120px;
      }
    }

    /* 第四轮像素基线：进一步贴合 iOS */
    .tpl-masonry {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 0;
      background: #1a1a1a;
    }
    footer { display: none; }

    .brand-wordmark {
      transform: translateY(3px);
    }
    .task-counter-btn {
      min-height: 30px;
      padding: 6px 10px;
      font-size: 11px;
    }
    .task-float-btn {
      top: 8px;
      right: 8px;
    }

    .container {
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: calc(138px + env(safe-area-inset-bottom)) !important;
    }
    #homeView,
    #tryonView,
    #favView {
      padding-left: var(--page-side-padding);
      padding-right: var(--page-side-padding);
    }
    #homeView .tpl-section {
      margin-top: 16px;
    }

    .bottom-nav {
      padding: 0 8px 0;
    }
    .bottom-nav .nav-wrap {
      transform: none;
    }
    .bottom-nav .nav-btn,
    .bottom-nav .nav-btn .nav-icon {
      width: 58px;
      height: 44px;
    }

    #imgPreview .product-tray {
      left: 10px;
      bottom: 20px;
    }
    #imgPreview .product-tray-scroller {
      width: 122px;
      height: 164px;
    }
    #imgPreview .product-tray-scroller.uses-mini-stack {
      width: auto;
      height: auto;
      overflow: visible;
      cursor: default;
      touch-action: none;
    }
    #imgPreview .product-tray-scroller.uses-mini-stack .tpl-product-mini-stack {
      position: relative;
      left: 0;
      bottom: 0;
      --mini-card-width: 88px;
      --mini-card-height: 122px;
      --mini-stack-step: 16px;
      z-index: 20;
      pointer-events: auto;
      touch-action: none;
    }
    #imgPreview .product-card {
      width: 88px;
      height: 122px;
      border-radius: 15px;
    }
    html.platform-android-webview #imgPreview .product-card {
      /* backdrop-filter 在部分 Android WebView 版本中会创建合成层并遮蔽子元素 img，
         禁用后改用可见实体背景，彻底规避该渲染 bug。
         图片改由 JS 以 background-image 方式渲染到卡片背景，绕过 <img> 渲染异常。 */
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background-color: rgba(240,240,240,0.92) !important;
      background-size: cover !important;
      background-position: center center !important;
      background-repeat: no-repeat !important;
      min-width: 84px;
      min-height: 116px;
    }
    html.platform-android-webview #imgPreview .product-card img {
      /* <img> 仅用于触发加载，不参与可见渲染 */
      display: none !important;
    }
    html.platform-android-webview #imgPreview .product-card .product-price {
      position: absolute;
      z-index: 10;
    }
    /* WebView: 按钮缩小 38x38 / 图标 20x20 */
    html.platform-android-webview #imgPreview .imgbox {
      --preview-action-size: 32px;
    }
    html.platform-android-webview #imgPreview .overlay-actions-right .overlay-btn.icon-btn,
    html.platform-android-webview #imgPreview .overlay-actions-right .try-icon {
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
    }
    html.platform-android-webview #imgPreview .overlay-actions-right .overlay-btn.icon-btn svg,
    html.platform-android-webview #imgPreview .overlay-actions-right .try-icon svg {
      width: 16px;
      height: 16px;
    }
    html.platform-android-webview #imgPreview .product-tray,
    html.platform-android-webview #imgPreview #productTray,
    html.platform-android-webview #imgPreview > .content > .imgbox .product-tray,
    html.platform-android-webview #imgPreview > .content > .imgbox #productTray {
      bottom: 0px !important;
    }
    #imgPreview .product-price,
    #imgPreview .product-card:not(.is-active) .product-price {
      opacity: 1 !important;
      display: block !important;
      z-index: 12;
    }
    #imgPreview .product-tray-count {
      left: 5px;
      top: 5px;
    }

    @media (max-width: 680px) {
      :root {
        --page-side-padding: 4px;
        --tab-header-height: 34px;
        --tab-title-size: 13px;
        --bottom-nav-gap: 20px;
      }
      .container {
        padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
      }
      #homeView,
      #tryonView,
      #favView {
        padding-left: var(--page-side-padding);
        padding-right: var(--page-side-padding);
      }
      .bottom-nav .nav-wrap {
        transform: none;
      }
      #imgPreview .product-tray-scroller {
        width: 116px;
        height: 156px;
      }
      #imgPreview .product-card {
        width: 84px;
        height: 116px;
      }
      .my-tools-grid {
        grid-template-columns: 1fr;
      }
      .my-tool-btn {
        justify-content: flex-start;
        padding-left: 12px;
      }
    }

    #myModal h3 {
      font-size: 18px;
      margin: 0 0 12px 0;
      min-height: var(--tab-header-height);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* 主预览：保持为非全屏弹层，点击主图后再进入 fullImagePreview */
    #imgPreview {
      --preview-related-bottom-spacer-px: calc(12px + env(safe-area-inset-bottom));
      padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
      background: rgba(0,0,0,0.88) !important;
      z-index: 2100;
    }
    #imgPreview .content {
      width: min(980px, 92vw) !important;
      height: auto !important;
      max-width: 92vw !important;
      max-height: 88vh !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      background: #000;
      border-radius: 14px;
    }
    #imgPreview .imgbox {
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      border-radius: 12px !important;
      align-items: flex-start;
      z-index: 2;
    }
    #imgPreview #previewImg {
      width: 100% !important;
      height: auto !important;
      max-height: min(72vh, 860px) !important;
      object-fit: contain;
      object-position: center center;
    }
    #imgPreview.chrome-hidden .close,
    #imgPreview.chrome-hidden .overlay-actions-right,
    #imgPreview.chrome-hidden .try-icon,
    #imgPreview.chrome-hidden .product-tray,
    #imgPreview.chrome-hidden .product-tray-count,
    #imgPreview.chrome-hidden .preview-related-wall {
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
    }
    #imgPreview .preview-related-wall {
      position: relative;
      z-index: 1;
      background: #000;
      padding: 0 0 var(--preview-related-bottom-spacer-px);
      margin-top: 2.8em;
      min-height: 34vh;
    }
    #imgPreview .preview-related-sections {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 0 10px;
    }
    #imgPreview .preview-related-section {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    #imgPreview .preview-related-title {
      margin: 0;
      padding: 0 4px;
      color: rgba(255,255,255,0.92);
      font-size: 18px;
      line-height: 1.2;
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    #imgPreview .preview-related-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: start;
    }
    #imgPreview .preview-related-col {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-width: 0;
    }
    #imgPreview .preview-related-odd-copy {
      min-height: 84px;
      width: 100%;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: rgba(255,255,255,0.92);
      font-family: 'PingFang SC', 'Hiragino Sans GB', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.2px;
      line-height: 1.35;
      opacity: 0.95;
      overflow-wrap: anywhere;
      user-select: none;
      pointer-events: none;
    }
    #imgPreview .preview-related-col .tpl {
      border-radius: 12px;
      overflow: hidden;
    }
    #imgPreview .preview-related-col .tpl-product-mini-stack {
      left: 8px;
      bottom: 18px;
      --mini-card-width: 54px;
      --mini-card-height: 72px;
      --mini-stack-step: 10px;
      pointer-events: none;
      touch-action: pan-y;
      z-index: 20;
    }
    html.motion-desktop #imgPreview .preview-related-col .tpl-product-mini-stack.is-draggable {
      pointer-events: auto;
      touch-action: none;
      cursor: grab;
    }
    #imgPreview .preview-related-col .fav-btn,
    #imgPreview .preview-related-col .try-icon,
    #imgPreview .preview-related-col .home-share-btn {
      width: 32px !important;
      height: 32px !important;
      min-width: 32px !important;
      min-height: 32px !important;
      background: rgba(8,8,10,0.88);
      border-color: rgba(255,255,255,0.42);
      opacity: 0.9;
    }
    #imgPreview .preview-related-col .fav-btn .fav-icon {
      width: 16px !important;
      height: 16px !important;
    }
    #imgPreview .preview-related-col .fav-btn .fav-icon path {
      stroke-width: 2;
    }
    #imgPreview .preview-related-col .try-icon svg,
    #imgPreview .preview-related-col .home-share-btn svg {
      width: 16px !important;
      height: 16px !important;
      transform: none;
    }
    .fav-btn.is-flash,
    .tryon-action-btn.is-flash,
    #imgPreview .preview-related-col .fav-btn.is-flash {
      animation: favFlashInvert 220ms ease-out;
    }
    @keyframes favFlashInvert {
      0% {
        background: rgba(0,0,0,0.76);
        border-color: rgba(255,255,255,0.42);
      }
      35% {
        background: rgba(255,255,255,0.95);
        border-color: rgba(255,255,255,0.95);
      }
      100% {
        background: rgba(0,0,0,0.76);
        border-color: rgba(255,255,255,0.42);
      }
    }
    #imgPreview .preview-related-card {
      width: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      color: inherit;
      display: block;
      text-align: left;
      cursor: pointer;
    }
    #imgPreview .preview-related-card--lazy {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16;
      border-radius: 12px;
      overflow: hidden;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      border: 1px solid rgba(255,255,255,0.12);
      cursor: default;
    }
    #imgPreview .preview-related-card--lazy::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, rgba(255,255,255,0.03) 16%, rgba(255,255,255,0.18) 28%, rgba(255,255,255,0.03) 44%);
      background-size: 220% 100%;
      animation: preview-related-lazy-shimmer 1.25s ease-in-out infinite;
    }
    @keyframes preview-related-lazy-shimmer {
      0% { background-position: 100% 0; }
      100% { background-position: -120% 0; }
    }
    #imgPreview .preview-related-card-img {
      width: 100%;
      aspect-ratio: 9 / 16;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
    }
    #imgPreview .preview-related-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    #imgPreview .preview-related-name {
      margin-top: 6px;
      color: rgba(255,255,255,0.86);
      font-size: 12px;
      line-height: 1.3;
      letter-spacing: 0.1px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 0 2px;
    }

    /* 第五轮：我的页紧凑化 + 退出按钮位于主键区上方 */
    #myModal .content.card {
      padding-top: 44px !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
      padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
    }
    #myModal .my-grid {
      gap: 6px;
    }
    #myModal .card {
      padding: 8px;
      border-radius: 10px;
    }
    #myModal .avatar-row {
      gap: 8px;
      align-items: flex-start;
    }
    #myModal .avatar-info-line {
      padding: 2px 0;
      border-bottom: none;
      gap: 6px;
    }

    #myModal .avatar-info-line > .muted {
      flex: 0 0 36px;
      font-size: 11px;
    }
    #myModal .avatar-info-line input,
    #myModal .avatar-info-line select,
    #myModal .field-block input,
    #myModal .field-block select,
    #myModal .field-block textarea,
    #myModal #pwdFields input {
      min-height: 34px;
      padding: 7px 9px !important;
      font-size: 14px;
    }
    #myModal .field-block {
      gap: 3px;
    }
    #myModal .field-label {
      font-size: 11px;
      line-height: 1.1;
    }
    #myModal .profile-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      margin-top: 8px !important;
    }
    #myModal .profile-grid .field-block.full,
    #myModal #saveProfile,
    #myModal #profileMsg {
      grid-column: 1 / -1;
    }
    #myModal #myAddress {
      min-height: 34px;
      max-height: 52px;
      resize: vertical;
    }
    #myModal #saveProfile,
    #myModal #doChangePwd,
    #myModal #logoutBtn,
    #myModal .file-btn {
      min-height: 34px;
      height: 34px;
      padding: 0 10px;
      font-size: 14px;
    }
    #myModal #pwdFields {
      gap: 6px;
      margin-bottom: 6px;
    }
    #myModal #logoutCard {
      margin-top: 0 !important;
    }

    @media (max-width: 680px) {
      #myModal .content.card {
        padding: calc(8px + var(--safe-top)) 8px calc(120px + var(--safe-bottom)) !important;
      }
      #myModal h3 {
        margin: 0 0 8px 0;
        min-height: 30px;
        font-size: 17px;
      }
      #myModal .close {
        top: calc(10px + var(--safe-top));
        right: 20px;
        left: auto;
      }
      #myModal .avatar-row {
        flex-direction: row;
        align-items: flex-start;
      }
      #myModal .avatar-photo {
        flex: 0 0 128px;
        max-width: 128px;
        min-width: 128px;
      }
      #myModal #myAvatarPreview {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
      }
      #myModal .avatar-photo-actions {
        margin-top: 6px;
      }
      #myModal .avatar-info {
        max-width: none;
      }
      #myModal .my-col > .card,
      #myModal #logoutCard {
        margin-bottom: 6px !important;
      }
      #myModal #logoutCard {
        position: sticky;
        bottom: calc(70px + env(safe-area-inset-bottom));
        z-index: 20;
        background: linear-gradient(180deg, rgba(28,28,32,0.96) 0%, rgba(18,18,20,0.96) 100%);
        border: 1px solid rgba(255,255,255,0.22);
        box-shadow: 0 10px 28px rgba(0,0,0,0.36);
        backdrop-filter: blur(10px);
      }
    }

    @media (max-width: 420px) {
      #myModal .avatar-photo {
        flex-basis: 90px;
        max-width: 90px;
        min-width: 90px;
      }
      #myModal #myAvatarPreview {
        height: 116px !important;
      }
      #myModal .avatar-info-line input,
      #myModal .avatar-info-line select,
      #myModal .field-block input,
      #myModal .field-block select,
      #myModal .field-block textarea,
      #myModal #pwdFields input {
        min-height: 32px;
        font-size: 13px;
      }
    }

    /* 第六轮：我的页结构按需求落地 */
    #myModal .my-avatar-card {
      margin-top: 34px;
    }
    #myModal .avatar-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: start;
      flex: 0 1 58%;
      max-width: 58%;
    }
    #myModal .avatar-info-line {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 3px;
      padding: 0;
    }
    #myModal .avatar-info-line > .muted {
      flex: none;
      font-size: 11px;
      line-height: 1.1;
    }
    #myModal .avatar-info-line:nth-child(3) { max-width: none; }
    #myModal .avatar-info-line .inline-controls {
      width: 100%;
    }
    #myModal .avatar-info-line .inline-controls select {
      width: 100%;
      max-width: none;
      flex: 1 1 auto;
      text-align: left;
      text-align-last: left;
    }

    #myModal .avatar-photo {
      flex: 0 0 136px;
      max-width: 136px;
      min-width: 136px;
      margin-left: 10px;
      margin-right: 10px;
      overflow: hidden;
    }
    #myModal .avatar-photo .avatar-preview-box {
      width: 100% !important;
      aspect-ratio: 3 / 4 !important;
      min-height: 0 !important;
      height: auto !important;
      position: relative;
      z-index: 2;
      pointer-events: auto !important;
      border-radius: 10px;
      overflow: hidden;
      background: #f5f5f5 !important;
    }
    #myModal .avatar-photo .imgbox {
      width: 100% !important;
      aspect-ratio: 3 / 4 !important;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 10px;
      background: #f5f5f5 !important;
    }
    #myModal #myAvatarPreview {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover;
      object-position: center center;
      aspect-ratio: 3 / 4;
      cursor: zoom-in;
      pointer-events: auto !important;
      background: #f5f5f5;
    }
    html.platform-android-webview #myModal #myAvatarPreview {
      position: relative !important;
      z-index: 2 !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      filter: none !important;
      mix-blend-mode: normal !important;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    #myModal .profile-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #myModal .my-tools-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    #myModal .my-tool-btn {
      justify-content: center;
      padding: 0 6px;
      min-height: 34px;
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }

    #myModal .my-account-actions {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: none;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: stretch;
    }
    #myModal #logoutCard #doChangePwd,
    #myModal #logoutCard #logoutBtn {
      width: auto !important;
      flex: 1 1 0 !important;
      min-width: 0;
      min-height: 36px;
      font-size: 14px;
      margin: 0;
    }
    #myModal #saveProfile {
      margin-bottom: 10px;
    }
    #myModal #logoutCard {
      position: static !important;
      bottom: auto !important;
      z-index: auto !important;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      overflow: visible;
      border: 0 !important;
      padding: 0 !important;
      margin-top: 0 !important;
    }

    html.platform-android-webview #myModal #logoutCard {
      position: static !important;
      bottom: auto !important;
      transform: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    #myPwdModal .content.card {
      width: min(520px, 92vw);
      background: linear-gradient(180deg, rgba(22,22,26,0.98) 0%, rgba(12,12,14,0.98) 100%);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 16px;
      padding: 14px !important;
    }
    #myPwdModal {
      --pwd-control-h: 42px;
      --pwd-font-size: 15px;
    }
    #myPwdModal h3,
    #myPwdModal .field-label {
      font-size: var(--pwd-font-size);
      line-height: 1.35;
    }
    #myPwdModal .close {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      max-width: 40px;
      max-height: 40px;
      padding: 0 !important;
      border-radius: 999px !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0;
      line-height: 0;
    }
    #myPwdModal .close svg {
      width: 20px;
      height: 20px;
      min-width: 20px;
      min-height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }
    #myPwdModal .my-pwd-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 10px;
      width: 100%;
    }
    #myPwdModal .my-pwd-grid .field-block.full {
      grid-column: 1 / -1;
    }
    #myPwdModal .field-block {
      gap: 6px;
      width: 100%;
    }
    #myPwdModal .field-block input {
      width: 100%;
      min-height: var(--pwd-control-h);
      height: var(--pwd-control-h);
      padding: 0 12px !important;
      font-size: var(--pwd-font-size) !important;
      border-radius: 12px;
      box-sizing: border-box;
    }
    #myPwdModal .pwd-btn-row {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      margin-top: 10px;
    }
    #myPwdModal #doChangePwdSubmit {
      width: 100%;
      min-height: var(--pwd-control-h);
      height: var(--pwd-control-h);
      font-size: var(--pwd-font-size);
      border-radius: 12px;
    }
    #myPwdModal #pwdMsg {
      width: 100%;
      min-height: 18px;
      font-size: 13px;
      line-height: 1.3;
    }

    html.platform-android-webview #myPwdModal .content.card {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    /* 修改密码最终兜底：三行输入 + 同宽按钮 */
    #myPwdModal #pwdFields.row.my-pwd-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      width: 100% !important;
      gap: 10px !important;
    }
    #myPwdModal #pwdFields.row.my-pwd-grid > .field-block {
      width: 100% !important;
      grid-column: 1 / -1 !important;
    }
    #myPwdModal #pwdFields.row.my-pwd-grid > .field-block > input {
      width: 100% !important;
      box-sizing: border-box !important;
    }
    #myPwdModal .row.pwd-btn-row,
    #myPwdModal #doChangePwdSubmit {
      width: 100% !important;
    }

    @media (max-width: 680px) {
      #myModal .content.card {
        padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important;
      }
      #myModal .my-avatar-card {
        margin-top: 42px;
      }
      #myModal .avatar-row {
        flex-direction: row;
      }
      #myModal .avatar-photo {
        flex: 0 0 124px;
        max-width: 124px;
        min-width: 124px;
        margin-left: 6px;
        margin-right: 6px;
      }
      #myModal #myAvatarPreview {
        height: 100% !important;
      }
      #myModal .my-tools-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      #myModal .my-tool-btn {
        justify-content: center;
        padding-left: 4px;
      }
      #myModal .my-account-actions {
        max-width: none;
      }
      #myModal #logoutCard {
        margin-bottom: 4px !important;
        margin-top: 0 !important;
      }
      #myPwdModal .content.card {
        width: min(96vw, 520px);
      }
      #myPwdModal {
        --pwd-control-h: 40px;
        --pwd-font-size: 14px;
      }
      #myPwdModal .my-pwd-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 420px) {
      #myModal .avatar-photo {
        flex-basis: 112px;
        max-width: 112px;
        min-width: 112px;
        margin-left: 4px;
        margin-right: 4px;
      }
      #myModal #myAvatarPreview {
        height: 100% !important;
      }
      #myModal .avatar-info-line:nth-child(3) { max-width: none; }
      #myModal .my-tool-btn {
        font-size: 11px;
      }
      #myPwdModal .my-pwd-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Final override: imgPreview 等宽可上下滑动；fullImagePreview 全屏等高显示 */
    #imgPreview {
      --preview-related-bottom-spacer-px: calc(12px + env(safe-area-inset-bottom));
      padding: 0 !important;
    }
    #imgPreview .content {
      width: var(--app-full-w) !important;
      max-width: var(--app-full-w) !important;
      max-height: var(--app-full-h) !important;
      border-radius: 0 !important;
      margin: 0 !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
      background: #000 !important;
    }
    #imgPreview > .content > .imgbox {
      width: calc(var(--app-full-w) - 12px) !important;
      height: auto !important;
      min-height: 0 !important;
      margin: 0 auto !important;
      position: relative;
      overflow: hidden;
    }
    /* ImagePreview 主图左下商品堆叠：距主图底边 10px */
    #imgPreview > .content > .imgbox #productTray,
    #imgPreview > .content > .imgbox .product-tray {
      bottom: 10px !important;
    }
    #imgPreview .preview-swipe-ghost {
      position: absolute;
      inset: 0;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: none;
      object-fit: contain;
      pointer-events: none;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transform: translate3d(0px, 0px, 0px) scale(1);
      will-change: transform, opacity;
    }
    #imgPreview #previewImg {
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: none !important;
      display: block !important;
      object-fit: contain !important;
      touch-action: pan-y !important;
      position: relative;
      z-index: 2;
      will-change: transform, opacity;
    }
    html.motion-desktop.browser-chrome #imgPreview #previewImg {
      cursor: grab;
    }
    html.motion-desktop.browser-chrome #imgPreview #previewImg.preview-mouse-dragging {
      cursor: grabbing;
    }
    #imgPreview .preview-related-wall {
      display: block !important;
      position: relative;
      z-index: 1;
      background: #000;
      margin-top: 12px;
      padding: 0 0 var(--preview-related-bottom-spacer-px);
      min-height: 34vh;
    }

    #fullImagePreview .content {
      width: var(--app-full-w) !important;
      height: var(--app-full-h) !important;
      max-width: var(--app-full-w) !important;
      max-height: var(--app-full-h) !important;
      overflow: hidden !important;
    }
    #fullImagePreview .imgbox {
      width: var(--app-full-w) !important;
      height: var(--app-full-h) !important;
      min-height: var(--app-full-h) !important;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #fullImagePreview img,
    #fullImagePreview #fullPreviewImg {
      width: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      object-position: center center !important;
    }
    @supports (height: 100svh) {
      #fullImagePreview .content {
        height: min(100svh, var(--app-full-h)) !important;
        max-height: min(100svh, var(--app-full-h)) !important;
      }
      #fullImagePreview .imgbox {
        min-height: min(100svh, var(--app-full-h)) !important;
        height: min(100svh, var(--app-full-h)) !important;
      }
      #fullImagePreview img,
      #fullImagePreview #fullPreviewImg {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
      }
    }

    #imgPreview .close,
    #fullImagePreview .close {
      display: none !important;
    }

    body.full-preview-open header {
      z-index: 2600;
      background: linear-gradient(180deg, rgba(14,16,24,0.62) 0%, rgba(14,16,24,0.32) 52%, rgba(14,16,24,0) 100%);
      backdrop-filter: blur(2px);
    }
    body.large-image-open header {
      z-index: 2600;
      background: linear-gradient(180deg, rgba(14,16,24,0.62) 0%, rgba(14,16,24,0.32) 52%, rgba(14,16,24,0) 100%);
      backdrop-filter: blur(2px);
    }

    /* Android WebView 兜底：防止认证弹窗被后续样式覆盖为透明 */
    #loginModal .content.card,
    #loginModal.auth-modal .content.card,
    .modal#loginModal.auth-modal .content.card {
      background-color: rgb(18, 18, 20) !important;
      background-image: linear-gradient(180deg, rgba(24,24,27,0.97) 0%, rgba(12,12,14,0.97) 100%) !important;
      border: 1px solid rgba(255,255,255,0.20) !important;
      color: rgba(255,255,255,0.95) !important;
      opacity: 1 !important;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }
    #loginModal.open {
      display: flex !important;
      z-index: 4900 !important;
      align-items: flex-start;
      justify-content: center;
      padding-top: var(--shell-top-reserved);
      padding-bottom: var(--shell-bottom-reserved);
      overflow-y: auto;
      background: transparent;
    }
    .modal.auth-modal.is-page-active {
      display: block !important;
      position: fixed;
      left: 0;
      right: 0;
      top: var(--shell-top-reserved);
      bottom: calc(var(--shell-bottom-reserved) - 10px);
      z-index: 1200 !important;
      padding: 0 var(--page-side-padding) 6px !important;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      background: linear-gradient(180deg, rgba(17,19,24,0.98) 0%, rgba(12,14,18,0.98) 100%) !important;
    }
    .modal.auth-modal.is-page-active .content.card {
      width: min(960px, 98vw) !important;
      max-width: min(960px, 98vw) !important;
      max-height: none !important;
      margin: 0 auto;
      overflow: visible !important;
      box-sizing: border-box;
    }
    #loginModal.open .content.card {
      width: min(520px, 92vw) !important;
      max-width: min(520px, 92vw) !important;
      height: auto !important;
      max-height: calc(var(--app-full-h) - var(--shell-top-reserved) - var(--shell-bottom-reserved) - 12px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    @supports (height: 100svh) {
      #loginModal.open .content.card {
        max-height: calc(100svh - var(--shell-top-reserved) - var(--shell-bottom-reserved) - 12px) !important;
      }
    }

    #registerModal.open,
    #smsRegisterModal.open,
    #forgotModal.open,
    #myPwdModal.open {
      display: flex !important;
      z-index: 4900 !important;
      align-items: flex-start;
      justify-content: center;
      padding-top: var(--shell-top-reserved);
      padding-bottom: var(--shell-bottom-reserved);
      overflow-y: auto;
      background: transparent;
    }
    #registerModal.open .content.card,
    #smsRegisterModal.open .content.card,
    #forgotModal.open .content.card,
    #myPwdModal.open .content.card {
      max-height: calc(var(--app-full-h) - var(--shell-top-reserved) - var(--shell-bottom-reserved) - 12px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    #myPwdModal.open {
      align-items: center !important;
      padding-top: max(12px, var(--safe-top));
      padding-bottom: max(12px, var(--safe-bottom));
    }
    #myPwdModal.open .content.card {
      width: min(560px, 94vw) !important;
      max-width: min(560px, 94vw) !important;
      max-height: calc(var(--app-full-h) - 24px - var(--safe-top) - var(--safe-bottom)) !important;
      overflow-y: auto !important;
    }
    .modal.auth-modal.is-page-active .content.card,
    #registerModal.is-page-active .content.card,
    #smsRegisterModal.is-page-active .content.card,
    #forgotModal.is-page-active .content.card {
      max-height: none !important;
      overflow: visible !important;
      margin-top: 0 !important;
    }

    /* Android/WebView: “我的”弹层最终兜底，确保不被底部导航和后续样式压住 */
    #myModal.open {
      display: flex !important;
      z-index: 4800 !important;
      align-items: flex-start;
      justify-content: center;
      padding-top: var(--shell-top-reserved);
      padding-bottom: var(--shell-bottom-reserved);
      overflow-y: auto;
      background: transparent;
    }
    #myModal.open .content.card {
      position: relative;
      z-index: 1;
      width: min(920px, 96vw) !important;
      max-width: min(920px, 96vw) !important;
      max-height: calc(var(--app-full-h) - var(--shell-top-reserved) - var(--shell-bottom-reserved) - 12px) !important;
      overflow-y: auto !important;
      background-color: rgb(18, 18, 20) !important;
      background-image: linear-gradient(180deg, rgba(21,21,24,0.98) 0%, rgba(12,12,14,0.98) 100%) !important;
      border: 1px solid rgba(255,255,255,0.20) !important;
      color: rgba(255,255,255,0.95) !important;
      opacity: 1 !important;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    @media (max-width: 680px) {
      #myModal.open .content.card {
        width: min(960px, 96vw) !important;
        max-width: min(960px, 96vw) !important;
        min-height: 0 !important;
        max-height: calc(var(--app-full-h) - var(--shell-top-reserved) - var(--shell-bottom-reserved) - 12px) !important;
        border-radius: 16px !important;
        border: 1px solid rgba(255,255,255,0.20) !important;
        padding: 12px 10px 12px !important;
      }
    }

    /* Android WebView: 商品详情弹窗高度兜底，避免内容被压缩成仅顶部可见 */
    html.platform-android-webview #productDetailModal {
      align-items: center;
      justify-content: center;
      padding-top: max(12px, env(safe-area-inset-top));
      padding-bottom: max(12px, env(safe-area-inset-bottom));
      overflow-y: auto;
    }
    html.platform-android-webview #productDetailModal .content.card {
      max-height: calc(var(--app-full-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }
    @media (max-width: 640px) {
      html.platform-android-webview #productDetailModal .content.card {
        max-height: calc(var(--app-full-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px) !important;
      }
    }

    /* 非全屏 imagePreview 时，底部主键需浮在预览层之上；全屏预览保持沉浸式不显示。 */
    body.large-image-open:not(.full-preview-open) .bottom-nav {
      display: flex !important;
      z-index: 2700;
      pointer-events: none;
    }
    body.large-image-open:not(.full-preview-open) .bottom-nav .nav-wrap {
      pointer-events: auto;
    }


    #imgPreview .preview-related-wall {
      touch-action: pan-y !important;
    }
    #imgPreview .preview-related-grid .tpl-product-mini-stack.is-draggable,
    #imgPreview .preview-related-grid .tpl-product-mini-stack.is-draggable * {
      touch-action: none !important;
    }

    /* Android WebView 瀑布流图片渲染终极修复（文件最末，确保最高优先级）:
       WebView 合成器对嵌套 overflow:hidden + border-radius + perspective/transform-style
       的容器链中的 <img> 无法正确光栅化。
       方案：消除所有合成层触发属性，给 img 独立渲染层，并确保 img 可见绘制。 */
    html.platform-android-webview #imgPreview .preview-related-col .tpl {
      content-visibility: visible !important;
      contain-intrinsic-size: auto !important;
      overflow: hidden !important;
      border-radius: 12px !important;
      isolation: auto !important;
      transform: none !important;
      perspective: none !important;
      transform-style: flat !important;
      will-change: auto !important;
      contain: none !important;
    }
    html.platform-android-webview #imgPreview .preview-related-col .imgbox {
      perspective: none !important;
      transform-style: flat !important;
      isolation: auto !important;
      container-type: normal !important;
      overflow: hidden !important;
      will-change: auto !important;
      contain: none !important;
      z-index: auto !important;
      border-radius: 0 !important;
      min-height: 0 !important;
      /* convertToBgImage 会将 background 移到 .tpl 上并将 imgbox 设为透明；
         此处不用 !important 以允许 JS 内联覆盖。 */
      background-color: #111;
    }
    /* WebView: imgbox 使用 background-image 渲染后，<img> 缩成 1px 不参与可见渲染 */
    html.platform-android-webview #imgPreview .preview-related-col .imgbox img {
      pointer-events: none !important;
    }

    /* /ui 个人中心：iOS 对齐（三页引导 + 首页/详情/安全） */
    #myModal .my-config-shell {
      display: block;
      margin-top: 34px;
    }
    #myModal .my-home-panel,
    #myModal .my-detail-panel,
    #myModal .my-security-panel {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 14px;
      padding: 12px;
    }
    #myModal .my-home-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    #myModal .my-home-head h4 {
      margin: 0;
      font-size: 18px;
    }
    #myModal .my-home-username {
      margin-top: 3px;
      font-size: 13px;
      color: rgba(255,255,255,0.88);
    }
    #myModal .my-icon-btn {
      width: 34px;
      height: 34px;
      min-width: 34px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.14);
      color: rgba(255,255,255,0.95);
      font-size: 16px;
      line-height: 1;
      padding: 0;
    }
    #myModal .my-twin-card,
    #myModal .my-account-card,
    #myModal .my-security-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 12px;
      padding: 10px;
      margin-bottom: 10px;
    }
    #myModal .my-twin-badge {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      color: rgba(255,255,255,0.88);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 999px;
      padding: 2px 8px;
      margin-bottom: 8px;
    }
    #myModal .my-twin-card h5 {
      margin: 0 0 6px 0;
      font-size: 17px;
    }
    #myModal .my-twin-card p {
      margin: 0 0 10px 0;
      color: rgba(255,255,255,0.72);
      font-size: 13px;
      line-height: 1.5;
    }
    #myModal .my-account-title {
      font-size: 13px;
      color: rgba(255,255,255,0.66);
      margin-bottom: 6px;
    }
    #myModal .my-row-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.94);
      text-decoration: none;
      padding: 10px 12px;
      box-sizing: border-box;
    }
    #myModal .my-panel-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }
    #myModal .my-panel-head h4 {
      margin: 0;
      font-size: 17px;
    }
    #myModal .my-back-btn {
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.94);
      padding: 8px 10px;
    }

    #myModal .my-guest-flow {
      --my-guest-page-height: 420px;
      margin-top: 34px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.2);
      background: linear-gradient(180deg, rgba(17,17,19,0.98) 0%, rgba(10,10,12,0.98) 100%);
      overflow: hidden;
    }
    #myModal .my-guest-viewport {
      position: relative;
      overflow: hidden;
      height: var(--my-guest-page-height);
      border-bottom: 1px solid rgba(255,255,255,0.12);
      touch-action: none;
      overscroll-behavior: contain;
      background:
        radial-gradient(110% 90% at 80% 0%, rgba(34,74,130,0.45) 0%, rgba(14,14,16,0) 58%),
        radial-gradient(75% 52% at 0% 100%, rgba(44,42,76,0.35) 0%, rgba(14,14,16,0) 62%),
        linear-gradient(180deg, rgba(13,13,16,0.96), rgba(7,7,9,0.98));
    }
    #myModal .my-guest-pager {
      display: flex;
      flex-direction: column;
      transform: translateY(0);
      transition: transform 0.28s ease;
      will-change: transform;
    }
    #myModal .my-guest-page {
      height: var(--my-guest-page-height);
      min-height: var(--my-guest-page-height);
      flex: 0 0 var(--my-guest-page-height);
      padding: 18px 16px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
    }
    #myModal .my-guest-page::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: 0.88;
    }
    #myModal .my-guest-page > * {
      position: relative;
      z-index: 1;
    }
    #myModal .my-guest-page-1::before {
      background:
        linear-gradient(180deg, rgba(6,9,16,0.26), rgba(4,4,6,0.44)),
        radial-gradient(95% 120% at 100% 0%, rgba(57,110,189,0.28), transparent 58%),
        var(--my-guest-page-1-image, none);
      background-size: cover, cover, cover;
      background-position: center, center, center;
      background-repeat: no-repeat, no-repeat, no-repeat;
    }
    #myModal .my-guest-page-2::before {
      background:
        radial-gradient(120% 70% at 0% 100%, rgba(42,86,176,0.28), transparent 62%),
        linear-gradient(180deg, rgba(18,18,22,0.32), rgba(7,7,9,0));
    }
    #myModal .my-guest-page-3::before {
      background:
        radial-gradient(110% 75% at 100% 100%, rgba(34,98,160,0.32), transparent 62%),
        linear-gradient(180deg, rgba(14,20,30,0.34), rgba(7,7,9,0));
    }
    #myModal .my-guest-tag {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 1.4px;
      color: rgba(255,255,255,0.6);
      margin-bottom: 12px;
    }
    #myModal .my-guest-page h3 {
      margin: 0;
      font-size: 29px;
      line-height: 1.15;
      letter-spacing: 0.2px;
      color: rgba(255,255,255,0.95);
    }
    #myModal .my-guest-page p {
      margin: 12px 0 0 0;
      color: rgba(255,255,255,0.78);
      line-height: 1.6;
    }
    #myModal .my-guest-actions {
      margin-top: 24px;
      display: flex;
      gap: 10px;
    }
    #myModal .my-guest-actions button {
      flex: 1;
      width: 100%;
    }
    #myModal .my-guest-list,
    #myModal .my-guest-steps {
      margin: 14px 0 0 0;
      padding-left: 18px;
      color: rgba(255,255,255,0.9);
      line-height: 1.7;
    }
    #myModal .my-guest-list li,
    #myModal .my-guest-steps li {
      margin: 6px 0;
    }
    #myModal .my-guest-list span {
      display: block;
      font-size: 12px;
      color: rgba(255,255,255,0.64);
    }
    #myModal .my-guest-note {
      font-size: 12px;
      color: rgba(255,255,255,0.56);
    }
    #myModal .my-guest-nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,0.14);
      padding: 10px 12px;
      background: rgba(255,255,255,0.03);
    }
    #myModal .my-guest-nav-row button {
      border-radius: 9px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      padding: 8px 10px;
      box-shadow: none;
    }
    #myModal .my-guest-nav-row button:disabled {
      opacity: 0.45;
    }
    #myModal .my-guest-dots {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      flex: 1;
    }
    #myModal .my-guest-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      border: 0;
      padding: 0;
      background: rgba(255,255,255,0.34);
      box-shadow: none;
    }
    #myModal .my-guest-dot.is-active {
      width: 20px;
      background: rgba(255,255,255,0.95);
    }

    @media (max-width: 680px) {
      #myModal .my-guest-page {
        padding: 16px 14px;
      }
      #myModal .my-guest-page h3 {
        font-size: 26px;
      }
      #myModal .my-config-shell {
        margin-top: 42px;
      }
    }

/* ── 穿搭偏好测试 ────────────────────────────── */
.preference-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  gap: 12px;
  background: rgba(0,0,0,0.85);
  position: sticky;
  top: 0;
  z-index: 10;
}
.preference-back-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 4px 8px;
  cursor: pointer;
}
.preference-title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}
.preference-progress-label {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
}
.preference-card-stack {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  min-height: 0;
}
.pref-card-wrapper {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  position: relative;
}
.pref-card {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1a1a;
  position: relative;
  touch-action: none;
  will-change: transform;
  user-select: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.pref-card.flying-right {
  transform: translateX(120%) rotate(8deg);
  opacity: 0;
}
.pref-card.flying-left {
  transform: translateX(-120%) rotate(-8deg);
  opacity: 0;
}
.pref-card.spring-back {
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pref-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pref-card-tags {
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: #fff;
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pref-card-tags span {
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}
.pref-card-actions {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0 20px;
  gap: 16px;
}
.pref-action-btn {
  flex: 1;
  padding: 12px;
  border-radius: 24px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s;
}
.pref-action-btn:active {
  transform: scale(0.95);
}
.pref-dislike {
  background: rgba(255,255,255,0.1);
  color: #ff6b6b;
  border: 1px solid rgba(255,107,107,0.3);
}
.pref-like {
  background: linear-gradient(135deg, #ff6b9d, #c44dff);
  color: #fff;
}
.pref-empty {
  text-align: center;
  color: #fff;
  padding: 40px;
}
.pref-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}
.pref-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  position: sticky;
  bottom: 0;
}
.pref-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff6b9d, #c44dff);
  width: 0%;
  transition: width 0.3s ease;
}

/* ===== Personal Styling Result — v2.0 Dark Luxury Theme ===== */

.ps-result-view {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: #0a0a0a;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ps-result-view.is-active { opacity: 1; visibility: visible; }

/* Top bar */
.ps-result-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-top) + 8px) 12px 8px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 10; flex-shrink: 0;
}
.ps-result-back,
.ps-result-close-top {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: none;
  cursor: pointer; flex-shrink: 0;
  padding: 0;
}
.ps-result-back svg,
.ps-result-close-top svg {
  width: 20px; height: 20px;
  stroke: rgba(255,255,255,0.8);
  fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.ps-result-title {
  flex: 1; margin: 0;
  font-family: 'PingFang SC', 'Heiti SC', sans-serif;
  font-size: 16px; font-weight: 700; color: #d4af37;
  text-align: center; letter-spacing: 2px;
}

/* Carousel — horizontal snap scroll */
.ps-card-carousel {
  flex: 1; display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0;
}
.ps-card-carousel::-webkit-scrollbar { display: none; }

/* Individual card */
.ps-card {
  flex: 0 0 100%; scroll-snap-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px; box-sizing: border-box;
}
.ps-card-inner {
  width: 100%; max-width: 380px;
  background: #1a1a1a;
  border-radius: 20px;
  border: 1px solid rgba(212,175,55,0.12);
  padding: 24px 20px;
  overflow-y: auto; max-height: 100%;
  box-sizing: border-box;
}
.ps-card-badge {
  text-align: center; font-size: 11px; font-weight: 600;
  color: rgba(212,175,55,0.5); letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 16px;
}

/* Section titles & subtitles */
.ps-section-title {
  margin: 16px 0 12px; font-size: 15px; font-weight: 700;
  color: #d4af37; letter-spacing: 1px;
}
.ps-subtitle {
  font-size: 13px; font-weight: 600; margin: 0 0 8px;
}
.ps-subtitle.try { color: #4ecdc4; }
.ps-subtitle.avoid { color: rgba(255,255,255,0.35); }

/* Card 1: Radar chart + overview */
.ps-radar-wrap {
  width: 100%; max-width: 260px; margin: 0 auto 16px;
}
.ps-radar-canvas { width: 100% !important; height: auto !important; }
.ps-core-style-badge {
  display: inline-block; padding: 6px 18px;
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.06));
  border: 1px solid rgba(212,175,55,0.35); border-radius: 20px;
  color: #d4af37; font-size: 15px; font-weight: 700;
  margin-bottom: 12px;
}
.ps-overall-comment {
  color: rgba(255,255,255,0.8); font-size: 13px;
  line-height: 1.75; margin-bottom: 12px;
}
.ps-dimension-labels {
  display: flex; flex-direction: column; gap: 6px;
}
.ps-dim-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.ps-dim-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ps-dim-dot.volume { background: #d4af37; }
.ps-dim-dot.line { background: #e8c86a; }
.ps-dim-dot.motion { background: #f0d78c; }
.ps-dim-name { color: rgba(255,255,255,0.5); font-size: 11px; min-width: 36px; }
.ps-dim-level {
  color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600;
  min-width: 28px;
}
.ps-dim-explain { color: rgba(255,255,255,0.55); font-size: 11px; flex: 1; }

/* Card 2: Scene try-on cards */
.ps-scene-list {
  display: flex; flex-direction: column; gap: 12px;
}
.ps-scene-item {
  background: rgba(255,255,255,0.04); border-radius: 14px;
  padding: 10px; border: 1px solid rgba(255,255,255,0.06);
}
.ps-scene-img-wrap {
  position: relative; width: 100%; aspect-ratio: 9/16;
  border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,0.4); margin-bottom: 8px;
}
.ps-scene-img {
  width: 100%; height: 100%; object-fit: cover;
}
.ps-scene-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: rgba(255,255,255,0.25);
  font-size: 13px; border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 10px;
}
.ps-scene-generating {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
}
.ps-gen-spinner {
  width: 28px; height: 28px;
  border: 2px solid rgba(212,175,55,0.3);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: ps-spin 0.8s linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }
.ps-scene-info { padding: 0 4px; }
.ps-scene-label {
  color: #d4af37; font-size: 13px; font-weight: 700;
}
.ps-scene-style {
  color: rgba(255,255,255,0.5); font-size: 11px; margin-left: 6px;
}
.ps-scene-reason {
  color: rgba(255,255,255,0.55); font-size: 11px;
  margin-top: 4px; line-height: 1.4;
}
.ps-confidence-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; color: rgba(212,175,55,0.7);
  margin-left: 6px;
}
.ps-confidence-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #d4af37;
}

/* Try / Avoid tags */
.ps-try-avoid-row { display: flex; gap: 12px; margin-top: 16px; }
.ps-try-section, .ps-avoid-section { flex: 1; }
.ps-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-tag {
  display: inline-block; padding: 4px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600;
}
.ps-tag.try { background: rgba(78,205,196,0.12); color: #4ecdc4; border: 1px solid rgba(78,205,196,0.2); }
.ps-tag.avoid { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.06); }

/* Card 3: Color palette + micro details */
.ps-palette-section {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px;
}
.ps-palette-section.avoid { opacity: 0.6; }
.ps-season-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; background: rgba(255,255,255,0.04);
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.08);
}
.ps-season-card.avoid {
  background: rgba(255,255,255,0.02);
  border-color: rgba(255,255,255,0.04);
}
.ps-season-name {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7);
}
.ps-season-card.avoid .ps-season-name {
  color: rgba(255,255,255,0.35);
}
.ps-season-swatches {
  display: flex; gap: 4px;
}
.ps-swatch-chip {
  width: 22px; height: 22px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.12);
}
.ps-season-card.avoid .ps-swatch-chip {
  border-color: rgba(255,255,255,0.06);
}
.ps-season-reason {
  font-size: 9px; color: rgba(255,255,255,0.3);
  line-height: 1.3; max-width: 140px;
}
.ps-season-card.avoid .ps-season-reason {
  color: rgba(255,255,255,0.2);
}

/* Micro detail grid */
.ps-micro-grid { display: flex; flex-direction: column; gap: 8px; }
.ps-micro-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; background: rgba(255,255,255,0.03);
  border-radius: 8px;
}
.ps-micro-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.ps-micro-dim {
  font-size: 11px; color: rgba(255,255,255,0.45); min-width: 36px;
  font-weight: 600;
}
.ps-micro-content { flex: 1; min-width: 0; }
.ps-micro-rec { color: #d4af37; font-size: 11px; line-height: 1.5; }
.ps-micro-avoid { color: rgba(255,255,255,0.3); font-size: 10px; line-height: 1.5; margin-top: 2px; }

/* Footer quote */
.ps-footer-quote {
  margin-top: 20px; padding: 20px 0;
  border-top: 1px solid rgba(212,175,55,0.2);
  border-bottom: 1px solid rgba(212,175,55,0.2);
  text-align: center;
  font-size: 17px; font-weight: 600; color: #d4af37;
  font-style: italic; line-height: 1.5;
  letter-spacing: 1px;
}

/* Page dots */
.ps-page-dots {
  display: flex; justify-content: center; gap: 8px;
  padding: 8px 0; flex-shrink: 0;
}
.ps-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: all 0.25s ease; cursor: pointer;
}
.ps-dot.is-active {
  background: #d4af37; width: 22px; border-radius: 4px;
}

/* Share bar */
.ps-share-bar {
  display: flex; gap: 10px;
  padding: 8px 12px calc(var(--safe-bottom) + 10px);
  flex-shrink: 0;
}
.ps-share-btn {
  flex: 1; padding: 12px; border-radius: 12px; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: opacity 0.2s;
}
.ps-share-btn:active { opacity: 0.8; }
.ps-share-btn.primary {
  background: linear-gradient(135deg, #d4af37, #b8941f);
  color: #0a0a0a;
}
.ps-share-btn:not(.primary) {
  background: rgba(255,255,255,0.08);
  color: #d4af37; border: 1px solid rgba(212,175,55,0.25);
}

/* Generating overlay */
.ps-gen-overlay {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.85);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 20;
}
.ps-gen-overlay .ps-gen-spinner { width: 36px; height: 36px; margin-bottom: 12px; }
.ps-gen-text {
  color: rgba(255,255,255,0.6); font-size: 13px;
}