/* 爆米花花 APP 原型 · 设计令牌
 * 取色自品牌 Logo（docs/02.ui/logo.jpg）：
 *   爆米花桶红  #E5302A（渐变高光 #FF5B54 → 深红 #C9201C）
 *   玉米粒黄    #FFC53D（深 #F2A600）
 *   爆米花白    #FFFBF4（奶油白）
 * 规则：红 = 品牌与主操作；黄 = 收益 / 金额 / 荣誉高亮；白 = 内容承载面。
 * 状态色（成功 / 警告 / 错误）独立于品牌红，避免“红色既是主按钮又是报错”。 */
:root {
  --red: #E5302A;
  --red-hi: #FF5B54;
  --red-deep: #C9201C;
  --red-ink: #A3170F;
  --red-soft: #FDECE9;
  --red-tint: #FFF5F2;
  --yellow: #FFC53D;
  --yellow-deep: #F2A600;
  --yellow-ink: #8A5A00;
  --yellow-soft: #FFF4D1;
  --cream: #FFFBF4;
  --bg: #FFF8F4;
  --surface: #FFFFFF;
  --ink: #2A1C19;
  --ink-2: #5A4642;
  --muted: #9C8B86;
  --faint: #C7B9B4;
  --line: #F1E3DE;
  --line-2: #F7EDE9;

  /* 状态色 */
  --ok: #2E9D63;
  --ok-soft: #E5F5EC;
  --warn: #C27C00;
  --warn-soft: #FFF2D6;
  --danger: #D9342B;
  --danger-soft: #FCE8E6;
  --info: #3D74C4;
  --info-soft: #E8F0FB;

  /* 品牌渐变与条纹（爆米花桶的红白竖条） */
  --grad-red: linear-gradient(135deg, var(--red-hi) 0%, var(--red) 45%, var(--red-deep) 100%);
  --grad-yellow: linear-gradient(135deg, #FFE08A 0%, var(--yellow) 55%, var(--yellow-deep) 100%);
  --stripes: repeating-linear-gradient(100deg, rgba(255, 255, 255, .09) 0 22px, rgba(255, 255, 255, 0) 22px 44px);

  --font: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --num: "DIN Alternate", "Avenir Next", -apple-system, "PingFang SC", sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-1: 0 1px 2px rgba(80, 20, 10, .05), 0 4px 14px rgba(80, 20, 10, .06);
  --shadow-2: 0 10px 30px rgba(120, 25, 15, .16);
  --shadow-red: 0 8px 18px rgba(229, 48, 42, .32);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ic { width: 1em; height: 1em; flex-shrink: 0; vertical-align: -.125em; }

/* 剧目封面占位（渐变海报） */
.poster {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; text-align: center; font-family: "Songti SC", "STSong", serif; font-weight: 700; line-height: 1.2;
  background: linear-gradient(155deg, #6f8a86, #1c2d31); border-radius: 10px; padding: 10px 6px;
}
.poster::before {
  content: ""; position: absolute; width: 90%; height: 80%; right: -28%; top: 6%;
  border-radius: 50% 50% 0 0; background: linear-gradient(90deg, rgba(255,255,255,.03), rgba(255,255,255,.22));
  transform: rotate(-25deg);
}
.poster small { position: relative; font: 600 5px/1.4 var(--font); letter-spacing: 1.2px; opacity: .85; margin-bottom: 5px; text-transform: uppercase; }
.poster span { position: relative; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.poster.p1 { background: linear-gradient(160deg, #d1a98f, #73332b); }
.poster.p2 { background: linear-gradient(140deg, #8a9eaa, #26384d); }
.poster.p3 { background: linear-gradient(140deg, #7b6687, #312d47); }
.poster.p4 { background: linear-gradient(150deg, #a3b18a, #3c4a2c); }
.poster.p5 { background: linear-gradient(150deg, #e08c74, #7d2c22); }

/* 伪二维码 */
.qr { background: #fff; padding: 8px; border-radius: 10px; display: inline-block; line-height: 0; }
.qr svg { display: block; }