/* ================================================================
   R76 夜糖果主题（Night Candy）· 参考现代儿童教育 App 设计语言
   深夜蓝紫底 + 糖果色点睛 + 大圆角 + 柔和弥散阴影 + 无描边发光卡
   在 style.css 之后引入（替换 R74 米黄果冻主题）
   ================================================================ */

/* ---- 设计令牌：夜糖果 ---- */
:root {
  --bg0: #1E2A45;
  --bg1: #26304F;
  --card: #2F3D66;
  --card-2: #34406E;
  --card-deep: #26304F;
  --ink: #EFF3FF;
  --ink-dim: #A8B3D6;
  --gold: #FFC93C;
  --purple: #A78BFA;
  --teal: #4FC3A1;
  --coral: #F0655A;
  --blue: #7EB6FF;
  --panel: #2F3D66;
  --panel-border: rgba(255, 255, 255, .07);
  --teal-dim: rgba(79, 195, 161, .15);
  --amber: #FFC93C;
  --amber-dim: rgba(255, 201, 60, .13);
  --red: #F0655A;
  --red-dim: rgba(240, 101, 90, .15);
  --sun: #FFC93C;
  --coral-c: #FF8A5B;
  --berry: #FF8FAB;
  --glow-teal: 0 0 14px rgba(79, 195, 161, .55);
  --shadow-card: 0 10px 28px rgba(8, 12, 28, .38);
  --shadow-card-lg: 0 18px 44px rgba(8, 12, 28, .5);
}

