/* =============================================================
 *  印记 (Yinji) — 设计令牌 CSS
 *  潮流市集参考图：黑色撞色贴纸风 (Neo-Brutalist Pop)
 *
 *  加载方式：index.html <link rel="stylesheet" href="/static/css/theme.css">
 *  与 base.css 共存，覆盖其 iOS 默认样式
 * ============================================================= */

/* ============================================================
 *  1. 设计令牌：CSS 自定义属性
 * ============================================================ */

:root {
  /* ── 1.1 背景层级 ── */
  --yj-bg-root:         #f7f5ed;   /* 页面底色 — 奶油浅底 */
  --yj-bg-elevated:     #ffffff;   /* 卡片/浮层 — 纯白（贴纸底） */
  --yj-bg-sunken:       #f0ecdd;   /* 凹入区域 */
  --yj-bg-overlay:      rgba(28, 29, 31, 0.55);

  /* ── 1.2 文字层级 ── */
  --yj-text-primary:    #1C1D1F;   /* 墨序黑 */
  --yj-text-secondary:  #56585e;
  --yj-text-tertiary:   #94969c;
  --yj-text-inverse:    #ffffff;
  --yj-text-link:       #e04d0a;

  /* ── 1.3 强调色（四色体系） ── */
  --yj-accent:          #FE590F;   /* 焰序红 — 主强调 */
  --yj-accent-secondary:#B8EF56;   /* 苦痕绿 — 次强调 */
  --yj-cta:             #FEE404;   /* 光序黄 — 行动按钮 */
  --yj-success:         #B8EF56;
  --yj-warning:         #FEE404;
  --yj-danger:          #FE590F;
  --yj-info:            #3d9bff;

  /* ── 1.4 边框/线条 ── */
  --yj-border:          #d0d1d4;
  --yj-border-strong:   #1C1D1F;

  /* ── 1.5 装饰圆球色板（撞色） ── */
  --yj-blob-flame:           #FE590F;
  --yj-blob-flame-light:     #ffa974;
  --yj-blob-acid:            #B8EF56;
  --yj-blob-acid-light:      #ddfba0;
  --yj-blob-warm-red:        #e04d0a;
  --yj-blob-warm-red-light:  #ff8a42;
  --yj-blob-sky:             #3d9bff;
  --yj-blob-mint:            #4fe0a5;
  --yj-blob-lavender:        #8b7ec4;
  --yj-blob-sunshine:        #FEE404;
  --yj-blob-coral:           #ff8a42;
  --yj-blob-forest:          #3ecf8e;
  --yj-blob-ink-light:       #94969c;

  /* ── 1.6 色阶（cream / flame / acid / sun / ink） ── */
  --yj-cream-50:  #fefdfb;
  --yj-cream-100: #fdfcf7;
  --yj-cream-200: #faf8ef;
  --yj-cream-300: #f7f5ed;
  --yj-cream-400: #f0ecdd;
  --yj-cream-500: #e8e2cd;
  --yj-cream-600: #d9d0b5;
  --yj-cream-700: #c4b99a;
  --yj-cream-800: #a89b7a;
  --yj-cream-900: #8b7d5e;

  --yj-flame-50:  #fff4ee;
  --yj-flame-100: #ffe3d3;
  --yj-flame-200: #ffc8a6;
  --yj-flame-300: #ffa974;
  --yj-flame-400: #ff8a42;
  --yj-flame-500: #FE590F;
  --yj-flame-600: #e04d0a;
  --yj-flame-700: #c4410a;
  --yj-flame-800: #9a3408;
  --yj-flame-900: #6e2607;

  --yj-acid-50:  #f7fee9;
  --yj-acid-100: #ecfdcb;
  --yj-acid-200: #ddfba0;
  --yj-acid-300: #ccf873;
  --yj-acid-400: #c4f560;
  --yj-acid-500: #B8EF56;
  --yj-acid-600: #9cd633;
  --yj-acid-700: #79ab24;
  --yj-acid-800: #5b8218;
  --yj-acid-900: #405c10;

  --yj-sun-50:  #fffef0;
  --yj-sun-100: #fffcd6;
  --yj-sun-200: #fff8a8;
  --yj-sun-300: #fff374;
  --yj-sun-400: #ffee45;
  --yj-sun-500: #FEE404;
  --yj-sun-600: #e0c900;
  --yj-sun-700: #b8a500;
  --yj-sun-800: #8c7f00;
  --yj-sun-900: #635900;

  --yj-ink-50:  #f4f4f5;
  --yj-ink-100: #e8e8ea;
  --yj-ink-200: #d0d1d4;
  --yj-ink-300: #b4b5ba;
  --yj-ink-400: #94969c;
  --yj-ink-500: #74767d;
  --yj-ink-600: #56585e;
  --yj-ink-700: #3c3d42;
  --yj-ink-800: #2a2b2f;
  --yj-ink-900: #1C1D1F;

  /* ── 1.6b 旧色阶别名（保留供历史引用，指向新四色） ── */
  --yj-terracotta-50:  var(--yj-flame-50);
  --yj-terracotta-100: var(--yj-flame-100);
  --yj-terracotta-200: var(--yj-flame-200);
  --yj-terracotta-300: var(--yj-flame-300);
  --yj-terracotta-400: var(--yj-flame-400);
  --yj-terracotta-500: var(--yj-flame-500);
  --yj-terracotta-600: var(--yj-flame-600);
  --yj-terracotta-700: var(--yj-flame-700);
  --yj-terracotta-800: var(--yj-flame-800);
  --yj-terracotta-900: var(--yj-flame-900);

  --yj-lime-50:  var(--yj-acid-50);
  --yj-lime-100: var(--yj-acid-100);
  --yj-lime-200: var(--yj-acid-200);
  --yj-lime-300: var(--yj-acid-300);
  --yj-lime-400: var(--yj-acid-400);
  --yj-lime-500: var(--yj-acid-500);
  --yj-lime-600: var(--yj-acid-600);
  --yj-lime-700: var(--yj-acid-700);
  --yj-lime-800: var(--yj-acid-800);
  --yj-lime-900: var(--yj-acid-900);

  --yj-warmred-50:  #fef0ee;
  --yj-warmred-100: #fddad6;
  --yj-warmred-200: #fab5ad;
  --yj-warmred-300: #f78f84;
  --yj-warmred-400: #f46a5b;
  --yj-warmred-500: #e04d0a;
  --yj-warmred-600: #c4410a;
  --yj-warmred-700: #a0360a;
  --yj-warmred-800: #7c2a08;
  --yj-warmred-900: #571e06;

  /* blob 别名 */
  --yj-blob-terracotta:       var(--yj-blob-flame);
  --yj-blob-terracotta-light: var(--yj-blob-flame-light);
  --yj-blob-lime:             var(--yj-blob-acid);
  --yj-blob-lime-light:       var(--yj-blob-acid-light);

  /* ── 1.7 圆角体系 ── */
  --yj-radius-none:   0;
  --yj-radius-xs:     4px;
  --yj-radius-sm:     8px;
  --yj-radius-md:     12px;
  --yj-radius-lg:     16px;
  --yj-radius-xl:     20px;
  --yj-radius-2xl:    24px;
  --yj-radius-3xl:    32px;
  --yj-radius-full:   9999px;
  --yj-radius-circle: 50%;

  /* 语义别名 */
  --yj-radius-button: 9999px;
  --yj-radius-card:   20px;   /* 卡片圆角略收（贴纸感更"纸片"） */
  --yj-radius-tag:    9999px;
  --yj-radius-input:  16px;
  --yj-radius-avatar: 50%;
  --yj-radius-modal:  32px;

  /* ── 1.8 阴影体系 ── */
  /* 硬阴影（Neo-Brutalist 核心，墨黑） */
  --yj-shadow-hard-sm:  2px 2px 0 0 #1C1D1F;
  --yj-shadow-hard-md:  4px 4px 0 0 #1C1D1F;
  --yj-shadow-hard-lg:  6px 6px 0 0 #1C1D1F;
  --yj-shadow-hard-xl:  8px 8px 0 0 #1C1D1F;

  /* 贴纸阴影（单边粗影，贴纸悬浮感） */
  --yj-shadow-sticker-sm: 0 3px 0 0 #1C1D1F;
  --yj-shadow-sticker-md: 0 5px 0 0 #1C1D1F;
  --yj-shadow-sticker-lg: 0 8px 0 0 #1C1D1F;

  /* 柔和阴影（降级过渡用） */
  --yj-shadow-soft-sm:  0px 2px 8px -2px rgba(28, 29, 31, 0.08);
  --yj-shadow-soft-md:  0px 4px 16px -4px rgba(28, 29, 31, 0.10);
  --yj-shadow-soft-lg:  0px 8px 32px -8px rgba(28, 29, 31, 0.12);

  /* 内阴影 */
  --yj-shadow-inset-sm: inset 0px 1px 3px rgba(28, 29, 31, 0.08);
  --yj-shadow-inset-md: inset 0px 2px 6px rgba(28, 29, 31, 0.10);

  /* 语义别名 */
  --yj-shadow-button:       var(--yj-shadow-hard-md);
  --yj-shadow-button-hover: var(--yj-shadow-hard-sm);
  --yj-shadow-button-press: none;
  --yj-shadow-card:         var(--yj-shadow-hard-md);
  --yj-shadow-card-hover:   var(--yj-shadow-hard-lg);
  --yj-shadow-input:        var(--yj-shadow-hard-sm);
  --yj-shadow-input-focus:  var(--yj-shadow-hard-md);

  /* ── 1.9 字体 ── */
  --yj-font-sans: "Inter", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --yj-font-mono: "JetBrains Mono", "SF Mono", "Menlo", monospace;

  /* ── 1.10 字号 ── */
  --yj-text-hero:      clamp(2.5rem, 8vw, 4rem);
  --yj-text-display:   clamp(2rem, 6vw, 3rem);
  --yj-text-title1:    34px;
  --yj-text-title2:    28px;
  --yj-text-title3:    22px;
  --yj-text-title4:    20px;
  --yj-text-body:      17px;
  --yj-text-body-sm:   15px;
  --yj-text-caption:   13px;
  --yj-text-caption-sm:12px;
  --yj-text-tiny:      11px;

  /* ── 1.11 字重 ── */
  --yj-weight-regular:  400;
  --yj-weight-medium:   500;
  --yj-weight-semibold: 600;
  --yj-weight-bold:     700;
  --yj-weight-heavy:    800;
  --yj-weight-black:    900;

  /* ── 1.12 行高 ── */
  --yj-leading-tight:   1.2;
  --yj-leading-snug:    1.4;
  --yj-leading-normal:  1.6;
  --yj-leading-relaxed: 1.7;
  --yj-leading-loose:   1.8;

  /* ── 1.13 间距（基于 4px 网格） ── */
  --yj-space-xs:    4px;
  --yj-space-sm:    8px;
  --yj-space-md:    12px;
  --yj-space-lg:    16px;
  --yj-space-xl:    20px;
  --yj-space-2xl:   24px;
  --yj-space-3xl:   32px;
  --yj-space-4xl:   40px;
  --yj-space-5xl:   48px;
  --yj-space-6xl:   64px;

  /* 语义 */
  --yj-space-page:   16px;
  --yj-space-card:   24px;
  --yj-space-gap:    16px;
  --yj-space-section:32px;
  --yj-space-element:12px;
  --yj-space-text:   8px;

  /* ── 1.14 动效 ── */
  --yj-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --yj-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --yj-ease-in-out:  cubic-bezier(0.8, 0, 0.2, 1);
  --yj-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --yj-ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  --yj-duration-instant: 100ms;
  --yj-duration-fast:    200ms;
  --yj-duration-normal:  300ms;
  --yj-duration-slow:    500ms;
  --yj-duration-reveal:  800ms;
}

