/* =========================================================
    * 成像 DotAvatar · 页面级样式（2026-10-30 品牌升级：UI 完全对齐点豆设计语言）
    * 设计基准：点豆 dotbeads.com 首页四版（渐变底 + 墨色主 CTA + 冷灰描边 + 黄油体标题）
    * 渐变底 #FFFFFF→#FAFBFC→#F7F8FA + 面板描边 #E5E7EC + 豆黄 #FFD02F + 墨 #1F1D1A
    * 本文件只在头像页加载，token 覆盖不影响其他产品页。
    * ========================================================= */

    /* ===== 品牌字体：站酷庆科黄油体（与点豆同族，子集独立） =====
     * 子集化 21 字「成像点一下，换头像 + 上传照片选择风格生成结果」（3.9KB），
     * 覆盖品牌名、Hero 标题与三处面板标题；其余字符自动回退到系统圆体栈。
     * 若文案改字，需重新生成子集：
     * https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&text=<新文案>
     */
    @font-face {
      font-family: "ZCOOL QingKe HuangYou";
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url("assets/fonts/zcool-qingke-huangyou-brand.woff2") format("woff2");
      unicode-range: U+4E00, U+4E0A-4E0B, U+4F20, U+50CF, U+5934, U+6210, U+62E9, U+6362, U+679C, U+683C, U+70B9, U+7167, U+7247, U+751F, U+7ED3, U+9009, U+98CE, U+FF0C;
    }

    /* ===== Token 覆盖：墨色主 CTA / 渐变底 / 冷灰描边（对齐点豆四版） ===== */
    :root {
      --bg: #F7F8FA;
      --border-soft: #E5E7EC;
      --btn-primary-bg:     #1F1D1A;
      --btn-primary-text:   #FFFFFF;
      --btn-primary-hover:  #3A3730;
      --btn-primary-active: #2A2722;
      --btn-secondary-bg:     #FFFFFF;
      --btn-secondary-border: #1F1D1A;
      --btn-secondary-text:   #1F1D1A;
      --btn-secondary-hover:  #F7F8FA;
      --input-bg:           #FFFFFF;
      --input-border:       #E5E7EC;
      --input-focus-border: #F0BB00;
      --card-selected-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #FFD02F;
      --card-hover-shadow:  0 6px 16px rgba(31, 41, 55, 0.10);
      --focus-ring: 0 0 0 3px rgba(240, 187, 0, 0.35);
    }

    /* ===== 布局（容器 / 顶栏 / Hero / 步骤 / 双栏） ===== */
    /* 页面底：垂直渐变（与点豆同 spec：#FFFFFF → 420px 处 #FAFBFC → #F7F8FA） */
    body {
      background-color: #F7F8FA;
      background-image: linear-gradient(180deg, #FFFFFF 0px, #FAFBFC 420px, #F7F8FA 100%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .topbar {
      position: sticky; top: 0; z-index: 20;
      background: var(--surface);
      border-bottom: 1px solid var(--border-soft);
    }
    .topbar-inner {
      max-width: var(--container-max); margin: 0 auto;
      padding: var(--space-3) var(--container-gutter);
      display: flex; align-items: center; justify-content: space-between;
    }
    .brand { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 400; letter-spacing: 0;
      /* 空间不够时由品牌区先让位（英文标可省略），不让顶栏把整页撑宽 */
      min-width: 0; overflow: hidden; white-space: nowrap;
      font-family: "ZCOOL QingKe HuangYou", "Yuanti SC", "Hiragino Maru Gothic ProN", "YouYuan", "PingFang SC", sans-serif; }
    .brand-logo { flex: none;
      width: 32px; height: 32px; border-radius: 10px;
      background: #FFD02F;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 6px rgba(240, 187, 0, 0.45);
    }
    .brand-logo svg { width: 20px; height: 20px; display: block; }
    .brand-en { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      font-size: 11px; letter-spacing: 0.18em; color: #7A7A7A; font-weight: 600; padding-bottom: 2px;
      overflow: hidden; text-overflow: ellipsis; }

    /* 顶栏 pill（积分 / 我的）配色统一在 base.css 的 `.btn.pill`，此处不再覆写 */
    /* 兑换按钮不再单独覆写：统一用 .btn.primary，与「购买」同一套视觉 */
    /* 获取验证码：浅黄底（对齐点豆） */
    #btnSendCode {
      background: #FFE9A9; border-color: transparent; color: #1F1D1A; font-weight: 600;
    }
    #btnSendCode:hover { background: #FFDF7E; }
    #btnSendCode:active { background: #FFD65E; }

    .page {
      max-width: var(--container-max); margin: 0 auto;
      padding: var(--space-8) var(--container-gutter) var(--space-12);
    }

    /* Hero：居中式，手绘黄下划线衬「换头像」（对齐点豆三版） */
    .hero { text-align: center; margin-bottom: var(--space-8); padding: var(--space-3) 0 0; }
    .hero h1 {
      font-family: "ZCOOL QingKe HuangYou", "Yuanti SC", "Hiragino Maru Gothic ProN", "YouYuan", "PingFang SC", sans-serif;
      font-size: clamp(34px, 4.5vw, 48px); font-weight: 400;
      line-height: 1.3; letter-spacing: 0; color: var(--fg);
    }
    .hero h1 em {
      font-style: normal; position: relative; display: inline-block; padding: 0 2px;
    }
    .hero h1 em::after {
      content: ''; position: absolute; left: 0; right: -2px; bottom: -8px; height: 9px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 Q 30 3 62 7 T 117 5' fill='none' stroke='%23FFD02F' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    }
    .hero p {
      font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      margin-top: 8px; color: #5F6478; font-size: 14px; font-weight: 400; letter-spacing: 0;
      max-width: 60ch; margin-left: auto; margin-right: auto;
    }

    /* 内嵌预览提示（iframe 内） */
    .preview-notice {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
      flex-wrap: wrap;
      margin-bottom: var(--space-4);
      padding: 10px 14px;
      border: 1px solid #F0E3AC;
      background: var(--amber-100, #FEF3C7);
      color: #746019;
      border-radius: var(--radius-md, 10px);
      font-size: var(--text-sm, 13px);
    }
    .preview-notice a { color: #746019; font-weight: 590; text-decoration: underline; white-space: nowrap; }

    /* 步骤条：居中圆形序号式（对齐点豆三版）——当前步黄圆，未到步冷灰圆 */
    .steps {
      display: flex; align-items: center; justify-content: center; gap: var(--space-3);
      flex-wrap: wrap; margin-bottom: var(--space-6);
    }
    .step {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 15px; font-weight: 500; color: var(--fg-2);
      padding: 0;
      background: transparent; border: none;
      transition: color var(--motion-base) var(--ease-standard);
    }
    .step-num {
      width: 28px; height: 28px; border-radius: var(--radius-full);
      background: #F2F3F6; color: #1F1D1A;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: var(--text-xs); font-weight: var(--weight-announce);
      transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard);
    }
    .step.active { color: var(--fg); font-weight: 600; }
    .step.active .step-num { background: #FFD02F; color: #1F1D1A; }
    .step.done { color: var(--success); }
    .step.done .step-num { background: #FFD02F; color: #1F1D1A; }
    .step-arrow { color: var(--meta); display: inline-flex; }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: var(--space-5);
      align-items: start;
    }
    /* ★ 关键：grid 子项默认 min-width:auto，会被内部「不换行」的内容（历史缩略图条、
       长文案）撑到比屏幕还宽 —— 整页随之横向溢出，手机浏览器为了塞进屏幕会把整页
       缩到 ~52%，看起来就像「顶栏只占左半屏、面板被右侧切掉」。2026-11-01 实测：
       12 个历史缩略图 → 文档宽 826px（视口 430）→ 手机端整体缩放到 52%。 */
    .layout > * { min-width: 0; }

    .panel {
      min-width: 0;
      background: var(--surface);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      padding: var(--space-6);
    }
    /* 面板标题：黄油体 20px 墨色（对齐点豆四版「上传照片 / 选择风格 / 生成结果」） */
    .panel-title {
      font-family: "ZCOOL QingKe HuangYou", "Yuanti SC", "Hiragino Maru Gothic ProN", "YouYuan", "PingFang SC", sans-serif;
      font-size: 20px; font-weight: 400;
      letter-spacing: 0;
      margin: var(--space-5) 0 var(--space-3);
      display: flex; align-items: center; gap: var(--space-2); color: var(--fg);
    }
    .panel-title:first-child { margin-top: 0; }
    .panel-title .icon { color: var(--muted); }

    .footer {
      margin-top: var(--space-10);
      text-align: center; font-size: var(--text-sm); color: var(--meta);
    }

    /* ===== 上传区（Empty / Dragover / 已选 三态，虚线冷灰 / 拖入琥珀） ===== */
    .upload-zone {
      min-height: 180px;
      border: 1.5px dashed #7A7A7A;
      border-radius: var(--radius-lg);
      background: var(--bg);
      cursor: pointer; outline: none;
      transition: border-color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
    }
    .upload-zone:hover { border-color: var(--amber-600); }
    .upload-zone.dragover {
      border-style: solid; border-color: var(--amber-600);
      background: var(--amber-100);
    }
    .upload-zone.dragover .upload-empty .icon,
    .upload-zone.dragover .upload-main { color: var(--amber-700); }
    .upload-empty {
      min-height: 177px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--space-2); text-align: center; padding: var(--space-4);
      color: var(--meta);
    }
    .upload-main { font-size: var(--text-base); font-weight: var(--weight-emphasis); color: var(--fg-2); }
    .upload-sub { font-size: var(--text-xs); color: var(--meta); }
    .upload-selected {
      display: flex; align-items: center; gap: var(--space-3);
      padding: var(--space-4); min-height: 177px;
    }
    .upload-thumb {
      width: 56px; height: 56px; border-radius: var(--radius-md);
      object-fit: cover; border: 1px solid var(--border); flex: none;
    }
    .upload-meta { min-width: 0; flex: 1; }
    .upload-name {
      font-size: var(--text-base); font-weight: var(--weight-emphasis); color: var(--fg);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .upload-size { font-size: var(--text-xs); color: var(--meta); margin-top: 2px; }
    .btn-remove-photo {
      width: 24px; height: 24px; flex: none; align-self: flex-start;
      display: inline-flex; align-items: center; justify-content: center;
      border: none; border-radius: var(--radius-full);
      background: transparent; color: var(--muted); cursor: pointer;
      transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
    }
    .btn-remove-photo:hover { background: var(--danger-bg); color: var(--danger); }

    /* ===== 参考图（可选）：一行「上传 ● 说明」，选了之后变成缩略图 + 文件名 + 移除 ===== */
    .ref-row { margin-top: var(--space-4); }
    .ref-pick {
      display: flex; align-items: center; gap: var(--space-3);
      flex-wrap: wrap; margin-top: var(--space-2);
      padding: var(--space-2) var(--space-3);
      border: 1.5px dashed var(--border); border-radius: var(--radius-md);
      background: var(--bg);
      transition: border-color var(--motion-base) var(--ease-standard), background-color var(--motion-base) var(--ease-standard);
    }
    /* 拖拽悬停：等价于主上传区的琥珀高亮（虚线转实线） */
    .ref-pick.dragover,
    .ref-selected.dragover {
      border-style: solid; border-color: var(--amber-600); background: var(--amber-100);
    }
    .ref-pick.dragover .ref-tip { color: var(--amber-700); }
    .ref-pick .btn { flex: none; }
    .ref-tip {
      flex: 1 1 200px; min-width: 0;
      font-size: var(--text-xs); color: var(--meta); line-height: 1.6;
    }
    .ref-selected {
      display: flex; align-items: center; gap: var(--space-3);
      margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
      border: 1px solid var(--border-soft); border-radius: var(--radius-md);
      background: var(--bg);
    }
    .ref-thumb {
      width: 44px; height: 44px; flex: none;
      border-radius: var(--radius-sm); object-fit: cover;
      border: 1px solid var(--border); background: var(--surface);
    }
    .ref-meta { flex: 1; min-width: 0; }
    .ref-name {
      font-size: var(--text-sm); color: var(--fg);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ref-size { font-size: var(--text-xs); color: var(--meta); margin-top: 2px; }

    /* ===== 风格网格：选中黄描边（对齐点豆：白底 + 黄 ring + 黄角标） ===== */
    .style-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: var(--space-3);
    }
    /* 单风格：固定卡片宽度，避免 auto-fill + 1fr 把唯一一张卡拉满整行 */
    .style-grid.is-single { grid-template-columns: minmax(96px, 132px); }
    .style-grid.is-busy { pointer-events: none; opacity: 0.6; }
    .style-grid .hint { margin: 0; }
    .style-card {
      position: relative;
      border: 1.5px solid var(--border-soft); border-radius: var(--radius-lg);
      overflow: hidden; background: var(--surface);
      padding: 0; text-align: left;
      cursor: pointer; user-select: none; outline: none;
      transition:
        transform var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard),
        background-color var(--motion-fast) var(--ease-standard);
    }
    .style-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--card-hover-shadow);
      border-color: var(--amber-300);
    }
    .style-card.selected {
      border-color: #FFD02F;
      background: var(--surface);
      box-shadow: 0 0 0 1px #FFD02F;
    }
    .style-card.selected .card-name { color: var(--fg); }
    .card-art {
      height: 92px; display: block; position: relative;
      background-color: var(--ink-50);
      background-position: center; background-size: cover; background-repeat: no-repeat;
    }
    .card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .card-art .icon {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      color: var(--muted);
    }
    .card-check {
      position: absolute; top: var(--space-1); right: var(--space-1);
      width: 20px; height: 20px; border-radius: var(--radius-full);
      background: #FFD02F; color: #1F1D1A;
      display: none; align-items: center; justify-content: center;
    }
    .style-card.selected .card-check { display: inline-flex; }
    .card-name {
      display: block; padding: 6px 8px;
      font-size: var(--text-xs); font-weight: var(--weight-emphasis); color: var(--fg);
      text-align: center; letter-spacing: 0.01em;
      background: transparent;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      transition: color var(--motion-base) var(--ease-standard);
    }
    .style-letter {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px; font-weight: 700; color: var(--muted);
    }

    /* ===== 主按钮：墨底（对齐点豆二版） ===== */
    .btn.primary { border-radius: var(--radius-md); }
    .btn.primary:hover { box-shadow: 0 4px 14px rgba(31, 29, 26, 0.28); }
    .btn.primary:active { box-shadow: none; }

    /* ===== 结果区（四态：空 / 加载骨架 / 成功 / 失败） ===== */
    .result-panel { display: flex; flex-direction: column; }
    .result-stage {
      aspect-ratio: 1 / 1;
      display: grid; place-items: center;
      border-radius: var(--radius-lg);
      background: var(--bg);
      border: 1px solid var(--border-soft);
      padding: var(--space-4);
      position: relative; overflow: hidden;
    }
    .result-empty { text-align: center; color: var(--meta); }
    .result-empty .icon { margin: 0 auto var(--space-2); }
    .result-empty p { font-size: var(--text-sm); }
    .result-loading { text-align: center; width: 100%; }
    .skeleton-box {
      position: relative; overflow: hidden;
      width: min(70%, 340px); aspect-ratio: 1 / 1;
      margin: 0 auto var(--space-4);
      border-radius: var(--radius-lg); background: var(--ink-100);
    }
    .skeleton-box::after {
      content: ''; position: absolute; inset: 0;
      transform: translateX(-100%);
      background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
      animation: shimmer 1.2s ease-in-out infinite;
    }
    @keyframes shimmer { to { transform: translateX(100%); } }
    .spinner {
      width: 40px; height: 40px; margin: 0 auto var(--space-4);
      border: 3px solid var(--amber-100); border-top-color: var(--amber-600);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    .loading-tip { font-size: var(--text-sm); color: var(--muted); }
    .result-show { width: 100%; height: 100%; display: grid; place-items: center; }
    .result-show img {
      max-width: 100%; max-height: 100%;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      animation: av-rise var(--motion-slow) var(--ease-exit);
    }
    @keyframes av-rise {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }
    .result-error { text-align: center; }
    .result-error > .icon { color: var(--danger); margin: 0 auto var(--space-2); }
    .error-title { font-size: var(--text-base); font-weight: var(--weight-emphasis); color: var(--fg); }
    .error-msg {
      margin: var(--space-2) auto 0; max-width: 42ch;
      font-size: var(--text-xs); color: var(--muted); line-height: 1.7;
      word-break: break-word;
    }
    .result-error .btn { margin-top: var(--space-4); }
    .result-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
    .result-actions .btn { flex: 1 1 120px; }

    /* ===== 历史缩略图条（选中态黄 ring，随 token 自动变） ===== */
    .history { margin-top: var(--space-5); }
    .history-title { font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-2); }
    /* 「更多作品在「我的」」引导链接：跟随标题行，强调色但不抢视觉 */
    .history-link {
      margin-left: var(--space-1);
      font-size: var(--text-xs); font-weight: 510;
      color: var(--teal-700); text-decoration: none;
      white-space: nowrap;
    }
    .history-link:hover { text-decoration: underline; }
    .history-strip {
      display: flex; gap: var(--space-2);
      overflow-x: auto; padding-bottom: var(--space-1);
      /* 横滑条本身必须能缩到父宽：否则 12 张缩略图会把 grid 列撑到 800+ */
      min-width: 0;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .history-item {
      position: relative; flex: none;
      width: 64px; height: 64px; padding: 0;
      border-radius: var(--radius-md); overflow: hidden;
      border: 1px solid var(--border);
      background: none; cursor: pointer; outline: none;
      transition: box-shadow var(--motion-fast) var(--ease-standard);
    }
    .history-item.selected { box-shadow: var(--card-selected-ring); }
    .history-item img { width: 100%; height: 100%; object-fit: cover; }
    .history-eye {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      background: var(--overlay); color: #FFFFFF;
      opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard);
    }
    .history-item:hover .history-eye,
    .history-item:focus-visible .history-eye { opacity: 1; }
    .history-ai-badge {
      position: absolute; top: 2px; right: 2px;
      width: 16px; height: 16px; border-radius: var(--radius-full);
      background: var(--badge-ai-bg); color: var(--badge-ai-text);
      display: flex; align-items: center; justify-content: center;
    }

    /* ===== 大图预览 ===== */
    .lightbox-mask {
      position: fixed; inset: 0; z-index: 60;
      background: var(--mask-strong);
      display: flex; align-items: center; justify-content: center;
      padding: var(--space-4);
    }
    .lightbox-body { position: relative; }
    .lightbox-body img {
      max-width: 90vmin; max-height: 90vmin;
      border-radius: var(--radius-lg);
    }
    .btn-close-lightbox {
      position: absolute; top: calc(-1 * var(--space-6)); right: 0;
      width: 40px; height: 40px; border-radius: var(--radius-full);
      display: inline-flex; align-items: center; justify-content: center;
      border: none; background: transparent; color: #FFFFFF; cursor: pointer;
      transition: background-color var(--motion-fast) var(--ease-standard);
    }
    .btn-close-lightbox:hover { background: var(--overlay); }

    .cloud-flag {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: var(--text-xs); color: var(--meta);
    }

    /* ===== 响应式（对齐点豆） ===== */
    @media (max-width: 899px) {
      /* 必须是 minmax(0,1fr)：裸 1fr = minmax(auto,1fr)，会被内部不换行内容撑破 */
      .layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
      .page { padding-top: var(--space-5); }
      .hero h1 { font-size: var(--text-2xl); }
      .steps { margin-bottom: var(--space-5); }
    }
    @media (max-width: 640px) {
      :root { --container-gutter: 16px; }
      .btn.big, .result-actions .btn { height: 44px; }
      .history-item { width: 56px; height: 56px; }
      /* 三步引导：手机上收成「序号 + 文字」，去掉箭头与行内图标，
         375/360 都能一行放完，不会出现第二行只剩「3 生成头像」 */
      .step-arrow { display: none; }
      .steps { gap: var(--space-3); }
      .step { font-size: var(--text-sm); }
      .step > .icon { display: none; }
      .panel { padding: var(--space-5) var(--space-4); }
      .result-stage { padding: var(--space-3); }
      /* 参考图：手机上按钮单独一行，说明文字整行在下方（挤在按钮右侧会变成 4 行窄条） */
      .ref-tip { flex: 1 1 100%; }
    }
    @media (max-width: 420px) {
      /* 登录态顶栏 = 品牌 + 我的 + 积分 195，实测需要 385px；
         420 以下先收起英文标，避免把顶栏挤出屏幕（会触发整页缩放） */
      .brand-en { display: none; }
    }