/* 首页、结果页共用的底色与卡片：闪电说黄白体系，「荧光笔 + 贴纸」风（2026-11-01 品牌视觉升级）。
   黄色只属于闪电说和「你说到点上」；小笨（会翻车的 AI）用紫色；正经报告用细线的「教练笔记本」样子。 */
:root {
  --bg: #fffbef; --surface: #ffffff; --surface-2: #fff6da; --text: #1b1a17; --muted: #6b675c; --faint: #a39e8f;
  --accent: #ffc61a; --accent-ink: #1b1a17; --accent-soft: #fff1c2; --accent-text: #a35f00;
  --hot: #ff8a1f; --hot-text: #d9620b; --hot-soft: #ffead6;
  --ai: #7b61ff; --ai-soft: #eeeaff; --ok: #1fa35b; --danger: #e5483d;
  --border: #ebe3cb; --line: #1b1a17; --dot: rgba(27, 26, 23, .07);
  --shadow-hard: 4px 4px 0 var(--line); --shadow-btn: 0 4px 0 var(--line);
  --shadow: 0 1px 1px rgba(60, 45, 0, .04), 0 12px 30px -12px rgba(60, 45, 0, .2);
  --ease: cubic-bezier(.22, 1, .36, 1); --pop: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #16140f; --surface: #24201a; --surface-2: #2e2920; --text: #f6f0dd; --muted: #b3ab96; --faint: #7a735f;
    --accent: #ffd23f; --accent-soft: #3a3016; --accent-text: #ffd23f;
    --hot: #ff9f45; --hot-text: #ffa95a; --hot-soft: #3d2a17;
    --ai: #a596ff; --ai-soft: #2a2547; --ok: #4cc97f; --danger: #ff6f5e;
    --border: #3a3428; --line: #5b5140; --dot: rgba(255, 240, 200, .06);
    --shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 16px 40px -12px rgba(0, 0, 0, .6);
  }
}
* { box-sizing: border-box; }
/* 标了 hidden 的元素一律不显示：组件自己写了 display: flex / grid 时，浏览器自带的隐藏会被盖掉 */
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 16px/1.6 -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; -webkit-font-smoothing: antialiased; }
/* 底纹：淡点阵 + 左上角一团闪电说黄的光 */
.backdrop { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: var(--bg);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.4px); background-size: 20px 20px; }
.backdrop i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .45; }
.backdrop i:nth-child(1) { width: 60vmax; height: 60vmax; left: -24vmax; top: -30vmax; background: var(--accent); opacity: .28; }
.backdrop i:nth-child(2) { width: 40vmax; height: 40vmax; right: -18vmax; bottom: -18vmax; background: var(--hot); opacity: .12; }
.backdrop i:nth-child(3) { display: none; }

main { max-width: 600px; margin: 0 auto; padding: 8vh 16px 56px; }
/* 贴纸卡：墨色描边 + 实心偏移阴影 */
.card, .glass { background: var(--surface); border: 2px solid var(--line); box-shadow: var(--shadow-hard); }
.card { border-radius: 20px; padding: 24px; }
.card + .card { margin-top: 14px; }
h1 { font-size: 22px; margin: 0 0 6px; font-weight: 900; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 0 0 10px; font-weight: 800; }
.sub { color: var(--muted); margin: 0 0 18px; font-size: 15px; }
.note { color: var(--faint); font-size: 13px; margin: 12px 0 0; }
.error { color: var(--danger); font-size: 14px; margin-top: 12px; }
a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }
/* 荧光笔：关键词下面一道闪电说黄 */
.hl { background: linear-gradient(transparent 58%, var(--accent) 58% 92%, transparent 92%); padding: 0 .08em; }
/* 按钮：黄底墨字，按下去往下沉 */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px;
  padding: 13px; border: 2px solid var(--line); border-radius: 16px; font: inherit; font-size: 16px; font-weight: 800; text-decoration: none;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: var(--shadow-btn);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s; }
.cta:hover:not(:disabled) { filter: brightness(1.04); }
.cta:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.cta:disabled { opacity: .5; cursor: default; }
.cta.loading::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(27, 26, 23, .3);
  border-top-color: var(--accent-ink); animation: spin .8s linear infinite; }
.ghost { background: var(--surface); color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* 闪电说品牌锁定：logo + 名字 + 一句口号 */
.brandmark { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-size: 14px; }
.brandmark img { width: 28px; height: 28px; border-radius: 8px; display: block; }
.brandmark b { font-size: 16px; font-weight: 900; letter-spacing: .02em; }
.brandmark span { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }