/* ============================================================
   夜间模式 + 字体大小（独立文件，依赖 style.css 的变量与 .device 外壳）
   —— 夜间配色整体重写：采用常用夜间模式配色（Material Design / 谷歌规范）
      · 页面底色 #121212（M2 Dark，不用纯黑）
      · 表面按海拔递进：#121212（页面）→ #1E1E1E（卡片）→ #2C2C2C（悬浮/按压）→ #383838（更高层）
      · 文字层级（M2）：rgba(255,255,255,.87) 高强调 → .60 中强调 → .38 弱化/禁用
      · 分隔线统一 rgba(255,255,255,.12)，主色 accent 提亮为 #e08a63
   —— 字体大小缩放体系与字体弹窗专属样式不变
   ============================================================ */

/* 字号缩放系数：JS 把 --fs 设到 .device 上（0.85 ~ 1.25），默认 1
   （style.css 已把全部 font-size 写成 calc(... * var(--fs))，全局生效；
    这里 :root/.device 的定义是双保险） */
.device{--fs:1}

/* ===== 首帧深色底（防闪白） =====
   index.html <head> 里的小脚本按「上次选的模式 + 系统深色」给 <html> 挂 boot-night，
   于是启动页收起后 WebView 画的第一帧就是深色；真正的夜间配色仍由 .device.night 接管，
   js/night-font.js 每次切换会把这个 class 同步成当前状态。 */
html.boot-night,
html.boot-night body,
html.boot-night .device{
  background:#121212;
  color-scheme:dark;
}

/* ===== 字体大小弹窗（复用 .sheet + pt-* 弹窗骨架） ===== */
/* 弹窗里的模拟卡片：和首页拍立得卡同构，随 --fs 缩放展示布局变化 */
.fs-card{
  width:min(72%,270px);
  margin:0 auto 18px;
  padding:2.4cqw 2.4cqw 0;
  background:#fff;
  box-shadow:0 6px 16px -10px rgba(40,35,30,.26);
  transition:background .35s;
}
.device.night .fs-card{
  background:#f3f0ea;
  /* 卡片保持浅色纸面，内部文字变量锁回日间深色，否则夜间浅字落在浅卡上看不见 */
  --ink:#1c1c1e;
  --ink-2:rgba(60,60,67,.58);
  --ink-3:rgba(60,60,67,.34);
}
.fs-card-photo{
  aspect-ratio:4/3.6;
  /* 用 src/ 里的真实照片（相对本文件：css/ → ../src/） */
  background:url('../src/font-model.jpg') center/cover no-repeat;
}
.fs-card-info{padding:2.2cqw .6cqw 3cqw}
/* 卡片头行与首页拍立得卡同构：红色日期 | 灰色星期 ··· 图钉+红色地点 */
.fs-card-head{
  display:flex;align-items:baseline;
}
.fs-card-date{
  font-family:var(--font-mono);
  font-size:calc(10px * var(--fs));
  letter-spacing:.08em;color:var(--accent);
  transition:font-size .25s cubic-bezier(.22,1,.36,1);
}
.fs-card-week{
  flex:0 0 auto;
  font-family:var(--font-serif);
  font-size:calc(10.5px * var(--fs));
  letter-spacing:.06em;color:var(--ink-3);
  transition:font-size .25s cubic-bezier(.22,1,.36,1);
}
/* 日期与星期之间的「|」分隔符：紧跟两个文字之间，比星期文字深一档以区分 */
.fs-card-sep{
  flex:0 0 auto;
  margin:0 1px;
  font-family:var(--font-mono);
  font-size:calc(10px * var(--fs));
  color:rgba(28,28,30,.48);
  transition:font-size .25s cubic-bezier(.22,1,.36,1);
}
.fs-card-loc{
  min-width:0;
  margin-left:auto;
  display:inline-flex;align-items:center;gap:4px;
  font-size:calc(10.5px * var(--fs));
  letter-spacing:.06em;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:font-size .25s cubic-bezier(.22,1,.36,1);
}
.fs-card-loc svg{
  flex:0 0 auto;width:10px;height:10px;
  stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.fs-card-cap{
  margin-top:1.8cqw;text-align:left;
  font-size:calc(13px * var(--fs));
  letter-spacing:.06em;line-height:1.7;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:font-size .25s cubic-bezier(.22,1,.36,1);
}
.fs-opts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;
  max-width:86%;
  margin:0 auto;
}
.fs-opt{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:10px 2px 8px;cursor:pointer;
  background:#f7f7f9;
  border:1px solid rgba(28,28,30,.08);
  border-radius:10px;
  font-family:var(--font-sans);appearance:none;   /* 工具层（table.csv）：选项按钮切黑体 */
  transition:background .2s,border-color .2s,transform .12s;
}
.fs-opt:active{transform:scale(.96)}
/* 每档的「Aa」用各自的档位值渲染（--self-fs 写在按钮内联样式上），
   不跟全局 --fs 走——四个选项之间才能看出大小差别 */
