/* ══════════════════════════════════════════════════════════════════
 * 🎨 T44 全站统一设计系统 —— 完整复刻 image2pro.top 的 57 个 token
 *
 * 这份 token 表是从对标站 :root 逐条提取的（见 .tmp-ref/ref-tokens.txt），
 * 不是猜的。所有页面（首页/模型广场/灵感广场/画布/控制台）统一引用，
 * 保证视觉语言绝对一致。
 *
 * 使用方式：任何新组件只准引用这些变量，禁止临时发明颜色/阴影/缓动。
 * ══════════════════════════════════════════════════════════════════ */

:root{
  /* ---------- 文字层级（4 级，全部基于 #1a1a1a 加透明度）---------- */
  --ink-1:#1a1a1a;                    /* 一级：标题、正文 */
  --ink-2:rgba(26,26,26,.68);         /* 二级：副标题、说明 */
  --ink-3:rgba(26,26,26,.46);         /* 三级：提示、时间戳 */
  --ink-4:rgba(26,26,26,.28);         /* 四级：占位符、极弱 */

  /* ---------- 品牌色（陶土橙，唯一强调色）---------- */
  --accent:#cd6f47;
  --accent-soft:rgba(205,111,71,.12);
  --accent-line:rgba(205,111,71,.28);
  --accent-fill:linear-gradient(145deg,#e08b62,#cd6f47 55%,#a8532f);
  --accent-btn-shadow:0 6px 18px rgba(205,111,71,.30),inset 0 1px 0 rgba(255,255,255,.32);

  /* ---------- 金色（次强调，用于积分/会员）---------- */
  --gold:#96650d;
  --gold-soft:rgba(199,144,24,.12);
  --gold-line:rgba(199,144,24,.26);

  /* ---------- 语义色 ---------- */
  --danger:#c23a52;
  --danger-soft:rgba(194,58,82,.09);
  --danger-line:rgba(194,58,82,.20);

  /* ---------- 线条 ---------- */
  --hairline:rgba(26,26,26,.12);

  /* ---------- 液态玻璃（核心视觉，逐条抄自对标站）---------- */
  --glass-bg-layers:
    linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 30%),
    radial-gradient(110% 70% at 18% -10%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 42%),
    radial-gradient(90% 55% at 108% 118%,rgba(214,185,147,.10) 0%,rgba(214,185,147,0) 55%),
    linear-gradient(165deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.10) 100%);
  --glass-border:rgba(255,255,255,.62);
  --glass-blur:blur(6px) saturate(160%);
  --glass-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 1.5px 4px rgba(255,255,255,.16),
    inset 1.5px 1px 0 rgba(130,210,255,.22),
    inset -1.5px -1px 0 rgba(255,175,205,.20),
    inset 0 -1px 0 rgba(120,100,160,.12),
    0 20px 50px rgba(60,45,110,.20),
    0 5px 16px rgba(60,45,110,.12);

  /* ---------- 卡片阴影 ---------- */
  --card-shadow:0 20px 52px rgba(40,32,20,.12),0 4px 14px rgba(40,32,20,.07);

  /* ---------- 果冻动效（三档缓动）---------- */
  --jelly-ease:cubic-bezier(.22,1.4,.36,1);      /* 弹入 */
  --jelly-ease-soft:cubic-bezier(.24,1.6,.35,1); /* hover 上浮 */
  --jelly-ease-tick:cubic-bezier(.3,1.6,.5,1);   /* 打勾 */
  --jelly-dur:.62s;
  --jelly-dur-fast:.45s;

  /* ---------- 深色玻璃（用于悬浮元素）---------- */
  --jelly-glass-bg:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.035) 55%,rgba(255,255,255,.10));
  --jelly-glass-border:rgba(255,255,255,.42);
  --jelly-glass-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.62),
    inset 0 2px 5px rgba(255,255,255,.20),
    inset 1.5px 0 0 rgba(120,210,255,.20),
    inset -1.5px 0 0 rgba(255,170,210,.16),
    inset 0 -1px 0 rgba(0,0,0,.14),
    inset 0 0 22px rgba(150,170,255,.09),
    0 6px 22px rgba(0,0,0,.36);

  /* ---------- 字体 ---------- */
  --font-serif:Georgia,"Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,"Courier New",monospace;
}

/* ══════════════════════════════════════════════════════════════════
 * 通用组件类 —— 全站可用，统一引用上面的 token
 * ══════════════════════════════════════════════════════════════════ */

/* 液态玻璃容器 */
.lg-glass{
  background:var(--glass-bg-layers),#fdfbf8;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  box-shadow:var(--glass-shadow);
}

/* 卡片 */
.lg-card{
  background:#fffdfa;
  border:1px solid var(--hairline);
  border-radius:18px;
  box-shadow:var(--card-shadow);
}

/* 胶囊按钮 */
.lg-pill{
  display:inline-flex; align-items:center; gap:7px;
  height:34px; padding:0 15px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-layers),#fdfbf8;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow);
  color:var(--ink-1);
  font-size:12.5px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--jelly-dur-fast) var(--jelly-ease-soft), box-shadow .3s;
}
.lg-pill:hover{transform:translateY(-2px)}
.lg-pill:active{transform:translateY(0) scale(.97)}

/* 主按钮（橙色）*/
.lg-btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 20px;
  border-radius:999px; border:0;
  background:var(--accent-fill);
  color:#fff;
  font-size:13px; font-weight:700; line-height:1;
  cursor:pointer;
  box-shadow:var(--accent-btn-shadow);
  transition:transform var(--jelly-dur-fast) var(--jelly-ease-soft), filter .2s;
}
.lg-btn-primary:hover{transform:translateY(-2px); filter:brightness(1.05)}
.lg-btn-primary:active{transform:translateY(0) scale(.97)}

/* 次按钮（玻璃）*/
.lg-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:40px; padding:0 20px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-layers),#fdfbf8;
  backdrop-filter:var(--glass-blur);
  color:var(--ink-2);
  font-size:13px; font-weight:600; line-height:1;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(120,100,160,.08);
  transition:transform var(--jelly-dur-fast) var(--jelly-ease-soft), background .2s;
}
.lg-btn-ghost:hover{transform:translateY(-1px); background:#fff; color:var(--ink-1)}

/* 标签 chip */
.lg-chip{
  display:inline-flex; align-items:center; gap:5px;
  height:26px; padding:0 11px;
  border-radius:999px;
  border:1px solid var(--hairline);
  background:#fff;
  color:var(--ink-3);
  font-size:11.5px; font-weight:600; line-height:1;
  cursor:pointer; white-space:nowrap;
  transition:all .2s ease;
}
.lg-chip:hover{border-color:var(--accent-line); color:var(--accent)}
.lg-chip.is-on{
  background:var(--accent-fill);
  border-color:transparent; color:#fff;
  box-shadow:0 2px 8px rgba(205,111,71,.28);
}

/* 输入框 */
.lg-input{
  height:44px; padding:0 16px;
  border-radius:14px;
  border:1px solid var(--hairline);
  background:#fff;
  color:var(--ink-1);
  font-size:14px;
  outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.lg-input:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.lg-input::placeholder{color:var(--ink-4)}

/* 标题层级 */
.lg-h1{
  font-family:var(--font-serif);
  font-size:34px; font-weight:700; line-height:1.2;
  letter-spacing:-.02em; color:var(--ink-1);
}
.lg-h2{
  font-size:20px; font-weight:700; line-height:1.3;
  color:var(--ink-1);
}
.lg-label{
  font-family:var(--font-mono);
  font-size:10.5px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase;
  color:var(--ink-3);
}
.lg-muted{color:var(--ink-3)}

/* 减少动效 */
@media (prefers-reduced-motion:reduce){
  .lg-pill,.lg-btn-primary,.lg-btn-ghost,.lg-chip,.lg-input{
    transition-duration:.01ms!important;
    transform:none!important;
  }
}