/* ============================================================================
 * 优讯云 AI 生图 · 用户端样式
 *
 * 本文件是 2026-09-16 UI 重构后的重写版本，替换此前 632 条互相覆盖的叠加规则。
 * 组织顺序：令牌 → 基础 → 布局 → 组件 → 各面板 → 覆盖层 → 响应式
 *
 * 两条铁律（改之前先读）：
 *   1. 所有颜色/圆角/阴影/间距必须取自本文件顶部的令牌，不要再写魔法值。
 *      —— 上一版就是因为硬编码散落，同一个卡片出现 4 种圆角和 5 种阴影。
 *   2. 同一条规则只在一个地方定义，别在文件末尾再叠加一层覆盖。
 *      —— 上一版 29 个 @media 互相打架，改一处要顺着找半天。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. 设计令牌
 *
 * 2026-09-18 全面适配 TDesign（腾讯企业级设计体系）令牌规范：
 *   - 品牌色 brand-7 #0052D9，hover 层 brand-6 #266FE8，浅层 brand-5/4；
 *   - 文字四层 = TDesign font-gray-1/2/3/4（rgba 黑 90/66/60/40）;
 *   - 功能色 success #2BA471 / warning #E37318 / error #D54941；
 *   - 圆角走 TDesign 3/6/9 阶；阴影走 shadow-1/2/3 分层公式；
 *   - 中性灰阶对齐 TDesign gray-1 #F3F3F3、边框 #E7E7E7 / #EFEFEF。
 * 变量名全部保持不变（引用方零改动），只换值 —— 闭环由 check_css 自检钉住。
 * ------------------------------------------------------------------------ */
:root{
  /* 文字与中性色：TDesign 文字灰阶四层（font-gy-1..4） */
  --ink:rgba(0,0,0,.9);     /* 标题、数值 = td font-gray-1 */
  --ink-2:rgba(0,0,0,.66);  /* 正文 */
  --muted:rgba(0,0,0,.6);   /* 辅助说明 = td font-gray-3 */
  --soft:rgba(0,0,0,.4);    /* 占位、禁用 = td font-gray-4 */

  /* 描边与面：TDesign 边框两阶 + 组件灰阶 */
  --line:#e7e7e7;           /* td border level-1 */
  --line-2:#efefef;         /* td border level-2 */
  --surface:#ffffff;        /* 卡片 */
  --surface-2:#f9f9f9;      /* 卡内嵌区 */
  --surface-3:#f3f3f3;      /* 更深的嵌入/图片底 = td gray-1 */
  --bg:#f3f5f7;             /* 页面底 = td gray-2 系 */

  /* 品牌色：TDesign 品牌蓝主色 + 蓝阶渐变辅助（不再引入第二色相） */
  --brand:#0052d9;          /* td brand-7 */
  --brand-2:#5592fa;        /* td brand-5，渐变亮端 */
  --brand-3:#82b2ff;        /* td brand-4，渐变尾端 */
  --brand-soft:rgba(0,82,217,.08);   /* td brand-1 感知层 */
  --brand-line:rgba(0,82,217,.30);
  --grad-brand:linear-gradient(135deg,var(--brand-2),var(--brand) 62%);

  /* 点缀色：只用在极小面积（tag 圆点、提示图标），对齐 TDesign 功能色相 */
  --accent-rose:#d54941;    /* td error-7 */
  --accent-amber:#e37318;   /* td warning-7 */
  --accent-cyan:#2ba471;    /* td success-7 */
  --accent-violet:#8c5bd9;

  /* 页面底：企业级淡蓝光晕（TDesign 式干净底 + 一点品牌氛围）。
     光晕透明度从旧版 .28~.30 收到 .06~.10：企业后台的底应该「衬托卡片」
     而不是「和卡片抢注意力」，品牌色留给按钮与选中态。 */
  --page-grad:
    radial-gradient(720px 420px at 4% -8%,rgba(0,82,217,.08),transparent 58%),
    radial-gradient(660px 380px at 98% 0%,rgba(85,146,250,.10),transparent 56%),
    radial-gradient(760px 520px at 50% 112%,rgba(0,82,217,.06),transparent 62%),
    linear-gradient(180deg,#f6f8fb,#f0f3f7 44%,#f4f6fb);

  /* 语义色：TDesign 功能色 */
  --success:#2ba471;
  --success-soft:rgba(43,164,113,.10);
  --danger:#d54941;
  --danger-soft:rgba(213,73,65,.08);
  --warn:#e37318;

  /* 深色侧栏：TDesign 深色容器 #232324 系（比旧蓝黑更中性、更「企业」） */
  --nav:#232324;
  --nav-ink:#ffffff;
  --nav-muted:rgba(255,255,255,.72);
  --nav-dim:rgba(255,255,255,.42);
  --nav-line:rgba(255,255,255,.08);
  --nav-hover:rgba(255,255,255,.06);
  --nav-active:linear-gradient(90deg,rgba(0,82,217,.42),rgba(0,82,217,.06));
  /* 侧栏（深色面）的亮色一组 */
  --nav-accent:#82b2ff;                  /* 悬停/选中 = td brand-4 亮蓝 */
  --nav-raise:rgba(255,255,255,.09);
  --nav-line-2:rgba(255,255,255,.2);
  --nav-brand-soft:rgba(0,82,217,.32);
  --nav-ok:#43c393;                      /* 深色底上的成功色亮一档 */
  --nav-ok-soft:rgba(43,164,113,.22);

  /* 圆角阶梯：对齐 TDesign radius 3/6/9，容器大于子项取值 */
  --r-xs:3px;
  --r-sm:6px;
  --r-md:9px;
  --r-lg:12px;
  --r-xl:16px;
  --r-2xl:20px;
  --r-full:999px;

  /* 阴影：TDesign shadow-1/2/3 分层公式（0 0 0 前缀 + 中性黑） */
  --sh-xs:0 1px 2px rgba(0,0,0,.05);
  --sh-sm:0 1px 10px rgba(0,0,0,.06);
  --sh-md:0 3px 14px 2px rgba(0,0,0,.06);
  --sh-lg:0 6px 30px 6px rgba(0,0,0,.08);
  --sh-brand:0 8px 20px -8px rgba(0,82,217,.45);
  --sh-brand-sm:0 4px 12px -5px rgba(0,82,217,.5);

  /* 间距：4 的倍数 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:52px;

  /* 字阶。10px 是「深色侧栏徽标 / 档位小字」这一档的实际用值，
     补进阶梯是因为它此前在文件里裸写了 6 次 —— 有值却不给令牌，
     等于默许魔法值，而这几个地方将来确实需要一起调。 */
  --t-10:10px; --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px;
  --t-15:15px; --t-17:17px; --t-20:20px; --t-26:26px; --t-32:32px;

  /* 骨架尺寸。
     侧栏宽度从 250 收到 214：菜单里最长的一项「联系我们 · 微信客服」在 250 下
     整块看起来是一大片空荡的深色，而导航项本身只用掉 150 左右。 */
  --drawer-w:214px;
  --topbar-h:64px;
  --content-max:1140px;

  /* 安全区。viewport-fit=cover 下页面会铺满整屏（含圆角与挖孔），
     所以贴边的元素必须自己留出这一圈，否则内容会被压在刘海下面。
     为什么是四个令牌而不是每处直接写 env()：
       ① 横屏的 iPhone 安全区在**左右两侧**（竖屏恒为 0），
          想改一套参数得同时改十几个地方，漏一处就是一条压在刘海下的文字；
       ② 竖屏与桌面下这四个值都是 0px，加与不加不改变任何尺寸，
          所以下面所有用到它的规则**都不需要再套 orientation 媒体查询**。
     为什么不留 fallback 值：env() 的支持度远高于本文件已经依赖的
     @container / 独立 translate 属性，不支持 env() 的浏览器本来也渲染不出这个页面。 */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);

  /* 动效 */
  --ease:cubic-bezier(.22,.7,.3,1);
  --dur:.2s;
}

/* ---------------------------------------------------------------------------
 * 2. 基础
 * ------------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;min-height:100%}
body{
  /* 这里只留一层纯色底（会被提升为画布底色）。彩色光晕交给下面的独立层，
     原因见 .app-main::before 的注释——挂 background-attachment:fixed 在手机上会翻车。 */
  background-color:var(--bg);
  color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:var(--t-14);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,h4,p{margin:0}
/* 标题用品牌渐变而不是纯黑：整页最大的几个字承担「这页有颜色」的印象，
   纯黑标题压在彩色光晕上反而显得页面没上色。
   兜底 color 留给不支持 background-clip:text 的浏览器。 */
h2{
  font-size:var(--t-26);font-weight:760;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);
  background-image:linear-gradient(102deg,#0e1424 4%,#4b2fb8 52%,var(--brand) 96%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
h3{font-size:var(--t-15);font-weight:700;letter-spacing:-.01em}
button,input,textarea,select{font:inherit;color:inherit}
button{touch-action:manipulation;cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:var(--brand);text-decoration:none}
img{max-width:100%;display:block}

/* 线性图标统一：本项目内联 SVG 全是描边图标，默认不给填充 */
svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 焦点环：键盘可见，鼠标点击不打扰 */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.hidden{display:none!important}
/* 按钮前置图标：与导航一致的内联描边 SVG 体系（此前是 → ← ↻ ↪ × 五种字符混排）。
   data-icon 只作 key，真正图形用 CSS mask 注入并吃 currentColor，跟随按钮的可用/悬停变色。 */
[data-icon]::before{
  content:"";display:inline-block;width:1em;height:1em;flex:0 0 auto;
  background:currentColor;vertical-align:-0.12em;
  /* 未映射到具体图标的 key 走全透明 mask，宁可没图也不渲染成实心块 */
  -webkit-mask:var(--di,linear-gradient(transparent,transparent)) center/contain no-repeat;
  mask:var(--di,linear-gradient(transparent,transparent)) center/contain no-repeat;
}
/* ---------------------------------------------------------------------------
 * 2.1 TDesign 官方图标库（tdesign-icons-svg v0.4.7，MIT License）
 *     图形为腾讯 TDesign 原版 SVG，经 CSS mask 注入吃 currentColor，
 *     跟随按钮可用/悬停变色。字符型 key（→ ↓ × 等）是旧标记的兼容别名，
 *     语义 key 与官方图标一一对应。新增 key 必须连同图形一起加 ——
 *     check_css 自检会拦住「用了没定义」的 key。
 * ------------------------------------------------------------------------ */
[data-icon="image"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-image'%3E%3Cg id='image'%3E%3Cpath id='fill1' fill='transparent' d='M3 21H20L9 10L3 16V21Z'%3E%3C/path%3E%3Ccircle id='fill2' cx='15.75' cy='8.25' r='2' fill='transparent'%3E%3C/circle%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21' stroke-width='2'%3E%3C/path%3E%3Ccircle id='stroke2' cx='15.75' cy='8.25' r='2' stroke='currentColor' stroke-width='2'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}
[data-icon="wallet"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-wallet'%3E%3Cg id='wallet'%3E%3Cpath id='fill1' fill='transparent' d='M19 7H3V21H19C20.1045 21 21 20.1046 21 19V9C21 7.89543 20.1045 7 19 7Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M19 3H5.00002C3.89546 3 3.00003 3.89542 3.00002 4.99998C3.00001 6.10456 3.89544 7 5.00002 7H18M3 7V6M3 7H19C20.1045 7 21 7.89543 21 9V19C21 20.1046 20.1045 21 19 21H3V7ZM16 14H17' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="gift"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-gift'%3E%3Cg id='gift'%3E%3Cpath id='fill1' fill='transparent' d='M22 15L22 7L2 7L2 15L22 15Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M22 21L22 15L2 15L2 21L22 21Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M22 21L2 21M22 21V7L2 7L2 21M22 21V15L2 15L2 21' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 4C12 5.65685 10.6569 7 9 7C7.34315 7 6 5.65685 6 4C6 2.34315 7.34315 1 9 1C10.6569 1 12 2.34315 12 4ZM12 4C12 5.65685 13.3431 7 15 7C16.6569 7 18 5.65685 18 4C18 2.34315 16.6569 1 15 1C13.3431 1 12 2.34315 12 4ZM8 11L12 7L16 11' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="user"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-user'%3E%3Cg id='user'%3E%3Cg id='fill1'%3E%3Cpath fill='transparent' d='M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke1'%3E%3Cpath stroke='currentColor' d='M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
[data-icon="user-circle"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-user-circle'%3E%3Cg id='user-circle'%3E%3Cpath id='fill1' fill='transparent' d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'%3E%3C/path%3E%3Cg id='fill2'%3E%3Cpath fill='transparent' d='M15.5 8.5C15.5 10.433 13.933 12 12 12C10.067 12 8.5 10.433 8.5 8.5C8.5 6.567 10.067 5 12 5C13.933 5 15.5 6.567 15.5 8.5Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M18.5 19.5996V19C18.5 16.7909 16.7091 15 14.5 15H9.5C7.29086 15 5.5 16.7909 5.5 19V19.5996C7.24803 21.0961 9.51846 22 12 22C14.4815 22 16.752 21.0961 18.5 19.5996Z' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke2'%3E%3Cpath stroke='currentColor' d='M15.5 8.5C15.5 10.433 13.933 12 12 12C10.067 12 8.5 10.433 8.5 8.5C8.5 6.567 10.067 5 12 5C13.933 5 15.5 6.567 15.5 8.5Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M18.5 19.5996V19C18.5 16.7909 16.7091 15 14.5 15H9.5C7.29086 15 5.5 16.7909 5.5 19V19.5996C7.24803 21.0961 9.51846 22 12 22C14.4815 22 16.752 21.0961 18.5 19.5996Z' fill-rule='evenodd' stroke-linecap='square' stroke-width='2' clip-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3Cpath id='stroke1' stroke='currentColor' d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="file"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-file'%3E%3Cg id='file'%3E%3Cpath id='fill1' fill='transparent' d='M4 22H20V8H14V2H4V22Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M14 2V8H20M14 2H15L20 7V8M14 2H4V22H20V8' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="file-copy"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-file-copy'%3E%3Cg id='file-copy'%3E%3Cpath id='fill1' fill='transparent' d='M7 18V2H14V8H20V18H7Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M14 2V8H20M14 2H15L20 7V8M14 2H7V18H20V8' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M3 6L3 22H14' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="chat"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-chat'%3E%3Cg id='chat'%3E%3Cpath id='fill1' fill='transparent' d='M2.5 4H21.5V19H6.5L2.5 22V4Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M2.5 4H21.5V19H6.5L2.5 22V4Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="link"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-link'%3E%3Cg id='link'%3E%3Cpath id='stroke1' stroke='currentColor' d='M11.6762 6.99023L13.9998 4.6666C15.4726 3.19382 17.8604 3.19382 19.3332 4.6666C20.806 6.13938 20.806 8.52723 19.3332 10L17.0096 12.3236M6.98974 11.6766L4.66611 14.0003C3.19333 15.4731 3.19333 17.8609 4.66611 19.3337C6.13889 20.8065 8.52675 20.8065 9.99953 19.3337L12.3232 17.0101M13.9985 9.99989L9.99847 14' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="arrow-right"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-arrow-right'%3E%3Cg id='arrow-right'%3E%3Cpath id='stroke1' stroke='currentColor' d='M13 17.5L18.5 12L13 6.5M17.25 12L4.25 12' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="arrow-left"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-arrow-left'%3E%3Cg id='arrow-left'%3E%3Cpath id='stroke1' stroke='currentColor' d='M11 6.5L5.5 12L11 17.5M6.75 12H19.75' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="download"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-download'%3E%3Cg id='download'%3E%3Cpath id='stroke1' stroke='currentColor' d='M16.5 10.5L12 15L7.5 10.5M12 13.75V4' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M20.5 15V20H3.5V15' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="refresh"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-refresh'%3E%3Cg id='refresh'%3E%3Cpath id='stroke1' stroke='currentColor' d='M21.448 13C20.9483 17.7767 16.909 21.5 12 21.5C8.18227 21.5 4.89052 19.248 3.38065 16M2.5 20.5V15.5H5.5M2.55176 11C3.05145 6.22334 7.09079 2.5 11.9998 2.5C15.8175 2.5 19.1092 4.75197 20.6191 8M21.4998 3.5V8.5H18.4998' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="close"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-close'%3E%3Cg id='close'%3E%3Cpath id='stroke1' stroke='currentColor' d='M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="chevron-down"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-chevron-down'%3E%3Cg id='chevron-down'%3E%3Cpath id='stroke1' stroke='currentColor' d='M17.5 9.5L12 15L6.5 9.5' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="star"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-star'%3E%3Cg id='star'%3E%3Cpath id='fill1' fill='transparent' d='M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="info-circle"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-info-circle'%3E%3Cg id='info-circle'%3E%3Cpath id='fill1' fill='transparent' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 16.5L12 11M12 7.5L11.9961 7.5L11.9961 7.49609L12 7.49609L12 7.5Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="delete"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-delete'%3E%3Cg id='delete'%3E%3Cpath id='fill1' fill='transparent' d='M5 5H19L18.5 22H5.5L5 5Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M21 5H3M5 5H19L18.5 22H5.5L5 5ZM8.5 2H15.5V5H8.5V2Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 9V18' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="poweroff"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-poweroff'%3E%3Cg id='poweroff'%3E%3Cpath id='stroke1' stroke='currentColor' d='M7 5.125C4.87867 6.67053 3.5 9.17406 3.5 11.9996C3.5 16.694 7.30558 20.4996 12 20.4996C16.6944 20.4996 20.5 16.694 20.5 11.9996C20.5 9.17406 19.1213 6.67053 17 5.125' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 3V11' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="upload"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-upload'%3E%3Cg id='upload'%3E%3Cpath id='stroke1' stroke='currentColor' d='M16.5 8.5L12 4L7.5 8.5M12 5.25V15' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M20.5 15V20H3.5V15' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="add"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-add'%3E%3Cg id='add'%3E%3Cpath id='stroke1' stroke='currentColor' d='M12 5L12 19M19 12L5 12' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="search"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-search'%3E%3Cg id='search'%3E%3Cpath id='fill1' fill='transparent' d='M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M15.8027 15.8037L21.106 21.107' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="edit"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-edit'%3E%3Cg id='edit'%3E%3Cpath id='fill1' fill='transparent' d='M14.1048 6.00427L4.78744 15.3216L3.99805 20.0001L8.67652 19.2107L17.9939 9.89336L14.1048 6.00427Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M17.9936 9.89339L21.0506 6.83635L17.1615 2.94727L14.1045 6.0043L17.9936 9.89339Z' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M14.1048 6.00427L4.78744 15.3216L3.99805 20.0001L8.67652 19.2107L17.9939 9.89336M14.1048 6.00427L17.9939 9.89336M14.1048 6.00427L17.1615 2.94727L21.0506 6.83635L17.9939 9.89336' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="check-circle"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-check-circle'%3E%3Cg id='check-circle'%3E%3Cpath id='fill1' fill='transparent' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M16.5 9L10.5 15L7.5 12' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="error-circle"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-error-circle'%3E%3Cg id='error-circle'%3E%3Cpath id='fill1' fill='transparent' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 7.5V13M12 16.5H12.0039V16.5039H12V16.5Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="help-circle"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-help-circle'%3E%3Cg id='help-circle'%3E%3Cpath id='fill1' fill='transparent' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12.0002 14.25V14C12.0002 12.8954 12.9877 12.0414 13.8553 11.3578C14.5525 10.8085 15.0002 9.95652 15.0002 9C15.0002 7.34315 13.657 6 12.0002 6C10.694 6 9.58273 6.83481 9.1709 8M12.0002 17.25H12.0041V17.2539H12.0002V17.25Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="setting"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-setting'%3E%3Cg id='setting'%3E%3Cpath id='fill1' fill='transparent' d='M20.6604 7L12.0001 2L3.33984 7V17L12.0001 22L20.6604 17V7ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M12.0001 2L20.6604 7V17L12.0001 22L3.33984 17V7L12.0001 2Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="browse"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-browse'%3E%3Cg id='browse' clip-path='url(%23clip0_543_7945)'%3E%3Cpath id='fill1' fill='transparent' d='M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M11.9997 4C6.86881 4 2.52275 7.36017 1.04199 12C2.52275 16.6398 6.86881 20 11.9997 20C17.1306 20 21.4766 16.6398 22.9574 12C21.4766 7.36017 17.1306 4 11.9997 4Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="copy"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-copy'%3E%3Cg id='copy'%3E%3Cpath id='fill1' fill='transparent' d='M10 10H21V21H10z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M10 10H21V21H10V10Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M14 6.5V3L3 3L3 14H6.5' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="mobile"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-mobile'%3E%3Cg id='mobile'%3E%3Cpath id='fill1' fill='transparent' d='M5 2H19V22H5V2Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M5 2H19V22H5V2Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 18H12.0039V18.0039H12V18Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="zoom-in"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-zoom-in'%3E%3Cg id='zoom-in'%3E%3Cpath id='fill1' fill='transparent' d='M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M15.8033 15.8033C12.8744 18.7322 8.12563 18.7322 5.1967 15.8033C2.26777 12.8744 2.26777 8.12563 5.1967 5.1967C8.12563 2.26777 12.8744 2.26777 15.8033 5.1967C18.7322 8.12563 18.7322 12.8744 15.8033 15.8033ZM15.8033 15.8033L21.1066 21.1066' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M10.5 13.5V10.5M10.5 10.5L10.5 7.5M10.5 10.5H7.5M10.5 10.5H13.5' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="card"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-card'%3E%3Cg id='card'%3E%3Cpath id='fill1' fill='transparent' d='M7 4H17V20H7V4Z'%3E%3C/path%3E%3Cg id='fill2'%3E%3Cpath fill='transparent' d='M3 6V18H7V6H3Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M21 6V18H17V6H21Z'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke2'%3E%3Cpath stroke='currentColor' d='M3 6V18H7V6H3Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M21 6V18H17V6H21Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3Cpath id='stroke1' stroke='currentColor' d='M7 4H17V20H7V4Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="chart"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-chart'%3E%3Cg id='chart'%3E%3Cpath id='fill1' fill='transparent' d='M3 3H21V21H3V3Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 3H21V21H3V3Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M7 12V17M12 8V17M17 14V17' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="jump"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-jump'%3E%3Cg id='jump'%3E%3Cpath id='stroke1' stroke='currentColor' d='M9 4L4 4L4 20L20 20L20 15' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M19.25 4.75L12 12M14 4H20L20 10' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="service"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-service'%3E%3Cg id='service'%3E%3Cg id='fill1'%3E%3Cpath fill='transparent' d='M3 12H7V18H5C3.89543 18 3 17.1734 3 16.1538V12Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M21 12H17V18H19C20.1046 18 21 17.1734 21 16.1538V12Z'%3E%3C/path%3E%3C/g%3E%3Cpath id='fill2' fill='transparent' d='M10.25 21.5C10.25 21.0858 10.5858 20.75 11 20.75H13C13.4142 20.75 13.75 21.0858 13.75 21.5C13.75 21.9142 13.4142 22.25 13 22.25H11C10.5858 22.25 10.25 21.9142 10.25 21.5Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M21 12V11C21 6.02944 16.9706 2 12 2C7.02944 2 3 6.02944 3 11V12M21 12H17V18H19C20.1046 18 21 17.1734 21 16.1538V12ZM3 12H7V18H5M3 12V16.1538C3 17.1734 3.89543 18 5 18M10.25 21.5H8C6.34315 21.5 5 20.1569 5 18.5V18M10.25 21.5C10.25 21.9142 10.5858 22.25 11 22.25H13C13.4142 22.25 13.75 21.9142 13.75 21.5C13.75 21.0858 13.4142 20.75 13 20.75H11C10.5858 20.75 10.25 21.0858 10.25 21.5Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="history"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-history'%3E%3Cg id='history'%3E%3Cpath id='stroke1' stroke='currentColor' d='M2.552 13C3.0517 17.7767 7.09104 21.5 12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.7533 17.2467 2.5 12 2.5C10.3719 2.5 8.8394 2.90957 7.5 3.63131C5.69871 4.60193 4.24661 6.13714 3.38065 8M12 7V12L14.5 14.5M2.5 3.5V8.5H7.5' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="discount"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-discount'%3E%3Cg id='discount'%3E%3Cpath id='fill1' fill='transparent' d='M11.878 22.0207L1.97852 12.1212L11.878 2.22168L21.0704 2.92879L21.7775 12.1212L11.878 22.0207Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M13.9998 7.17075C14.7809 6.3897 16.0472 6.3897 16.8283 7.17075C17.6093 7.9518 17.6093 9.21813 16.8283 9.99917C16.0472 10.7802 14.7809 10.7802 13.9998 9.99917C13.2188 9.21813 13.2188 7.9518 13.9998 7.17075Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M11.878 22.0207L1.97852 12.1212L11.878 2.22168L21.0704 2.92879L21.7775 12.1212L11.878 22.0207Z' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M13.9998 7.17075C14.7809 6.3897 16.0472 6.3897 16.8283 7.17075C17.6093 7.9518 17.6093 9.21813 16.8283 9.99917C16.0472 10.7802 14.7809 10.7802 13.9998 9.99917C13.2188 9.21813 13.2188 7.9518 13.9998 7.17075Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="secured"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-secured'%3E%3Cg id='secured'%3E%3Cpath id='fill1' fill='transparent' d='M3 4.65V12C3 19.35 12 22.5 12 22.5C12 22.5 21 19.35 21 12V4.65L12 1.5L3 4.65Z' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 4.65V12C3 19.35 12 22.5 12 22.5C12 22.5 21 19.35 21 12V4.65L12 1.5L3 4.65Z' fill-rule='evenodd' stroke-linecap='square' stroke-width='2' clip-rule='evenodd'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M8.17285 11.1716L11.0013 14L16.6581 8.34314' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="shop"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-shop'%3E%3Cg id='shop'%3E%3Cpath id='fill1' fill='transparent' d='M4 8H20V22H4V8Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M15.5 11V5.5C15.5 3.567 13.933 2 12 2C10.067 2 8.5 3.567 8.5 5.5V11M4 8H20V22H4V8Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="call"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-call'%3E%3Cg id='call'%3E%3Cpath id='fill1' fill='transparent' d='M21 22C17.2007 22 13.6618 20.8848 10.6929 18.964C8.43077 17.5005 6.49953 15.5692 5.03601 13.3071C3.11515 10.3382 2 6.79932 2 3H8.77778L9.97148 8.37167L7.94713 10.396C9.28619 12.7542 11.2458 14.7138 13.604 16.0529L15.6283 14.0285L21 15.2222V22Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M21 22C17.2007 22 13.6618 20.8848 10.6929 18.964C8.43077 17.5005 6.49953 15.5692 5.03601 13.3071C3.11515 10.3382 2 6.79932 2 3H8.77778L9.97148 8.37167L7.94713 10.396C9.28619 12.7542 11.2458 14.7138 13.604 16.0529L15.6283 14.0285L21 15.2222V22Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="qrcode"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-qrcode'%3E%3Cg id='qrcode'%3E%3Cg id='fill1'%3E%3Cpath fill='transparent' d='M3 14H10V21H3V14Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M3 3H10V10H3V3Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M14 3H21V10H14V3Z'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke1'%3E%3Cpath stroke='currentColor' d='M3 14H10V21H3V14Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M3 3H10V10H3V3Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M14 3H21V10H14V3Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M6.5 6.5H6.50391V6.50391H6.5V6.5Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M6.5 17.5H6.50391V17.5039H6.5V17.5Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M17.5 6.5H17.5039V6.50391H17.5V6.5Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke2'%3E%3Cpath stroke='currentColor' d='M13.9961 13.9961H14V14H13.9961V13.9961Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M16.9961 16.9961H17V17H16.9961V16.9961Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M18.9961 18.9961H19V19H18.9961V18.9961Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M20.9961 13.9961H21V14H20.9961V13.9961Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M20.9961 20.9961H21V21H20.9961V20.9961Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M13.9961 20.9961H14V21H13.9961V20.9961Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}
[data-icon="internet"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-internet'%3E%3Cg id='internet'%3E%3Cpath id='fill1' fill='transparent' d='M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5228 22 22 17.5229 22 12C22 6.47715 17.5228 2 12 2Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M11.4987 21.9877C11.6646 21.9959 11.8315 22 11.9994 22C12.1673 22 12.3342 21.9959 12.5 21.9877C17.113 16.2216 17.1129 7.77835 12.4999 2.01231C12.3341 2.00414 12.1672 2 11.9994 2C11.8315 2 11.6646 2.00414 11.4988 2.01231C6.88584 7.77835 6.88581 16.2216 11.4987 21.9877Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 12H21M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5229 17.5228 22 12 22C6.47715 22 2 17.5229 2 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M11.4987 21.9877C11.6646 21.9959 11.8315 22 11.9994 22C12.1673 22 12.3342 21.9959 12.5 21.9877C17.113 16.2216 17.1129 7.77835 12.4999 2.01231C12.3341 2.00414 12.1672 2 11.9994 2C11.8315 2 11.6646 2.00414 11.4988 2.01231C6.88584 7.77835 6.88581 16.2216 11.4987 21.9877Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="dashboard"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-dashboard'%3E%3Cg id='dashboard'%3E%3Cpath id='fill2' fill='transparent' d='M15 11.9998C15 13.6566 13.6569 14.9998 12 14.9998C10.3431 14.9998 9 13.6566 9 11.9998C9 10.3429 10.3431 8.99976 12 8.99976C13.6569 8.99976 15 10.3429 15 11.9998Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M19.5668 4.41406L14.1113 9.86853M14.1113 9.86853C13.5692 9.33152 12.8233 8.99985 12 8.99985C10.3431 8.99985 9 10.343 9 11.9998C9 13.6567 10.3431 14.9998 12 14.9998C13.6569 14.9998 15 13.6567 15 11.9998C15 11.1663 14.6601 10.4122 14.1113 9.86853Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M6.99912 20.6617C4.0106 18.9325 2 15.7011 2 12C2 6.47715 6.47715 2 12 2C13.095 2 14.1488 2.17598 15.1348 2.50121M17.0034 20.6603C19.9906 18.9308 22.0001 15.7001 22.0001 12.0001C22.0001 10.9051 21.8241 9.85125 21.4989 8.86523' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="clear"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-clear'%3E%3Cg id='clear'%3E%3Cpath id='fill1' fill='transparent' d='M14 2L10 2L10 10.5L4 10.5V15L20 15L20 10.5H14L14 2Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M4 15L4 22L20 22V15L4 15Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M4 15V22H20V15M4 15H20M4 15V10.5H10V2H14V10.5H20V15M15 22V19' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="→"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-arrow-right'%3E%3Cg id='arrow-right'%3E%3Cpath id='stroke1' stroke='currentColor' d='M13 17.5L18.5 12L13 6.5M17.25 12L4.25 12' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="←"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-arrow-left'%3E%3Cg id='arrow-left'%3E%3Cpath id='stroke1' stroke='currentColor' d='M11 6.5L5.5 12L11 17.5M6.75 12H19.75' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="↓"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-download'%3E%3Cg id='download'%3E%3Cpath id='stroke1' stroke='currentColor' d='M16.5 10.5L12 15L7.5 10.5M12 13.75V4' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M20.5 15V20H3.5V15' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="↻"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-refresh'%3E%3Cg id='refresh'%3E%3Cpath id='stroke1' stroke='currentColor' d='M21.448 13C20.9483 17.7767 16.909 21.5 12 21.5C8.18227 21.5 4.89052 19.248 3.38065 16M2.5 20.5V15.5H5.5M2.55176 11C3.05145 6.22334 7.09079 2.5 11.9998 2.5C15.8175 2.5 19.1092 4.75197 20.6191 8M21.4998 3.5V8.5H18.4998' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="×"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-close'%3E%3Cg id='close'%3E%3Cpath id='stroke1' stroke='currentColor' d='M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="⌄"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-chevron-down'%3E%3Cg id='chevron-down'%3E%3Cpath id='stroke1' stroke='currentColor' d='M17.5 9.5L12 15L6.5 9.5' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="✦"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-star'%3E%3Cg id='star'%3E%3Cpath id='fill1' fill='transparent' d='M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M12.0001 3.67603L14.1867 9.96648L20.8449 10.1022L15.538 14.1256L17.4665 20.4999L12.0001 16.696L6.5337 20.4999L8.46217 14.1256L3.15527 10.1022L9.81354 9.96648L12.0001 3.67603Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="i"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-info-circle'%3E%3Cg id='info-circle'%3E%3Cpath id='fill1' fill='transparent' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 16.5L12 11M12 7.5L11.9961 7.5L11.9961 7.49609L12 7.49609L12 7.5Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="¥"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-card'%3E%3Cg id='card'%3E%3Cpath id='fill1' fill='transparent' d='M7 4H17V20H7V4Z'%3E%3C/path%3E%3Cg id='fill2'%3E%3Cpath fill='transparent' d='M3 6V18H7V6H3Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M21 6V18H17V6H21Z'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke2'%3E%3Cpath stroke='currentColor' d='M3 6V18H7V6H3Z' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M21 6V18H17V6H21Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3Cpath id='stroke1' stroke='currentColor' d='M7 4H17V20H7V4Z' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="trash"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-delete'%3E%3Cg id='delete'%3E%3Cpath id='fill1' fill='transparent' d='M5 5H19L18.5 22H5.5L5 5Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M21 5H3M5 5H19L18.5 22H5.5L5 5ZM8.5 2H15.5V5H8.5V2Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 9V18' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="exit"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-poweroff'%3E%3Cg id='poweroff'%3E%3Cpath id='stroke1' stroke='currentColor' d='M7 5.125C4.87867 6.67053 3.5 9.17406 3.5 11.9996C3.5 16.694 7.30558 20.4996 12 20.4996C16.6944 20.4996 20.5 16.694 20.5 11.9996C20.5 9.17406 19.1213 6.67053 17 5.125' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 3V11' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="wallet"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-wallet'%3E%3Cg id='wallet'%3E%3Cpath id='fill1' fill='transparent' d='M19 7H3V21H19C20.1045 21 21 20.1046 21 19V9C21 7.89543 20.1045 7 19 7Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M19 3H5.00002C3.89546 3 3.00003 3.89542 3.00002 4.99998C3.00001 6.10456 3.89544 7 5.00002 7H18M3 7V6M3 7H19C20.1045 7 21 7.89543 21 9V19C21 20.1046 20.1045 21 19 21H3V7ZM16 14H17' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="gallery"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-image'%3E%3Cg id='image'%3E%3Cpath id='fill1' fill='transparent' d='M3 21H20L9 10L3 16V21Z'%3E%3C/path%3E%3Ccircle id='fill2' cx='15.75' cy='8.25' r='2' fill='transparent'%3E%3C/circle%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21' stroke-width='2'%3E%3C/path%3E%3Ccircle id='stroke2' cx='15.75' cy='8.25' r='2' stroke='currentColor' stroke-width='2'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E")}
[data-icon="package"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-gift'%3E%3Cg id='gift'%3E%3Cpath id='fill1' fill='transparent' d='M22 15L22 7L2 7L2 15L22 15Z'%3E%3C/path%3E%3Cpath id='fill2' fill='transparent' d='M22 21L22 15L2 15L2 21L22 21Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M22 21L2 21M22 21V7L2 7L2 21M22 21V15L2 15L2 21' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 4C12 5.65685 10.6569 7 9 7C7.34315 7 6 5.65685 6 4C6 2.34315 7.34315 1 9 1C10.6569 1 12 2.34315 12 4ZM12 4C12 5.65685 13.3431 7 15 7C16.6569 7 18 5.65685 18 4C18 2.34315 16.6569 1 15 1C13.3431 1 12 2.34315 12 4ZM8 11L12 7L16 11' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="orders"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-file-copy'%3E%3Cg id='file-copy'%3E%3Cpath id='fill1' fill='transparent' d='M7 18V2H14V8H20V18H7Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M14 2V8H20M14 2H15L20 7V8M14 2H7V18H20V8' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M3 6L3 22H14' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="balance"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-chart'%3E%3Cg id='chart'%3E%3Cpath id='fill1' fill='transparent' d='M3 3H21V21H3V3Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 3H21V21H3V3Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M7 12V17M12 8V17M17 14V17' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}
[data-icon="user"]{--di:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-user-circle'%3E%3Cg id='user-circle'%3E%3Cpath id='fill1' fill='transparent' d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z'%3E%3C/path%3E%3Cg id='fill2'%3E%3Cpath fill='transparent' d='M15.5 8.5C15.5 10.433 13.933 12 12 12C10.067 12 8.5 10.433 8.5 8.5C8.5 6.567 10.067 5 12 5C13.933 5 15.5 6.567 15.5 8.5Z'%3E%3C/path%3E%3Cpath fill='transparent' d='M18.5 19.5996V19C18.5 16.7909 16.7091 15 14.5 15H9.5C7.29086 15 5.5 16.7909 5.5 19V19.5996C7.24803 21.0961 9.51846 22 12 22C14.4815 22 16.752 21.0961 18.5 19.5996Z' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3Cg id='stroke2'%3E%3Cpath stroke='currentColor' d='M15.5 8.5C15.5 10.433 13.933 12 12 12C10.067 12 8.5 10.433 8.5 8.5C8.5 6.567 10.067 5 12 5C13.933 5 15.5 6.567 15.5 8.5Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath stroke='currentColor' d='M18.5 19.5996V19C18.5 16.7909 16.7091 15 14.5 15H9.5C7.29086 15 5.5 16.7909 5.5 19V19.5996C7.24803 21.0961 9.51846 22 12 22C14.4815 22 16.752 21.0961 18.5 19.5996Z' fill-rule='evenodd' stroke-linecap='square' stroke-width='2' clip-rule='evenodd'%3E%3C/path%3E%3C/g%3E%3Cpath id='stroke1' stroke='currentColor' d='M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")}

/* 登录/换绑输入框前缀图标：TDesign mobile / secured，随令牌走同一边框与光晕 */
.input-lead input{
  padding-left:38px;
  background-repeat:no-repeat;
  background-position:11px center;
  background-size:17px;
}
.input-lead #phone,.input-lead #new-phone{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-mobile'%3E%3Cg id='mobile'%3E%3Cpath id='fill1' fill='transparent' d='M5 2H19V22H5V2Z'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M5 2H19V22H5V2Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M12 18H12.0039V18.0039H12V18Z' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
.input-lead #code,.input-lead #new-code{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' width='1em' height='1em' class='t-icon t-icon-secured'%3E%3Cg id='secured'%3E%3Cpath id='fill1' fill='transparent' d='M3 4.65V12C3 19.35 12 22.5 12 22.5C12 22.5 21 19.35 21 12V4.65L12 1.5L3 4.65Z' fill-rule='evenodd' clip-rule='evenodd'%3E%3C/path%3E%3Cpath id='stroke1' stroke='currentColor' d='M3 4.65V12C3 19.35 12 22.5 12 22.5C12 22.5 21 19.35 21 12V4.65L12 1.5L3 4.65Z' fill-rule='evenodd' stroke-linecap='square' stroke-width='2' clip-rule='evenodd'%3E%3C/path%3E%3Cpath id='stroke2' stroke='currentColor' d='M8.17285 11.1716L11.0013 14L16.6581 8.34314' stroke-linecap='square' stroke-width='2'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}
/* 面板标题前缀图标与充值标题图标：统一 TDesign 14~15px 视觉重量 */
.card-label [data-icon]::before{width:14px;height:14px;vertical-align:-2px}
.title-leading-icon [data-icon]{font-size:var(--t-15);display:inline-flex}

/* 表单控件外观回收，让原生 select 在各浏览器一致 */
input,textarea,select{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm)}
input::placeholder,textarea::placeholder{color:var(--soft)}
select{
  appearance:none;-webkit-appearance:none;
  padding-right:34px!important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:15px;
  cursor:pointer;
}

/* ---------------------------------------------------------------------------
 * 3. 布局骨架
 * ------------------------------------------------------------------------ */
.app-shell{min-height:100vh;min-height:100dvh}

/* 侧栏：桌面常驻，移动端为抽屉。行为契约见「响应式」段落，勿在别处再定义 transform */
.drawer{
  position:fixed;inset:0 auto 0 0;z-index:40;
  /* 面板整体向左「长」出一条安全区，而不是把内容压窄：
     横屏刘海挡住的正是侧栏这一侧，压窄会让「我的作品」这类导航项被挤到折行。
     注意这份宽度要和 .app-main 的 margin-left 成对修改（一致性由 check_css.mjs 钉住）。 */
  width:calc(var(--drawer-w) + var(--safe-l));
  display:flex;flex-direction:column;
  padding:var(--s5) var(--s4) var(--s4);
  padding-left:calc(var(--s4) + var(--safe-l));
  /* 侧栏不再是一块死黑：底部压一点品牌紫，和页面的彩色光晕同一色系 */
  background:linear-gradient(178deg,var(--nav) 12%,#141a35 72%,#1b1a3d);
  color:var(--nav-ink);
  overflow-y:auto;overscroll-behavior:contain;
}
.drawer-title{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:0 var(--s2) var(--s5)}
.brand{display:flex;align-items:center;gap:10px;font-size:var(--t-14);font-weight:700;letter-spacing:-.01em}
.brand-mark{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  /* 32px 的方块用 --r-sm：--r-md(12) 已经到 37.5%，看着像胶囊而不是圆角方块 */
  border-radius:var(--r-sm);background:var(--grad-brand);
  font-size:var(--t-12);font-weight:800;letter-spacing:.02em;color:#fff;
  box-shadow:var(--sh-brand-sm);
}

/* 账户卡：整块可点（button 重置成卡片外观）。
   未登录点它唤起登录、已登录进账号设置，右侧箭头说明「这里能进」。
   版面按「两行、左中右三段」重做：头像 / 身份+数值 / 箭头。
   尺寸是倒推出来的：侧栏最窄 198px，卡片内宽 ≈142px，
   减去头像 32 + 内边距 2×12 + 间距 10 + 箭头 10 ≈ 76px，剩 66px 给文字。
   所以这里字号一律 ≤13px、行数固定两行——多一行或大一号就会把手机号/积分挤成省略号，
   而「我登的是哪个号、还剩多少分」正是这张卡唯一要回答的两件事。 */
.drawer-user{
  display:flex;gap:10px;align-items:center;width:100%;box-sizing:border-box;
  padding:10px 12px;margin-bottom:var(--s4);
  border:1px solid var(--nav-line);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(148,163,205,.10),rgba(148,163,205,.03));
  color:inherit;text-align:left;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.drawer-user:hover{border-color:var(--nav-line-2);background:var(--nav-raise)}
.drawer-user:focus-visible{outline:2px solid var(--nav-accent);outline-offset:2px}
.drawer-user-go{margin-left:auto;flex:0 0 auto;color:var(--nav-dim);font-size:var(--t-17);font-style:normal;line-height:1}
.drawer-user:hover .drawer-user-go{color:var(--nav-accent)}
/* 头像方块：只放一个「人」形。之前头像里的「人 + 外圈」在 18px 上线条交叠，
   看着像图标糊了——外圈的语义由卡片本身承担，图形层面不需要再画一次。 */
.user-leading-icon{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:var(--r-full);background:var(--nav-raise);color:var(--nav-muted);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.user-leading-icon svg{width:16px;height:16px}
.is-logged-in .user-leading-icon{background:var(--nav-brand-soft);color:var(--nav-accent)}
.user-summary{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
/* 第一行：手机号（或「登录 / 注册」）+ 状态徽标。
   徽标跟随文字左对齐、不抢行：手机号是这一行的主体，必须完整可读。 */
.user-primary{display:flex;align-items:center;gap:6px;min-width:0}
.user-primary strong{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--t-13);font-weight:650;line-height:1.3;color:var(--nav-ink);
}
/* 访客态的主体是「登录 / 注册」这个动作，不是身份，所以用强调色：
   写成和手机号一样的白字会被当成信息而不是「能点」。 */
.drawer-user:not(.is-logged-in) .user-primary strong{color:var(--nav-accent);font-weight:700}
/* 第二行：访客给收益，登录后给积分。数字单独一个节点才能上强调色 + 等宽数字，
   刷新时不左右跳动。 */
.user-meta{display:flex;align-items:baseline;gap:4px;min-width:0;font-size:var(--t-11);color:var(--nav-dim);line-height:1.3}
.user-meta > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-meta-value{flex:0 0 auto;color:var(--nav-accent);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
/* 状态徽标：小圆点 + 文字，比纯色块安静，也不会在深色侧栏上抢视线。 */
.user-status-label{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;
  padding:1px 6px 1px 5px;border-radius:var(--r-full);
  background:rgba(148,163,205,.16);color:var(--nav-muted);
  font-size:var(--t-10);font-weight:600;letter-spacing:.02em;white-space:nowrap;
}
.user-status-label::before{content:"";width:5px;height:5px;border-radius:var(--r-full);background:currentColor;opacity:.85}
.is-logged-in .user-status-label{background:var(--nav-ok-soft);color:var(--nav-ok)}

/* 侧栏版面节奏：三层（分组标题 / 菜单项 / 分组间距）各降一档，理由是一样的 ——
   原来分组间距 20 + 项内边距 10 + 标题左右内边距 10 叠起来，
   每两组之间空得比菜单本身还高，视觉上像「几块互不相干的碎片」而不是一份菜单。
   现在：组间 18、项间 2、项内边距 9×10，菜单读起来是一条连续的列表。 */
.drawer-nav{display:flex;flex-direction:column;gap:var(--s4)}
.nav-group{display:flex;flex-direction:column;gap:2px}
/* 中文没有大小写，uppercase 对中文无效、只对英文分组名生效；
   letter-spacing 从 .14em 收到 .08em —— 中文标题字距放太开会散成一个个孤字。 */
.nav-group-title{
  padding:0 10px 6px;
  color:var(--nav-dim);font-size:var(--t-11);font-weight:650;
  letter-spacing:.08em;
}
.nav-item{
  position:relative;display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--nav-muted);font-size:var(--t-13);font-weight:600;text-align:left;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.nav-item::before{
  content:"";position:absolute;left:0;top:50%;translate:0 -50%;
  width:3px;height:0;border-radius:0 3px 3px 0;background:#7d97ff;
  transition:height var(--dur) var(--ease);
}
.nav-item:hover{background:var(--nav-hover);color:#e7ecf7}
.nav-item:active{background:var(--nav-raise)}
.nav-item.active{background:var(--nav-active);color:var(--nav-ink);font-weight:700}
.nav-item.active::before{height:18px}
.nav-icon{width:17px;height:17px;flex:0 0 auto}
.nav-item.active .nav-icon{color:var(--nav-accent)}
/* 侧栏里的键盘焦点环换成亮一档的 --nav-accent。
   全局那条用的是 --brand(#2f55f5)，压在 #0d1220 的深蓝侧栏上几乎没有对比，
   键盘用户切到菜单时看不出焦点在哪一项。 */
.drawer :focus-visible{outline-color:var(--nav-accent)}
/* 导航标签：侧栏只有 214px，最长的一项「联系微信客服」加上图标与箭头后
   必须还能省略而不是把箭头顶成第二行（或把按钮撑出侧栏）。
   :not(.nav-icon) 是为了不误伤下面的文字兜底图标——它同样是 .nav-item 的子 span。 */
.nav-item > span:not(.nav-icon){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 外链标记：贴右对齐，和抽屉里的「↗」是同一套语义（点了会离开本站）。
   靠 margin-left:auto 而不是 flex 布局，免得被上面的标签 span 吞掉。 */
.nav-external{
  margin-left:auto;flex:0 0 auto;font-style:normal;line-height:1;
  font-size:var(--t-11);color:var(--nav-dim);
  transition:color var(--dur) var(--ease);
}
.nav-item:hover .nav-external{color:var(--nav-accent)}
/* icon key 取不到 SVG 时的文字兜底（旧配置里的 ✦ ▣ ＋ ●）。
   按图标位给固定宽高并居中，否则「＋」这种单字符宽度只有 SVG 的一半，
   后面所有文字会比别的项左移，一眼看出这项是「拼」进来的。 */
.nav-icon-text{display:grid;place-items:center;font-size:var(--t-13);font-weight:700;line-height:1}

/* 侧栏页脚：赞助说明 + 合作商入口。
   文案与链接都由后台配置下发（app.js 的 config 回调写 #drawer-sponsor / #drawer-partner），
   HTML 里那份只是接口失败时的兜底——这类信息最常变，改一次就发版是最差的形态。
   margin-top:auto 把它顶到侧栏底部：菜单项多少都不会让它浮在中间。 */
.drawer-foot{
  margin-top:auto;padding-top:var(--s5);
  border-top:1px solid var(--nav-line);
  display:flex;flex-direction:column;gap:var(--s2);
}
.drawer-sponsor{margin:0;color:var(--nav-dim);font-size:var(--t-11);line-height:1.5}
/* 合作商入口：两行（小标 + 名称），箭头贴在右侧垂直居中。
   不用一行是因为 214px 侧栏减去内边距只剩约 160px，
   「合作商 · 优讯云企业级服务器」14 个字在 12px 下约 168px，必然折行且断在词中间。
   拆成两行后名称只有 9 个字（108px），任何缩放下都读得完整。 */
.drawer-partner{
  position:relative;
  display:flex;flex-direction:column;gap:1px;
  padding:8px 28px 8px 10px;
  border:1px solid var(--nav-line);border-radius:var(--r-sm);
  background:var(--nav-hover);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.drawer-partner-label{color:var(--nav-dim);font-size:var(--t-10);font-weight:600;letter-spacing:.06em}
.drawer-partner-name{
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--nav-muted);font-size:var(--t-12);font-weight:600;
  transition:color var(--dur) var(--ease);
}
.drawer-partner i{
  position:absolute;right:10px;top:50%;translate:0 -50%;
  font-style:normal;font-size:var(--t-11);color:var(--nav-dim);
  transition:color var(--dur) var(--ease);
}
.drawer-partner:hover{border-color:var(--nav-line-2);background:var(--nav-raise)}
.drawer-partner:hover .drawer-partner-name,.drawer-partner:hover i{color:var(--nav-accent)}

/* 主区：左边距必须与侧栏实际宽度一致，否则横屏刘海下会露出 47px 的缝或压掉内容 */
.app-main{margin-left:calc(var(--drawer-w) + var(--safe-l));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

/* 页面光晕层：三个 radial + 一条纵向渐变，垫在所有内容下面。
   为什么不写成 body{background-attachment:fixed}（2.5.0 之前的写法）：
     · iOS Safari 对 background-attachment:fixed 与多重背景的支持不完整，
       某些版本直接退化成「按元素尺寸铺」——body 在长页面里高达几千像素，
       于是三个 720×420 的 radial 光晕被分别锚到文档的最顶与最底，
       连那条纵向渐变也被拉长到整篇文档。桌面 1440 宽屏看到的是设计稿，
       手机上看到的却是完全另一套配色，这正是「换个页面就色彩混乱」的来源。
     · 固定伪元素在所有浏览器里都是「按视口铺」，没有降级分歧。
   用 .app-main::before 而不是 body::before：body 在移动端高度随内容伸缩，
   伪元素挂它下面会跟着长；而 .app-main 的伪元素被 position:fixed 拉出文档流，
   inset:0 就是视口本身，与页面长短无关。
   z-index:-1 让它落在所有内容之下、背景画布之上，既不需要给 .topbar / .workspace
   逐个抬层级，也不会挡住点击（再补一个 pointer-events:none 兜底）。 */
.app-main::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--page-grad);
  background-repeat:no-repeat;
}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:var(--s3);
  height:var(--topbar-h);padding:0 clamp(var(--s4),3vw,var(--s7));
  /* 顶栏是全宽贴边的，横屏时左右两侧都可能压在刘海/圆角上：
     左边是菜单按钮、右边是额度与头像，两边都得让出来。
     用 padding 而不是 margin —— 毛玻璃底要继续铺满整个屏幕宽度，
     露出的刘海区域由它盖住，只把内容推进安全区。 */
  padding-left:calc(clamp(var(--s4),3vw,var(--s7)) + var(--safe-l));
  padding-right:calc(clamp(var(--s4),3vw,var(--s7)) + var(--safe-r));
  border-bottom:1px solid var(--line);
  /* 毛玻璃 + 一层很淡的三色渐晕：滚动时光晕从底下透过去，顶栏不再是块死白 */
  background:
    linear-gradient(90deg,rgba(123,63,228,.14),rgba(47,85,245,.08) 46%,rgba(18,181,201,.14)),
    rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  backdrop-filter:blur(18px) saturate(1.35);
}
/* 顶栏底边一条渐变高光：替代纯灰分割线 */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(47,85,245,.4),rgba(123,63,228,.35),transparent);
}
.mobile-brand{display:none;font-size:var(--t-14);font-weight:700}
.top-actions{display:flex;align-items:center;gap:var(--s4);margin-left:auto}
.service-state{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-12)}
.service-text{color:var(--muted)}
.status-dot{width:6px;height:6px;border-radius:var(--r-full);background:var(--success);box-shadow:0 0 0 3px var(--success-soft)}
.balance-text{color:var(--ink-2);font-size:var(--t-13);font-weight:650}

.workspace{
  flex:1;width:100%;max-width:var(--content-max);margin:0 auto;
  padding:var(--s7) clamp(var(--s4),3vw,var(--s7)) calc(var(--s9) + var(--safe-b));
  /* 左右两侧各自让出安全区。因为 .workspace 靠 margin:auto 居中，
     加了 padding 之后内容会重新落在「安全区中间」——横屏刘海下
     卡片比右侧多缩进 47px 看着不对称，但那正是屏幕的物理可用区。 */
  padding-left:calc(clamp(var(--s4),3vw,var(--s7)) + var(--safe-l));
  padding-right:calc(clamp(var(--s4),3vw,var(--s7)) + var(--safe-r));
  display:flex;flex-direction:column;gap:var(--s5);
}
/* 页面标题由脚本写入，仅服务读屏与结构 */
.page-meta{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ---------------------------------------------------------------------------
 * 4. 通用组件
 * ------------------------------------------------------------------------ */

/* 主按钮 */
.create-button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:12px var(--s6);
  border:0;border-radius:var(--r-md);background:var(--grad-brand);
  color:#fff;font-size:var(--t-14);font-weight:700;letter-spacing:.01em;
  box-shadow:var(--sh-brand);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.create-button:hover{filter:brightness(1.06);box-shadow:0 14px 28px -10px rgba(47,85,245,.6)}
.create-button:active{transform:translateY(1px)}
/* 禁用态：转成中性灰面，而不是「把渐变调淡一点」。
   这条为什么必须存在：换号、兑换卡密、退出登录、登录这几处的提交按钮
   只设了 disabled、**没有**设 aria-busy，此前它们看起来和可点时一模一样 ——
   点下去毫无反应，用户会以为页面卡住，然后反复点。
   灰面 + not-allowed 与 .outline-button:disabled 是同一套语言。 */
.create-button:disabled{
  background:var(--surface-3);color:var(--soft);
  box-shadow:none;filter:none;transform:none;cursor:not-allowed;
}
/* aria-busy 只负责「锁住点击」，外观交给上面的 :disabled ——
   这两件事在本项目里永远同时发生（见 app.js 的 setCreateState）。 */
.create-button[aria-busy="true"]{pointer-events:none;cursor:progress}

/* 主按钮里的「预计消耗」药丸（只有生成按钮有，另两处复用 .create-button 的没有）。
   四个细节，缺一个都会出问题：
     · min-width + tabular-nums：数字从 2 变到 12.50 时按钮不跳宽。
       否则居中排版下「生成图片」这几个字会随数字长度左右平移，看着像在抖。
     · 半透明白底：跟着按钮的渐变底色走，将来换主题不用同步改这里。
     · 数字为 0 或还没算出来时整块隐藏（.hidden），不在按钮里留一个「0 积分」的噪音。
     · 余额不足时转成白底暖字 —— 这是「点下去才被后端拒绝」之前唯一能预警的位置。 */
.create-cost{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:62px;padding:2px 9px;
  border-radius:var(--r-full);background:rgba(255,255,255,.22);
  font-size:var(--t-12);font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:0;
}
/* 「生成图片」四个字不许折行：窄屏上药丸一挤，先折的应该是布局而不是这个词 */
.create-label{white-space:nowrap}
.create-cost[data-state="short"]{background:#fff;color:#a8480f}
.create-button[data-cost="short"]{box-shadow:0 12px 24px -12px rgba(168,72,15,.55)}

/* 次按钮 */
.outline-button{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:38px;padding:8px var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-2);font-size:var(--t-13);font-weight:650;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.outline-button:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
.outline-button:disabled{border-color:var(--line);color:var(--soft);background:var(--surface-2)}
.account-button{background:var(--ink);border-color:var(--ink);color:#fff;padding:9px var(--s5)}
.account-button:hover{background:var(--nav);border-color:var(--nav);color:#fff}

/* 纯图标按钮 */
.icon-button{
  display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-2);font-size:var(--t-17);line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.icon-button:hover{border-color:var(--brand-line);color:var(--brand)}
/* 关闭按钮只在抽屉形态（移动端）出现；桌面侧栏常驻，不存在「关闭」语义 */
.drawer-close{display:none;border-color:var(--nav-line);background:transparent;color:var(--nav-muted)}
.drawer-close:hover{border-color:var(--nav-line);background:var(--nav-hover);color:#fff}
.drawer .icon-button::before{margin:0}

/* 汉堡 */
.menu-button{display:none}
.hamburger{display:flex;flex-direction:column;gap:3.5px;width:16px}
.hamburger i{height:1.8px;border-radius:2px;background:currentColor}

/* 卡片外壳。
   注意 .panel-title **不在**这份名单里：它曾经被一起写进来，于是每个面板
   （我的作品 / 充值 / 账密页）顶部都多出一张独立白卡，压在真正的内容卡片上面，
   边框、圆角、顶部渐变线各有各的位置，看起来像两张卡片错位叠在一起。
   标题条就该是标题条：没有底、没有边、没有阴影。 */
.creator-card,.preview-card,.simple-panel,.account-section,.profile-hero{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-md);
}
/* 面板（我的作品 / 充值 / 记录 / 明细 / 个人中心）的内容内缩。
   内缩放在面板上而不是放进 .panel-title 的 padding，是因为标题条本身没有底/边，
   它只该负责纵向节奏；横向留白统一由面板给，内容才不会贴着卡片边框。
   这一条同时补上 2.5.0 留下的洞：那时 .panel-title 是张独立白卡，内容的贴边
   被那张卡自己的留白遮住了；把标题条还原成纯标题之后，「空态面板贴着边框」才露出来。 */
.simple-panel{padding:0 var(--s6) var(--s6)}
/* 卡片顶边一条 3px 品牌渐变：白卡在彩色页面上本来「没边」，
   加粗描边会显笨，一条渐变线就够说明这是一张卡而不是一片留白。 */
.creator-card::before,.preview-card::before,.simple-panel::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,rgba(123,63,228,.55),rgba(47,85,245,.5) 52%,rgba(18,181,201,.55));
}

/* 面板标题条：不是卡片，只是标题条（没有底、没有边、没有阴影）。
   见上面「卡片外壳」那段注释——它以前被误当成卡片，导致面板顶部多一张错位白卡。
   横向不留 padding：那一圈由 .simple-panel 统一给，标题才能和外层内容严格对齐。 */
.panel-title{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding:var(--s6) 0 var(--s4);
}
.panel-title h2{margin-top:2px}
.panel-title p{color:var(--muted);font-size:var(--t-13);margin-top:4px;max-width:56ch}
.card-label{
  display:inline-block;color:var(--brand);
  font-size:var(--t-11);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.title-leading-icon{display:inline-flex;width:15px;height:15px;margin-right:6px;vertical-align:-2px}
.title-leading-icon svg{width:100%;height:100%}

/* 空态与提示 */
.empty-panel{
  grid-column:1/-1;
  padding:var(--s8) var(--s5);border:1px dashed var(--brand-line);border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(123,63,228,.05),rgba(47,85,245,.05) 55%,rgba(18,181,201,.06));
  color:var(--muted);font-size:var(--t-13);text-align:center;
}
/* 文案与操作各占一行：此前按钮紧跟文案，挤在同一行里 */
.empty-panel > span{display:block}
.empty-panel .empty-icon svg{width:30px;height:30px;display:block;margin:0 auto var(--s2);opacity:.7}
/* 空态图标走 data-icon 的 mask 体系（与侧栏导航、按钮同一份 path）。
   为什么不继续内联 SVG：四张空态卡原本共用同一个「相册」图标，
   订单页、余额页、套餐页看起来一模一样，用户扫一眼分不清自己在哪一页。
   全局那条 [data-icon]::before 是 vertical-align 对齐用的 inline-block，
   这里要居中，必须显式改成 block 才能吃 margin:auto。 */
.empty-panel .empty-icon[data-icon]::before{display:block;width:30px;height:30px;margin:0 auto var(--s2);opacity:.7}
/* 加载态：与空态分成两种语言。
   虚线品牌框 + 图标是「这里空着」，加载中沿用它会让人当成空列表、不再等；
   换成实线中性框 + 图标呼吸，一眼看出「还在跑」。 */
.empty-panel.is-loading{border-style:solid;border-color:var(--line);background:var(--surface-2)}
.empty-panel.is-loading .empty-icon::before{animation:empty-breathe 1.4s var(--ease) infinite}
@keyframes empty-breathe{0%,100%{opacity:.3}50%{opacity:.85}}
.empty-action{margin-top:var(--s3)}
.hint{color:var(--muted);font-size:var(--t-12)}
.points-label{color:var(--brand);font-size:var(--t-12);font-weight:700}

/* 参数回显胶囊：预览卡与作品详情共用 */
.detail-chips{display:flex;flex-wrap:wrap;gap:6px}
.detail-chips span{
  padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-full);
  background:linear-gradient(180deg,var(--surface),var(--brand-soft));
  color:var(--ink-2);font-size:var(--t-12);
}

/* 轻提示 */
#app-toast{
  position:fixed;left:50%;bottom:calc(var(--s8) + var(--safe-b));translate:-50% 12px;z-index:120;
  max-width:min(88vw,420px);padding:11px var(--s5);
  border-radius:var(--r-md);background:rgba(14,19,34,.94);color:#fff;
  font-size:var(--t-13);box-shadow:var(--sh-lg);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),translate var(--dur) var(--ease);
}
#app-toast.show{opacity:1;translate:-50% 0}

/* ---------------------------------------------------------------------------
 * 5. 创作台
 * ------------------------------------------------------------------------ */
.creator-layout{display:grid;gap:var(--s5);align-items:start}
/* 并排规则只在宽屏生效，见文件末尾 1180 断点 */

.creator-card{overflow:hidden;container-type:inline-size}
.card-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  /* 头部压低一档：提示词框是首屏第一件要用的东西，
     标题占的每一像素都从「能看到几个字」里扣。 */
  padding:var(--s4) var(--s6) var(--s3);
}
.card-head h2{margin-top:4px}
.step-index{
  display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;
  border-radius:var(--r-sm);background:var(--grad-brand);color:#fff;
  font-size:var(--t-12);font-weight:800;
  box-shadow:var(--sh-brand-sm);
}
.sparkle{
  display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;
  border-radius:var(--r-md);
  background:linear-gradient(140deg,rgba(123,63,228,.16),rgba(47,85,245,.14) 55%,rgba(18,181,201,.16));
  color:var(--brand-2);font-size:var(--t-17);
}

/* 提示词 */
/* 底部外边距收到 --s2（原 --s4）：它下面紧跟的是「＋ 添加参考图」那一行轻量入口，
   两行之间原本留了 16 + 8 = 24px，再加上按钮自身的内边距，看上去像两个不相干的区块。
   收掉这段之后，参考图入口是贴着计数行的一条「紧接着的下一步」而不是新的一节。 */
.prompt-wrap{margin:0 var(--s6) var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
.prompt-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);color:var(--ink-2);font-size:var(--t-13);font-weight:650}
.clear-prompt{
  border:0;background:transparent;color:var(--soft);
  font-size:var(--t-12);padding:2px 4px;border-radius:var(--r-xs);
  transition:color var(--dur) var(--ease);
}
.clear-prompt:hover{color:var(--danger)}
.clear-prompt::before{margin-right:3px}

/* 提示词框：textarea 与内嵌的「快速风格」条共用一圈边框。
   焦点态由容器统一表达（:focus-within），textarea 自己不再画边框——
   两层焦点环叠在一起会让输入区看起来「抖动」。 */
.prompt-box{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--sh-xs);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.prompt-box:hover{border-color:#cfd8f0}
.prompt-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
/* 输入区高度：桌面 100px（约四行）。原先是 112px —— 首屏最贵的位置给了空白，
   而提示词真正开始写的时候用户会自己往下拉，宁可初始紧凑。
   手机上更紧（92px，见 560 断点），因为那里的首屏只有一次机会。 */
.prompt-box > #prompt{
  width:100%;min-height:100px;padding:var(--s4) var(--s4) var(--s3);
  border:0;border-radius:0;background:transparent;
  font-size:var(--t-14);line-height:1.65;
  /* 不再手动拉伸：拉伸手柄会落在「快速风格」条的分割线上，看着像抓手。
     长提示词走下面那颗「展开查看完整提示词」。 */
  resize:none;
}
.prompt-box > #prompt:hover{background:transparent;border:0}
.prompt-box > #prompt:focus{outline:none;border:0;background:transparent;box-shadow:none}
/* 提示词超长时折叠，避免撑爆首屏 */
.prompt-box > #prompt.prompt-collapsed{min-height:84px;max-height:84px;overflow:hidden}
.prompt-footer{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);color:var(--soft);font-size:var(--t-12)}
.prompt-footer strong{color:var(--muted);font-weight:650;font-variant-numeric:tabular-nums}
.expand-prompt{
  align-self:flex-start;border:0;background:transparent;color:var(--brand);
  font-size:var(--t-12);font-weight:650;padding:2px 0;
  transition:color var(--dur) var(--ease);
}
/* 全站唯一一处既没有悬停态也没有边框的文字按钮：它是一行可点的强调文字，
   鼠标扫过时毫无变化，用户不一定知道能点。加深一档即可。 */
.expand-prompt:hover{color:var(--brand-2)}

/* 参数区：只剩「生成配置」。快速风格已收进提示词框内 */
.option-toolbar{margin:0 var(--s6);display:flex;flex-direction:column}
.settings-section{padding:var(--s4) 0;border-top:1px solid var(--line-2)}
.section-caption{display:flex;align-items:center;margin-bottom:var(--s3)}
.section-caption span{color:var(--ink-2);font-size:var(--t-12);font-weight:700;letter-spacing:.06em}
.section-caption span::before{
  content:"";display:inline-block;width:3px;height:11px;margin-right:8px;
  border-radius:2px;background:var(--grad-brand);vertical-align:-1px;
}

/* 风格标签
   每个标签带一个彩色小圆点：风格是「选择」而不是「开关」，四个一模一样的
   灰药丸看不出彼此的区别，一排彩点让它们一眼可辨（颜色只做识别，不做语义）。 */
.tag-row{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-2);font-size:var(--t-13);font-weight:600;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.tag::before{
  content:"";width:7px;height:7px;flex:0 0 auto;border-radius:var(--r-full);
  background:var(--dot,var(--brand));opacity:.55;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.tag:nth-child(4n+1){--dot:var(--accent-rose)}
.tag:nth-child(4n+2){--dot:var(--accent-amber)}
.tag:nth-child(4n+3){--dot:var(--accent-cyan)}
.tag:nth-child(4n+4){--dot:var(--accent-violet)}
.tag:hover{border-color:var(--brand-line);color:var(--brand);background:linear-gradient(180deg,var(--surface),var(--brand-soft))}
.tag:hover::before{opacity:1}
.tag.active{
  border-color:var(--brand);font-weight:700;color:var(--brand);
  background:linear-gradient(135deg,rgba(123,63,228,.13),rgba(47,85,245,.15) 60%,rgba(18,181,201,.13));
  box-shadow:0 4px 12px -8px rgba(47,85,245,.9);
}
.tag.active::before{opacity:1;transform:scale(1.15)}

/* 生成配置网格
 * 六个控件一律各占一格（比例、格式、背景、质量、数量、模型）：
 * 桌面 3 列正好两行、平板 2 列、手机 3 列，不出现「某一行半空」的横条。
 * 比例原本用 .field-wide 独占整行，结果是：它的标签行横跨整卡，
 * 值「自动」被推到几千像素外的右边缘，按钮只占了左边一小撮，
 * 整节看上去和别的格子不是一套东西——所以并入网格，和邻居同宽同高。
 * 用容器查询而不是视口查询：并排时卡片变窄，列数要跟着卡片走而不是跟着窗口走。
 * 移动端的列数在文件末尾 560 断点里单独定（比例那一格在那里放宽成全行，理由见断点内注释）。 */
.settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
/* label 与 .field 是同一个东西的两种写法：能用 label 的地方用 label（点文字聚焦控件），
   比例是个按钮组不是表单控件，只能用 div.field 顶替。 */
.settings label,.settings .field{display:flex;flex-direction:column;gap:6px;min-width:0}
/* 标签行 = 「标签 + 当前值」，两者**贴着排**，不做两端对齐。
   曾经用 space-between 把当前值顶到列的最右边，结果在宽列里它离自己的标签 400px 远、
   却紧挨着右边那一列的标签：截图里读出来是「自动 格式」「2 积分 数量」——
   两个不相干的词组被排版成一句话。贴着排之后分组不可能读错。 */
.settings label > span,.field-label{
  display:flex;align-items:center;justify-content:flex-start;gap:6px;
  color:var(--muted);font-size:var(--t-12);font-weight:650;
}
/* 标签行里紧跟标签的当前值 / 价格。
   质量这一格必须让价格常显：原生 select 收起时只显示 option 文字，
   窄列里「自动 · 2积分」会被截成「自动 ...」，不点开就不知道要花多少积分。
   把价格提到标签行之后，任何列宽都读得到，也顺带省掉了 option 里的冗余文案。 */
.field-value{
  flex:0 0 auto;font-style:normal;font-weight:700;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.field-value.is-cost{color:var(--brand)}
/* 比例：图形按钮组，占网格里的一格。
   每个选项画一个真实宽高比的方框——「9:16 是竖的」这件事用形状表达只要 0.4 秒，
   用「手机 9:16」五个字去读要慢一倍，而六个选项并排时用户只会扫形状。
   按钮用 flex:1 1 32px 平分这一格的宽度：后台加减一个比例时自动重排，
   不用跟着改列数。
   32px 这个基准是量出来的：flex-wrap 决定换不换行时看的是 flex-basis 的和
   （不是缩完之后的实际宽度），6 × 36 + 5 × 6 = 246 —— 而生成画布展开后
   这一格只有 225~243px，于是「9:16」每次都掉到第二行，一行五个一行一个。
   32px + 4px 间距 = 212px，最窄的 225px 也放得下，六个形状始终横着可比。 */
.ratio-row{display:flex;flex-wrap:wrap;gap:4px}
.ratio-option{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  flex:1 1 32px;min-width:0;min-height:42px;padding:3px 3px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--muted);font-size:var(--t-11);font-weight:650;line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
/* 高度必须和 .settings select 的 min-height 对齐：
   两者在同一行网格里并排，差 4px 就会看出「这一格比旁边矮一截」。 */
.ratio-option:hover{border-color:var(--brand-line);color:var(--brand)}
.ratio-option.active{
  border-color:var(--brand);color:var(--brand);font-weight:700;
  background:linear-gradient(160deg,rgba(123,63,228,.1),rgba(47,85,245,.13));
}
.ratio-shape{
  display:block;flex:0 0 auto;
  border:1.5px solid currentColor;border-radius:2px;opacity:.72;
}
.ratio-option.active .ratio-shape{opacity:1}
.ratio-shape.is-auto{width:1.5em;height:1.5em;border-style:dashed;border-radius:3px}
.settings select{
  width:100%;min-height:42px;padding:9px var(--s3);
  font-size:var(--t-14);font-weight:600;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease);
}
.settings select:hover{border-color:var(--brand-line);background:linear-gradient(180deg,var(--surface),var(--brand-soft))}
.settings select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
@container (min-width:700px){
  .settings{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* 可折叠区块（参考图 / 快速风格，以及以后任何「标题 + 可选内容」的输入区块共用）
   ——一处定义，全站长一个样：标题 + 状态徽标 + 箭头，右侧挂一个可选的「清空」。
   两条不变量：
     · 收起态必须保留徽标。收起不等于「藏起来」，否则用户看不到当前状态，
       会以为自己的选择丢了，然后重复操作。
     · 「清空」的语义按区块而定（参考图=清空图片，风格=取消风格），
       但都与提示词的「清空」无关——几个独立动作，绝不能互相牵连。 */
.fold-block{margin:0 var(--s6);padding:var(--s3) 0;border-top:1px solid var(--line-2)}
.fold-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
/* 整个标题行都可点：按钮 flex:1 撑满剩余宽度，点徽标右边的空白也能展开，
   而不是只有文字那几个字是热区（移动端尤其明显）。 */
.fold-toggle{
  display:flex;align-items:center;gap:var(--s2);flex:1;min-width:0;
  min-height:38px;padding:var(--s1) 0;
  border:0;background:transparent;text-align:left;
  color:var(--ink-2);font-size:var(--t-13);font-weight:650;
  transition:color var(--dur) var(--ease);
}
.fold-toggle:hover{color:var(--brand)}
/* 标题可压缩、徽标不可压缩：窄屏时宁可省略标题文字，也不让徽标被挤掉 */
.fold-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fold-badge{
  flex:0 0 auto;
  padding:2px var(--s2);border-radius:var(--r-full);
  background:var(--surface-3);color:var(--soft);
  font-size:var(--t-11);font-weight:600;font-variant-numeric:tabular-nums;
}
.fold-badge.is-active{
  background:linear-gradient(135deg,rgba(123,63,228,.16),rgba(47,85,245,.18));
  color:var(--brand);border:1px solid var(--brand-line);padding:1px 7px;
}
/* 箭头用 CSS 画：为了一个小符号再引一份图标字体不划算 */
.fold-chevron{
  width:7px;height:7px;flex:0 0 auto;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--dur) var(--ease);
}
.fold-block[data-expanded="true"] .fold-chevron{transform:rotate(-135deg) translate(-1px,-1px)}
.fold-clear{
  flex:0 0 auto;
  padding:2px var(--s3);border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface);color:var(--muted);font-size:var(--t-12);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.fold-clear:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.fold-body{margin-top:var(--s3)}
.fold-hint{margin-top:var(--s1);color:var(--soft);font-size:var(--t-11)}

/* 快速风格：整块嵌在提示词框内（.prompt-box 内），折叠外观完全沿用上面的
   .fold-block，这里只覆盖「嵌在容器里」需要的四处：外边距归零、内边距改横向、
   顶部一条更淡的分隔线、展开时不再另加顶部间距。
   选择器带 .prompt-box 是为了压过同级的 .fold-block（文件顺序上它在后面）。 */
.prompt-box .style-block{
  margin:0;padding:0 var(--s4) 8px;
  border-top:1px solid var(--line-2);
  /* 一条自上而下的极淡品牌渐晕：把「风格」和上面的正文分出层次，
     又不至于像另一张卡片那样把它推出去 */
  background:linear-gradient(180deg,rgba(47,85,245,.05),rgba(47,85,245,0) 86%);
}
/* 嵌在框里的折叠条再压一档高度：它贴在输入框底边，本来就该「薄」 */
.prompt-box .style-block .fold-toggle{min-height:34px;font-size:var(--t-12)}
.prompt-box .style-block .fold-body{margin-top:2px}
.prompt-box .style-block .fold-hint{margin-top:var(--s2)}

/* 参考图区块专属：缩略图尺寸。张数上限与单张体积都走后台配置（在 JS 里），
   这里只管长相 */
.reference-block{--ref-size:68px}
/* 参考图空态：降级成一行轻量入口，而不是一整条折叠区块。
   一个压根没打算传图的用户占大多数，不该替「可能要用」的能力先付
   一条分割线 + 一排「未添加」徽标 + 44px 高度。
   加上 is-empty 之后：去掉顶部分割线与折叠箭头、徽标收起，
   标题前面补一个「+」，整行变成一个「点一下就能选图」的入口
   （点击行为在 app.js 的 reference-toggle 分支里，空态直接打开文件选择，
   少一次「先展开、再点加号」的往返）。
   一旦有图，app.js 会摘掉 is-empty，它立刻回到完整折叠区块——
   那时它承载了真实内容（缩略图行 + 张数 + 清空），值得那点高度。 */
.reference-block.is-empty{border-top:0;padding:0}
.reference-block.is-empty .fold-toggle{min-height:32px;color:var(--muted);font-size:var(--t-12)}
.reference-block.is-empty .fold-toggle:hover{color:var(--brand)}
.reference-block.is-empty .fold-title::before{
  content:"+";margin-right:6px;font-size:var(--t-15);font-weight:600;line-height:1;color:var(--brand);
}
.reference-block.is-empty .fold-badge,
.reference-block.is-empty .fold-chevron{display:none}
/* 横向滚动而不是换行：图再多区块高度也封顶，
   不会把「生成图片」按钮挤出屏幕（390px 下这是刚需）。 */
.reference-list{
  display:flex;align-items:flex-start;gap:var(--s3);
  margin:0;padding:2px 0 var(--s1);list-style:none;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  /* 横向滑到底后不再把滚动传给外层：否则手指一划就把整页带着动，
     甚至在 iOS 上触发「边缘返回」，用户只是想多看一张缩略图。 */
  overscroll-behavior-x:contain;
}
.reference-item{position:relative;flex:0 0 auto;cursor:grab}
.reference-item.is-dragging{cursor:grabbing;z-index:2}
.reference-thumb{
  position:relative;display:block;cursor:grab;
  /* 手势分工：横向归我（拖动排序），纵向交给浏览器（滚页面）。
     为什么不是 none：把横向拿走之后，手指在这块上的纵向划动也一起失效 ——
     页面纹丝不动，用户会以为页面卡住了（此前正是这样）。
     为什么不是默认值：那样横向划过缩略图会被当成「横向滚动这个列表」，
     我们只会收到 pointercancel、永远收不到 pointermove，拖动根本无从谈起。
     pan-y 正好把两件事分开：竖着划滚页面，横着划拖图片。
     代价是「横向滚动列表」不能再靠划缩略图（划间隙 / 加号仍然可以滚），
     换来的是拖动第一次尝试就生效 —— 手势判定见 app.js。 */
  touch-action:pan-y;
  /* 长按拖动时别让浏览器顺手选中/放大图片（iOS 的长按弹出菜单会直接打断拖动） */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  width:var(--ref-size);height:var(--ref-size);padding:0;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-3);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
/* 抓手光标写在缩略图上：全局 button 那条把按钮设成了 pointer，
   不覆盖的话「pointer + 能拖」是自相矛盾的两个信号。 */
.reference-item.is-dragging .reference-thumb{cursor:grabbing}
.reference-thumb img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
/* 拖动中把被拖那张「拎起来」：放大 6% + 品牌投影 + 品牌描边。
   缩略图 60~68px，只靠位置变化看不出哪张正在被拖（尤其手指还压着它）。 */
.reference-item.is-dragging .reference-thumb{
  border-color:var(--brand);
  box-shadow:0 10px 20px -8px rgba(47,85,245,.7);
  transform:scale(1.06);
}
/* 序号角标：左上角，与右上角的垃圾桶对角分开，互不误触。
   pointer-events:none —— 它是纯标注，不该在缩略图上再挖一块「点了没反应」的死区。 */
.reference-index{
  position:absolute;top:3px;left:3px;z-index:1;pointer-events:none;
  min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
  display:grid;place-items:center;
  border-radius:var(--r-full);background:rgba(14,20,36,.82);color:#fff;
  font-size:var(--t-10);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.reference-item.is-dragging .reference-index{background:var(--brand)}
.reference-thumb:hover{border-color:var(--brand-line)}
.reference-item[data-status="uploading"] .reference-thumb{opacity:.72}
.reference-item[data-status="failed"] .reference-thumb{border-color:var(--danger)}
.reference-item[data-status="failed"] .reference-thumb img{filter:grayscale(1);opacity:.35}
.reference-retry{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--danger);font-size:var(--t-11);font-weight:700;
}
/* 上传中：右下角一个小转圈，比整块遮罩轻 */
.reference-busy{
  position:absolute;right:5px;bottom:5px;width:12px;height:12px;
  border:1.6px solid rgba(255,255,255,.55);border-top-color:#fff;border-radius:50%;
  animation:reference-spin .7s linear infinite;
}
@keyframes reference-spin{to{transform:rotate(360deg)}}
/* 单个删除，常显在缩略图右上角。
   三个细节缺一不可：
     · 热区 ≥36px（视觉只有 20px），否则移动端必误触到「放大」；
     · 与缩略图按钮是同级元素，热区天然分离，不靠 stopPropagation；
     · 触屏常显、鼠标悬停才显（下面 @media (hover:hover)），否则用户根本不知道能删。

   位置改到「自己那张的角内」而不是溢出到图外：
   图与图之间只有 12px 间距，溢出的徽标骑在两图接缝上时，
   用户会以为那个图标属于右边那张图（点错就会删错图）。
   放角内还顺带免掉一个副作用——徽标不再溢出滚动容器，
   也就不需要为了「不被裁掉」而给列表加内边距。

   图标是垃圾桶（data-icon="trash"），跟序号角标左右分开：左上角读顺序、右上角管删除，
   两只手各在一角，不会因为「点第 1 张的右上角」误删到第 2 张。
   注意 z-index：序号角标在 .reference-item 上，这个按钮在缩略图之上，
   两个角标都要压住缩略图本身。

   —— 2.7.4：去掉圆形底盘、缩小到 20px。
   原来是一个 24px 的深色圆盘 + 白色描边，钉在 56~68px 的缩略图上——
   图片本来就小，圆盘又占了近 1/3 宽，还自带一圈白边（在白底卡片上像贴了张邮票），
   视觉重心被这个「删除」抢走，用户第一眼看的不是自己传的图。
   现在只剩一个 13px 的白色垃圾桶图标 + 投影：
     · 投影是必需的，不是装饰。白图标落在浅色照片（雪景、白墙）上会直接消失，
       drop-shadow 在任何底图上都能给出一圈暗边，比再垫一块底盘省地方得多；
     · 视觉 20px、热区 36px（::after 撑开的透明层）——「看着小、点得中」，
       手机上仍然不会误触到「放大」；
     · 悬停变红，是它作为「重动作」唯一的提示。 */
.reference-remove{
  position:absolute;top:3px;right:3px;width:20px;height:20px;z-index:1;
  display:grid;place-items:center;padding:0;
  border:0;background:transparent;color:#fff;
  /* 图标按 1em 画：字号就是图标尺寸。13px 在 20px 的按钮里留 3.5px 呼吸，
     视觉上与左上角 17px 的序号角标是同一分量。 */
  font-size:var(--t-13);line-height:1;
  filter:drop-shadow(0 1px 2px rgba(8,12,24,.9));
  transition:color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
/* 透明热区：视觉 20px，实际可点 36px（20 + 8×2）。
   删掉一个文件是不可逆的，宁可热区大一点也不要点不中。 */
.reference-remove::after{content:"";position:absolute;inset:-8px}
.reference-remove:hover{color:var(--danger)}
.reference-add{flex:0 0 auto}
.reference-add-button{
  width:var(--ref-size);height:var(--ref-size);padding:0;
  border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--muted);
  font-size:var(--t-20);font-weight:400;line-height:1;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.reference-add-button:hover:not(:disabled){border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
.reference-add-button:disabled{color:var(--soft);cursor:not-allowed}
/* 真正的 file input 藏起来：加号是唯一入口，避免出现两套上传语义 */
.reference-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  border:0;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%);
}

/* 操作条：提示在左、按钮在右，不再把主按钮拉成通栏色块 */
.create-action{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  padding:var(--s4) var(--s6) var(--s5);
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(47,85,245,.045),rgba(18,181,201,.05));
}
.create-action .hint{display:block}
.create-action .create-button{min-width:220px;flex:0 0 auto}
.create-action > *:first-child{min-width:0}

/* 创作画布 */
.preview-card{overflow:hidden;display:flex;flex-direction:column}
.preview-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:var(--s6) var(--s6) var(--s5);
}
.preview-head h2{margin-top:6px}
.preview-actions{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;justify-content:flex-end}
.preview-status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-full);
  background:var(--surface-3);color:var(--muted);
  font-size:var(--t-12);font-weight:650;white-space:nowrap;
}
.preview-status::before{content:"";width:6px;height:6px;border-radius:var(--r-full);background:currentColor}
.preview-status[data-state="loading"]{background:var(--brand-soft);color:var(--brand)}
.preview-status[data-state="success"]{background:var(--success-soft);color:var(--success)}
.preview-status[data-state="error"]{background:var(--danger-soft);color:var(--danger)}

.canvas-shell{
  position:relative;margin:0 var(--s6) var(--s6);border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--surface),#f3f6ff 52%,#f6f2fe);
  border:1px solid var(--line-2);
  overflow:hidden;
}
.canvas-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 78%);
}
.preview-empty{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  min-height:340px;padding:var(--s8) var(--s5);text-align:center;
}
.preview-orbit{
  display:grid;place-items:center;width:64px;height:64px;margin-bottom:var(--s2);
  border:1px solid var(--line);border-radius:var(--r-full);background:var(--surface);
}
.preview-icon{font-size:var(--t-20);color:var(--brand);line-height:1}
.preview-empty > strong{font-size:var(--t-15);font-weight:700;color:var(--ink)}
.preview-empty > span{font-size:var(--t-12);color:var(--muted);max-width:34ch}
/* 进度条只在真正生成时出现，静息态不显示 0% */
.progress-track,#progress-percent{display:none}
.preview-empty[data-loading="true"] .progress-track{display:block}
.preview-empty[data-loading="true"] #progress-percent{display:block}
/* 生成中：图标旋转、外环脉冲 */
.preview-empty[data-loading="true"] .preview-icon{animation:spin 2.4s linear infinite}
.preview-empty[data-loading="true"] .preview-orbit{animation:pulse 1.8s var(--ease) infinite}
@keyframes spin{to{rotate:360deg}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,85,245,.20)}50%{box-shadow:0 0 0 12px rgba(47,85,245,0)}}
.progress-track{
  width:min(280px,72%);height:6px;margin-top:var(--s3);
  border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;
}
#progress-bar{display:block;height:100%;width:0;border-radius:inherit;background:var(--grad-brand);transition:width .4s var(--ease)}
.progress-percent,#progress-percent{font-size:var(--t-12);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}

