/* ==========================================================================
   到场（Arrive）· 玻璃拟态增强层（V3.5 视觉改版）
   风格基准：用户拍板「大厂 APP 高级质感」——深色底 + 毛玻璃卡片 + 多层光影内发光。
   本层从「手作涂鸦覆盖层」改为「玻璃拟态增强层」：
   · 不再关闭 backdrop-filter，反而统一强化毛玻璃（blur + saturate）；
   · 去掉手绘歪斜圆角、蜡笔描边、错位偏移阴影等与「高级感」冲突的元素；
   · 保留纸面纹理点、浮空小星等轻装饰，作为玻璃底下的「可折射内容」。
   全程只覆盖令牌与观感，不动任何 class/id/结构，JS 契约零改动。
   加载顺序：style.css → fun.css → 页面 css → 本文件。
   深浅主题机制沿用：默认深色 = 夜光玻璃，html[data-theme="light"] = 暖纸玻璃。
   ========================================================================== */

/* ---------- 1. 令牌覆盖：统一玻璃拟态，暖灯唯一强调色 ---------- */
:root,
:root:not([data-theme="light"]) {
  /* 夜光玻璃（深色默认） */
  --bg: #0B0F18;
  --panel: rgba(22, 29, 46, .55);
  --panel-2: rgba(255, 255, 255, .06);
  --panel-solid: #141B2B;
  --field: rgba(255, 255, 255, .05);
  --line: rgba(255, 255, 255, .10);
  --line-soft: rgba(245, 201, 122, .22);
  --text: #eef0f6;
  --muted: #9aa3b8;
  --accent: #F5C97A;
  --accent-deep: #C08A2E;
  --accent-ink: #1A1208;
  --warn: #d8b56a;
  --danger: #E8B07A;
  --accent-2: #F0D9A8;
  --gold: #C08A2E;
  --grad-accent: linear-gradient(135deg, #FFE8B8 0%, #E5B45C 52%, #C08A2E 100%);
  --grad-panel: linear-gradient(165deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 42%, rgba(255, 255, 255, 0) 100%);
  --grad-line: linear-gradient(90deg, rgba(245, 201, 122, .55), rgba(245, 201, 122, .06));
  --ring: 0 0 0 1px rgba(245, 201, 122, .22);
  --shadow-1: 0 2px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12);
  --shadow-2: 0 16px 40px -16px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  --shadow-glow: 0 8px 26px -10px rgba(245, 201, 122, .48), inset 0 1px 0 rgba(255, 255, 255, .2);
  --grad-hero: radial-gradient(120% 130% at 18% 0%, rgba(245, 201, 122, .16), transparent 46%),
               radial-gradient(90% 110% at 92% 8%, rgba(227, 197, 132, .07), transparent 52%);
  /* 统一大圆角：玻璃拟态不再用不对称手绘弧度 */
  --radius: 18px;
  --radius-sm: 12px;
  --dd-ink: rgba(255, 255, 255, .14);
  --dd-crayon-g: #F5C97A;
  --dd-crayon-y: #FFE8B8;
  --dd-crayon-c: #E8B07A;
  --dd-ink-text: #1A1208;
  --dd-dot: rgba(160, 190, 255, .05);
}

html[data-theme="light"] {
  /* 冷调浅灰玻璃（浅色）——V3.5 与 style.css 同源，去泛黄陈旧感 */
  --bg: #F5F6F8;
  --panel: rgba(255, 255, 255, .78);
  --panel-2: #ECEEF2;
  --panel-solid: #ffffff;
  --field: #ffffff;
  --line: #E3E5EA;
  --line-soft: rgba(185, 138, 60, .22);
  --text: #1B1F27;
  --muted: #6B7280;
  --accent: #B98A3C;
  --accent-deep: #96702B;
  --accent-ink: #ffffff;
  --warn: #9a7420;
  --danger: #A9783A;
  --accent-2: #96702B;
  --gold: #a3822f;
  --grad-accent: linear-gradient(135deg, #C79A4B 0%, #B98A3C 52%, #96702B 100%);
  --grad-panel: linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 46%);
  --grad-line: linear-gradient(90deg, rgba(185, 138, 60, .4), rgba(185, 138, 60, .05));
  --ring: 0 0 0 1px rgba(185, 138, 60, .2);
  --shadow-1: 0 1px 2px rgba(27, 31, 39, .06);
  --shadow-2: 0 12px 28px -16px rgba(27, 31, 39, .18);
  --shadow-glow: 0 8px 22px -12px rgba(185, 138, 60, .32);
  --grad-hero: radial-gradient(120% 130% at 18% 0%, rgba(185, 138, 60, .08), transparent 46%),
               radial-gradient(90% 110% at 92% 8%, rgba(163, 130, 47, .06), transparent 52%);
  --dd-ink: rgba(58, 53, 48, .16);
  --dd-crayon-g: #C08A2E;
  --dd-crayon-y: #f0c14b;
  --dd-crayon-c: #C08A2E;
  --dd-ink-text: #ffffff;
  --dd-dot: rgba(58, 53, 48, .05);
}