body {
  background:
    radial-gradient(560px 380px at 12% -6%, rgba(167, 139, 250, .16), transparent 70%),
    radial-gradient(520px 400px at 92% 12%, rgba(79, 182, 255, .13), transparent 70%),
    radial-gradient(620px 480px at 50% 118%, rgba(255, 201, 60, .10), transparent 70%),
    radial-gradient(420px 320px at 4% 88%, rgba(79, 195, 161, .10), transparent 70%),
    linear-gradient(180deg, #223052 0%, #1B2540 100%);
  color: var(--ink);
}

/* ---- 顶栏：悬浮夜卡 ---- */
#topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%), #2F3D66;
  border: none !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-card) !important;
}
.logo-text { color: #FFF; letter-spacing: 1.5px; }
.logo-sub { color: var(--ink-dim) !important; }
.step { color: #8FA0CC; border-radius: 99px; }
.step .dot { background: #3A4A78 !important; border: none !important; color: #C4D0F2 !important; }
.step.active { color: #FFF; background: rgba(255, 201, 60, .1); }
.step.active .dot {
  background: var(--gold) !important; color: #5A3A00 !important;
  box-shadow: 0 0 16px rgba(255, 201, 60, .6) !important;
}
.step.done { color: var(--teal) !important; }
.step.done .dot { background: rgba(79,195,161,.18) !important; color: var(--teal) !important; }

.icon-btn {
  background: #3A4A78 !important; border: none !important; color: #E8EDFB !important;
  border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  transition: background .2s, transform .15s;
}
.icon-btn:hover { background: #465894 !important; transform: translateY(-1px); }

/* ---- 按钮：胶囊 + 柔光 ---- */
.btn {
  border-radius: 99px !important; font-weight: 700 !important; letter-spacing: .3px;
  transition: transform .18s, box-shadow .18s, background .18s !important;
}
.btn-primary {
  background: linear-gradient(180deg, #6D80D6, #5163B4) !important;
  color: #FFF !important; border: none !important;
  box-shadow: 0 6px 20px rgba(94, 116, 205, .45), inset 0 1px 0 rgba(255,255,255,.28) !important;
  text-shadow: 0 1px 2px rgba(10, 16, 40, .35);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(94, 116, 205, .6), inset 0 1px 0 rgba(255,255,255,.3) !important;
}
.btn-primary:active:not(:disabled) { transform: translateY(1px) !important; box-shadow: 0 3px 10px rgba(94,116,205,.5) !important; }
.btn-ghost {
  background: #34406E !important; color: #CBD6F5 !important; border: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.btn-ghost:hover:not(:disabled) { background: #3D4B80 !important; color: #FFF !important; }
.btn-lg { border-radius: 99px !important; font-size: 17px !important; padding: 15px 38px !important; }
.btn-sm { border-radius: 99px !important; }
.btn-sample {
  background: #34406E !important; color: var(--ink) !important; border: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.btn-sample:hover { background: #3D4B80 !important; box-shadow: 0 0 0 2px rgba(255,201,60,.35); }
.btn-pk {
  background: linear-gradient(135deg, #B14BD4, #7C5CFF) !important;
  box-shadow: 0 8px 26px rgba(150, 92, 226, .5), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ---- 通用卡片：无描边 + 顶部微高光 + 柔影 ---- */
.guide-list li, .sample-picker, .metric-card, .codex-card, .growth-list li,
.history-list li, .letter, .growth-msg, .spine-curve, .ex-stat, .metric-note,
.legend, .about-block, .intro-card, .grownups {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 45%), var(--card-deep) !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-card) !important;
  color: var(--ink) !important;
}
.report-panel, .growth-panel, .ex-detail, .modal-card, .pk-card {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 8%), var(--card) !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: var(--shadow-card-lg) !important;
}
.dropzone {
  background:
    radial-gradient(circle at 82% 12%, rgba(255,201,60,.10), transparent 42%),
    radial-gradient(circle at 10% 90%, rgba(167,139,250,.10), transparent 40%),
    #242F52 !important;
  border: 2.5px dashed rgba(255, 201, 60, .4) !important;
  border-radius: 26px !important;
}
.dropzone.dragover { border-color: var(--gold) !important; background: #2A3760 !important; box-shadow: 0 0 0 6px rgba(255,201,60,.12) !important; }
.dz-empty { color: var(--ink-dim) !important; }

/* ---- 文字层级 ---- */
.scene-title { font-size: 22px; font-weight: 800; color: #FFF !important; letter-spacing: .5px; }
.scene-sub, .mc-note, .cc-lore, .ex-desc, .field-note, .letter-text, .sc-note { color: var(--ink-dim) !important; }
.mc-name { color: #FFF !important; font-size: 14.5px; font-weight: 700; }
.mc-name::before { color: var(--gold); }
.mc-val.green { color: #6FE3BC !important; } .mc-val.yellow { color: var(--gold) !important; } .mc-val.red { color: #FF9C93 !important; }
.mc-bar { background: rgba(255,255,255,.1) !important; }
.mc-bar i.green { background: linear-gradient(90deg, #3BC495, #6FE3BC); }
.mc-bar i.yellow { background: linear-gradient(90deg, #E8A81E, #FFD76A); }
.mc-bar i.red { background: linear-gradient(90deg, #E05548, #FF9C93); }
.growth-close { color: var(--ink-dim); }

/* ---- 开场 ---- */
.intro-title { color: #FFF !important; text-shadow: 0 0 46px rgba(255, 201, 60, .35), 0 2px 0 rgba(0,0,0,.2); }
.intro-kid { font-size: 19px; color: #FFD666; font-weight: 800; letter-spacing: .5px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.grownups summary { color: var(--ink-dim) !important; font-weight: 600; }
.grownups summary::before { color: var(--gold); }
.intro-desc b { color: #FFF; }
.intro-card { padding: 16px 18px; }
.ic-emoji { filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.intro-foot { color: #8291BC; }

/* R76d 礼盒升级：双色渐变 + 高光 + 呼吸光晕 */
.gift-body {
  background: linear-gradient(165deg, #7C5CFF 0%, #5163B4 55%, #3E4E9E 100%) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.25), inset 0 -8px 14px rgba(10,16,40,.45), 0 10px 26px rgba(60,70,160,.5) !important;
}
.gift-lid {
  background: linear-gradient(165deg, #9B7BFF 0%, #6D80D6 100%) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 10px rgba(30,40,110,.5) !important;
}
.gift-ribbon { background: linear-gradient(180deg, #FFE29A, #FFC93C) !important; box-shadow: 0 0 10px rgba(255,201,60,.6) !important; width: 16px !important; }
.gift-glow { background: radial-gradient(closest-side, rgba(255,201,60,.45), rgba(167,139,250,.18) 55%, transparent 72%) !important; }
.gift-box { filter: drop-shadow(0 14px 30px rgba(5,9,24,.5)); }

/* R76d 开场氛围光斑 */
#scene-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px 300px at 16% 24%, rgba(167,139,250,.14), transparent 70%),
    radial-gradient(380px 280px at 86% 68%, rgba(79,195,161,.12), transparent 70%),
    radial-gradient(300px 240px at 70% 12%, rgba(255,201,60,.10), transparent 70%);
}
/* 注意：不要用 #scene-intro > * 强改 position——会把 nebula canvas 和 .deco 怪物
   从 absolute 拉回 flex 流，导致内容整体右推截断（R79 回归，R85 修复）。
   intro-wrap 本身自带 position:relative + z-index:1（style.css R21），层级已够。 */

/* R76d 跳过钮：实底可点 */
.sd-skip {
  background: #34406E !important; color: #D5DFFB !important; font-weight: 600;
  border-radius: 99px !important; box-shadow: 0 4px 12px rgba(5,9,24,.4) !important;
}
.sd-skip:hover { background: #3D4B80 !important; color: #FFF !important; }

/* R76d 精灵头像：渐变光球 */
.sd-avatar {
  background: linear-gradient(160deg, rgba(124,92,255,.28), rgba(79,195,161,.22)) !important;
  box-shadow: 0 0 20px rgba(124,92,255,.35), inset 0 2px 4px rgba(255,255,255,.25) !important;
}
.cp-avatar {
  background: linear-gradient(160deg, rgba(255,201,60,.24), rgba(255,138,91,.18)) !important;
  box-shadow: 0 0 16px rgba(255,201,60,.3) !important;
}

/* ---- 分层徽章：夜色糖果 ---- */
.tier-badge { border: none !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.tier-badge.green { background: rgba(79, 195, 161, .16) !important; color: #6FE3BC !important; }
.tier-badge.yellow { background: rgba(255, 201, 60, .15) !important; color: #FFD76A !important; }
.tier-badge.red { background: rgba(240, 101, 90, .16) !important; color: #FF9C93 !important; }

/* ---- 对白框：夜光泡泡 ---- */
.sd-bubble {
  background: linear-gradient(180deg, #3A4878, #2E3B67) !important;
  border: none !important;
  border-radius: 8px 24px 24px 24px !important;
  box-shadow: 0 14px 34px rgba(5, 9, 24, .5), inset 0 1px 0 rgba(255,255,255,.1) !important;
  color: #F0F4FF !important; font-weight: 600; font-size: 15.5px;
}
.sd-avatar { background: rgba(79,195,161,.18) !important; border: none !important; box-shadow: 0 0 18px rgba(79,195,161,.35); }
.companion .cp-text {
  background: #2E3B67 !important; border: none !important;
  border-radius: 6px 18px 18px 18px !important; color: #F0F4FF !important;
  box-shadow: 0 10px 26px rgba(5,9,24,.5) !important;
}
.cp-avatar { background: rgba(255,201,60,.16) !important; border: none !important; box-shadow: 0 0 16px rgba(255,201,60,.3); }
.spirit-line { background: rgba(46,59,103,.7) !important; border: none !important; border-radius: 16px; box-shadow: var(--shadow-card); }

/* ---- 3D 夜窗：融入夜底 ---- */
.world-holder {
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.5) 0 2.5px, transparent 3px),
    radial-gradient(circle at 78% 12%, rgba(255,255,255,.4) 0 2px, transparent 2.5px),
    radial-gradient(circle at 62% 88%, rgba(255,255,255,.3) 0 2px, transparent 2.5px),
    radial-gradient(720px 520px at 55% 42%, #1B2A52, #101A36 72%) !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: var(--shadow-card-lg), inset 0 0 70px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.05) !important;
}
.world-hint { background: rgba(16, 26, 54, .75) !important; color: #CFE0FF !important; border-radius: 99px; }
.ex-video-wrap { background: #101A36; border: none !important; border-radius: 26px !important; box-shadow: var(--shadow-card-lg), 0 0 0 1px rgba(255,255,255,.05); }
.ex-start-cover { background: rgba(16, 24, 50, .86) !important; }
.ex-cover-title { color: #FFF !important; font-weight: 800; }
.ex-cover-sub { color: var(--ink-dim) !important; }
.fx-flash { background: radial-gradient(circle at 50% 60%, rgba(255,236,180,.6), rgba(255,201,60,.18) 55%, transparent 75%) !important; }

/* ---- 拍摄 / 分析 ---- */
.capture-status { color: var(--ink-dim); font-weight: 700; }
.capture-status.ok { color: #6FE3BC; font-size: 14.5px; }
.capture-status.warn { color: #FFD76A; }
/* R76d 三钮主次：上传=金描边主角，摄像头=次，示例=弱化虚线 */
#btn-upload {
  background: linear-gradient(180deg, rgba(255,201,60,.16), rgba(255,201,60,.06)) !important;
  color: #FFD666 !important;
  box-shadow: inset 0 0 0 2px rgba(255,201,60,.55), 0 6px 16px rgba(5,9,24,.3) !important;
}
#btn-upload:hover:not(:disabled) { background: rgba(255,201,60,.2) !important; box-shadow: inset 0 0 0 2px var(--gold), 0 8px 20px rgba(255,201,60,.18) !important; }
#btn-sample { opacity: .82; font-size: 13px !important; }
#btn-sample:hover { opacity: 1; }
/* R76d 就绪脉冲：可唤醒时主按钮呼吸 */
#btn-to-analyze:not(:disabled) { animation: readyPulse 2.2s ease-in-out infinite; }
@keyframes readyPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(94,116,205,.45), inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 0 rgba(124,150,255,.4); }
  50% { box-shadow: 0 6px 24px rgba(94,116,205,.6), inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 9px rgba(124,150,255,0); }
}
.guide-list { gap: 12px !important; }
.source-btns { gap: 10px !important; }
.scene-sub { margin-bottom: 14px; }
.analyze-steps li {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 50%), var(--card-deep) !important;
  border: none !important; color: var(--ink-dim) !important; border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important; padding: 11px 18px !important;
}
.analyze-steps li.run { color: #FFF !important; box-shadow: 0 0 0 2px rgba(255,201,60,.4), var(--shadow-card) !important; }
.analyze-steps li.done { color: #6FE3BC !important; }
.scan-planet { box-shadow: 0 0 44px rgba(255, 201, 60, .5), inset -8px -10px 24px rgba(0,0,0,.4); }
.scan-sweep { border-top-color: var(--gold); border-right-color: rgba(255, 201, 60, .5); }
.tripo-status { color: var(--blue) !important; }

/* ---- 试炼 ---- */
.mission-tab {
  background: var(--card-deep) !important; border: none !important; color: var(--ink-dim) !important;
  border-radius: 16px !important; box-shadow: var(--shadow-card) !important; font-weight: 600;
}
.mission-tab.active {
  color: #FFF !important; background: linear-gradient(180deg, #3D4B80, #34406E) !important;
  box-shadow: 0 0 0 2px rgba(255, 201, 60, .55), var(--shadow-card) !important;
}
.mission-tab.finished { color: #6FE3BC !important; box-shadow: 0 0 0 2px rgba(79,195,161,.35), var(--shadow-card) !important; }
.ex-gauge { background: rgba(255,255,255,.1) !important; }
.ex-gauge-fill { background: linear-gradient(90deg, #FFC93C, #FF8A5B) !important; }
/* R76d 提示行：引导框化（左侧金条） */
.ex-tip {
  color: #FFD666 !important; font-weight: 700; min-height: 40px !important;
  background: rgba(255,201,60,.08) !important; border-left: 3px solid var(--gold) !important;
  border-radius: 8px 14px 14px 8px !important; padding: 9px 12px !important; line-height: 1.55;
}
.es-lbl { color: var(--ink-dim) !important; }
.es-val { color: #FFF; }
/* R76d 质量值徽章化 + 计数主角化 */
#ex-form.es-val { font-size: 13px !important; background: rgba(255,201,60,.15); color: #FFD666 !important; border-radius: 99px; padding: 3px 12px; display: inline-block; }
.ex-stat:first-child .es-val { font-size: 24px; color: #FFD666; text-shadow: 0 0 14px rgba(255,201,60,.35); }
.ex-stat:first-child { background: linear-gradient(180deg, rgba(255,201,60,.10), rgba(255,255,255,0) 60%), var(--card-deep) !important; }
.energy-dot { background: rgba(255,255,255,.1) !important; border: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.energy-dot.on { background: var(--teal) !important; box-shadow: 0 0 16px rgba(79,195,161,.7) !important; }
.energy-lbl, .vit-lbl { color: var(--ink-dim) !important; }
.ex-stat { padding: 11px 9px !important; border-radius: 16px !important; }
.opp-strip { background: var(--card-deep) !important; border: none !important; border-radius: 14px; box-shadow: var(--shadow-card); }
.opp-count { color: #C9BCFF !important; }
.opp-bar { background: rgba(255,255,255,.1) !important; }
.cutscene-banner { background: rgba(22, 32, 64, .9) !important; border: none !important; border-radius: 18px; box-shadow: var(--shadow-card-lg); }
.cutscene-banner .cb-title { color: #FFDFA1; }
.cutscene-banner .cb-sub { color: var(--blue); }

/* ---- 成长 ---- */
.vitality .vit-fill { background: linear-gradient(90deg, #FFC93C, #4FC3A1) !important; }
.vit-bar { background: rgba(255,255,255,.1) !important; }
.vit-num { color: #6FE3BC !important; }
/* R76d 分区小节标题：卡片瀑布的分章锚点 */
.g-section-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: 1.5px; color: #8FA0CC;
  text-transform: uppercase; margin: 6px 2px -2px; display: flex; align-items: center; gap: 8px;
}
.g-section-label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(143,160,204,.4), transparent); }
/* R76d 指标对比 2×2 网格卡 */
.delta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.delta-cell {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 50%), var(--card-deep);
  border-radius: 14px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px;
  box-shadow: var(--shadow-card);
}
.delta-cell .dc-name { font-size: 11px; color: var(--ink-dim); }
.delta-cell .dc-line { font-size: 12.5px; color: #FFF; font-weight: 700; font-variant-numeric: tabular-nums; }
.delta-cell .dc-pill {
  align-self: flex-start; font-size: 10.5px; font-weight: 800; border-radius: 99px; padding: 1.5px 8px;
}
.delta-cell .dc-pill.better { background: rgba(79,195,161,.18); color: #6FE3BC; }
.delta-cell .dc-pill.worse { background: rgba(240,101,90,.18); color: #FF9C93; }
.delta-cell .dc-pill.flat { background: rgba(255,255,255,.1); color: var(--ink-dim); }
.growth-msg { background: linear-gradient(180deg, rgba(79,195,161,.14), rgba(79,195,161,.06)) !important; border: none !important; color: #EAF6F0 !important; }
.growth-msg::after { background: #26304F !important; border: none !important; color: #6FE3BC !important; box-shadow: 0 0 0 1px rgba(79,195,161,.35); }
.name-row { color: var(--ink-dim); }
.name-row input { background: #26304F !important; border: none !important; color: #FFF !important; border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.name-row input:focus { box-shadow: 0 0 0 2px rgba(255,201,60,.5); }
.name-row input::placeholder { color: #6E7DA8; }
.hl-vit { color: #6FE3BC !important; }
.ba-pair img { border: none; box-shadow: var(--shadow-card); }
.ba-pair figcaption { color: var(--ink-dim) !important; }
.codex-title, .letter-title { color: var(--ink-dim) !important; font-weight: 700; letter-spacing: .5px; }
.cc-name { color: #FFF !important; }
.cc-region { color: #6FE3BC !important; }
.cc-source { color: var(--blue) !important; border-top: 1px dashed rgba(255,255,255,.12) !important; }
.codex-card { border-radius: 18px !important; }
.codex-card:hover { box-shadow: 0 0 0 2px rgba(255,201,60,.4), var(--shadow-card) !important; }
.letter { background: linear-gradient(160deg, rgba(255,201,60,.10), rgba(167,139,250,.08)) !important; border: none !important; border-radius: 18px !important; box-shadow: var(--shadow-card) !important; }
.letter-text b { color: #FFF; }
.history-list li { border-radius: 14px !important; }
.metric-note { border-radius: 14px !important; padding: 10px 13px !important; }
.legend { border-radius: 14px !important; }
.guide-list li { border-radius: 16px !important; padding: 12px 15px !important; }
.growth-list li { border-radius: 14px !important; padding: 10px 13px !important; }
.sample-picker { border-radius: 20px !important; }
.spine-curve { border-radius: 18px !important; }
.growth-msg, .metric-card { border-radius: 18px !important; }
.metric-card { padding: 13px 15px !important; }
.metric-card:hover { box-shadow: 0 0 0 2px rgba(126,182,255,.45), var(--shadow-card) !important; transform: translateX(3px); }
.report-panel, .growth-panel { gap: 15px; padding: 22px; }
.ex-detail { gap: 13px; border-radius: 26px !important; }

/* ---- 弹窗 / Toast / PK ---- */
.toast {
  background: #34406E !important; border: none !important; color: #FFF !important;
  font-weight: 700; border-radius: 99px !important;
  box-shadow: 0 14px 34px rgba(5,9,24,.55), 0 0 0 1px rgba(255,255,255,.08) !important;
}
.modal { background: rgba(10, 15, 34, .66); }
.modal-card h3, .pk-title { color: #FFF !important; }
.field input { background: #26304F !important; border: none !important; color: #FFF !important; border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.field input:focus { box-shadow: 0 0 0 2px rgba(255,201,60,.5); }
.about-block { border-top: 1px solid rgba(255,255,255,.08) !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; }
.about-block b { color: #FFF; }
.pk-overlay { background: rgba(10, 15, 34, .74); }
.pk-card { padding: 30px 26px !important; }
.pk-sub { color: var(--ink-dim) !important; }
.pk-ava { background: rgba(79,195,161,.16) !important; border: none !important; box-shadow: 0 0 0 2px rgba(79,195,161,.4); }
.pk-opp .pk-ava { background: rgba(167,139,250,.16) !important; box-shadow: 0 0 0 2px rgba(167,139,250,.45) !important; }
.pk-vs-mark { color: #C9BCFF !important; text-shadow: 0 0 22px rgba(167,139,250,.8) !important; }
.pk-count { color: #FFD76A !important; text-shadow: 0 0 30px rgba(255,201,60,.7) !important; }
.pk-radar { border-color: rgba(167,139,250,.5) !important; }
.pk-radar i { border-color: rgba(167,139,250,.75) !important; }
.pk-room-row input { background: #26304F !important; border: none !important; color: #FFF !important; border-radius: 12px; box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.pk-room-row input:focus { box-shadow: 0 0 0 2px rgba(255,201,60,.5); }
.pk-myroom { color: var(--ink-dim) !important; }

/* ---- 页脚 / boot / 焦点 ---- */
#foot {
  background: rgba(13, 20, 42, .5) !important; border-top: none !important; color: #7487B4 !important;
  font-size: 10.5px !important;
}
#foot > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 68%; }
#boot { background: radial-gradient(1000px 700px at 50% 30%, #223052, #141D38 75%) !important; }
.boot-title { color: #FFF; }
.boot-msg { color: #8FA0CC; }
.boot-fill { background: linear-gradient(90deg, #FFC93C, #FF8A5B) !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.sd-hint { color: var(--gold); }
.sd-skip { background: rgba(255,255,255,.07) !important; border: none !important; color: var(--ink-dim) !important; }
.corrupt-chip { background: rgba(30, 18, 52, .85) !important; border: none !important; color: #E4C8F5; box-shadow: 0 0 0 1px rgba(192,121,232,.4), 0 8px 20px rgba(5,9,24,.4); }
.corrupt-chip b { color: #D8A6F5; }

/* ---- 粒子糖果化 ---- */
.star-rain { background: radial-gradient(circle, #FFF7D9, #FFC93C 60%, transparent) !important; }
.fx-burst.b0 { background: radial-gradient(circle, #C9F7E4, #4FC3A1) !important; box-shadow: 0 0 10px rgba(79,195,161,.9) !important; }
.fx-burst.b1 { background: radial-gradient(circle, #FFF3C4, #FFC93C) !important; box-shadow: 0 0 10px rgba(255,201,60,.9) !important; }
.fx-burst.b2 { background: radial-gradient(circle, #FFD9E8, #FF8FAB) !important; box-shadow: 0 0 10px rgba(255,143,171,.9) !important; }

/* ================================================================
   R76b 插画层：程序化 SVG 装饰（怪物小伙伴 / 星植物 / 星光）
   ================================================================ */

/* 开场两侧插画伙伴（浮动动画） */
.deco { position: absolute; z-index: 1; pointer-events: none; }
#scene-intro .deco-left  { left: calc(50% - 470px); top: 30%; width: 130px; }
#scene-intro .deco-right { right: calc(50% - 480px); top: 40%; width: 120px; }
@media (max-width: 1080px) { #scene-intro .deco-left, #scene-intro .deco-right { display: none; } }
.deco-float { animation: decoFloat 4.6s ease-in-out infinite; }
.deco-float.d2 { animation-delay: -1.6s; animation-duration: 5.4s; }
.deco-float.d3 { animation-delay: -2.8s; animation-duration: 6.2s; }
@keyframes decoFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-13px) rotate(2.5deg); }
}

/* 标题旁的星光 */
.title-stars { display: inline-block; }
.title-stars svg { vertical-align: middle; }

/* 拖放区插画 */
.dz-art { margin: 0 auto 12px; width: 128px; filter: drop-shadow(0 12px 22px rgba(5, 9, 24, .45)); animation: decoFloat 5.2s ease-in-out infinite; }

/* 报告面板角落的星叶装饰 */
.panel-deco { position: absolute; right: 18px; top: 14px; pointer-events: none; opacity: .9; }
.report-panel, .growth-panel { position: relative; }

/* 成长页标题星光 */
.growth-panel .scene-title { position: relative; }

/* boot 行星换成糖果双色 */
.boot-planet { background: radial-gradient(circle at 34% 30%, #FFDF8E, #FF9F4A 68%, #D96C2A) !important; box-shadow: 0 0 46px rgba(255, 201, 60, .5) !important; }

/* ---- R78 可选补充 · 双侧位照 ---- */
.side-block {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 50%), var(--card-deep);
  border: none; border-radius: 20px; padding: 13px 15px; margin-bottom: 12px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 9px;
}
.side-slots { display: flex; gap: 9px; }
.side-slot {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.06); border: none; border-radius: 14px;
  padding: 11px 8px; cursor: pointer; color: #CBD6F5; font-family: var(--font);
  font-size: 13.5px; font-weight: 700; min-height: 58px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: all .2s;
  overflow: hidden;
}
.side-slot:hover { background: rgba(255,255,255,.1); color: #FFF; }
.side-slot.pending {
  box-shadow: 0 0 0 2px rgba(255,201,60,.65), var(--shadow-card);
  color: #FFD666; animation: readyPulse 2s ease-in-out infinite;
}
.side-slot.done {
  box-shadow: 0 0 0 2px rgba(79,195,161,.5), var(--shadow-card);
  color: #6FE3BC;
}
.side-slot .ss-thumb {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover;
  box-shadow: 0 0 0 2px rgba(79,195,161,.45);
}
.side-note { font-size: 11.5px; color: var(--ink-dim); line-height: 1.6; }

/* ---- R81 裸眼 3D 设置行 ---- */
.s3d-row { gap: 8px; }
.s3d-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.s3d-btns .btn { border-radius: 99px !important; }
.s3d-btns .btn.active-s3d {
  background: linear-gradient(180deg, rgba(255,201,60,.22), rgba(255,201,60,.08)) !important;
  color: #FFD666 !important;
  box-shadow: inset 0 0 0 2px rgba(255,201,60,.6) !important;
}

/* ---- R83 屏参配置 ---- */
.s3d-cfg { gap: 8px; margin-top: -4px; }
.s3d-cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.s3d-cfg-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-dim); }
.s3d-cfg-grid em { font-style: normal; font-weight: 700; }
.s3d-cfg-grid input, .s3d-cfg-grid select {
  background: #26304F !important; border: none !important; color: #FFF !important;
  border-radius: 10px !important; padding: 7px 9px; font-size: 13px; outline: none;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.25); font-family: Consolas, monospace; width: 100%;
}
.s3d-cfg-grid input:focus, .s3d-cfg-grid select:focus { box-shadow: 0 0 0 2px rgba(255,201,60,.5); }
.s3d-cfg .field-note { margin: 2px 0 0; }

/* ---- R82 影院模式（3D 全屏） ---- */
.world-fs {
  position: absolute; right: 12px; bottom: 12px; z-index: 4;
  width: 34px; height: 34px; border-radius: 12px; border: none; cursor: pointer;
  background: rgba(16, 26, 54, .72); color: #CFE0FF; font-size: 15px;
  box-shadow: 0 4px 12px rgba(5,9,24,.45), inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .2s, transform .15s;
}
.world-fs:hover { background: rgba(61, 75, 128, .9); color: #FFF; transform: translateY(-1px); }

.theater { position: fixed; inset: 0; z-index: 130; background: #0B1228; }
.theater .world-canvas { position: absolute; inset: 0; }
.theater-exit {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  background: rgba(16, 26, 54, .78); color: #D5DFFB; border: none; cursor: pointer;
  border-radius: 99px; padding: 8px 16px; font-family: var(--font); font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(5,9,24,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.theater-exit:hover { background: rgba(61, 75, 128, .95); color: #FFF; }
.theater-hint {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  font-size: 12px; color: #7487B4; background: rgba(16,26,54,.6);
  padding: 4px 14px; border-radius: 99px; pointer-events: none;
}

/* ---- R89 高危问卷 ---- */
.risk-q { background: linear-gradient(180deg, rgba(240,101,90,.10), rgba(240,101,90,.03)); border-radius: 18px; padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 9px; }
.risk-q .sample-hint { color: #FF9C93 !important; font-weight: 700; margin: 0; }
.risk-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.risk-chip {
  background: rgba(255,255,255,.06); border: none; border-radius: 99px; cursor: pointer;
  padding: 8px 13px; color: #CBD6F5; font-family: var(--font); font-size: 12.5px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: all .2s;
}
.risk-chip:hover { background: rgba(255,255,255,.1); color: #FFF; }
.risk-chip.on {
  background: rgba(240,101,90,.22) !important; color: #FFB5AC !important;
  box-shadow: 0 0 0 2px rgba(240,101,90,.6) !important;
}

/* ---- R90 缘起 ---- */
.origin-link {
  display: inline-block; margin-top: 10px; background: none; border: none; cursor: pointer;
  color: #8FA0CC; font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 6px 14px; border-radius: 99px; transition: all .2s;
}
.origin-link:hover { color: #FFD666; background: rgba(255,201,60,.08); }
.origin-card {
  width: min(600px, 92vw); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 8%), var(--card) !important;
  border: none !important; border-radius: 26px !important; padding: 26px 28px !important;
  box-shadow: var(--shadow-card-lg) !important;
}
.origin-title { color: #FFF !important; font-size: 19px; margin-bottom: 16px; letter-spacing: .5px; }
.origin-body p {
  font-size: 13.5px; line-height: 2.05; color: #D5DFF5; margin-bottom: 12px; text-align: justify;
}
.origin-body b { color: #FFF; }
.origin-body b.hl { color: #FFD666; font-weight: 800; }
.origin-sign { text-align: right; color: #8FA0CC !important; font-size: 12px; margin: 14px 0 16px; line-height: 1.9; }
.origin-author { color: #FFD666 !important; font-size: 13.5px; font-weight: 800; letter-spacing: 1px; }
.origin-date { opacity: .8; }

/* ---- 移动端 ---- */
@media (max-width: 760px) {
  #topbar { margin: 8px 8px 0; padding: 8px 12px; }
  .scene { padding: 12px 10px; }
  .scene-title { font-size: 19px; }
  .report-panel, .growth-panel, .ex-detail { border-radius: 22px !important; padding: 16px 14px; }
  .world-holder { border-radius: 22px !important; }
  .dz-art { width: 104px; }
}

/* R93 拍摄页操作条吸底：内容变长（要点+风险问卷+侧位槽位）后「唤醒星球」被推出视口，
   用户找不到继续按钮——sticky 让主操作永远可见 */
.capture-actions {
  position: sticky;
  bottom: 0;
  z-index: 6;
  padding: 14px 2px 16px;
  margin-top: 14px;
  background: linear-gradient(to top, var(--bg0) 55%, rgba(30, 42, 69, 0));
  backdrop-filter: blur(6px);
}

/* R95 本地用户系统：顶栏档案 chip + 起名/切换弹窗 */
.user-chip {
  margin-left: 12px; padding: 5px 14px; border: none; border-radius: 999px;
  background: rgba(255, 214, 102, .14); color: #FFD666; font: 700 12.5px/1 inherit;
  letter-spacing: .5px; cursor: pointer; transition: background .2s;
}
.user-chip:hover { background: rgba(255, 214, 102, .26); }
.user-chip::before { content: "🌱 "; }
.user-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.user-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-radius: 16px; border: none; cursor: pointer;
  background: rgba(255,255,255,.05); color: var(--ink); font: 600 14px/1.3 inherit;
  text-align: left; transition: background .2s;
}
.user-item:hover { background: rgba(255,255,255,.11); }
.user-item.on { background: rgba(255, 214, 102, .16); color: #FFD666; }
.user-item .u-meta { font-size: 11px; opacity: .65; font-weight: 400; }
.user-newrow { display: flex; gap: 10px; }
.user-input {
  flex: 1; padding: 11px 16px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25); color: var(--ink); font: 500 14px/1 inherit; outline: none;
}
.user-input:focus { border-color: rgba(255, 214, 102, .55); }