/* ============================================================
 *  2. 全局基础样式
 * ============================================================ */

page {
  background: var(--yj-bg-root);
  font-family: var(--yj-font-sans);
  font-size: var(--yj-text-body);
  color: var(--yj-text-primary);
  line-height: var(--yj-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
 *  3. 页面主题背景（撞色淡染 → 奶油底）
 * ============================================================ */

/* 欢迎页 / 记一笔 — 光序黄淡染 */
.theme-welcome,
.theme-note {
  background: linear-gradient(180deg, #fff8e6 0%, var(--yj-bg-root) 100%);
}

/* 发现页 — 光序黄淡染 */
.theme-discover {
  background: linear-gradient(180deg, #fff8d6 0%, var(--yj-bg-root) 100%);
}

/* 打卡 / 确认打卡 — 苦痕绿淡染 */
.theme-nearby,
.theme-checkin {
  background: linear-gradient(180deg, #ecfdcb 0%, var(--yj-bg-root) 70%);
}

/* 扫码 — 光序黄淡染 */
.theme-scan {
  background: linear-gradient(180deg, #fffcd6 0%, var(--yj-bg-root) 70%);
}

/* 匹配 — 焰序红淡染 */
.theme-match {
  background: linear-gradient(135deg, #ffe3d3 0%, var(--yj-bg-root) 100%);
}

/* 聊天 — 紫调淡染 */
.theme-chat {
  background: linear-gradient(180deg, #eeebf8 0%, var(--yj-bg-root) 100%);
}

/* 消息 — 中性淡染 */
.theme-inbox {
  background: linear-gradient(180deg, #f4f4f5 0%, var(--yj-bg-root) 100%);
}

/* 足迹 — 紫葡萄淡染 */
.theme-traces {
  background: linear-gradient(180deg, #f0ecfd 0%, var(--yj-bg-root) 100%);
}

/* 我的 — 焰序红淡染 */
.theme-me {
  background: linear-gradient(180deg, #ffe3d3 0%, var(--yj-bg-root) 100%);
}

/* 商家 — 暖橙淡染 */
.theme-merchant {
  background: linear-gradient(180deg, #ffeed6 0%, var(--yj-bg-root) 100%);
}

/* ============================================================
 *  4. 装饰圆球 (Decorative Blobs)
 * ============================================================ */

.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.blob--flame          { background: var(--yj-blob-flame); }
.blob--flame-light    { background: var(--yj-blob-flame-light); }
.blob--acid           { background: var(--yj-blob-acid); }
.blob--acid-light     { background: var(--yj-blob-acid-light); }
.blob--warmred        { background: var(--yj-blob-warm-red); }
.blob--warmred-light  { background: var(--yj-blob-warm-red-light); }
.blob--sky            { background: var(--yj-blob-sky); }
.blob--mint           { background: var(--yj-blob-mint); }
.blob--lavender       { background: var(--yj-blob-lavender); }
.blob--sunshine       { background: var(--yj-blob-sunshine); }
.blob--coral          { background: var(--yj-blob-coral); }
.blob--forest         { background: var(--yj-blob-forest); }
.blob--ink-light      { background: var(--yj-blob-ink-light); }

/* 旧类名别名（保持兼容） */
.blob--terracotta       { background: var(--yj-blob-flame); }
.blob--terracotta-light { background: var(--yj-blob-flame-light); }
.blob--lime             { background: var(--yj-blob-acid); }
.blob--lime-light       { background: var(--yj-blob-acid-light); }

/* 装饰圆球默认使用径向渐变模拟"发光感"（无模糊，纯色渐变） */
.blob--glow {
  background: radial-gradient(circle at 35% 35%, var(--blob-color, currentColor), transparent 90%);
}

/* ============================================================
 *  5. 卡片组件（贴纸风：白底 + 粗黑描边 + 硬阴影）
 * ============================================================ */

/* 主卡片 */
.card--yj {
  background: var(--yj-bg-elevated);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-card);
  padding: var(--yj-space-card);
  box-shadow: var(--yj-shadow-card);
  transition: box-shadow var(--yj-duration-fast) var(--yj-ease-out),
              transform var(--yj-duration-fast) var(--yj-ease-out);
}

.card--yj:hover {
  box-shadow: var(--yj-shadow-card-hover);
  transform: translate(-1px, -1px);
}

.card--yj:active {
  box-shadow: var(--yj-shadow-button-press);
  transform: translate(2px, 2px);
}

/* 无阴影卡片（扁平变体） */
.card--flat {
  background: var(--yj-bg-elevated);
  border: 1px solid var(--yj-border);
  border-radius: var(--yj-radius-card);
  padding: var(--yj-space-card);
}

/* ============================================================
 *  6. 按钮组件（撞色贴纸：实色底 + 黑描边 + 硬阴影）
 * ============================================================ */

/* 主按钮 — 光序黄 CTA */
.btn--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  background: var(--yj-cta);
  color: var(--yj-text-primary);
  font-size: var(--yj-text-body);
  font-weight: var(--yj-weight-semibold);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-full);
  box-shadow: var(--yj-shadow-button);
  cursor: pointer;
  transition: all var(--yj-duration-instant) var(--yj-ease-out);
  user-select: none;
}

.btn--primary:hover {
  box-shadow: var(--yj-shadow-button-hover);
  transform: translate(-1px, -1px);
}

.btn--primary:active {
  box-shadow: var(--yj-shadow-button-press);
  transform: translate(2px, 2px);
}

/* 深色按钮 — 墨黑底白字 */
.btn--dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  background: var(--yj-ink-900);
  color: var(--yj-text-inverse);
  font-size: var(--yj-text-body);
  font-weight: var(--yj-weight-semibold);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-full);
  box-shadow: var(--yj-shadow-button);
  cursor: pointer;
  transition: all var(--yj-duration-instant) var(--yj-ease-out);
  user-select: none;
}

.btn--dark:hover {
  box-shadow: var(--yj-shadow-button-hover);
  transform: translate(-1px, -1px);
}

.btn--dark:active {
  box-shadow: var(--yj-shadow-button-press);
  transform: translate(2px, 2px);
}

/* 文字按钮 */
.btn--text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--yj-text-secondary);
  font-size: var(--yj-text-body);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--yj-radius-sm);
  transition: background var(--yj-duration-fast);
}

.btn--text:hover {
  background: var(--yj-cream-400);
}

/* ==================== 贴纸按钮（撞色实色 + 黑描边 + 硬阴影） ==================== */
/* 多巴胺渐变按钮重做为贴纸按钮：去掉发光渐变，改为实色 + 粗黑描边 */
.btn--pop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  background: var(--yj-cta);
  color: var(--yj-text-primary);
  font-size: var(--yj-text-body);
  font-weight: var(--yj-weight-bold);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-full);
  box-shadow: var(--yj-shadow-button);
  transition: transform 0.2s var(--yj-ease-out), box-shadow 0.2s var(--yj-ease-out);
}
.btn--pop:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
/* 焰序红版贴纸按钮 */
.btn--pop--red {
  background: var(--yj-accent);
  color: #fff;
}
.btn--pop--red:active {
  box-shadow: none;
}
.btn--pop[disabled],
.btn--pop--disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* 新增：焰序红贴纸按钮（探索/主 CTA 用） */
.btn--sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 36px;
  background: var(--yj-accent);
  color: #fff;
  font-size: var(--yj-text-body);
  font-weight: var(--yj-weight-bold);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-full);
  box-shadow: var(--yj-shadow-button);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--sticker:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* ============================================================
 *  7. 输入组件
 * ============================================================ */

.input--yj {
  width: 100%;
  height: 48px;
  padding: 0 var(--yj-space-lg);
  background: var(--yj-bg-elevated);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-input);
  font-size: var(--yj-text-body);
  color: var(--yj-text-primary);
  box-shadow: var(--yj-shadow-input);
  transition: all var(--yj-duration-fast) var(--yj-ease-out);
  outline: none;
}