.preview-result{position:relative;z-index:1;padding:var(--s5)}
.preview-context{display:flex;flex-direction:column;gap:var(--s2);margin-bottom:var(--s4);text-align:left}
.preview-context strong{color:var(--muted);font-size:var(--t-12);font-weight:650}
#preview-prompt{
  color:var(--ink);font-size:var(--t-13);line-height:1.6;
  padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--s3)}
.result-grid img{width:100%;border-radius:var(--r-md);background:var(--surface-3);object-fit:contain;cursor:zoom-in}
.preview-tools{margin-top:var(--s4);display:flex;justify-content:flex-end}

/* ---------------------------------------------------------------------------
 * 6. 我的作品
 * ------------------------------------------------------------------------ */
.works-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--s4)}
.work-item{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-xs);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.work-item:hover{border-color:#d8dde8;box-shadow:var(--sh-sm)}
.work-item > img,
.work-item > .work-error,
.work-item > .work-loading{aspect-ratio:4/3;width:100%;background:var(--surface-3)}
.work-item > img{object-fit:cover;cursor:zoom-in}
.work-loading,.work-error{display:grid;place-items:center;color:var(--soft);font-size:var(--t-12)}
.work-error{color:var(--danger);background:var(--danger-soft)}
/* 卡片内容撑满剩余高度；空闲高度全部落在提示词与元信息之间（只有一个 margin-top:auto，
   写在 .work-meta 上）。两个元素都写 auto 会把空隙一分为二，元信息和按钮之间会莫名多出一条缝。 */
.work-content{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);flex:1}
.work-prompt{
  color:var(--ink);font-size:var(--t-13);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 积分与时间行也钉到底部：提示词被截成 1 行还是 2 行不该影响下面两块的位置，
   否则同一行里的卡片会出现「时间高一行、按钮同一行」这种半对齐的观感。 */
.work-meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);color:var(--muted);font-size:var(--t-12);margin-top:auto}
.work-meta span:first-child{color:var(--brand);font-weight:700}
.work-actions{display:flex;gap:6px;padding-top:var(--s3);border-top:1px solid var(--line-2)}
.work-actions button{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:1;
  min-height:32px;padding:5px var(--s2);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);
  color:var(--ink-2);font-size:var(--t-12);font-weight:600;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.work-actions button::before{font-size:var(--t-12);color:var(--soft)}