.fs-opt b{
  font-weight:500;line-height:1;
  font-size:calc(17px * var(--self-fs,1));
  color:var(--ink);
  transition:color .2s;
}
.fs-opt span{
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--ink-3);
  transition:color .2s;
}
.fs-opt.on{background:#1c1c1e;border-color:#1c1c1e}
.fs-opt.on b{color:#fff}
.fs-opt.on span{color:rgba(255,255,255,.62)}

/* 夜间适配（选中档反白、未选中档深灰表面） */
.device.night .fs-opt{background:#1e1e1e;border-color:rgba(255,255,255,.12)}
.device.night .fs-opt:active{background:#2c2c2c}
.device.night .fs-opt.on{background:#ffffff;border-color:#ffffff}
.device.night .fs-opt.on b{color:#121212}
.device.night .fs-opt.on span{color:rgba(18,18,18,.60)}


/* ============================================================
   夜间模式组件适配（整体重写配色，保持原选择器顺序）
   ============================================================ */

/* ---- 核心变量：iOS Dark 风格 ---- */
.device.night{
  --ink:#ffffff;                             /* 主文字：高强调（按 M2 用 .87，纯白给拍立得加号点等强调元素） */
  --ink-2:rgba(255,255,255,.60);             /* 次要文字：中强调 */
  --ink-3:rgba(255,255,255,.38);             /* 辅助/占位：弱化/禁用 */
  --ink-3-solid:#616161;                     /* 实色辅助（描边形状用，Material grey 700） */
  /* 图标实色（见 style.css 的同名变量）：.60/.38 白落在 #1e1e1e 上的等效值，
     换成实色后细线图标不再"透底发虚" */
  --icon-2:#a3a3a8;
  --icon-3:#74747a;
  --accent:#e08a63;                          /* 主色提亮：暖橙在深底上可读 */
  /* 夜间这三个红跟着主题走：半透明描边提亮到同族暖橙，实心填充仍压深（要配白字），
     危险色比主色更偏红一档，既区分语义又不另起一个色系 */
  --accent-rgb:224,138,99;
  --accent-fill:#b06050;
  --danger:#dd6f5e;
  --danger-fill:#b8453a;
  --danger-rgb:184,69,58;
  --card-bg:#1e1e1e;                         /* 卡片表面：M2 海拔 1dp */
  --card-border:rgba(255,255,255,.12);       /* 分隔：M2 divider 12% 白 */
  --card-shadow:0 3px 16px -8px rgba(0,0,0,.8),0 1px 2px rgba(0,0,0,.5);
  --panel-bg:#2c2c2c;                        /* 悬浮/按压表面：更高海拔 */
  --panel-border:rgba(255,255,255,.12);
  --page-bg:#121212;                         /* 页面底色：M2 Dark */
  /* 行间分隔：深色底上白线"显细"，同样压到半像素 + 8% 白 */
  --hairline:.5px solid rgba(255,255,255,.08);
  --tab-idle:#909096;                        /* 未选中图标：原来 .46 白在玻璃条上发虚，换成等效实色 */
  background:#121212;
}
.device.night .bg-layer{background:#121212}
.device.night .entry-axis{background:rgba(255,255,255,.20)}
.device.night .entry::after{background:rgba(255,255,255,.20)}
.device.night .entry-date{color:rgba(255,255,255,.40)}
/* 轨迹页底图：底色跟着夜间走。底图样式要走网络重刷（深色配色会慢一拍），
   在瓦片到位前也不会露出一块浅灰；加载层另见 style.css 的 .map-load */
.device.night .globe-wrap,
.device.night .map,
.device.night .map.maplibregl-map{background:#121212}

/* ---- 底部导航（悬浮胶囊 + 毛玻璃：深色半透明 + 内侧高光） ---- */
.device.night .tabbar{
  background:rgba(28,28,28,.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 0 0 .5px rgba(255,255,255,.10),
    0 10px 28px -14px rgba(0,0,0,.55);
}
.device.night .tab{color:var(--ink-3)}
/* 夜间这三个标签（回忆 / 足迹 / 我的）在深底上会显得比日间粗一档：
   亮字胀、暗字缩，同一个 400 字重看起来并不一样重。
   · font-weight 降到 300：单字重字体不会合成加粗，也不会被别处的 500 带粗
   · -webkit-font-smoothing 对齐抗锯齿，笔画边缘不再堆灰
   · 选中态的白压到 .80（--ink 是 .87），笔画整体收细一点 */
.device.night .tab{
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.device.night .tab.active{color:rgba(255,255,255,.80)}

/* ---- 顶栏：年份按钮 + 时光轴/照片墙 圆形按钮（浅灰底板换成一档白） ---- */
.device.night .year-btn,
.device.night .vs-group{background:rgba(255,255,255,.08)}
.device.night .year-btn:active{background:rgba(255,255,255,.14)}
.device.night .view-tabs .vs-btn:not(.active){color:rgba(255,255,255,.46)}
/* 选中段在夜间不用深灰（会和 .08 白底板糊在一起），改用一档更亮的磨砂块 */
.device.night .vs-pill{
  background:rgba(255,255,255,.14);
  box-shadow:0 1px 2px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.08);
}

/* ---- 「我的」页列表行 ---- */
.device.night .p-entries,
.device.night .p-toggle-row,
.device.night .p-row{background:#1e1e1e;border-color:rgba(255,255,255,.08)}
.device.night .p-entry{border-right-color:rgba(255,255,255,.08)}
.device.night .p-entry:active{background:#2c2c2c}
.device.night .about{color:var(--ink-3)}
/* 三档选择导航（夜间模式：系统/浅色/深色）：轨道提亮一档，滑块反白；
   选中文字的深色由 .seg-btn.on 给，滑块本身只管「白块」，切换时随滑块滑过去 */
.device.night .seg-nav{background:rgba(255,255,255,.10)}
.device.night .seg-pill{background:#ffffff;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.device.night .seg-btn{color:var(--ink-3)}
.device.night .seg-btn.on{color:#121212}
/* 关于页 logo：白底圆角方卡在夜间不反色（品牌标记），白卡自带对比，
   日间那条 7% 的细描边在黑底上反而会浮出一圈灰线，这里关掉 */
.device.night .about-logo > rect:first-of-type{stroke-opacity:0}

/* ---- 更新 / 协议弹窗 ---- */
/* 「立即更新」主按钮：日间是 var(--ink) 黑底白字，夜间 --ink 翻白后
   会变成白底白字（文字消失），这里固定成夜间色板：白底深字 */
.device.night .upd-actions .solid{background:#ffffff;color:#121212}

/* ---- 弹层 / 菜单 ---- */
.device.night .sheet-inner{background:#1e1e1e;border-top-color:rgba(255,255,255,.12)}
.device.night .sheet-inner textarea{background:#2c2c2c;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.87)}
/* 夜间下弹窗遮罩整体加深：sheet / menu / year-picker / confirm 统一 62% 黑 */
.device.night .sheet{background:rgba(0,0,0,.62)}
/* 拼图版式「右边还有更多」的渐隐：底色跟面板一致（#1e1e1e），箭头换浅色 */
.device.night .pz-row-wrap.has-more::after{
  background:linear-gradient(90deg,rgba(30,30,30,0) 0%,#1e1e1e 68%);
}
.device.night .pz-row-wrap.has-more::before{
  border-right-color:rgba(255,255,255,.42);
  border-top-color:rgba(255,255,255,.42);
}
.device.night .menu{background:rgba(0,0,0,.62)}
.device.night .year-picker{background:rgba(0,0,0,.62)}
.device.night .confirm{background:rgba(0,0,0,.62)}
/* 夜间弹窗不要投影：深底上那圈大黑影会糊成一团脏边，卡片的边界靠底色和圆角区分就够了 */
.device.night .confirm-card{box-shadow:none}
.device.night .menu-card{background:#2c2c2c;}
.device.night .menu-btn{background:transparent;color:rgba(255,255,255,.87);border-color:transparent}
.device.night .menu-btn:active{background:rgba(255,255,255,.08)}
.device.night .menu-btn.plain{color:var(--ink-2)}
/* 删除项：夜间的 .menu-btn 白字规则会盖掉日间的 danger 色，这里补回来 */
.device.night .menu-btn.danger{color:var(--danger)}

/* ---- 底部提示（toast）----
   日间：深胶囊 + 白字；夜间页面本身是纯深底，深胶囊几乎糊进背景里，
   这里反色成「浅底 + 深字」，浮在深色页面上才一眼看到 */
.device.night .toast{
  background:#f2f2f4;
  color:#141416;
  box-shadow:0 6px 20px -8px rgba(0,0,0,.66);
}

/* ---- 预览查看器 ----
   夜间不做白底舞台（半夜点开一张照片会被整屏白闪），仍是深底 → 沉浸态纯黑；
   轻点切换的语义不变：黑场 + 收起全部界面元素。 */
.device.night .viewer{
  --v-bg-rgb:18,18,18;
  --v-fg:rgba(255,255,255,.87);
  --v-accent:var(--accent) !important;
  /* 日间 .viewer 把 --v-muted 锁成 .55 深灰并带 !important，这里必须同级压过：
     否则深底上评论/拼图图标仍是深灰，等于看不见。.38 白在 #121212 上约 3:1，
     作为图形元素够用又不抢照片 */
  --v-muted:rgba(255,255,255,.38) !important;
  --v-line:rgba(255,255,255,.16);
  --v-shadow:0 30px 70px -20px rgba(0,0,0,.9);
}
.device.night .viewer.dim{--v-bg-rgb:0,0,0}
/* 关闭按钮：深色磨砂玻璃 + 浅色叉 */
.device.night .v-close{
  background:rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);
  box-shadow:0 0 0 .5px rgba(255,255,255,.14), 0 2px 10px -2px rgba(0,0,0,.6);
}
.device.night .v-close:active{background:rgba(255,255,255,.24)}
/* 底部操作圆条：跟关闭按钮同一套深色磨砂实底 + 浅色图标（不用毛玻璃） */
.device.night .v-actions{
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 .5px rgba(255,255,255,.14), 0 10px 28px -14px rgba(0,0,0,.55);
}
.device.night .v-action:not(.on){color:rgba(255,255,255,.92) !important}
/* 白圆钮在深底上不要描边，靠投影托起来就够了 */
.device.night .v-op{box-shadow:0 2px 12px rgba(0,0,0,.46)}
/* 「更多」菜单：深底上一块磨砂深灰（不是纯白卡，半夜弹出会晃眼） */
.device.night .v-menu{
  background:rgba(44,44,46,.97);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.12);
}
.device.night .v-menu-item{color:rgba(255,255,255,.92)}
.device.night .v-menu-item:active{background:rgba(255,255,255,.12)}

/* ---- 编辑器 ---- */
.device.night .empty p{color:var(--ink-2)}
/* 空状态图标的方框在夜间是浅色，否则深色描边落在深底上等于没有 */
.device.night .empty-icon{border-color:rgba(255,255,255,.13)}
/* 数据清空页右上角的年月按钮：深色底上再用浅一档的白，别让它消失在页面里 */
.device.night .wipe-ym-btn{background:rgba(255,255,255,.09)}
.device.night .wipe-ym-btn:active{background:rgba(255,255,255,.15)}
/* 选中态的纱：日间压暗（深色照片上看不出差别），夜间反过来提亮一档 */
.device.night .wipe-shot.sel::after{background:rgba(255,255,255,.16)}
.device.night .btn-ghost{background:#1e1e1e;border-color:rgba(255,255,255,.16)}
.device.night .btn-ghost:active{background:#2c2c2c}
.device.night .btn-solid{background:#ffffff;color:#121212;border-color:rgba(255,255,255,.2)}
/* 「清空所选」跟列表页的删除按钮一样走中性浅底（夜间即深色卡底 + 浅字），不用红色 */
.device.night .wipe-bar .btn-solid.danger{background:var(--card-bg);color:var(--ink)}
.device.night .polaroid{background:#1e1e1e;border-color:rgba(255,255,255,.12)}
.device.night .editor-tools{background:#1e1e1e;border-top-color:rgba(255,255,255,.12)}
.device.night .tpl{background:#2c2c2c;border-color:rgba(255,255,255,.12)}
.device.night .tpl.active{background:#383838}
.device.night .loc-btn{border-color:rgba(255,255,255,.20)}
.device.night .loc-btn.has{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}
.device.night .date-btn{background:#2c2c2c;border-color:rgba(var(--accent-rgb),.4)}

/* ---- 日历 ---- */
.device.night .cal-bar{background:#121212}
.device.night .cal-scroll:not(.picking) .cal-head{background:#121212}
.device.night .cal-grip-bar{background:rgba(255,255,255,.24)}
.device.night .cal-grip-arrow{stroke:#6b6b70}
.device.night .cal-mini{background:#1e1e1e;border-color:rgba(255,255,255,.12)}
.device.night .cal-mini.on{border-color:rgba(var(--accent-rgb),.55)}
.device.night .cal-mini:active{background:#2c2c2c}
.device.night .cal-mem + .cal-mem{border-top-color:rgba(255,255,255,.10)}
.device.night .cal-thumb{background:rgba(255,255,255,.08)}
.device.night .vl-bar{background:rgba(255,255,255,.16)}

/* ---- 那年今日 / 时间线 ---- */
.device.night .anniv{
  box-shadow:0 12px 30px -18px rgba(0,0,0,.9),
             0 2px 8px -4px rgba(0,0,0,.5);
}
.device.night .month-line{background:linear-gradient(90deg,rgba(255,255,255,.14) 0%,transparent 92%)}

/* ---- 拍立得卡片：保持浅色纸面（拟物不变），阴影加深压住黑底 ---- */
.device.night .card{
  background:#f3f0ea;
  /* 卡面是奶油色纸，内部文字变量必须锁回日间深色（同 .fs-card 的做法）：
     夜间 --ink-3 是白色 .38，星期 / 题注落在浅卡面上就与底色同色、彻底看不见 */
  --ink:#1c1c1e;
  --ink-2:rgba(60,60,67,.58);
  --ink-3:rgba(60,60,67,.34);
  --accent:#b04a2c;                          /* 日期用主色：浅纸上要把夜间那档亮橙压回深 */
  --accent-rgb:176,74,44;
  box-shadow:0 10px 22px -10px rgba(0,0,0,.8),0 2px 5px -2px rgba(0,0,0,.5);
}
.device.night .stamp-mark{border-color:rgba(206,110,84,.6);color:rgba(206,110,84,.7)}
.device.night .stamp-mark::before{border-color:rgba(206,110,84,.48)}
.device.night .card-week::before{background:rgba(28,28,30,.48)}
.device.night .tab-add-dot{background:#ffffff;color:#121212}
.device.night .crop-wrap{background:rgba(0,0,0,.97)}

/* ---- 「我的」页控件 ---- */
/* 夜间下开关关闭态：深色行上改用可见的浅灰填充（原日间深灰在深底上隐形） */
.device.night #page-profile .switch:not(.on){background:rgba(255,255,255,.24)}
/* 注意只能是 background-color：写成 background 简写会把 .has-img 的
   background-size / background-position / repeat 全部重置成默认值，
   头像就被按原图尺寸重复铺、看起来「变形」了 */
.device.night .pf-me{background-color:#383838;color:rgba(255,255,255,.60)}
.device.night .p-row{background:#1e1e1e;border-color:rgba(255,255,255,.08)}
.device.night .p-row:active,
.device.night button.p-toggle-row:active{background:#2c2c2c}
.device.night .about-check{background:#ffffff;color:#121212}
/* 有新版本：夜间不用白底实心（会盖掉「待办」观感），改成透明底 + 主色描边字 */
.device.night .about-check.has-new{
  background:transparent;color:var(--accent);
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7);
}

/* ---- 回收站 / 作品集 ---- */
.device.night .trash-restore{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.87)}
.device.night .trash-restore:active{background:rgba(255,255,255,.06)}
.device.night .stash-check{border-color:rgba(255,255,255,.26)}
.device.night .stash-cell{background:rgba(255,255,255,.08)}

/* ---- 登录 / 输入类 ---- */
.device.night .pt-handle{background:rgba(255,255,255,.28)}

.device.night .pt-btn{
  border-color:rgba(255,255,255,.16);
  background:#2c2c2c;color:rgba(255,255,255,.60);
}
/* 主按钮在夜间跟 about-check / confirm 的「确定」一致：白底深字
   （原来 .solid 的 #1c1c1e 比次要按钮还暗，主次反了） */
.device.night .pt-btn.solid{background:#ffffff;color:#121212;border-color:transparent}

/* ---- 年份滚轮选择器 ---- */
/* 年份/日期/按日期清空三个弹窗共用 .year-picker-panel：夜间移除面板向上的投影 */
.device.night .year-picker-panel{background:#1e1e1e;box-shadow:none}
.device.night .year-picker-handle{background:rgba(255,255,255,.26)}
.device.night .year-picker-bar{border-bottom-color:rgba(255,255,255,.12)}
/* 日期弹窗的两颗圆形按钮：取消用一档白做浅灰底，确认沿用「主按钮夜间转白底深字」的规矩
   （#1c1c1e 的实心圆落在 #1e1e1e 面板上会糊成一块，和 about-check / pt-btn.solid 保持一致） */
.device.night .year-picker-cancel{background:rgba(255,255,255,.12);color:rgba(255,255,255,.70)}
.device.night .year-picker-cancel:active{background:rgba(255,255,255,.20)}
.device.night .year-picker-ok{background:#ffffff;color:#121212}
.device.night .year-wheel-item{color:rgba(255,255,255,.38)}
.device.night .year-wheel-item.active{color:var(--ink)}
.device.night .year-wheel-highlight{background:rgba(255,255,255,.075)}
.device.night .year-wheel-mask.top{background:linear-gradient(180deg,#1e1e1e 20%,rgba(30,30,30,0))}
.device.night .year-wheel-mask.bottom{background:linear-gradient(0deg,#1e1e1e 20%,rgba(30,30,30,0))}

/* ---- 确认弹窗 ---- */
.device.night .confirm-actions button{background:#2c2c2c;border-color:transparent}
.device.night .confirm-actions .ok{background:#ffffff;color:#121212;border-color:transparent}
.device.night .confirm-actions .ok.danger{background:var(--danger-fill);color:#fff}
.device.night #loc-input{background:#2c2c2c;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.87)}

/* 数据管理页 · 本机数据占用进度条：深底上轨道提亮一档，填充仍走主题红 */
.device.night .usage-bar{background:rgba(255,255,255,.14)}
.device.night .loc-btn{background:#1e1e1e;border-color:rgba(255,255,255,.20)}
.device.night .loc-btn.has{border-color:rgba(var(--accent-rgb),.55)}

/* ---- 照片墙 / 收藏 ---- */
.device.night .wall-month i{background:rgba(255,255,255,.16)}
.device.night .fav-del{background:rgba(var(--danger-rgb),.7)}
.device.night #page-home .wall-photo{background:#f3f0ea}
.device.night .s-thumb{background:rgba(255,255,255,.08)}

/* ---- 地图 ---- */
.device.night .map{background:#1e1e1e}
.device.night .map-pin .tip{background:rgba(44,44,44,.95);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.87)}
/* 夜间模式下的浅色地图页 */
.device.night #page-track{background:var(--page-bg);color:var(--ink)}
.device.night .track-detail{background:rgba(30,30,30,.94);border-color:rgba(255,255,255,.12)}
.device.night .td-cap{color:var(--ink)}
.device.night .addr-sheet{background:#121212;}
.device.night .grip-arrow{stroke:#75757a}
.device.night .sheet-search input{background:rgba(255,255,255,.09);color:rgba(255,255,255,.87)}
.device.night .sheet-search input:focus{background:rgba(255,255,255,.13)}
.device.night .sheet-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.device.night .pp-row{border-color:rgba(255,255,255,.11)}

/* ---- 意见反馈（表单卡片、截图槽位、提交条） ----
   夜间沿用「卡片 = #1e1e1e 表面」这一档；输入区不再单独上色，
   靠卡片本身的表面色区分，只在聚焦时描一圈主题红 */
.device.night .fb-text-wrap{
  background:#1e1e1e;
  border-color:rgba(255,255,255,.12);
}
.device.night .fb-text-wrap:focus-within{border-color:rgba(var(--accent-rgb),.55)}
.device.night .fb-text{color:rgba(255,255,255,.87)}
.device.night .fb-text::placeholder{color:rgba(255,255,255,.34)}

.device.night .fb-shot{background:rgba(255,255,255,.08)}
/* 加号空位：虚线在白底上是 .22 深灰，深底上要换成可见的一档白 */
.device.night .fb-add{
  border-color:rgba(255,255,255,.24);
  color:rgba(255,255,255,.50);
}
.device.night .fb-add:active{background:rgba(255,255,255,.06)}

.device.night .fb-card,
.device.night .fb-history-list{background:#1e1e1e}
.device.night .fb-contact{border-bottom-color:rgba(255,255,255,.08)}
.device.night .fb-input{color:rgba(255,255,255,.87)}
.device.night .fb-input::placeholder{color:rgba(255,255,255,.34)}
.device.night .fb-hist-type{background:rgba(var(--accent-rgb),.16)}

/* 提交条：夜里也是"浮起的一条表面"，但比卡片再压深一档，和页面底色拉开 */
.device.night .fb-bar{background:none;border-top:none}
/* 主按钮夜间白底深字（与 .about-check / .pt-btn.solid 一致）；
   未填完的 .34 透明度在白底按钮上会显得像残影，夜里改用深灰表面 + 弱字 */
.device.night .fb-submit:not([disabled]){background:#ffffff;color:#121212}
.device.night .fb-submit[disabled]{
  background:#2c2c2c;color:rgba(255,255,255,.38);
  opacity:1;
}

/* ---------- 意见反馈首页：常见问题 + 底部入口 ---------- */
/* 列表本身不画卡片（无底、无边框），夜间只换文字、箭头与间隔线的颜色 */
.device.night .faq-list{background:none;border:none}
.device.night .faq-item + .faq-item{border-top-color:rgba(255,255,255,.09)}
.device.night .faq-q{color:rgba(255,255,255,.87)}
.device.night .faq-q:active{color:rgba(255,255,255,.6)}
.device.night .faq-caret{stroke:rgba(255,255,255,.5)}
.device.night .faq-item.on .faq-caret{stroke:var(--accent)}
.device.night .faq-a p{color:rgba(255,255,255,.6)}
.device.night .faq-more{color:rgba(255,255,255,.34)}

/* ---------- 个人信息页 ---------- */
/* 卡片底与行内 hairline 走变量，这里只补三类硬编码色：
   头像占位底、行按下态、相机角标的描边环 */
.device.night .pi-ava-img{background-color:#2c2c2c;color:rgba(255,255,255,.5);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.device.night button.pi-row:active{background:#2c2c2c}
.device.night .pi-ava-badge{background:#ffffff;color:#121212}
/* 昵称输入框在深底上不能沿用 <input> 默认的白字背景 */
.device.night .pi-input{color:rgba(255,255,255,.87)}
.device.night .pi-input::placeholder{color:rgba(255,255,255,.34)}
.device.night .pi-arrow{stroke:rgba(255,255,255,.34)}

/* ---------- 绑定手机号弹层 ---------- */
.device.night .ph-input{background:#2c2c2c;color:rgba(255,255,255,.87)}
.device.night .ph-input:focus{background:#303030}
.device.night .ph-input::placeholder{color:rgba(255,255,255,.34)}

.device.night .fb-home-bar{background:none;border-top:none}
/* 次按钮：白底上的 .14 描边在深底要换成 .28，否则整块像没有边界 */
.device.night .fb-hbtn{
  border-color:rgba(255,255,255,.28);
  color:rgba(255,255,255,.72);
}
.device.night .fb-hbtn:active{background:rgba(255,255,255,.06)}
/* 主按钮同 .fb-submit：夜间转白底深字 */
.device.night .fb-hbtn.primary{
  background:#ffffff;
  border-color:transparent;
  color:#121212;
}

/* ---------- 下拉选择 ---------- */
.device.night .fb-select-btn{
  background:#1e1e1e;
  border-color:rgba(255,255,255,.12);
}
.device.night .fb-select.open .fb-select-btn{border-color:rgba(var(--accent-rgb),.55)}
.device.night .fb-select-val{color:rgba(255,255,255,.34)}
.device.night .fb-select.picked .fb-select-val{color:rgba(255,255,255,.87)}
.device.night .fb-select-caret{stroke:rgba(255,255,255,.5)}
/* 浮层要比卡片再亮一档，才浮得起来 */
.device.night .fb-select-menu{
  background:#262626;
  border-color:rgba(255,255,255,.14);
  box-shadow:0 16px 36px -12px rgba(0,0,0,.72);
}
.device.night .fb-select-opt{color:rgba(255,255,255,.87)}
.device.night .fb-select-opt:active{background:rgba(255,255,255,.07)}
.device.night .fb-select-opt.on{
  color:var(--accent);
  background:rgba(var(--accent-rgb),.16);
}

/* ---------- 编辑页（#page-batch）不参与夜间模式 ----------
   这一屏本身就是「深色编辑器 + 纸白拍立得」，夜间主题再翻一遍会把卡片也压成
   #1e1e1e、日期/地点胶囊变深灰块，和「所见即所得」的卡片预览对不上。
   这里把编辑页内部的色板锁回日间值；页面底色仍由 #page-batch 自己的 --ed-bg 决定。 */
.device.night #page-batch{
  --ink:#1c1c1e;
  --ink-2:rgba(60,60,67,.58);
  --ink-3:rgba(60,60,67,.34);
  --accent:#b04a2c;
  --accent-rgb:176,74,44;
  --card-border:rgba(28,28,30,.06);
  --hairline:.5px solid rgba(28,28,30,.06);
}
.device.night #page-batch .polaroid{
  background:#ffffff;
  border-color:rgba(28,28,30,.06);
  box-shadow:0 24px 48px -18px rgba(30,30,70,.22),0 2px 6px rgba(30,30,70,.05);
}
/* 日期 / 地点按钮：编辑页是白卡，就别再套一层浅灰胶囊（夜间尤其显眼）——
   回到日间的「无底色」形态，只留细描边 */
.device.night #page-batch .date-btn,
.device.night #page-batch .loc-btn{
  background:transparent;
  border-color:rgba(28,28,30,.14);
  color:var(--accent);
}
.device.night #page-batch .loc-btn.has{
  background:transparent;
  border-color:rgba(var(--accent-rgb),.5);
}
.device.night #page-batch .tpl,
.device.night #page-batch .tpl.active{background:none}

/* ===== 夜间：弹窗 / 下拉弹层一律不要投影 =====
   深底上投影只会糊出一圈脏边，分层改由「底色亮一档 + 细描边」完成。
   覆盖：底部弹层、确认框、菜单、年份/日期面板、实况封面、拼图与附件面板、
   以及足迹页从导航后面浮起来的那张拖拽卡（.addr-sheet）。 */
.device.night .addr-sheet,
.device.night .ls-panel,
.device.night .sheet-inner,
.device.night .menu-card,
.device.night .confirm-card,
.device.night .upd-card,
.device.night .year-picker-panel,
.device.night .ac-panel{box-shadow:none}
/* 这两颗是「浮在半空」的小卡（更多菜单 / 下拉选择），没有投影会糊进背景：
   只挂一条 0.5px 内描边代替，不留模糊光晕 */
.device.night .v-menu,
.device.night .fb-select-menu{box-shadow:0 0 0 .5px rgba(255,255,255,.14)}

/* ===== 夜间：返回按钮 / 搜索框 =====
   日间是「白圆底 + 柔和投影」；深底上投影只会糊出脏边，
   换成一档白磨砂 + 0.5px 内描边（与弹层同一条规则，无外投影）。 */
.device.night .trash-back,
.device.night .sheet-back{
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10);
}
.device.night .search-field{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.10);
}