.input--yj:focus {
  box-shadow: var(--yj-shadow-input-focus);
}

.input--yj::placeholder {
  color: var(--yj-text-tertiary);
}

/* 搜索框 */
.input--search {
  width: 100%;
  height: 40px;
  padding: 0 var(--yj-space-lg) 0 36px;
  background: var(--yj-bg-elevated);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-full);
  font-size: var(--yj-text-body-sm);
  color: var(--yj-text-primary);
  box-shadow: var(--yj-shadow-input);
  outline: none;
}

.input--search::placeholder {
  color: var(--yj-text-tertiary);
}

/* ============================================================
 *  8. 标签组件（贴纸标签）
 * ============================================================ */

.tag--yj {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--yj-radius-full);
  font-size: var(--yj-text-caption-sm);
  font-weight: var(--yj-weight-medium);
  border: 1.5px solid var(--yj-border-strong);
  background: var(--yj-bg-elevated);
  color: var(--yj-text-secondary);
}

.tag--accent {
  background: var(--yj-flame-100);
  border-color: var(--yj-flame-500);
  color: var(--yj-flame-700);
}

.tag--lime {
  background: var(--yj-acid-100);
  border-color: var(--yj-acid-600);
  color: var(--yj-acid-800);
}

.tag--warm {
  background: var(--yj-warmred-100);
  border-color: var(--yj-warmred-500);
  color: var(--yj-warmred-700);
}