.work-actions .work-detail,.work-actions .work-download,.work-actions .work-delete{white-space:nowrap}
.work-actions button:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}
.work-actions .work-delete:hover{border-color:rgba(217,74,88,.4);color:var(--danger);background:var(--danger-soft)}
/* 正在删除的那张卡：按钮 disabled 后「删除中…」必须看起来是进行中而不是可点 */
.work-actions button:disabled{color:var(--soft);border-color:var(--line);background:var(--surface-2);cursor:not-allowed}
.works-more{display:flex;justify-content:center;margin-top:var(--s2)}
.works-more:empty{display:none}
.works-more-button{min-width:180px}

/* ---------------------------------------------------------------------------
 * 7. 充值中心
 * ------------------------------------------------------------------------ */
.recharge-panel-title{align-items:center}
.recharge-heading{display:flex;flex-direction:column;gap:2px}
.recharge-kicker{display:flex;align-items:center}
.recharge-back-button{flex:0 0 auto}
.recharge-mode{
  padding:var(--s5) var(--s6);margin-bottom:var(--s4);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-sm);
}
/* 自定义充值：左输入、右到账预览。
   金额和「能拿到多少积分」是同一件事的两面，分开放在两栏里，
   换算结果就有了自己的位置，而不是缩成一行小字压在按钮上方。
   两栏各自的**下限**是硬要求：
     左栏 ≥420px —— 快捷档位一行排五个要 412px（5×76 + 4×8），
       低于这个数就只能排 3 列甚至 1 列；
     右栏 ≥240px —— 再窄「当前余额 / 登录后查看」这一行会挤成两行。
   旧写法是 minmax(0,560px)：空间不够时它会先把左栏一路压到 0，
   实测 861px 视口下左栏只剩 167px，五个快捷档位竖着排了五行，
   而右边的预览卡还稳稳占着 320px。改成立下限 + 不够就整体叠成一栏（见 1080 断点）。 */