/* ---------- 2. 纸面与全局：玻璃底下的可折射光斑 ---------- */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
/* 纸面纹理点：极淡，作为玻璃底下的「可折射内容」，不抢戏 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(var(--dd-dot) 1px, transparent 1px);
  background-size: 22px 22px;
}
body > .wrap { position: relative; z-index: 1; }

/* 浮空小星：一左一右两颗，慢慢飘，保留轻装饰 */
body::after {
  content: "✦";
  position: fixed;
  top: 84px;
  right: 18px;
  font-size: 22px;
  color: var(--dd-crayon-y);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  animation: dd-bob 3.6s ease-in-out infinite;
}

/* ---------- 3. 公共壳：顶栏 / 底栏 / fab 玻璃化 ---------- */
.topbar {
  background: rgba(11, 13, 18, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
}
.topbar::after { display: block; }
.brand { font-weight: 650; transform: none; }
.brand img { filter: none; }
.nav-item {
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  background: transparent;
}
.nav-item:hover {
  border-color: var(--line);
  background: var(--panel-2);
  transform: none;
}
.nav-item.on {
  border-color: rgba(245, 201, 122, .3);
  background: rgba(245, 201, 122, .12);
  color: var(--accent-2);
  box-shadow: none;
}
html[data-theme="light"] .nav-item.on,
html:not([data-theme="light"]) body.theme-night .nav-item.on { color: var(--accent-2); }

.tabbar {
  background: rgba(11, 13, 18, .55);
  border-top: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 -8px 24px -20px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
}
.tab { color: var(--muted); transition: transform var(--t-1) var(--ease); }
.tab:hover { transform: translateY(-2px); }
.tab.on { color: var(--accent-2); background: rgba(245, 201, 122, .13); box-shadow: none; }

.fab {
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: var(--grad-accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-glow), var(--shadow-1);
}
.fab:hover { transform: translateY(-1px); }
.fab:active { box-shadow: var(--shadow-1); transform: translateY(1px) scale(.985); }

/* ---------- 4. 卡片：毛玻璃 + 光边 + 顶部高光（不再关玻璃） ---------- */
.card {
  background: var(--panel-solid);
  background-image: var(--grad-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1), var(--shadow-2);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
}
.card::before { display: block; }   /* 保留玻璃卡顶部高光 */
.card:hover { transform: translateY(-2px); }

/* 浅色主题下，营页夜景门楼（.night-hero）被 .card 覆盖为浅底，
   标题/副题必须跟着换深色，否则白字看不见（2026-11-13 站长反馈） */
html[data-theme="light"] .night-hero h1 { color: var(--text); }
html[data-theme="light"] .night-hero .night-sub { color: var(--muted); }
html[data-theme="light"] .night-hero::before {
  background:
    linear-gradient(180deg, rgba(95, 155, 137, .10), transparent 40%),
    linear-gradient(180deg, #fffdf5 0%, #fbf3dd 100%);
}

/* 浅色主题下，问一下 / 结营报告 / 许愿池等页硬编码的夜色浅字换主题深字；
   .room-night（沉浸夜屋）与 .task-card（自带深底）保持夜色字不动 */
html[data-theme="light"] .ask-promise h2,
html[data-theme="light"] .ask-kind span,
html[data-theme="light"] .ask-receipt p,
html[data-theme="light"] .ask-self summary,
html[data-theme="light"] .report-title,
html[data-theme="light"] .report-nums dd,
html[data-theme="light"] .report-spirit { color: var(--text); }
html[data-theme="light"] .ask-promise p,
html[data-theme="light"] .ask-kinds legend,
html[data-theme="light"] .report-nums dt,
html[data-theme="light"] .report-nums dd small,
html[data-theme="light"] .wish-desc,
html[data-theme="light"] .wish-date,
html[data-theme="light"] .wish-badge-doing,
html[data-theme="light"] .how-card summary::after { color: var(--muted); }
/* 选项条自带硬编码深底，浅色主题换浅底浅描边 */
html[data-theme="light"] .ask-kind { background: #fbf3dd; border-color: #d8cfba; }
html[data-theme="light"] .ask-self details { border-top-color: #e6dcc4; }

/* 主行动卡 / 输入区保留呼吸光 */
.capture {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* ---------- 5. 按钮：玻璃按压，主按钮渐变 ---------- */
.btn {
  font-weight: 550;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .16s var(--ease);
}
.btn.primary, .btn:not(.ghost):not(.text):not(.danger):not(.small) {
  background: var(--grad-accent);
  color: var(--accent-ink);
}
.btn.ghost { background: transparent; color: var(--text); }
.btn.danger { background: transparent; color: var(--danger); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: var(--shadow-1); }
.btn.small { border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }

/* ---------- 6. 表单：玻璃输入 ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea, select {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
textarea:focus, select:focus {
  outline: none;
  box-shadow: var(--ring);
}
.field-label { font-weight: 600; }

/* ---------- 7. 标签贴纸（chip/tag 类复用）：玻璃胶囊 ---------- */
.chip, .tag, .pill, .badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  box-shadow: none;
  font-weight: 600;
}

/* ---------- 8. 标题气质：去掉手写歪斜 ---------- */
h1, .home-head { transform: none; }
h2 { transform: none; }

/* ---------- 9. 进场：卡片依次落位（复用滚动揭示时机） ---------- */
@keyframes dd-pop {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dd-bob {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50% { transform: translateY(-9px) rotate(14deg); }
}
main.wrap > .card,
main > .card,
.wrap > main > .card { animation: dd-pop .5s cubic-bezier(.22, .82, .3, 1) both; }
main.wrap > .card:nth-of-type(2), main > .card:nth-of-type(2) { animation-delay: .08s; }
main.wrap > .card:nth-of-type(3), main > .card:nth-of-type(3) { animation-delay: .16s; }
main.wrap > .card:nth-of-type(4), main > .card:nth-of-type(4) { animation-delay: .24s; }
main.wrap > .card:nth-of-type(5), main > .card:nth-of-type(5) { animation-delay: .32s; }

/* ---------- 10. 夜光玻璃：夜间导航与 theme-night 页 ---------- */
html:not([data-theme="light"]) body.theme-night { --dd-ink: rgba(255, 255, 255, .14); }
html:not([data-theme="light"]) body.theme-night .topbar,
html:not([data-theme="light"]) body.theme-night .tabbar {
  background: rgba(11, 13, 18, .55);
  border-color: rgba(255, 255, 255, .08);
}
html:not([data-theme="light"]) body.theme-night .nav-item.on,
html:not([data-theme="light"]) body.theme-night .tab.on { color: #F5C97A; }
html:not([data-theme="light"]) body.theme-night .card {
  background: rgba(22, 29, 46, .55);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: var(--shadow-1), var(--shadow-2);
}

/* 房间页沉浸夜屋例外：保留夜空体系，只把卡片描边统一成夜光墨线 */
html:not([data-theme="light"]) body.theme-night .room-night .card,
html:not([data-theme="light"]) body.theme-night .night-sky .card {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
  transform: none;
}
html:not([data-theme="light"]) body.theme-night .room-night .card:hover { transform: none; }

/* ---------- 11. 动效关停（站点开关 + 系统偏好双保险） ---------- */
html[data-motion="off"] body::after { display: none; }
html[data-motion="off"] main.wrap > .card,
html[data-motion="off"] main > .card,
html[data-motion="off"] .wrap > main > .card,
html[data-motion="off"] .btn,
html[data-motion="off"] .nav-item,
html[data-motion="off"] .tab,
html[data-motion="off"] .fab,
html[data-motion="off"] .card { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 12. 桌面端适配 ---------- */
@media (min-width: 768px) {
  body::after { top: 110px; right: 40px; font-size: 26px; }
  .card:hover { transform: translateY(-2px); }
}

/* ==========================================================================
 9. V2.3.0 灯系留存层（灯芯卡 / 火柴 / 灯窗墙）——只走 --dd-* token，
 深浅两套主题自动生效；不新增结构契约，纯装饰。
 ========================================================================== */
.lamp-card {
 display: flex;
 align-items: center;
 gap: 14px;
 flex-wrap: wrap;
}
.lamp-visual {
 flex: 0 0 auto;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 background: var(--dd-dot);
 display: grid;
 place-items: center;
}
.lamp-flame {
 width: 18px;
 height: 26px;
 border-radius: 50% 50% 45% 45%;
 background: var(--dd-crayon-y);
 box-shadow: 0 0 10px 2px var(--dd-crayon-y);
 opacity: .55;
}
.lamp-flame.lamp-wick-1 { opacity: .85; width: 20px; height: 30px; box-shadow: 0 0 16px 4px var(--dd-crayon-y); }
.lamp-flame.lamp-wick-2 { opacity: 1; width: 22px; height: 34px; box-shadow: 0 0 22px 6px var(--dd-crayon-y); }
.lamp-info { flex: 1 1 200px; min-width: 0; }
.lamp-line { margin: 0 0 4px; font-weight: 700; }
.lamp-sub { margin: 0; }
.lamp-sit { flex: 0 0 auto; }
.lamp-sit-btn { white-space: nowrap; }

.lamp-windows { margin-top: 14px; }
.lamp-win-row {
 display: flex;
 align-items: center;
 gap: 12px;
 text-decoration: none;
 padding: 8px 4px;
 border-radius: 12px;
}
.lamp-win-row:hover .lamp-win-go { transform: translateX(3px); }
.lamp-win-strip { display: flex; gap: 6px; flex: 0 0 auto; }
.lamp-win {
 width: 14px;
 height: 20px;
 border-radius: 4px 4px 2px 2px;
 background: var(--dd-crayon-y);
 box-shadow: 0 0 8px 1px var(--dd-crayon-y);
 opacity: .9;
}
.lamp-win:nth-child(2n) { opacity: .7; animation: lamp-win-breathe 3.2s ease-in-out infinite alternate; }
.lamp-win:nth-child(3n) { animation: lamp-win-breathe 4.1s ease-in-out infinite alternate-reverse; }
@keyframes lamp-win-breathe { from { opacity: .55; } to { opacity: 1; } }
.lamp-win-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lamp-win-go { flex: 0 0 auto; transition: transform .2s ease; }
.lamp-win-empty { margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) {
 .lamp-win { animation: none !important; }
}

/* ==========================================================================
 10. V2.3.1 全站悬浮客服按钮（.ask-fab）——玻璃拟态观感，暖灯描边；
 房间页沉浸夜屋（body.theme-night）下压深底色不抢戏。
 ========================================================================== */
.ask-fab {
 position: fixed;
 right: 16px;
 bottom: calc(72px + env(safe-area-inset-bottom, 0px)); /* 避开 tabbar 高度 */
 z-index: 60;
 width: 52px;
 height: 52px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 text-decoration: none;
 font-weight: 700;
 font-size: 17px;
 color: var(--dd-ink-text, var(--text));
 background: var(--grad-accent, var(--accent));
 border: 1px solid rgba(255, 255, 255, .12);
 box-shadow: var(--shadow-glow, 0 4px 14px rgba(0, 0, 0, .25));
 transition: transform .15s ease;
}
.ask-fab:hover { transform: translateY(-2px) scale(1.03); }
/* 页面自带主行动 fab（如营页「开始」）时，问按钮挪到它左边，避免重叠 */
body:has(.fab) .ask-fab { right: calc(16px + 54px + 14px); }
/* 桌面端没有 tabbar，落低一点更顺眼 */
@media (min-width: 768px) {
 .ask-fab { bottom: 24px; right: 24px; }
 /* 桌面 fab 带文字宽度不定，问按钮改叠到 fab 上方 */
 body:has(.fab) .ask-fab { bottom: calc(26px + 54px + 16px); right: 26px; }
}
html:not([data-theme="light"]) body.theme-night .ask-fab {
 color: #141B2B;
 background: var(--grad-accent, #F5C97A);
 border-color: rgba(255, 255, 255, .18);
}

/* ---------- 12. V3.6 全站皮肤系统（data-skin） ---------- */
/* 皮肤只改 token 值，不动 class/id/结构；与深浅色主题正交 */

/* 暖夜（默认）——暖金灯色 + 深靛底 */
html[data-skin="warm"] {
  --skin-accent: #F5C97A;
  --skin-accent-deep: #C08A2E;
  --skin-bg-night: #0B0F18;
  --skin-panel-night: rgba(22, 29, 46, .55);
  --skin-glow: rgba(245, 201, 122, .18);
}
/* 雨夜——冷靛底 + 银蓝强调 */
html[data-skin="rain"] {
  --skin-accent: #8B9DC3;
  --skin-accent-deep: #5A6F99;
  --skin-bg-night: #0E1219;
  --skin-panel-night: rgba(18, 22, 31, .6);
  --skin-glow: rgba(139, 157, 195, .15);
}
html[data-skin="rain"]:not([data-theme="light"]) {
  --bg: #0E1219;
  --panel: rgba(18, 22, 31, .6);
  --accent: #8B9DC3;
  --accent-deep: #5A6F99;
  --shadow-glow: 0 8px 22px -12px rgba(139, 157, 195, .25);
}
/* 雪夜——灰蓝底 + 月白强调 */
html[data-skin="snow"] {
  --skin-accent: #D4D8E0;
  --skin-accent-deep: #A0A8B8;
  --skin-bg-night: #111520;
  --skin-panel-night: rgba(20, 25, 36, .58);
  --skin-glow: rgba(212, 216, 224, .12);
}
html[data-skin="snow"]:not([data-theme="light"]) {
  --bg: #111520;
  --panel: rgba(20, 25, 36, .58);
  --accent: #D4D8E0;
  --accent-deep: #A0A8B8;
  --shadow-glow: 0 8px 22px -12px rgba(212, 216, 224, .2);
}
/* 森林——墨绿底 + 苔藓强调 */
html[data-skin="forest"] {
  --skin-accent: #8FBFAE;
  --skin-accent-deep: #5F9B89;
  --skin-bg-night: #0A1210;
  --skin-panel-night: rgba(14, 22, 18, .58);
  --skin-glow: rgba(143, 191, 174, .15);
}
html[data-skin="forest"]:not([data-theme="light"]) {
  --bg: #0A1210;
  --panel: rgba(14, 22, 18, .58);
  --accent: #8FBFAE;
  --accent-deep: #5F9B89;
  --shadow-glow: 0 8px 22px -12px rgba(143, 191, 174, .22);
}

/* 浅色主题下皮肤只改强调色，底色保持冷灰玻璃 */
html[data-skin="rain"][data-theme="light"] {
  --accent: #5A6F99;
  --accent-deep: #3D4F73;
  --grad-accent: linear-gradient(135deg, #8B9DC3 0%, #5A6F99 100%);
}
html[data-skin="snow"][data-theme="light"] {
  --accent: #7A8494;
  --accent-deep: #5A6270;
  --grad-accent: linear-gradient(135deg, #D4D8E0 0%, #A0A8B8 100%);
}
html[data-skin="forest"][data-theme="light"] {
  --accent: #5F9B89;
  --accent-deep: #3D7A66;
  --grad-accent: linear-gradient(135deg, #8FBFAE 0%, #5F9B89 100%);
}

/* 皮肤切换过渡 */
html[data-skin] body {
  transition: background-color .4s ease, color .3s ease;
}
html[data-skin] .card,
html[data-skin] .btn.primary {
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}