/* =========================================================
    * 点豆 DotBeads · 页面级样式（2026-10-29 设计稿四版：渐变底 + 黄油体面板标题）
    * 设计基准：Ardot 设计稿「01 首页·工作区 / 03 登录弹窗 / 04 积分钱包弹窗」
    * 渐变底 #FFFFFF→#FAFBFC→#F7F8FA + 面板描边 #E5E7EC + 豆黄 #FFD02F + 墨 #1F1D1A
    * 本文件只在拼豆页加载，token 覆盖不影响其他产品页。
    * ========================================================= */

    /* ===== 品牌字体：站酷庆科黄油体（设计稿指定） =====
     * 子集化 19 字「点豆一下，就有 + 上传图片选择画风生成结果」（3.7KB），
     * 覆盖品牌名、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-4E0B, U+4F20, U+56FE, U+5C31, U+6210, U+62E9, U+6709, U+679C, U+70B9, U+7247, U+751F, U+753B, U+7ED3, U+8C46, U+9009, U+98CE, U+FF0C;
    }

    /* ===== Token 覆盖：墨色主 CTA / 渐变底 / 冷灰描边（2026-10-29 四版设计稿） ===== */
    :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;
      font-family: "ZCOOL QingKe HuangYou", "Yuanti SC", "Hiragino Maru Gothic ProN", "YouYuan", "PingFang SC", sans-serif; }
    .brand-logo {
      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; }

    /* 顶栏积分：浅黄圆角 pill（设计稿「✦积分 128」二版） */
    #btnWallet {
      background: #FFE9A9; border-color: transparent; color: #1F1D1A; font-weight: 700;
    }
    #btnWallet:hover { background: #FFDF7E; }
    #btnWallet:active { background: #FFD65E; }
    /* 兑换按钮：墨底黄字（设计稿） */
    #btnRedeem {
      background: #1F1D1A; border-color: transparent; color: #FFD02F; font-weight: 700;
    }
    #btnRedeem:hover { background: #3A3730; }
    /* 获取验证码：浅黄底（设计稿） */
    #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;
    }

    /* 步骤条：居中圆形序号式，去药丸（设计稿三版）——当前步黄圆，未到步米圆 */
    .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;
    }

    .panel {
      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: 170px;
      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.drag {
      border-style: solid; border-color: var(--amber-600);
      background: var(--amber-100);
    }
    .upload-zone.drag .upload-empty .icon,
    .upload-zone.drag .upload-main { color: var(--amber-700); }
    .upload-empty {
      min-height: 167px;
      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: 167px;
    }
    .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); }
    #errFile { margin-top: var(--space-2); }

    /* ===== 主体类型分段：冷灰槽 + active 墨底反白（设计稿四版 #F2F3F6） ===== */
    .seg {
      display: inline-flex; gap: 2px; padding: 4px;
      background: #F2F3F6; border-radius: 12px;
      margin-bottom: var(--space-3);
    }
    .seg-btn {
      border: none; background: transparent;
      color: #7A7A7A;
      height: 30px; padding: 0 var(--space-4);
      border-radius: 9px;
      font-size: var(--text-sm); font-weight: var(--weight-emphasis);
      cursor: pointer; white-space: nowrap;
      transition:
        background-color var(--motion-fast) var(--ease-standard),
        color var(--motion-fast) var(--ease-standard);
    }
    .seg-btn:hover { color: var(--fg); }
    .seg-btn.cur {
      background: var(--ink-900); color: #FFFFFF;
      box-shadow: none;
    }

    /* ===== 画风网格：选中黄描边（设计稿二版：白底） ===== */
    .style-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
      gap: var(--space-3);
    }
    .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.cur {
      border-color: #FFD02F;
      background: var(--surface);
      box-shadow: 0 0 0 1px #FFD02F;
    }
    .style-card.cur .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.cur .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);
    }
    .group-hint {
      margin: var(--space-2) 0 0;
      font-size: var(--text-xs); color: var(--meta); line-height: 1.6;
    }

    /* ===== 备注（单行输入） ===== */
    .extra-row { margin-top: var(--space-5); }

    /* ===== 生成按钮：积分角标（白底墨字 pill，压在墨底上） ===== */
    .cost-tag {
      font-size: var(--text-xs); font-weight: var(--weight-announce);
      color: #1F1D1A;
      background: rgba(255, 255, 255, 0.92);
      border: none;
      border-radius: var(--radius-full);
      padding: 1px 8px;
    }
    #studioMsg { min-height: 20px; }
    /* 墨色主按钮（设计稿二版） */
    .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: auto; min-height: 320px;
      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%; }
    .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);
      max-width: 30ch; margin: 0 auto; line-height: 1.7;
    }
    .result-loading .btn { margin-top: var(--space-4); }
    .result-done { text-align: left; width: 100%; }
    /* 绿色成功横幅（设计稿「图纸已生成！消耗 1 积分」） */
    .done-banner {
      display: flex; align-items: center; gap: 10px;
      background: var(--success-bg); border: 1px solid var(--success-border);
      border-radius: var(--radius-md); padding: 10px 14px;
      animation: pa-rise var(--motion-slow) var(--ease-exit);
    }
    .done-badge {
      width: 26px; height: 26px; flex: none;
      border-radius: var(--radius-full);
      background: #7DD3A0; color: #1F1D1A;
      display: inline-flex; align-items: center; justify-content: center;
    }
    @keyframes pa-rise {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }
    .gen-done-msg {
      font-size: var(--text-sm); font-weight: var(--weight-emphasis); color: var(--fg);
      line-height: 1.5;
    }
    .done-actions {
      display: flex; flex-wrap: wrap; gap: var(--space-2);
      margin-top: var(--space-5);
    }
    .done-actions .btn { flex: 1 1 132px; }

    /* ===== 最近生成（本地缩略图回看入口；图纸仅保存 72 小时） ===== */
    .recent { margin-top: var(--space-5); }
    .recent-title {
      margin: 0 0 var(--space-2);
      font-size: var(--text-sm); font-weight: var(--weight-emphasis); color: var(--meta);
    }
    .recent-strip { display: flex; gap: var(--space-2); flex-wrap: wrap; }
    .recent-item {
      width: 64px; height: 64px; padding: 0;
      border: 1px solid var(--border); border-radius: var(--radius-md);
      overflow: hidden; cursor: pointer; background: var(--bg);
      transition:
        transform var(--motion-fast) var(--ease-standard),
        box-shadow var(--motion-fast) var(--ease-standard),
        border-color var(--motion-fast) var(--ease-standard);
    }
    .recent-item:hover {
      transform: translateY(-2px);
      border-color: var(--amber-300);
      box-shadow: var(--card-hover-shadow);
    }
    .recent-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ===== 提示与弹窗关闭钮 ===== */
    #studioMsg.warn, .hint.warn { color: var(--danger); }
    .btn-close-modal {
      border: none; background: #F2F3F6; color: var(--muted); cursor: pointer;
      border-radius: var(--radius-full);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .btn-close-modal:hover { background: #E8EAEE; color: var(--fg); }

    /* ===== 钱包弹窗（设计稿 04） ===== */
    .wallet-balance {
      background: #FFD02F; border-radius: var(--radius-lg);
      padding: 16px 20px 18px; margin: var(--space-4) 0 var(--space-2);
      display: flex; flex-direction: column; gap: 4px;
    }
    .wallet-balance .wb-label { font-size: var(--text-sm); font-weight: var(--weight-emphasis); color: rgba(31, 29, 26, 0.72); }
    .wallet-balance .wb-num { display: flex; align-items: baseline; gap: 8px; }
    .wallet-balance b {
      font-size: 44px; line-height: 1.1; color: #1F1D1A;
      font-weight: 800; letter-spacing: -0.02em;
    }
    .wallet-balance .wb-num { font-size: 15px; font-weight: 700; color: #1F1D1A; }
    .product-card {
      background: #F7F8FA; border: 1px solid #E5E7EC; border-radius: 14px;
      padding: var(--space-3) var(--space-2); gap: 3px;
    }
    .product-card .p-credits { font-size: 18px; font-weight: 700; color: var(--fg); }
    .product-card .btn { margin-top: 6px; height: 30px; font-size: var(--text-xs); border-radius: var(--radius-full); }
    .txn-list {
      border: none; background: #F7F8FA; border-radius: 14px; max-height: 220px;
    }
    .txn-item { border-bottom: 1px solid #E5E7EC; padding: 10px 14px; font-size: var(--text-sm); }
    .txn-item .t-credits.minus { color: var(--fg); }
    .txn-item .t-credits.plus { color: #2E9E63; }

    /* ===== 响应式 ===== */
    @media (max-width: 899px) {
      .layout { grid-template-columns: 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 { height: 44px; }
      .done-actions .btn { flex: 1 1 100%; }
    }