/* 胶囊选择器 */
.pill--yj {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: var(--yj-radius-full);
  font-size: var(--yj-text-body-sm);
  font-weight: var(--yj-weight-medium);
  border: 2px solid var(--yj-border);
  background: var(--yj-bg-elevated);
  color: var(--yj-text-secondary);
  cursor: pointer;
  transition: all var(--yj-duration-fast) var(--yj-ease-out);
}

.pill--yj.active {
  background: var(--yj-ink-900);
  color: var(--yj-text-inverse);
  border-color: var(--yj-ink-900);
  box-shadow: var(--yj-shadow-hard-sm);
}

/* ============================================================
 *  8b. 贴纸工具类（参考图 top1 爆炸标签 / 撞色块）
 * ============================================================ */

/* 基础贴纸：白底 + 黑描边 + 硬阴影 + 轻微旋转 */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--yj-bg-elevated);
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-sm);
  padding: 4px 10px;
  box-shadow: var(--yj-shadow-sticker-sm);
  transform: rotate(-1.5deg);
  font-weight: var(--yj-weight-bold);
  color: var(--yj-text-primary);
}

/* 撞色贴纸标签：实色底 + 黑描边 + 硬阴影 */
.sticker--tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--yj-accent);
  color: #fff;
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-sm);
  padding: 3px 10px;
  box-shadow: var(--yj-shadow-sticker-sm);
  font-size: var(--yj-text-caption-sm);
  font-weight: var(--yj-weight-bold);
  line-height: 1.3;
}
.sticker--tag--acid { background: var(--yj-accent-secondary); color: var(--yj-ink-900); }
.sticker--tag--sun  { background: var(--yj-cta); color: var(--yj-ink-900); }
.sticker--tag--sky  { background: var(--yj-info); color: #fff; }

/* 爆炸式标签（top1 风格：圆形/胶囊 + 撞色 + 黑描边） */
.sticker--burst {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--yj-accent);
  color: #fff;
  border: 2px solid var(--yj-border-strong);
  border-radius: var(--yj-radius-full);
  padding: 2px 12px;
  box-shadow: var(--yj-shadow-sticker-sm);
  font-size: var(--yj-text-caption-sm);
  font-weight: var(--yj-weight-black);
  letter-spacing: 0.02em;
  transform: rotate(2deg);
}
.sticker--burst--sun { background: var(--yj-cta); color: var(--yj-ink-900); }
.sticker--burst--acid { background: var(--yj-accent-secondary); color: var(--yj-ink-900); }

