/* 平台设计 token + 通用组件（按钮/表单/弹窗/登录/钱包），所有产品共用 */
    /* ============================================================
       Section 1: Design Tokens（来自 design-system/design-tokens.css）
       ============================================================ */
    :root {
      /* A1 · Identity：品牌主色（紫罗兰 Violet 阶） */
      --teal-50:  #EEF2FF;
      --teal-100: #DFE6FF;
      --teal-200: #C5D1FF;
      --teal-300: #A3B5FF;
      --teal-400: #7188FF;
      --teal-500: #4262FF;
      --teal-600: #3550D9;
      --teal-700: #2A41B6;
      --teal-800: #233491;
      --teal-900: #1B286B;

      /* A1 · Identity：点缀玫粉（AI 模式 / 主 CTA 专用） */
      --amber-100: #FFF4C4;
      --amber-300: #FFE066;
      --amber-500: #FFD02F;
      --amber-600: #F0BB00;
      --amber-700: #C99700;
      --amber-800: #A67C00;
      --amber-900: #746019;

      /* A1 · Identity：中性色阶（带紫倾向的冷灰） */
      --ink-900: #1C1C1E;
      --ink-700: #43485E;
      --ink-500: #5F6478;
      --ink-400: #8E91A0;
      --ink-200: #E5E7EC;
      --ink-100: #F2F3F6;
      --ink-50:  #F7F8FA;

      /* A1 · Identity：背景 / 表面 / 前景 */
      --bg:          #FFFFFF;
      --surface:     #FFFFFF;
      --fg:          var(--ink-900);
      --fg-2:        var(--ink-700);
      --muted:       var(--ink-500);
      --meta:        var(--ink-400);
      --border:      var(--ink-200);
      --border-soft: var(--ink-100);

      /* A1 · 辅助色（渐变映射专用） */
      --cyan-700: #4F46E5;
      --sky-500:  #3B82F6;

      /* A2 · Semantic：语义色 */
      --success:        #16A34A;
      --success-bg:     #F0FDF4;
      --success-border: #BBF7D0;
      --warning:        #D97706;
      --warning-bg:     #FFFBEB;
      --warning-border: #FDE68A;
      --danger:         #DC2626;
      --danger-hover:   #B91C1C;
      --danger-bg:      #FEF2F2;
      --danger-border:  #FECACA;

      /* A1 · Identity：字体族 */
      --font-display: "Inter", "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
      --font-body:    "Inter", "Noto Sans SC", -apple-system, "PingFang SC", sans-serif;
      --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

      /* A1 · Structure：字号阶梯（7 级） */
      --text-xs:   12px;
      --text-sm:   13px;
      --text-base: 14px;
      --text-md:   16px;
      --text-lg:   18px;
      --text-xl:   22px;
      --text-2xl:  28px;

      /* A2 · Structure：字重三级 */
      --weight-body:     400;
      --weight-emphasis: 510;
      --weight-announce: 590;

      /* A2 · Structure：间距（4px 网格） */
      --space-1:  4px;
      --space-2:  8px;
      --space-3:  12px;
      --space-4:  16px;
      --space-5:  20px;
      --space-6:  24px;
      --space-8:  32px;
      --space-10: 40px;
      --space-12: 48px;
      --space-16: 64px;

      /* A2 · Structure：圆角阶梯 */
      --radius-sm:   6px;
      --radius-md:   10px;
      --radius-lg:   16px;
      --radius-xl:   20px;
      --radius-full: 9999px;

      /* A2 · Structure：阴影两档（紫调） */
      --shadow-sm: 0 1px 2px rgba(5, 0, 56, 0.05), 0 1px 3px rgba(5, 0, 56, 0.04);
      --shadow-lg: 0 8px 24px rgba(5, 0, 56, 0.10), 0 2px 8px rgba(5, 0, 56, 0.05);

      /* A2 · Motion：动效（禁弹性缓动） */
      --motion-fast: 120ms;
      --motion-base: 180ms;
      --motion-slow: 300ms;
      --ease-standard: cubic-bezier(0.2, 0, 0, 1);
      --ease-exit:     cubic-bezier(0, 0, 0.2, 1);

      /* A2 · Focus */
      --focus-ring: 0 0 0 3px rgba(66, 98, 255, 0.30);

      /* A1 · Identity：品牌渐变（紫 → 粉） */
      --grad-brand: linear-gradient(135deg, #1C1C1E 0%, #2C2C34 100%);

      /* B · Slot：按钮 */
      --btn-primary-bg:      var(--grad-brand);
      --btn-primary-text:    #FFFFFF;
      --btn-primary-hover:   var(--grad-brand);
      --btn-primary-active:  var(--grad-brand);
      --btn-secondary-bg:    var(--teal-50);
      --btn-secondary-border: var(--teal-200);
      --btn-secondary-text:  var(--teal-700);
      --btn-secondary-hover: var(--teal-100);
      --btn-ghost-bg:        transparent;
      --btn-ghost-text:      var(--fg-2);
      --btn-ghost-hover:     var(--ink-50);
      --btn-ghost-active:    var(--ink-100);
      --btn-danger-bg:       var(--danger);
      --btn-danger-hover:    var(--danger-hover);

      /* B · Slot：输入框 */
      --input-bg:           #FFFFFF;
      --input-border:       var(--border);
      --input-focus-border: var(--teal-600);
      --input-error-border: var(--danger);
      --input-disabled-bg:  var(--ink-50);
      --input-disabled-text: var(--ink-400);

      /* B · Slot：风格卡 / 上传 / 历史 */
      --card-selected-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--teal-500);
      --card-hover-shadow:  0 6px 16px rgba(5, 0, 56, 0.10);
      --art-icon-shadow:    0 1px 2px rgba(0, 0, 0, 0.18);

      /* C · Extension：模式徽标 */
      --badge-local-text:   var(--teal-700);
      --badge-local-bg:     var(--teal-50);
      --badge-local-border: var(--teal-200);
      --badge-ai-text:      #1C1C1E;
      --badge-ai-bg:        var(--amber-500);
      --badge-ai-bg-hover:  var(--amber-600);

      /* C · Extension：遮罩与微光 */
      --mask:         rgba(28, 28, 30, 0.4);
      --mask-strong:  rgba(28, 28, 30, 0.72);
      --overlay:      rgba(28, 28, 30, 0.45);
      --shimmer:      rgba(255, 255, 255, 0.65);

      /* C · Extension：12 风格渐变（对齐参考稿的多彩色卡） */
      --grad-cartoon:    linear-gradient(135deg, #EA580C, #FB923C);
      --grad-anime:      linear-gradient(135deg, #EC4899, #C4B5FD);
      --grad-toon3d:     linear-gradient(135deg, #1E293B, #64748B);
      --grad-pixel:      linear-gradient(135deg, #16A34A, #86EFAC);
      --grad-watercolor: linear-gradient(135deg, #38BDF8, #BAE6FD);
      --grad-sketch:     linear-gradient(135deg, #475569, #94A3B8);
      --grad-oil:        linear-gradient(135deg, #B45309, #F59E0B);
      --grad-cyberpunk:  linear-gradient(135deg, #6D28D9, #3B82F6);
      --grad-retro:      linear-gradient(135deg, #C2410C, #FB923C);
      --grad-flat:       linear-gradient(135deg, #94A3B8, #E2E8F0);
      --grad-illus:      linear-gradient(135deg, #EC4899, #F9A8D4);
      --grad-nebula:     linear-gradient(135deg, #8B5CF6, #C4B5FD);

      /* Layout */
      --container-max: 1120px;
      --container-gutter: 24px;
    }

    /* ============================================================
       Section 2: Reset 与基础
       ============================================================ */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    /* 关键：让 hidden 属性优先于 display:flex 等任何自定义样式（上版本事故坑） */
    [hidden] { display: none !important; }
    html { -webkit-text-size-adjust: 100%; }
    body {
      font-family: var(--font-body);
      background-color: var(--bg);
      background-image: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 420px, #F7F8FA 100%);
      background-repeat: no-repeat;
      color: var(--fg);
      min-height: 100vh;
      font-size: var(--text-base);
      line-height: 1.6;
    }
    img { display: block; max-width: 100%; }
    button { font-family: inherit; }
    .icon {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      flex: none;
    }
    .icon-12 { width: 12px; height: 12px; }
    .icon-16 { width: 16px; height: 16px; }
    .icon-20 { width: 20px; height: 20px; }
    .icon-24 { width: 24px; height: 24px; }
    :is(button, [tabindex], input, select):focus-visible {
      outline: none;
      box-shadow: var(--focus-ring);
    }

    /* ============================================================
       Section 5: 按钮
       ============================================================ */
    .btn {
      height: 40px; padding: 0 var(--space-4);
      border-radius: var(--radius-md);
      border: 1px solid transparent;
      font-size: var(--text-base); font-weight: var(--weight-emphasis);
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--space-2); cursor: pointer;
      background: none; color: var(--fg-2);
      transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
    }
    .btn.primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-radius: var(--radius-full); }
    .btn.primary:hover { filter: brightness(1.15); box-shadow: 0 4px 14px rgba(28, 28, 30, 0.30); }
    .btn.primary:active { filter: brightness(0.95); box-shadow: none; }
    .btn.secondary {
      background: var(--btn-secondary-bg);
      border-color: var(--btn-secondary-border);
      color: var(--btn-secondary-text);
    }
    .btn.secondary:hover { background: var(--btn-secondary-hover); }
    .btn.secondary:active { background: var(--teal-200); }
    .btn.ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-text); }
    .btn.ghost:hover { background: var(--btn-ghost-hover); }
    .btn.ghost:active { background: var(--btn-ghost-active); }
    .btn.danger { background: var(--btn-danger-bg); color: #FFFFFF; }
    .btn.danger:hover { background: var(--btn-danger-hover); }
    .btn.ai-cta { background: var(--grad-brand); color: #FFFFFF; border-radius: var(--radius-full); }
    .btn.ai-cta:hover { filter: brightness(1.07); }
    .btn.ai-cta:active { filter: brightness(0.95); }
    .btn.big { width: 100%; height: 44px; font-size: var(--text-md); border-radius: var(--radius-md); }
    #btnGenerate { margin-top: var(--space-4); }
    .btn.small { height: 32px; padding: 0 var(--space-3); font-size: var(--text-sm); }
    .btn.icon-round {
      width: 40px; height: 40px; padding: 0; border-radius: var(--radius-full);
    }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn .spin { animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ============================================================
       Section 8: 表单
       ============================================================ */
    .field-label {
      display: block; font-size: var(--text-sm); font-weight: var(--weight-emphasis);
      color: var(--fg-2); margin: var(--space-4) 0 var(--space-2);
    }
    .group-label {
      display: block; font-size: var(--text-sm); font-weight: var(--weight-emphasis);
      color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase;
      margin: var(--space-5) 0 var(--space-2);
    }
    .group-label:first-of-type { margin-top: var(--space-4); }
    .field-error { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--danger); }
    .helper-text { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--meta); word-break: break-all; }
    .text-input {
      width: 100%; height: 40px; padding: 0 var(--space-3);
      font-size: var(--text-base); font-family: var(--font-body);
      border: 1px solid var(--input-border); border-radius: var(--radius-md);
      background: var(--input-bg); color: var(--fg); outline: none;
      transition: border-color var(--motion-fast) var(--ease-standard);
    }
    .text-input.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
    .text-input:focus { border-color: var(--input-focus-border); }
    .text-input.input-error { border-color: var(--input-error-border); }
    select.text-input { appearance: auto; cursor: pointer; }

    /* ============================================================
       Section 9: 提示行
       ============================================================ */
    .hint { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--muted); min-height: 20px; line-height: 1.5; }
    .hint.warn { color: var(--warning); }

    /* ============================================================
       Section 12: 弹窗（设置 / 大图预览）
       ============================================================ */
    .modal-mask {
      position: fixed; inset: 0; z-index: 50;
      background: var(--mask);
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-4);
    }
    .modal {
      background: var(--surface);
      border-radius: var(--radius-xl);
      width: 480px; max-width: 100%;
      max-height: 90vh; overflow-y: auto;
      padding: var(--space-6);
      box-shadow: var(--shadow-lg);
      animation: rise var(--motion-slow) var(--ease-exit);
    }
    .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
    .modal-head h3 { font-size: var(--text-xl); font-weight: var(--weight-announce); }
    .modal-desc {
      margin: var(--space-3) 0 0;
      font-size: var(--text-sm); color: var(--muted); line-height: 1.7;
    }
    .modal-actions {
      margin-top: var(--space-5);
      display: flex; justify-content: flex-end; gap: var(--space-2);
    }

    /* ============================================================
       Section 14: 动效无障碍
       ============================================================ */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
      }
    }
    /* ============================================================
       Section S7: 登录与云同步（全部走既有 Token）
       ============================================================ */
    .topbar-actions { display: flex; align-items: center; gap: var(--space-2); }
    #btnLogin {
      height: 34px; padding: 0 14px; gap: 6px;
      border-radius: var(--radius-full);
      font-size: var(--text-sm);
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--fg);
      box-shadow: var(--shadow-sm);
      transition:
        background-color var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard);
    }
    #btnLogin:hover {
      background: var(--teal-50);
      border-color: var(--teal-300);
      color: var(--teal-700);
      box-shadow: none;
    }
    #btnLogin:active { background: var(--teal-100); }
    #btnLogin .icon { flex: none; }
    .btn.secondary {
      background: var(--btn-secondary-bg);
      border: 1px solid var(--btn-secondary-border);
      color: var(--btn-secondary-text);
    }
    .btn.secondary:hover { background: var(--btn-secondary-hover); }
    .btn.secondary:active { background: var(--teal-200); }
    .user-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px; border-radius: var(--radius-full);
      background: var(--teal-50); border: 1px solid var(--teal-200);
      color: var(--teal-700); font-size: var(--text-xs); font-weight: 510;
      max-width: 180px;
    }
    .user-chip .icon { flex: none; }
    .user-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .phone-row { display: flex; gap: var(--space-2); }
    .phone-row .text-input { flex: 1; min-width: 0; }
    .phone-row .btn { flex: none; white-space: nowrap; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .login-divider {
      display: flex; align-items: center; gap: var(--space-3);
      margin: var(--space-4) 0; color: var(--meta); font-size: var(--text-xs);
    }
    .login-divider::before, .login-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border-soft);
    }
    .wallet-balance {
      margin: var(--space-2) 0 var(--space-3);
      font-size: var(--text-sm); color: var(--meta);
    }
    .wallet-balance b { font-size: 22px; color: var(--text); }
    .product-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
    }
    .product-card {
      border: 1px solid var(--border-soft); border-radius: 10px;
      padding: var(--space-3); text-align: center;
      display: flex; flex-direction: column; gap: 4px;
    }
    .product-card .p-name { font-size: var(--text-xs); color: var(--meta); }
    .product-card .p-credits { font-size: 18px; font-weight: 500; color: var(--text); }
    .product-card .p-price { font-size: var(--text-xs); color: var(--meta); }
    .product-card .btn { margin-top: 4px; }
    .txn-list {
      max-height: 200px; overflow-y: auto;
      border: 1px solid var(--border-soft); border-radius: 10px;
    }
    .txn-item {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--border-soft);
      font-size: var(--text-xs);
    }
    .txn-item:last-child { border-bottom: none; }
    .txn-item .t-main { flex: 1; min-width: 0; }
    .txn-item .t-kind { color: var(--text); }
    .txn-item .t-note { color: var(--meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .txn-item .t-credits { font-weight: 500; white-space: nowrap; }
    .txn-item .t-credits.plus { color: var(--success); }
    .txn-item .t-credits.minus { color: var(--danger); }
    .txn-item .t-time { color: var(--meta); white-space: nowrap; }
    @media (max-width: 480px) {
      .product-grid { grid-template-columns: repeat(3, 1fr); }
    }