.normal-recharge-box{
  display:grid;grid-template-columns:minmax(420px,560px) minmax(240px,320px);
  justify-content:space-between;gap:var(--s5) var(--s6);align-items:start;
}
/* 左栏自成容器：快捷档位的列数按**左栏实际宽度**决定，而不是按视口。
   两栏布局下左栏比视口窄得多，用视口断点会在 1180 这种宽度上误判。 */
.custom-recharge-form{display:flex;flex-direction:column;gap:var(--s3);min-width:0;container-type:inline-size}
.amount-label{color:var(--ink-2);font-size:var(--t-13);font-weight:650}
/* 金额输入不是一个普通文本框：¥ 前缀、大号数字、元后缀三件套。
   聚焦态挂在容器上（:focus-within），光标进到数字里整块才亮。 */
.amount-field{
  display:flex;align-items:center;gap:var(--s2);
  padding:4px var(--s4);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.amount-field:focus-within{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px var(--brand-soft)}
.amount-prefix{flex:0 0 auto;color:var(--ink);font-size:var(--t-20);font-weight:700;line-height:1}
.amount-field input{
  flex:1;min-width:0;padding:10px 0;
  border:0;background:none;
  color:var(--ink);font-size:var(--t-26);font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.amount-field input:focus{outline:none;box-shadow:none}
/* 去掉 number 的原生上下箭头：它和右侧「元」挤在一起，还容易误触改金额；
   加减金额这件事已经交给下面的快捷档位。 */
.amount-field input::-webkit-outer-spin-button,
.amount-field input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.amount-field input{-moz-appearance:textfield;appearance:textfield}
.amount-unit{flex:0 0 auto;color:var(--muted);font-size:var(--t-13);font-weight:600}
/* 快捷档位：金额 + 该档到账积分两行。
   列数写死 3 或 5，不用 auto-fit：auto-fit 只保证「每格 ≥ min」，
   五个档位遇上 4 列就会排出「4 + 1」，末尾那个孤零零挂一行，看着像少了一档。
   3 列是放不下五个时的退路（3 + 2，两行等宽、左对齐，是齐的）。
   5 列的阈值 412px = 5×76 + 4×8 —— 76px 刚好容得下「2000 积分」小字。 */
.amount-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
@container (min-width:412px){
  .amount-chips{grid-template-columns:repeat(5,minmax(0,1fr))}
}
.amount-chip{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 6px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.amount-chip span{color:var(--ink-2);font-size:var(--t-13);font-weight:700;font-variant-numeric:tabular-nums}
.amount-chip small{color:var(--muted);font-size:var(--t-10);white-space:nowrap;font-variant-numeric:tabular-nums}
.amount-chip:hover{border-color:var(--brand-line);background:var(--brand-soft)}
.amount-chip.active{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 1px var(--brand)}
.amount-chip.active span{color:var(--brand)}
/* 到账预览卡：把「换算出多少」提到主视觉，余额和汇率各占一行做佐证。 */
.recharge-preview{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);
}
.preview-label{color:var(--muted);font-size:var(--t-12);font-weight:650}
.preview-points{display:flex;align-items:baseline;gap:6px;min-height:38px}
.preview-points b{
  color:var(--brand);font-size:var(--t-32);font-weight:800;line-height:1.1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
/* 还没填金额时把「0」压成弱色，表示这个数字还没被激活。
   这里**不用破折号**：32px 粗体的「—」在屏幕上是 20px 宽的一根实线，
   单看就是一条分隔线，读不出「等你填」的意思，反而像渲染坏了。
   0 是结算页的通用写法（应付 ¥0.00），语义清楚、也不会被误认成图形。 */
.preview-points b.is-idle{color:var(--muted);font-weight:700}
.preview-points small{color:var(--muted);font-size:var(--t-13);font-weight:600}
.preview-rate{color:var(--muted);font-size:var(--t-12)}
.preview-balance{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  margin-top:var(--s2);padding-top:var(--s3);border-top:1px dashed var(--line);
  color:var(--muted);font-size:var(--t-12);
}
.preview-balance strong{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.recharge-preview .create-button{width:100%;margin-top:var(--s3)}
.cta-amount{font-variant-numeric:tabular-nums}
/* 卡下的说明与状态：状态位为空时整块不占位——静态的「将实时更新」是噪音。 */
.recharge-foot{display:flex;flex-direction:column;gap:var(--s2)}
/* 支付后未到账时的「我已支付，立即查询」按钮 + 状态文案同一行：
   状态文案是这句按钮的结果回执，分两行会让人以为它们没关系。
   窄屏放不下就换行，按钮不压缩（它是有热区的可点元素，不能被挤扁）。 */
.recharge-foot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.recharge-foot-actions .outline-button{flex:0 0 auto}
.recharge-status:empty{display:none}
.package-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s4)}
.package-card{
  display:flex;flex-direction:column;gap:var(--s2);
  position:relative;
  padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-xs);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
/* 「推荐」角标：绝对定位钉在右上角。
   它原先是流内的一个 span，要独占一行 —— 被推荐的那张卡因此比左右两张整体矮一档，
   三张卡的名称与价格不在同一条水平线上（截图里 ¥50.00 明显比 ¥10.00 / ¥200.00 低）。
   抽出行内流之后，加不加角标都不影响卡片内部的对齐。 */
.package-card .recommend{
  position:absolute;top:var(--s3);right:var(--s3);
  padding:2px 9px;border-radius:var(--r-full);
  background:var(--grad-brand);color:#fff;font-size:var(--t-11);font-weight:700;letter-spacing:.02em;
}
.package-card:hover{border-color:var(--brand-line);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.package-card.recommend,.package-card.selected{border-color:var(--brand)}
.package-card.selected{background:var(--brand-soft)}
/* 正在创建订单时，其余套餐卡会被 disabled（见 app.js 的 isRechargeSubmitting）。
   没有这条规则的话它们照样会悬停上浮 + 描边高亮 ——
   「能点」的视觉暗示与「点不动」的事实正好相反，用户会反复戳同一张卡，
   还可能以为是自己没点准。 */
.package-card:disabled{opacity:.55;cursor:not-allowed}
.package-card:disabled:hover{border-color:var(--line);box-shadow:var(--sh-xs);transform:none}
.package-card strong{font-size:var(--t-20);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.package-card small{color:var(--muted);font-size:var(--t-12)}
.card-redeem{display:flex;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.card-redeem > div{display:flex;flex-direction:column;gap:6px;flex:1;min-width:200px}
.card-redeem span{color:var(--ink-2);font-size:var(--t-13);font-weight:650}
.card-redeem input{min-height:44px;padding:10px var(--s4);font-size:var(--t-14)}
.card-redeem input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.card-redeem-hint{margin-top:var(--s3)}
.payment-note{color:var(--muted);font-size:var(--t-12);line-height:1.6}
.recharge-status{margin-top:var(--s2)}

/* ---------------------------------------------------------------------------
 * 8. 个人中心 / 关于
 * ------------------------------------------------------------------------ */
/* 版面顺序：hero（身份 + 积分）→ 快捷入口 → 两栏（安全设置 / 账户概览）。
   这里不再叠一张外壳卡片——各段自己已经是卡片，用间距表达层次，
   多一层壳只会让「卡里套卡」再次出现。 */
.profile-box{display:flex;flex-direction:column;gap:var(--s4);margin-bottom:var(--s4)}

/* Hero：左身份、右积分。
   为什么合成一张卡：一块屏幕里「我是谁」和「我有多少分」是同一件事的两面
   （都来自同一个 /api/user/info），拆成两张卡会让第一屏出现两张同等重量的白卡，
   读者不知道先看哪张。 */
.profile-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);
  gap:var(--s5) var(--s6);padding:var(--s6);
  /* 左上品牌光 + 右下青光：这是全站唯一的「个人」页面，值得比普通白卡多一点身份感。
     底色仍然足够淡，否则右侧 32px 的积分数字会发灰。 */
  border-color:var(--brand-line);
  background:
    radial-gradient(520px 260px at 0% 0%,rgba(47,85,245,.10),transparent 64%),
    radial-gradient(420px 240px at 100% 120%,rgba(18,181,201,.12),transparent 62%),
    var(--surface);
}
.hero-row{display:flex;align-items:center;gap:var(--s4);min-width:0}
/* 身份 + 快捷入口合成左栏。桌面下这一栏宽 600px+，只放头像和手机号会空掉一大片 */
.hero-main{display:flex;flex-direction:column;gap:var(--s5);min-width:0}
.hero-avatar{
  display:grid;place-items:center;flex:0 0 auto;
  width:56px;height:56px;border-radius:var(--r-lg);
  background:var(--grad-brand);color:#fff;box-shadow:var(--sh-brand);
}
.hero-avatar::before{width:28px;height:28px}
.hero-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-kicker{display:flex;align-items:center;gap:var(--s2);color:var(--muted);font-size:var(--t-12);font-weight:650}
.hero-badge{
  padding:2px 8px;border-radius:var(--r-full);
  background:var(--success-soft);color:var(--success);
  font-size:var(--t-11);font-weight:700;
}
/* 手机号是本页的主语，20px + 等宽数字，且**不设 ellipsis**：
   11 位号码被截成 13812345… 会被当成正常结果，反而藏住布局问题。 */
.hero-phone{
  color:var(--ink);font-size:var(--t-20);font-weight:800;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.hero-meta{display:flex;align-items:center;gap:var(--s2);margin-top:2px;color:var(--muted);font-size:var(--t-12)}
.hero-meta b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}

/* 积分块：数字 + 占比条 + 图例。
   占比条是「总额由什么拼成」的唯一视觉答案，所以两段的宽度必须来自真实数值
   （JS 写 flex-grow），而不是写死的比例 —— 数据变了条子跟着变。 */
.hero-points{
  display:flex;flex-direction:column;gap:var(--s2);
  padding:var(--s4) var(--s5);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);
}
.hero-points-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.hero-points-head span{color:var(--ink-2);font-size:var(--t-13);font-weight:700}
.hero-points-head small{color:var(--muted);font-size:var(--t-12);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-points-value{display:flex;align-items:baseline;gap:6px}
.hero-points-value b{
  font-size:var(--t-32);font-weight:800;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
/* 0 分的时候弱化处理：满色的 32px「0.00」会跟真有余额时一样抢眼，
   而这一页的主语是手机号不是余额。与充值预览的空态同一套做法。 */
.hero-points-value b.is-idle{color:var(--muted);font-weight:700}
.hero-points-value small{color:var(--muted);font-size:var(--t-13)}
.points-track{display:flex;gap:3px;height:8px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
/* 总额为 0 时两段都隐藏，只留一条中性底色：0 宽的彩色条看起来像渲染失败 */
.points-track[data-empty="true"] .points-seg{display:none}
.points-seg{flex:0 1 auto;min-width:6px;border-radius:var(--r-full)}
.seg-free{background:linear-gradient(90deg,#12b5c9,#3fc9d8)}
.seg-paid{background:var(--grad-brand)}
.points-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none}
.points-legend li{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--t-12)}
.points-legend b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot-free{background:#12b5c9}
.dot-paid{background:var(--brand)}

/* 快捷入口：四格。四格而不是一列，是因为它们权重相同（都是「去看另一页」），
   竖直列表会让这一屏变成菜单的复制品。 */
.hero-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.profile-action{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:var(--s3) var(--s4);min-height:68px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-xs);text-align:left;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.profile-action::before{width:20px;height:20px;color:var(--brand);margin-bottom:2px}
.profile-action span{color:var(--ink);font-size:var(--t-13);font-weight:700}
.profile-action small{color:var(--muted);font-size:var(--t-11)}
.profile-action:hover{border-color:var(--brand-line);box-shadow:var(--sh-sm);transform:translateY(-2px)}

/* 两栏：左「要动手的」（换号表单），右「要查阅的」（账号事实）。
   查阅类不抢主栏宽度，是因为它只有四行、且答案一眼可读完。 */
.profile-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:var(--s4);align-items:start}
/* 两栏都是 grid item：min-width:0 才能让长手机号 / 长 UID 在窄栏里换行而不是撑破 */
.profile-columns > *{min-width:0}
.profile-facts{min-width:0}

/* 风险提示：这一段是「先读后果再动手」的那句话，所以给它颜色与边框，
   而不是像旧版一样混进 12px 灰字正文里。 */
.security-note{
  display:flex;gap:var(--s3);
  margin:var(--s4) var(--s5) 0;padding:var(--s3) var(--s4);
  border:1px solid rgba(226,147,47,.36);border-radius:var(--r-md);
  background:rgba(226,147,47,.09);
  color:var(--ink-2);font-size:var(--t-12);line-height:1.65;
}
.security-note .note-icon{flex:0 0 auto;color:var(--accent-amber);line-height:0}
.security-note .note-icon::before{width:16px;height:16px}
.security-note p{min-width:0}
.security-note strong{color:var(--ink);font-weight:750}

/* 账户概览：键值行。
   dd 右对齐 + 等宽数字，四行的值在同一竖直线上，扫读时不用来回找。 */
.fact-list{display:flex;flex-direction:column;margin:0;padding:var(--s2) var(--s5) var(--s3)}
.fact-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) 0;border-bottom:1px solid var(--line-2);
}
.fact-row:last-child{border-bottom:0}
.fact-row dt{flex:0 0 auto;color:var(--muted);font-size:var(--t-12)}
.fact-row dd{
  margin:0;min-width:0;color:var(--ink);font-size:var(--t-13);font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere;
}
.fact-badge{
  padding:2px 8px;border-radius:var(--r-full);
  background:var(--success-soft);color:var(--success);font-size:var(--t-11);font-weight:700;
}
.fact-foot{padding:0 var(--s5) var(--s5);color:var(--muted);font-size:var(--t-12);line-height:1.65}

/* 未登录引导：整页唯一的内容，所以它要比普通空态更「值钱」——
   图标底 + 标题 + 价值说明 + 三条要点 + 主按钮。
   限宽居中：面板本身有 1000px 宽，虚线框铺满会让中间那几行字显得像掉进空盒子里。 */
.profile-gate{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  max-width:720px;margin:0 auto;padding:var(--s8) var(--s6);text-align:center;
  border:1px dashed var(--brand-line);border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(47,85,245,.06),transparent 72%),var(--surface-2);
}
.gate-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-lg);background:var(--brand-soft);color:var(--brand)}
.gate-icon::before{width:28px;height:28px}
.profile-gate > strong{color:var(--ink);font-size:var(--t-17);font-weight:750}
.profile-gate > p{max-width:440px;color:var(--muted);font-size:var(--t-13);line-height:1.7}
.gate-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s4);list-style:none;color:var(--ink-2);font-size:var(--t-12)}
.gate-list li{display:flex;align-items:center;gap:6px}
.gate-list li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);opacity:.55}
.profile-gate .create-button{min-width:200px;margin-top:var(--s2)}