/* ============================================================
 *  9. 列表项
 * ============================================================ */

.list-item--yj {
  display: flex;
  align-items: center;
  padding: var(--yj-space-lg);
  background: var(--yj-bg-elevated);
  border-bottom: 1px solid var(--yj-cream-400);
  gap: var(--yj-space-md);
  transition: background var(--yj-duration-fast);
}

.list-item--yj:first-child {
  border-radius: var(--yj-radius-card) var(--yj-radius-card) 0 0;
}

.list-item--yj:last-child {
  border-radius: 0 0 var(--yj-radius-card) var(--yj-radius-card);
  border-bottom: none;
}

.list-item--yj:only-child {
  border-radius: var(--yj-radius-card);
  border-bottom: none;
}

.list-item--yj:active {
  background: var(--yj-cream-300);
}

/* ============================================================
 * 10. 头像组件
 * ============================================================ */

.avatar--yj {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--yj-radius-circle);
  background: var(--yj-ink-200);
  color: var(--yj-text-inverse);
  font-weight: var(--yj-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--yj-border-strong);  /* 墨黑描边头像（贴纸感） */
}

.avatar--yj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--yj-radius-circle);
}

/* 装饰头像使用渐变色（撞色） */
.avatar--accent { background: linear-gradient(135deg, var(--yj-flame-400), var(--yj-flame-600)); }
.avatar--lime   { background: linear-gradient(135deg, var(--yj-acid-400), var(--yj-acid-600)); }
.avatar--purple { background: linear-gradient(135deg, #c4b5e0, #8b7ec4); }
.avatar--amber  { background: linear-gradient(135deg, var(--yj-sun-400), var(--yj-sun-600)); }
.avatar--mint   { background: linear-gradient(135deg, var(--yj-blob-mint), var(--yj-acid-600)); }

/* ============================================================
 * 11. 空状态 & 骨架屏
 * ============================================================ */

.empty-state--yj {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--yj-space-5xl) var(--yj-space-page);
  text-align: center;
}

.empty-state--yj .empty-icon {
  font-size: 48px;
  margin-bottom: var(--yj-space-lg);
}

.empty-state--yj .empty-title {
  font-size: var(--yj-text-title4);
  font-weight: var(--yj-weight-semibold);
  color: var(--yj-text-primary);
  margin-bottom: var(--yj-space-sm);
}

.empty-state--yj .empty-desc {
  font-size: var(--yj-text-body-sm);
  color: var(--yj-text-tertiary);
  line-height: var(--yj-leading-relaxed);
  max-width: 260px;
}

/* 骨架屏 */
.skeleton--yj {
  background: linear-gradient(90deg, var(--yj-cream-400) 25%, var(--yj-cream-300) 50%, var(--yj-cream-400) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--yj-radius-sm);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
 * 12. 弹窗 / 浮层
 * ============================================================ */

/* 遮罩 */
.overlay--yj {
  position: fixed;
  inset: 0;
  background: var(--yj-bg-overlay);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 底部弹出面板 */
.action-sheet--yj {
  width: 100%;
  background: var(--yj-bg-elevated);
  border-radius: var(--yj-radius-3xl) var(--yj-radius-3xl) 0 0;
  padding: var(--yj-space-xl) var(--yj-space-page) var(--yj-space-3xl);
  box-shadow: 0px -4px 20px rgba(28, 29, 31, 0.08);
}

.action-sheet--yj .sheet-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--yj-space-lg) 0;
  font-size: var(--yj-text-body);
  color: var(--yj-text-primary);
  border-bottom: 1px solid var(--yj-cream-400);
  cursor: pointer;
}

.action-sheet--yj .sheet-item:last-child {
  border-bottom: none;
}

.action-sheet--yj .sheet-cancel {
  margin-top: var(--yj-space-md);
  color: var(--yj-text-tertiary);
  font-weight: var(--yj-weight-medium);
}

.action-sheet--yj .sheet-destructive {
  color: var(--yj-danger);
}

/* ============================================================
 * 13. Toast / 轻提示
 * ============================================================ */

.toast--yj {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--yj-ink-900);
  color: var(--yj-text-inverse);
  font-size: var(--yj-text-body-sm);
  padding: 12px 24px;
  border-radius: var(--yj-radius-full);
  box-shadow: var(--yj-shadow-hard-md);
  z-index: 9999;
  animation: toastIn 0.3s var(--yj-ease-out);
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ============================================================
 * 14. 分隔线
 * ============================================================ */

.divider--yj {
  width: 100%;
  height: 1px;
  background: var(--yj-cream-400);
  border: none;
  margin: var(--yj-space-lg) 0;
}

.divider--thick {
  height: 8px;
  background: var(--yj-cream-400);
  border: none;
}

/* ============================================================
 * 15. 进度条
 * ============================================================ */

.progress--yj {
  width: 100%;
  height: 8px;
  background: var(--yj-cream-400);
  border-radius: var(--yj-radius-full);
  overflow: hidden;
}

.progress--yj .progress-fill {
  height: 100%;
  border-radius: var(--yj-radius-full);
  background: var(--yj-accent);
  transition: width var(--yj-duration-normal) var(--yj-ease-out);
}

.progress-fill--lime { background: var(--yj-cta); }
.progress-fill--mint { background: var(--yj-blob-mint); }
.progress-fill--purple { background: var(--yj-blob-lavender); }

/* ============================================================
 * 16. 工具类
 * ============================================================ */

/* 背景 */
.bg-yj-root     { background: var(--yj-bg-root); }
.bg-yj-elevated { background: var(--yj-bg-elevated); }
.bg-yj-sunken   { background: var(--yj-bg-sunken); }

/* 文字颜色 */
.text-yj-primary   { color: var(--yj-text-primary); }
.text-yj-secondary { color: var(--yj-text-secondary); }
.text-yj-tertiary  { color: var(--yj-text-tertiary); }
.text-yj-inverse   { color: var(--yj-text-inverse); }
.text-yj-accent    { color: var(--yj-accent); }
.text-yj-cta       { color: var(--yj-cta); }

/* 文字排版 */
.text-hero     { font-size: var(--yj-text-hero); font-weight: var(--yj-weight-bold); line-height: var(--yj-leading-tight); }
.text-display  { font-size: var(--yj-text-display); font-weight: var(--yj-weight-bold); line-height: var(--yj-leading-tight); }
.text-title1   { font-size: var(--yj-text-title1); font-weight: var(--yj-weight-bold); line-height: var(--yj-leading-snug); }
.text-title2   { font-size: var(--yj-text-title2); font-weight: var(--yj-weight-bold); line-height: var(--yj-leading-snug); }
.text-title3   { font-size: var(--yj-text-title3); font-weight: var(--yj-weight-semibold); line-height: var(--yj-leading-snug); }
.text-title4   { font-size: var(--yj-text-title4); font-weight: var(--yj-weight-semibold); line-height: var(--yj-leading-snug); }
.text-body     { font-size: var(--yj-text-body); line-height: var(--yj-leading-normal); }
.text-body-sm  { font-size: var(--yj-text-body-sm); line-height: var(--yj-leading-normal); }
.text-caption  { font-size: var(--yj-text-caption); line-height: var(--yj-leading-normal); }
.text-caption-sm{font-size: var(--yj-text-caption-sm); line-height: var(--yj-leading-normal); }
.text-tiny     { font-size: var(--yj-text-tiny); line-height: var(--yj-leading-tight); }

/* 字重 */
.font-regular  { font-weight: var(--yj-weight-regular); }
.font-medium   { font-weight: var(--yj-weight-medium); }
.font-semibold { font-weight: var(--yj-weight-semibold); }
.font-bold     { font-weight: var(--yj-weight-bold); }
.font-heavy    { font-weight: var(--yj-weight-heavy); }
.font-black    { font-weight: var(--yj-weight-black); }

/* 圆角 */
.rounded-card  { border-radius: var(--yj-radius-card); }
.rounded-full  { border-radius: var(--yj-radius-full); }
.rounded-modal { border-radius: var(--yj-radius-modal); }

/* 阴影 */
.shadow-card   { box-shadow: var(--yj-shadow-card); }
.shadow-button { box-shadow: var(--yj-shadow-button); }
.shadow-sticker { box-shadow: var(--yj-shadow-sticker-md); }

/* 间距工具 */
.gap-yj-sm  { gap: var(--yj-space-sm); }
.gap-yj-md  { gap: var(--yj-space-md); }
.gap-yj-lg  { gap: var(--yj-space-lg); }
.gap-yj-xl  { gap: var(--yj-space-xl); }

/* 溢出控制 */
.truncate-yj {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 安全区 */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
 * 17. 响应式断点
 * ============================================================ */

/* 默认：手机 (max-width 430px 容器) */
.yj-container {
  max-width: 430px;
  margin: 0 auto;
  width: 100%;
}

/* 平板 (>= 480px) */
@media (min-width: 480px) {
  :root {
    --yj-space-page:   24px;
    --yj-space-card:   32px;
    --yj-space-section: 40px;
    --yj-text-title1:  40px;
    --yj-text-title2:  32px;
    --yj-text-body:    17px;
  }
  .yj-container { max-width: 640px; }
}

/* 桌面 (>= 1024px) */
@media (min-width: 1024px) {
  :root {
    --yj-space-page:   32px;
    --yj-space-card:   40px;
    --yj-space-section: 48px;
    --yj-text-title1:  48px;
    --yj-text-title2:  36px;
    --yj-text-body:    17px;
  }
  .yj-container { max-width: 880px; }
}