.account-section{overflow:hidden}
.account-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2);
}
/* 与 .card-label 同一套参数（11px / 700 / .14em / 全大写）。
   此前它是 .1em，与面板标题上的小标并排出现时会看出字距不一样 ——
   两处都是「卡内的小标」，不该有两种排版。颜色仍然不同：
   侧栏语境用 --soft，面板标题用 --brand。 */
.account-section-head span{color:var(--soft);font-size:var(--t-11);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.account-section-head h3{margin-top:2px}
.account-list{display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
.account-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--line-2);
  font-size:var(--t-13);
}
.account-row:last-child{border-bottom:0}
.account-row > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.account-row span{color:var(--muted);font-size:var(--t-12)}
.account-value{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.account-value.positive{color:var(--success)}
.account-value.negative{color:var(--danger)}
/* 数值下面的补充说明（时间 / 状态）固定用弱色。
   它会继承 .positive / .negative 的红绿，于是「−2 积分」下那一行日期也是红的、
   「+1000 积分」下面也是绿的 —— 日期没有正负，跟着变红会让人以为整行都出了问题。 */
.account-value small{color:var(--muted);font-size:var(--t-12);font-weight:600}
.account-list .empty-panel{margin:var(--s4);border:0;background:transparent}

/* 换号表单：说明（.security-note）已经在上面单独占了一块，
   所以表单只负责输入，不再重复解释。 */
.setting-form{
  display:flex;flex-direction:column;gap:var(--s4);
  padding:var(--s4) var(--s5) var(--s5);max-width:420px;
}
.setting-form > label{display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:var(--t-13);font-weight:650}
.setting-form input{min-height:46px;padding:10px var(--s4);font-size:var(--t-15)}
.setting-form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.setting-form .create-button{align-self:flex-start;min-width:180px}
/* 表单里的错误/成功提示不该把下面的内容顶来顶去 */
.setting-form .form-message{margin-top:calc(var(--s1) * -1)}

/* ---------------------------------------------------------------------------
 * 9. 覆盖层：抽屉遮罩 / 登录 / 作品详情 / 灯箱
 * ------------------------------------------------------------------------ */
.drawer-mask{position:fixed;inset:0;z-index:35;background:rgba(9,14,28,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

.modal{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  /* 浮层铺满整屏，四边都要让出安全区；这里用 padding 让 grid 的可用区本身就窄一圈。
     只加左右是不够的：横屏时屏幕只有 390px 高，底部 Home 指示条会压在弹窗底边上。 */
  padding:calc(var(--s5) + var(--safe-t)) calc(var(--s5) + var(--safe-r)) calc(var(--s5) + var(--safe-b)) calc(var(--s5) + var(--safe-l));
  background:rgba(9,14,28,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.modal-box{
  position:relative;width:100%;max-width:410px;overflow-y:auto;
  /* min(92vh,100%)：100% 拿到的是上面 padding 之后剩下的高度，也就是安全区之内的高度。
     竖屏时两者取到同一个值（不改变现状），横屏时由 100% 兜住底部那条 21px。 */
  max-height:92vh;max-height:min(92vh,100%);
  padding:var(--s7) var(--s6) var(--s5);
  border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-lg);
}
.modal-box .close{
  position:absolute;top:var(--s4);right:var(--s4);
  display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--muted);font-size:var(--t-17);line-height:1;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.modal-box .close:hover{background:var(--surface-3);color:var(--ink)}
.modal-brand{margin-bottom:var(--s2)}
.modal-box h2{margin-top:4px}
.modal-desc{color:var(--muted);font-size:var(--t-13);margin-bottom:var(--s5)}
.modal-box form{display:flex;flex-direction:column;gap:var(--s4)}
.modal-box form > label{display:flex;flex-direction:column;gap:6px;color:var(--ink-2);font-size:var(--t-13);font-weight:650}
.modal-box form input{min-height:46px;padding:10px var(--s4);font-size:var(--t-15)}
.modal-box form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.modal-box .create-button{width:100%;margin-top:var(--s1)}
.code-field{position:relative}
.code-input{display:flex;gap:var(--s2)}
.code-input input{flex:1;min-width:0}
.code-button{
  flex:0 0 auto;min-height:46px;padding:0 var(--s4);
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--ink-2);font-size:var(--t-13);font-weight:650;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.code-button:hover{border-color:var(--brand-line);color:var(--brand)}
.code-button:disabled{color:var(--soft);border-color:var(--line);cursor:not-allowed}
.form-message{min-height:18px;color:var(--muted);font-size:var(--t-12)}
.form-message[data-state="error"]{color:var(--danger)}
.form-message[data-state="success"]{color:var(--success)}

/* 作品详情 */
.detail-modal{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  /* 680px 宽的详情框在 700px 出头的横屏上会顶到刘海，必须让出安全区 */
  padding:calc(var(--s5) + var(--safe-t)) calc(var(--s5) + var(--safe-r)) calc(var(--s5) + var(--safe-b)) calc(var(--s5) + var(--safe-l));
  background:rgba(9,14,28,.68);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.detail-dialog{
  position:relative;width:100%;max-width:680px;overflow-y:auto;
  max-height:90vh;max-height:min(90vh,100%);
  padding:var(--s6);
  border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;gap:var(--s4);
}
.detail-dialog h3{color:var(--ink-2)}
.detail-close{
  position:absolute;top:var(--s4);right:var(--s4);
  display:grid;place-items:center;width:30px;height:30px;
  border:0;border-radius:var(--r-sm);background:var(--surface-2);
  color:var(--muted);font-size:var(--t-17);line-height:1;
}
.detail-close:hover{background:var(--surface-3);color:var(--ink)}
.detail-image-wrap{
  display:grid;place-items:center;min-height:200px;
  border-radius:var(--r-lg);background:var(--surface-3);overflow:hidden;
}
.detail-image-wrap img{width:100%;max-height:52vh;object-fit:contain}
.detail-zoom{align-self:flex-start}
.detail-prompt{
  padding:var(--s4);border-radius:var(--r-md);background:var(--surface-2);
  color:var(--ink-2);font-size:var(--t-13);line-height:1.65;white-space:pre-wrap;
}
.detail-points{color:var(--brand);font-size:var(--t-13);font-weight:700}
.detail-reference{display:flex;flex-direction:column;gap:var(--s2)}
.detail-reference strong{color:var(--muted);font-size:var(--t-12);font-weight:650}
.reference-image-wrap{
  display:grid;place-items:center;min-height:90px;max-width:220px;
  border-radius:var(--r-md);background:var(--surface-3);
  color:var(--soft);font-size:var(--t-12);overflow:hidden;
}
.reference-image-wrap img{object-fit:cover;border-radius:inherit}
/* 多张参考图：排成一行可换行的小缩略图，点开才是真正的大图 */
.detail-reference .reference-image-wrap.is-multi{display:flex;flex-wrap:wrap;gap:var(--s2);place-items:initial;max-width:100%}
.detail-reference .reference-thumb{position:relative;width:72px;height:72px;flex:0 0 auto;padding:0;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-3);overflow:hidden}
.detail-reference .reference-thumb:hover{border-color:var(--brand-line)}
.detail-download{align-self:flex-start}

/* 灯箱 */
.image-lightbox{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  /* 图片本身是 object-fit:contain，横屏下最宽的那条边会一直顶到刘海；
     让出安全区之后图只会变小一点，不会有一角被挖掉 */
  padding:calc(var(--s6) + var(--safe-t)) calc(var(--s6) + var(--safe-r)) calc(var(--s6) + var(--safe-b)) calc(var(--s6) + var(--safe-l));
  background:rgba(6,10,20,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out;
}
.image-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:var(--r-md)}
/* lightbox 内的加载/失败文案：默认 --soft 是浅底色系，直接放到深色遮罩上看不清 */
.image-lightbox .work-loading,.image-lightbox .work-error{color:#dfe6f3;font-size:var(--t-14)}
/* 关闭按钮钉在屏幕右上角：横屏刘海在右侧时，「×」会正好落在挖孔里，点不到也看不见 */
.lightbox-close{
  position:absolute;
  top:calc(var(--s5) + var(--safe-t));right:calc(var(--s5) + var(--safe-r));
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-full);
  background:rgba(255,255,255,.1);color:#fff;font-size:var(--t-20);line-height:1;
}
.lightbox-close:hover{background:rgba(255,255,255,.2)}

/* ---------------------------------------------------------------------------
 * 9.5 按压反馈（跨面板统一）
 *     只有主按钮曾有 :active，其余可点组件按下去毫无变化。
 *     在触屏上这一点尤其要紧：手指正好盖住元素本身，
 *     这 1px 的位移往往是「我按到了」的唯一反馈。
 *
 *     为什么这一段必须放在所有组件定义**之后**：
 *       :active 与 :hover 的权重同为 (0,2,0)，靠文件顺序决胜 ——
 *       写在前面会被各自组件后面的 :hover 全部盖掉。
 *     这一段只新增行为（并没有改写谁的取值），所以不违反「一条规则只定义一次」。
 * ------------------------------------------------------------------------ */
.outline-button:active,.icon-button:active,.amount-chip:active,.tag:active,
.ratio-option:active,.work-actions button:active,.fold-clear:active,
.code-button:active,.clear-prompt:active,.expand-prompt:active,
.reference-add-button:active,.reference-thumb:active,.reference-remove:active,
.modal-box .close:active,.detail-close:active,.lightbox-close:active{transform:translateY(1px)}
/* 带悬停上浮的卡片：按下时归位到 0 而不是再往下 1px ——
   否则从 -2px 的悬停态跳到 +1px，会有 3px 的落差，像整块塌下去。 */
.profile-action:active,.package-card:active{transform:translateY(0)}

/* ---------------------------------------------------------------------------
 * 10. 响应式
 *     四个断点，各有唯一职责，不叠加：
 *       1320 创作台并排 / 1024 侧栏收窄 / 860 侧栏改抽屉 / 560 移动端紧凑
 *     移动端的重点是「一屏之内把事情做完」：
 *     生成配置一行三个（与桌面同构，只是压缩尺寸）、主按钮通栏、
 *     所有可点元素热区 ≥ 40px、底部留出 iOS 安全区。
 *
 *     安全区（--safe-*）有意不在这里，而是写在各自的基础规则里：
 *     竖屏与桌面下 insets 全是 0px，加了不改变任何尺寸，
 *     所以「横屏刘海」不需要第五个断点，也不需要 orientation 媒体查询。
 *     需要补的地方只有一类：**贴屏幕边的**元素（顶栏 / 侧栏 / 页面容器 /
 *     灯箱与弹窗 / 浮层右上角的关闭按钮）。卡片内部的东西跟着容器走，不用管。
 * ------------------------------------------------------------------------ */
@media (min-width:1320px){
  .creator-layout.has-canvas{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
}

@media (max-width:1024px){
  :root{--drawer-w:198px}
  /* 个人中心在 1024 以下全部压成一栏。
     这一段（861–1024）侧栏虽然收窄到 198px，主区却只有 620–790px：
     身份区 + 积分块并排会把积分数字挤到换行；安全设置与账户概览同理。 */
  .profile-hero{grid-template-columns:minmax(0,1fr)}
  .profile-columns{grid-template-columns:minmax(0,1fr)}
}

/* 861–1024：侧栏是「窄侧栏」形态（198px）而不是抽屉，账户卡被挤得最狠的一段。
   卡片内宽 ≈142px，扣掉头像 32 + 间距 10 + 箭头 10 ≈ 90px 是文字区，
   而 13px 的 11 位号码要 82px，只剩 8px 余量，稍微换个字体就会挤出省略号；
   降到 12px（约 76px）留出 14px 余量，仍完整可读。
   只针对这一段：≤860 时侧栏变成 266px 的抽屉，宽度富余，没必要跟着缩字号。 */
@media (min-width:861px) and (max-width:1024px){
  .drawer-user .user-primary strong{font-size:var(--t-12)}
}

/* 1080 以下：充值的两栏叠成一栏。
   阈值是算出来的，不是拍的：两栏各自的下限（420 + 240）加间距 32 = 692，
   而容器宽度 ≈ 视口 − 352（侧栏 198 / 内边距），692 + 352 ≈ 1044，
   往上留一档余量取 1080。低于它硬撑两栏，左栏就会被压到 200px 以下。 */
@media (max-width:1080px){
  .normal-recharge-box{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  /* 叠起来之后预览卡会横跨整个卡片，「立即充值」变成一条通栏色块。
     限宽让它保持和输入区一个量级，读者也不会以为它是页面级主按钮。 */
  .recharge-preview{max-width:520px}
}

/* 860 以下：侧栏变抽屉，主区不再让位 */
@media (max-width:860px){
  /* 抽屉形态下可以宽一些：它是浮层、盖住内容，不需要为内容区让路 */
  :root{--drawer-w:266px}
  .drawer{
    z-index:45;translate:-100% 0;visibility:hidden;
    transition:translate .26s var(--ease),visibility .26s;
    box-shadow:0 0 60px rgba(4,8,18,.5);
    /* 抽屉滚到底部时，「关于优讯云」不该压在 iPhone 的 Home 指示条上 */
    padding-bottom:calc(var(--s4) + var(--safe-b));
  }
  .drawer.open{translate:0 0;visibility:visible}
  /* JS toggleDrawer 会给 body 加 drawer-open。移动端抽屉展开时锁住背景滚动，
     否则手指在遮罩上滑动会穿透到底层页面（JS 里写了这个类，此前 CSS 一直缺规则）。 */
  body.drawer-open{overflow:hidden}
  .drawer-close{display:grid}
  .app-main{margin-left:0}
  .menu-button{display:grid}
  .mobile-brand{display:block}
  .service-state{display:none}
  /* 注意：这里用的是 padding 简写，会把上面的 padding-left/right 一起重置 ——
     所以安全区必须在本条后面重新声明一次。漏掉的后果不会报错，
     只是横屏刘海下卡片仍然贴着挖孔（第一版就是这么错的，靠整图对比才发现）。 */
  .workspace{
    padding:var(--s5) var(--s4) calc(var(--s8) + var(--safe-b));
    padding-left:calc(var(--s4) + var(--safe-l));
    padding-right:calc(var(--s4) + var(--safe-r));
  }
  .card-head,.preview-head{padding:var(--s5) var(--s5) var(--s4)}
  .prompt-wrap{margin:0 var(--s5) var(--s2)}
  .option-toolbar{margin:0 var(--s5)}
  .create-action{padding:var(--s4) var(--s5) var(--s5)}
  .canvas-shell{margin:0 var(--s5) var(--s5)}
  .panel-title{padding:var(--s5) 0 var(--s4)}
  .simple-panel{padding:0 var(--s5) var(--s5)}
  .recharge-mode{padding:var(--s5)}
  .works-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}

/* 560 以下：移动端紧凑版。这里改的都是「手机才需要」的事，
   断点以上的规则一律不动，避免为了修手机把桌面改坏。 */
@media (max-width:560px){
  h2{font-size:var(--t-20)}
  /* 金额字号降一档、预览大字降一档：360px 上 20px 的金额已经够大，
     再大就会把「元」后缀挤出输入框。
     快捷档位在手机上固定 5 列（理由见下面 .amount-chips 那一段），
     不要再靠 auto-fit 自己决定 —— 它在这里只会得出「4 + 1」。 */
  .amount-field input{font-size:var(--t-20)}
  .preview-points b{font-size:var(--t-26)}
  /* 五个档位必须排成一行：auto-fit + minmax(92px) 在 360~430px 上只放得下 4 个，
     第 5 个「¥200」孤零零掉到第二行，看着像少了一档，五档也没法横着比价。
     改成固定 5 列、收内边距之后，360px 上每格约 50px、9~10px 的「2000 积分」仍读得清。 */
  .amount-chips{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
  .amount-chip{padding:8px 2px}
  .amount-chip span{font-size:var(--t-12)}
  .amount-chip small{font-size:var(--t-10)}
  /* 页面左右留白收到 12px：3 列下拉在 360px 宽的机器上全靠这 8px 撑住。
     安全区仍然要加——分屏/横屏的小尺寸窗口里它可能不为 0 */
  .workspace{
    padding:var(--s3) var(--s3) calc(var(--s7) + var(--safe-b));
    padding-left:calc(var(--s3) + var(--safe-l));
    padding-right:calc(var(--s3) + var(--safe-r));
  }
  .card-head{padding:var(--s4) var(--s4) var(--s3)}
  .prompt-wrap{margin:0 var(--s4) var(--s2)}
  .option-toolbar{margin:0 var(--s4)}
  .create-action{padding:var(--s4) var(--s4) var(--s5)}
  .canvas-shell{margin:0 var(--s4) var(--s4)}
  .panel-title{padding:var(--s4) 0 var(--s3)}
  .simple-panel{padding:0 var(--s4) var(--s4)}
  .recharge-mode{padding:var(--s4)}
  .account-section-head{padding:var(--s3) var(--s4)}
  .account-row{padding:var(--s3) var(--s4)}
  .fold-block{margin:0 var(--s4);padding:var(--s3) 0}
  .prompt-box .style-block{padding:0 var(--s3) var(--s2)}

  /* 提示词框：手机上首屏最贵，输入区压到 92px（够写两三行）。
     字号必须是 16px：iOS Safari 在字号 <16px 的输入框获得焦点时会自动放大整页，
     而且退出聚焦后不还原 —— 用户以为页面"卡在放大状态"。
     这条红线只针对会弹出键盘的 textarea / input，不含 select（select 走原生选择器，不缩放），
     所以下面三个下拉仍能保持 12px 换取「一行三个」。 */
  .prompt-box > #prompt{padding:var(--s3) var(--s3) var(--s2);min-height:92px;font-size:16px}
  .prompt-box > #prompt.prompt-collapsed{min-height:72px;max-height:72px}

  /* 生成配置：比例独占整行，其余五个两行排完。
     网格开 6 列而不是 3 列，是为了让最后一行（数量 / 模型）能各占 1.5 格：
     用 3 列时「数量 模型」只能各占 1/3，右边空出整整一格 ——
     上面那行（格式 背景 质量）是满的，下面这行突然缺一角，看着像少了一个控件。
     6 列之后：普通格子 span 2（= 1/3），.field-half 的格子 span 3（= 1/2），
     于是最后一行的右边缘与上一行齐平，两块读起来是同一个矩形。
     （数量 / 模型 是宽度最不敏感的两个控件：一个是「1 张 / 2 张 / 4 张」，
     一个是模型名，宽一点反而更好读。）
     压缩的策略仍是「砍箭头留白、砍内边距、字号降一档」，不靠换行。 */
  .settings{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
  .settings > *{grid-column:span 2}
  .settings label,.settings .field{gap:5px}
  .settings label > span,.field-label{font-size:var(--t-11);letter-spacing:0}
  .settings select{
    min-height:38px;padding:8px 24px 8px 9px;
    font-size:var(--t-12);
    text-overflow:ellipsis;
    background-position:right 6px center;background-size:13px;
  }
  /* 比例按钮在手机上放宽成整行：6 个选项塞进 1/3 格只剩 30px 左右，
     手指按不准（可点目标要 ≥40px）；放开整行后 6 个各约 46px，
     一行放得下、也点得中。高度跟着下拉一起压到 38px —— 两者仍然一样高，
     不会因为「比例是整行、其他是一格」就在高度上脱节。 */
  .field-ratio{grid-column:1/-1}
  .settings > .field-half{grid-column:span 3}
  .ratio-row{gap:5px}
  .ratio-option{min-height:38px;padding:3px 4px;font-size:var(--t-10)}
  .settings-section{padding:var(--s3) 0}

  /* 热区：手指比鼠标粗，凡是「点了会改变结果」的元素一律抬到 ≥40px。
     空态参考图那行是例外中的例外：它是个「可选的次要入口」，
     抬到 44px 会让「没传图的人」白付一行高度，所以只给 36px（仍在可点范围）。 */
  .fold-toggle{min-height:44px}
  .reference-block.is-empty .fold-toggle{min-height:36px;font-size:var(--t-12)}
  .drawer-user{min-height:56px}
  /* 个人中心的手机端：头像与积分降一档、快捷入口两列、提示卡收边距。
     手机号保持 17px —— 它是这一页的主语，再压就跟正文一样重了。 */
  .profile-hero{padding:var(--s4);gap:var(--s4)}
  .hero-avatar{width:44px;height:44px;border-radius:var(--r-md)}
  .hero-avatar::before{width:22px;height:22px}
  .hero-phone{font-size:var(--t-17);letter-spacing:0}
  .hero-points{padding:var(--s3) var(--s4)}
  .hero-points-value b{font-size:var(--t-26)}
  .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .profile-action{padding:var(--s3);min-height:64px}
  .security-note{margin:var(--s3) var(--s4) 0}
  .fact-list{padding:var(--s1) var(--s4) var(--s3)}
  .fact-foot{padding:0 var(--s4) var(--s4)}
  .profile-gate{padding:var(--s6) var(--s4)}
  .setting-form{padding:0 var(--s4) var(--s4)}
  .setting-form .create-button{width:100%;align-self:stretch}
  .tag{min-height:42px;padding:8px var(--s3);font-size:var(--t-12);justify-content:center}
  .tag-row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
  .reference-block{--ref-size:60px}
  .reference-remove{top:2px;right:2px}
  .fold-clear{padding:5px var(--s3)}
  /* 触屏热区：下面三个是「无边框的文字按钮 / 小胶囊」，桌面下高度只有 20px 上下，
     手指点不中 —— 而它们改的都是要生效的动作（清空提示词、展开提示词、取消风格）。
     抬到 36px，与「添加参考图」那行空态入口同一量级：
     同属「次要动作」，不该占 44px，但必须点得中。 */
  .clear-prompt,.expand-prompt,.fold-clear{min-height:36px;display:inline-flex;align-items:center}
  .icon-button{width:38px;height:38px}
  .outline-button{min-height:40px}
  .work-actions button{min-height:40px}
  .code-button,.modal-box form input{min-height:48px}
  .nav-item{min-height:44px;padding:11px var(--s3)}
  .modal-box .close,.detail-close{width:38px;height:38px}

  /* 钱包相关的输入框同样卡 16px 红线（登录验证码 / 充值金额 / 卡密） */
  .modal-box form input,
  .normal-recharge-box input,
  .card-redeem input{font-size:16px}
  .create-button{min-height:52px;font-size:var(--t-15)}
  /* 按钮里的药丸跟着降一档，避免在 360px 上把「生成图片」挤到换行 */
  .create-cost{min-width:56px;font-size:var(--t-11)}

  /* 操作区：说明挪到按钮上方、按钮贴底。
     两个原因——拇指够得着主按钮（竖屏下半屏才顺手），
     而且读的顺序变成「先说会发生什么，再点」，比反过来顺。 */
  .create-action{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .create-action .create-button{width:100%;min-width:0;order:2}
  .create-action > .hint{order:1;text-align:center}
  .preview-empty{min-height:260px}
  .works-list{grid-template-columns:1fr}
  .top-actions{gap:var(--s2);min-width:0}
  .detail-dialog{padding:var(--s5)}
  /* 顶栏在窄屏必须全部单行：此前站名、「未登录」、登录按钮各自折成两行 */
  .topbar{gap:var(--s2)}
  .menu-button,.account-button,.balance-text{flex:0 0 auto;white-space:nowrap}
  .mobile-brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .account-button{padding:8px var(--s4)}
}

/* 430 以下：额度文案让位给品牌与登录入口，积分可去个人中心看 */
@media (max-width:430px){
  .balance-text{display:none}
}

/* 360 以下：参考图缩略图再收一档。
   4 个方块（3 张图 + 加号）配 12px 间距在 320px 上要 276px，
   而这一行的可用宽度只有 264px（320 − 页面留白 24 − 区块外边距 32）——
   差 12px 就横向溢出。
   缩略图上的横向手势被拖动排序拿走了（touch-action:pan-y），
   于是「划缩略图来滚这个横向列表」这条路本来也没了。
   两条合起来的结论：这个宽度下必须让 3 张 + 加号真的排得下，
   而不是「排不下就滚」。（56px + 8px 间距 = 248px，留 16px 余量。） */
@media (max-width:360px){
  .reference-block{--ref-size:56px}
  .reference-list{gap:var(--s2)}
}

/* 指向设备用悬停揭示减号，不把「删除」这个重动作常常晒在脸上 */
@media (hover:hover){
  .reference-remove{opacity:0;pointer-events:none}
  .reference-item:hover .reference-remove,
  .reference-remove:focus-visible{opacity:1;pointer-events:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;
  }
  html{scroll-behavior:auto}
}