/* 星火逐日 App · 基础：tokens / 框架 / 底栏 / 通用组件 */
:root{
  --bg:#1c130d;
  --panel:#251812;
  --panel-2:#2d1e15;
  --gold:#d4a24e;
  --gold-2:#e8c887;
  --red:#c23a24;
  --red-2:#e0512f;
  --ink:#f2e7d3;
  --muted:#b9a88f;
  --faint:#8a7a63;
  --line:rgba(212,162,78,.16);
  --line-soft:rgba(212,162,78,.09);
  --paper:#f4ecd9;
  --paper-2:#efe3c4;
  --paper-ink:#4a3a28;
  --paper-red:#b23222;
  --tab-h:56px;
  --serif:"Source Han Serif SC","Noto Serif SC","Songti SC","STSong","SimSun",serif;
  /* B6 红色主题标题字体：马善政楷体（毛笔楷书，OFL 开源，assets/fonts 自托管 93 分片按需加载） */
  --font-brush:"Ma Shan Zheng","STKaiti","KaiTi","楷体",var(--serif);
  --sans:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  /* B8-2 字体大小缩放：适老化，整体缩放 .app 内所有元素（含 px 单位） */
  --font-scale:1;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
/* html 也锁死：否则 Edge 下弹层内输入框聚焦时，浏览器会把整个视口滚出屏幕（tab 跑到中部、下方露白底） */
html{overflow:hidden}
body{
  margin:0;background:#0d0805;color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  overflow:hidden;user-select:none;-webkit-user-select:none;
}
input,textarea{user-select:text;-webkit-user-select:text}
button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent}

/* ---------- App 容器（桌面上呈手机宽度，真机全屏） ---------- */
.app{
  position:relative;margin:0 auto;max-width:480px;height:100vh;height:100dvh;
  /* B8-2 字体缩放：zoom 缩放渲染尺寸，宽高除以 scale 抵消布局占位变化 */
  zoom:var(--font-scale);
  width:calc(100% / var(--font-scale));
  max-width:calc(480px / var(--font-scale));
  height:calc(100dvh / var(--font-scale));
  /* 背景板「向阳而生 · 号手红绸」：号手剪影+红绸图打底，上亮下暗纱罩保证卡片可读；
     纸白主题在文件末尾单独覆盖 .app 背景，不受此影响。?v=2 用于更换图片时击穿 SW 缓存 */
  background:
    linear-gradient(180deg, rgba(13,8,5,.30), rgba(13,8,5,.06) 30%, rgba(16,9,5,.30) 48%, rgba(13,8,5,.74) 68%, rgba(11,6,4,.92) 100%),
    url("bg-dawn.jpg?v=2") center top / cover no-repeat,
    var(--bg);
  overflow:hidden;
  /* clip：彻底禁止 .app 产生滚动（hidden 在 Chromium/Edge 下仍可被滚轮与焦点滚动移动，
   * 屏外待命的 sheet 会把溢出区撑高 ~570px，导致 tab 栏被顶到屏幕中部）。不支持 clip 的旧内核回退 hidden。 */
  overflow:clip;
  box-shadow:0 0 60px rgba(0,0,0,.55);
}
/* 星尘纸纹层：垫底不拦截点击，给深色底一点「卷宗纸感」 */
.app::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(rgba(232,200,135,.05) 1px, transparent 1.6px),
    radial-gradient(circle at 22% 6%, rgba(232,200,135,.05), transparent 36%),
    radial-gradient(circle at 82% 96%, rgba(194,58,36,.05), transparent 40%);
  background-size:190px 190px, 100% 100%, 100% 100%;
  opacity:.55;
}
.app.modal-open .page{overflow:hidden}

/* ============================================================
   B6 五页五景：每页专属背景（背景写在滚动容器自身上，attach=scroll
   即贴住页面框不随内容滚动；今日页沿用 .app 的「向阳而生」不打扰）
   纱罩口径（可读优先）：顶 .40 → 中 .58 → 底近实底，保正文清晰
   ============================================================ */
#pageCalendar.is-active{
  background:
    linear-gradient(180deg,rgba(13,8,5,.40),rgba(13,8,5,.24) 18%,rgba(13,8,5,.58) 50%,rgba(11,6,4,.88) 78%,rgba(9,5,3,.97) 100%),
    url("bg-night.jpg?v=1") center 22% / cover no-repeat, var(--bg);
}
#pageProjects.is-active{
  background:
    linear-gradient(180deg,rgba(13,8,5,.44),rgba(13,8,5,.28) 18%,rgba(13,8,5,.60) 50%,rgba(11,6,4,.90) 78%,rgba(9,5,3,.97) 100%),
    url("bg-map.jpg?v=1") center 30% / cover no-repeat, var(--bg);
}
#pageScroll.is-active{
  background:
    linear-gradient(180deg,rgba(13,8,5,.42),rgba(13,8,5,.26) 16%,rgba(13,8,5,.58) 48%,rgba(11,6,4,.90) 78%,rgba(9,5,3,.97) 100%),
    url("bg-scroll.jpg?v=1") center 14% / cover no-repeat, var(--bg);
}
#pageMine.is-active{
  background:
    linear-gradient(180deg,rgba(13,8,5,.40),rgba(13,8,5,.26) 18%,rgba(13,8,5,.58) 50%,rgba(11,6,4,.88) 78%,rgba(9,5,3,.97) 100%),
    url("bg-flag.jpg?v=1") center 20% / cover no-repeat, var(--bg);
}
/* 纸白主题：关闭画像背景，露出宣纸底 */
html[data-theme="paper"] #pageCalendar.is-active,
html[data-theme="paper"] #pageProjects.is-active,
html[data-theme="paper"] #pageScroll.is-active,
html[data-theme="paper"] #pageMine.is-active{background:none}
/* 缅怀日（9-30 烈士纪念日 / 12-13 国家公祭日）：自动收起画像，庄重纯色 */
html.is-md-0930 #pageCalendar.is-active,html.is-md-0930 #pageProjects.is-active,
html.is-md-0930 #pageScroll.is-active,html.is-md-0930 #pageMine.is-active,
html.is-md-1213 #pageCalendar.is-active,html.is-md-1213 #pageProjects.is-active,
html.is-md-1213 #pageScroll.is-active,html.is-md-1213 #pageMine.is-active{background:none}

/* ---------- 页面 ---------- */
.page{
  position:absolute;left:0;right:0;top:0;
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  display:none;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.page.is-active{display:block}
/* B8-4 页面切换动画：进入（右滑淡入）+ 退出（左滑淡出） */
.page.is-entering{animation:pageIn .22s ease}
.page.is-leaving{display:block;animation:pageOut .18s ease forwards}
@keyframes pageIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes pageOut{
  from{opacity:1;transform:translateX(0)}
  to{opacity:0;transform:translateX(-16px)}
}
.page-scroll{padding:0 16px calc(20px + env(safe-area-inset-bottom))}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;align-items:stretch;
  background:rgba(19,12,8,.97);
  border-top:0;
}
/* 顶线改为中央亮、两端渐隐的金色光线，更精致 */
.tabbar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,162,78,.55) 30% 70%,transparent);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border:0;background:transparent;cursor:pointer;
  color:var(--faint);transition:color .18s;padding-bottom:4px;
}
.tab i{font-style:normal;font-size:19px;line-height:1;transition:transform .18s ease}
/* v0.4.5 金线图标：tab 图标从字符 <i> 换成线性 SVG（currentColor 继承 tab 颜色） */
.tab svg{width:23px;height:23px;display:block;transition:transform .18s ease}
/* 方案B：未选中 tab 隐藏文字，选中态显示（无 transition，避免切换时过渡冲突） */
.tab span{font-size:10px;letter-spacing:.08em;opacity:0}
.tab.is-active{color:var(--gold)}
.tab.is-active i{text-shadow:0 0 10px rgba(212,162,78,.55);transform:translateY(-1px)}
.tab.is-active svg{filter:drop-shadow(0 0 7px rgba(212,162,78,.55));transform:translateY(-1px)}
.tab.is-active span{opacity:1}

/* ---------- 通用按钮 ---------- */
.primary-btn{
  position:relative;overflow:hidden;
  border:1px solid var(--red);background:linear-gradient(135deg,var(--red-2),var(--red));
  color:#fff6e8;border-radius:999px;padding:10px 22px;font-size:14px;
  cursor:pointer;letter-spacing:.06em;transition:opacity .18s,transform .12s;
  box-shadow:0 4px 14px rgba(194,58,36,.28), inset 0 1px 0 rgba(255,240,210,.18);
}
/* 按下时高光扫过 */
.primary-btn::after{
  content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,240,210,.3),transparent);
  transform:skewX(-18deg);transition:left .45s ease;pointer-events:none;
}
.primary-btn:active::after{left:135%}
.primary-btn:active{transform:scale(.97)}
.primary-btn:disabled{opacity:.45;cursor:not-allowed}
.ghost-btn{
  border:1px solid var(--line);background:transparent;color:var(--gold-2);
  border-radius:999px;padding:10px 22px;font-size:14px;cursor:pointer;
  letter-spacing:.06em;transition:border-color .18s,background .18s;
}
.ghost-btn:active{background:rgba(212,162,78,.08)}
.danger-btn{
  margin-left:auto;border:1px solid rgba(224,81,47,.4);background:transparent;
  color:var(--red-2);border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer;
}
.danger-btn:hover{background:rgba(224,81,47,.1)}
.icon-ghost{
  width:38px;height:38px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:transparent;color:var(--gold-2);
  font-size:16px;cursor:pointer;
}

/* ---------- 底部 Sheet ---------- */
.sheet-overlay{
  position:absolute;inset:0;z-index:40;background:rgba(8,5,3,.62);
  opacity:0;pointer-events:none;transition:opacity .24s;
}
.sheet-overlay.is-open{opacity:1;pointer-events:auto}
.sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:41;
  max-height:92%;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-bottom:0;
  border-radius:18px 18px 0 0;
  /* 弹性缓动：轻微过冲，滑入更有 App 手感 */
  transform:translateY(104%);transition:transform .34s cubic-bezier(.22,1,.32,1), visibility 0s linear .38s;
  box-shadow:0 -14px 40px rgba(0,0,0,.4);
  /* 关键：未打开的面板彻底不可见——软键盘顶起视口时，屏外备用的抽屉内容不会露出来造成多层堆叠 */
  visibility:hidden;
}
.sheet.is-open{
  transform:none;visibility:visible;
  transition:transform .34s cubic-bezier(.22,1.08,.3,1);
}
.sheet-close{
  position:absolute;top:10px;right:10px;z-index:5;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:rgba(20,12,8,.72);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;
}
.sheet-close.static{position:static;flex:none}
.sheet-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- 居中弹窗（关于） ---------- */
.overlay{
  position:absolute;inset:0;z-index:48;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(8,5,3,.66);backdrop-filter:blur(3px);
}
.overlay[hidden]{display:none}
.overlay-card{
  position:relative;width:100%;max-height:82vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:24px 20px;
}
.overlay-close{
  position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;
}
/* ---------- 侧滑抽屉（C4.2 提醒 / V1 声音复用骨架）
   C6.3 修复：骨架样式此前缺失，抽屉弹出后渲染于文档流末尾（body overflow:hidden）导致视觉不可见 ---------- */
.drawer-overlay{
  position:fixed;inset:0;z-index:64;background:rgba(8,5,3,.62);
  opacity:0;pointer-events:none;transition:opacity .24s;
}
.drawer-overlay.is-open{opacity:1;pointer-events:auto}
/* 展开跟随外层 overlay 的 is-open（JS 只给 overlay 加类，remind/voice 两抽屉共用） */
.drawer-overlay.is-open .drawer{
  transform:none;visibility:visible;
  transition:transform .28s ease;
}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:66;width:min(432px,100%);
  display:flex;flex-direction:column;overflow-y:auto;
  background:var(--panel);border-left:1px solid var(--line);
  box-shadow:-18px 0 50px rgba(0,0,0,.4);
  transform:translateX(102%);transition:transform .28s ease, visibility 0s linear .3s;
  visibility:hidden;
}
.drawer-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex:none;
  padding:20px 22px 14px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(212,162,78,.08),rgba(212,162,78,0));
}
.drawer-kicker{font-size:10px;letter-spacing:.28em;color:var(--gold);margin-bottom:5px}
.drawer-head h2{margin:0;font-family:var(--serif);font-size:19px;color:var(--gold-2);letter-spacing:.04em}
.drawer-close{
  width:32px;height:32px;border-radius:50%;flex:none;
  border:1px solid var(--line);background:var(--panel-2);color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;
}
.drawer-form{padding:16px 22px 26px;display:flex;flex-direction:column;gap:12px}
html[data-theme="paper"] .drawer-overlay{background:rgba(58,44,30,.36)}
html[data-theme="paper"] .drawer{box-shadow:-18px 0 50px rgba(90,60,40,.2)}

.about-kicker{font-size:10px;letter-spacing:.3em;color:var(--gold);margin-bottom:8px}
.about-card h2{
  margin:0 0 12px;font-family:var(--serif);font-size:18px;line-height:1.6;
  color:var(--gold-2);letter-spacing:.02em;font-weight:700;
}
.about-lead{
  margin:0 0 16px;padding:11px 13px;border-left:2px solid var(--gold);
  background:rgba(212,162,78,.07);font-family:var(--serif);
  font-size:13px;line-height:1.9;color:#d9c9a4;
}
.about-grid{display:flex;flex-direction:column;gap:10px}
.about-grid div{border:1px solid var(--line-soft);border-radius:10px;padding:11px 13px;background:rgba(45,30,21,.6)}
.about-grid strong{display:block;font-size:10px;letter-spacing:.16em;color:var(--gold);margin-bottom:5px}
.about-grid span{font-size:12px;line-height:1.75;color:var(--muted)}
.about-foot{margin:16px 0 0;font-size:10.5px;color:var(--faint);line-height:1.8}

/* ---------- Toast ---------- */
.toast{
  position:absolute;left:50%;bottom:calc(var(--tab-h) + 26px);transform:translateX(-50%);
  z-index:60;max-width:82%;
  background:rgba(14,9,6,.94);border:1px solid rgba(232,200,135,.4);
  color:var(--gold-2);padding:9px 18px 9px 14px;border-radius:999px;
  font-size:12px;letter-spacing:.05em;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45), 0 0 14px rgba(212,162,78,.12);
  animation:toastIn .3s cubic-bezier(.22,1.1,.32,1);
}
.toast::before{content:"✦";margin-right:7px;color:var(--gold)}
.toast[hidden]{display:none}
@keyframes toastIn{
  from{opacity:0;transform:translate(-50%,12px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* ---------- 表单字段（日程抽屉共用） ---------- */
.field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.field-label{font-size:11px;letter-spacing:.06em;color:var(--muted)}
.field-label em{font-style:normal;color:var(--red-2)}
.field input,.field select,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
  padding:9px 10px;font-size:13.5px;font-family:var(--sans);color:var(--ink);outline:none;transition:.16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 2px rgba(212,162,78,.14);
}
.field textarea{resize:vertical;line-height:1.65}
.field-row{display:flex;gap:10px}
.checkline{flex-direction:row;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);cursor:pointer;flex:none}
.checkline input{width:15px;height:15px;flex:none;accent-color:var(--red)}
.form-error{
  margin:0;padding:8px 10px;border:1px dashed rgba(224,81,47,.4);border-radius:8px;
  background:rgba(224,81,47,.07);font-size:11.5px;color:var(--red-2);line-height:1.6;
}

/* ---------- 美化通用工具（B3.6 全局美化） ---------- */
/* 金色渐变文字：标题/大字数字专用 */
.gold-text{
  background:linear-gradient(118deg,#a97e2f,#e8c887 42%,#d4a24e 68%,#f2ddb0);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* 通用空状态：✦ 星火装饰 + 引导语（M6-4 统一空态） */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:34px 22px;color:var(--faint);font-size:11.5px;line-height:1.9;
}
.empty-state .es-mark{font-size:14px;color:var(--gold);letter-spacing:.45em;text-indent:.45em}
.empty-state .es-line{width:50px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}
.empty-state .es-title{font-family:var(--serif);font-size:14px;letter-spacing:.12em;color:var(--gold-2)}
.empty-state .es-sub{font-size:11px;line-height:1.9;color:var(--faint);max-width:260px}
.empty-state .es-action{margin-top:6px;border:1px solid var(--line);border-radius:99px;padding:6px 16px;font-size:11px;color:var(--gold-2);background:transparent;cursor:pointer}
.empty-state .es-action:active{background:rgba(212,162,78,.1)}
/* M6-4 骨架屏：加载中占位（闪烁微光） */
.skeleton{
  position:relative;overflow:hidden;border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.10) 37%,rgba(255,255,255,.04) 63%);
  background-size:400% 100%;animation:skeletonShimmer 1.4s ease infinite;
}
@keyframes skeletonShimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
html[data-theme="paper"] .skeleton{
  background:linear-gradient(90deg,rgba(154,117,38,.06) 25%,rgba(154,117,38,.12) 37%,rgba(154,117,38,.06) 63%);
  background-size:400% 100%;
}
.skel-line{height:10px;margin:6px 0;border-radius:5px}
.skel-line.short{width:40%}
.skel-line.mid{width:70%}
.skel-card{height:68px;margin:10px 0;border-radius:12px}
/* 星火加载动画（<i class="star-spin">✦</i>） */
.star-spin{display:inline-block;animation:starSpin 1.1s linear infinite;color:var(--gold)}
@keyframes starSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* 卡片浮起流光底边（面板卡通用点缀） */
.card-glow{position:relative}
.card-glow::after{
  content:"";position:absolute;left:14%;right:14%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,200,135,.5),transparent);
  pointer-events:none;
}

/* ============================================================
   C6.1 纸白主题（html[data-theme="paper"]）
   深色「赤焰」为默认；纸白=宣纸底 + 深金/绛红重墨。
   变量整体覆盖 + 框架结构覆盖；各功能文件的装饰色
   覆盖段追加在各文件末尾，同名前缀。
   ============================================================ */
html[data-theme="paper"]{
  --bg:#f2ecdd;
  --panel:#fffdf7;
  --panel-2:#f7f1e3;
  --gold:#9a7526;
  --gold-2:#b08a3e;
  --red:#a93226;
  --red-2:#c04335;
  --ink:#2b2422;
  --muted:#6f6257;
  --faint:#a3958a;
  --line:rgba(125,31,31,.16);
  --line-soft:rgba(43,36,34,.09);
  --paper:#fffdf7;
  --paper-2:#f7f1e3;
  --paper-ink:#4a3a28;
  --paper-red:#b23222;
}
html[data-theme="paper"] body{background:#e7dfcc}
html[data-theme="paper"] .app{
  background:
    radial-gradient(circle at 85% -4%, rgba(176,138,62,.10), transparent 42%),
    radial-gradient(circle at 8% 30%, rgba(169,50,38,.06), transparent 40%),
    var(--bg);
  box-shadow:0 0 60px rgba(90,60,40,.20);
}
html[data-theme="paper"] .app::before{opacity:.32}
html[data-theme="paper"] .tabbar{background:rgba(252,249,242,.96)}
html[data-theme="paper"] .tabbar::before{background:linear-gradient(90deg,transparent,rgba(154,117,38,.5) 30% 70%,transparent)}
html[data-theme="paper"] .tab.is-active i{text-shadow:none}
html[data-theme="paper"] .tab.is-active svg{filter:none}
html[data-theme="paper"] .sheet-overlay{background:rgba(58,44,30,.36)}
html[data-theme="paper"] .overlay{background:rgba(58,44,30,.42)}

html[data-theme="paper"] .sheet{box-shadow:0 -14px 40px rgba(90,60,40,.18)}
html[data-theme="paper"] .overlay-card{box-shadow:0 24px 60px rgba(90,60,40,.24)}
html[data-theme="paper"] .sheet-close{background:rgba(255,253,247,.88)}
html[data-theme="paper"] .toast{
  background:rgba(255,253,247,.97);border-color:rgba(176,138,62,.55);color:#6f5a2e;
  box-shadow:0 8px 24px rgba(90,60,40,.22), 0 0 14px rgba(176,138,62,.10);
}
html[data-theme="paper"] .about-lead{color:#6f5a2e;background:rgba(176,138,62,.09)}
html[data-theme="paper"] .about-grid div{background:rgba(255,253,247,.85)}
/* 浅底上金渐变文字加深，保对比度 */
html[data-theme="paper"] .gold-text{background:linear-gradient(118deg,#8a6a1d,#b08a3e 42%,#9a7526 68%,#c9a44a)}
html[data-theme="paper"] .card-glow::after{background:linear-gradient(90deg,transparent,rgba(154,117,38,.5),transparent)}
html[data-theme="paper"] .ghost-btn{color:#7a5f28}
html[data-theme="paper"] .ghost-btn:active{background:rgba(154,117,38,.10)}
html[data-theme="paper"] .icon-ghost{color:#7a5f28}
html[data-theme="paper"] .primary-btn{box-shadow:0 4px 14px rgba(169,50,38,.22), inset 0 1px 0 rgba(255,240,210,.35)}

/* ========== M1.3 离线状态条（v0.4.7） ========== */
#offlineBar{
  position:fixed;top:10px;left:50%;transform:translateX(-50%);
  z-index:900;max-width:86vw;
  font-size:11px;letter-spacing:.08em;white-space:nowrap;
  color:#ffd9a8;background:rgba(60,26,16,.92);
  border:1px solid rgba(232,200,135,.35);border-radius:999px;
  padding:6px 14px;box-shadow:0 6px 18px rgba(0,0,0,.4);
  pointer-events:none;
}
#offlineBar[hidden]{display:none}
html[data-theme="paper"] #offlineBar{
  color:#6f5a2e;background:rgba(242,236,221,.95);
  border-color:rgba(176,138,62,.5);box-shadow:0 6px 18px rgba(90,60,40,.25);
}

/* ========== B8-1 全局搜索（v0.4.10） ========== */
.hd-tools{display:flex;align-items:center;gap:8px}
.hd-search{
  width:32px;height:32px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--muted);cursor:pointer;
  border-radius:50%;
}
.hd-search:active{background:rgba(232,200,135,.12)}

.search-overlay{
  position:fixed;inset:0;z-index:800;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateY(100%);transition:transform .22s ease;
}
.search-overlay.is-open{transform:translateY(0)}
.search-overlay[aria-hidden="true"]{pointer-events:none}

.search-bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 14px;padding-top:calc(12px + env(safe-area-inset-top,0));
  border-bottom:1px solid rgba(232,200,135,.15);
}
.search-close{
  width:32px;height:32px;flex:none;
  border:none;background:none;
  font-size:24px;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.search-input-wrap{
  flex:1;display:flex;align-items:center;gap:8px;
  background:rgba(232,200,135,.08);
  border:1px solid rgba(232,200,135,.2);
  border-radius:999px;padding:8px 14px;
}
.search-icon{flex:none;color:var(--muted);opacity:.7}
.search-input{
  flex:1;border:none;background:none;outline:none;
  font-size:14px;color:var(--ink);
  font-family:inherit;
}
.search-input::placeholder{color:var(--faint)}

.search-cats{
  display:flex;gap:6px;padding:10px 14px;
  border-bottom:1px solid rgba(232,200,135,.1);
  overflow-x:auto;scrollbar-width:none;
}
.search-cats::-webkit-scrollbar{display:none}
.search-cat{
  flex:none;padding:5px 14px;
  border:1px solid rgba(232,200,135,.2);
  background:none;border-radius:999px;
  font-size:12px;color:var(--muted);cursor:pointer;
  white-space:nowrap;
}
.search-cat.is-active{
  background:linear-gradient(118deg,#a97e2f,#d4a24e);
  color:#1a1208;border-color:transparent;
}

.search-results{
  flex:1;overflow-y:auto;
  padding:8px 14px calc(20px + env(safe-area-inset-bottom,0));
}
.search-group{margin-bottom:18px}
.search-group-label{
  font-size:12px;color:var(--muted);letter-spacing:.06em;
  padding:6px 2px;display:flex;align-items:center;gap:6px;
}
.search-count{
  font-size:10px;color:var(--faint);
  background:rgba(232,200,135,.1);
  padding:1px 7px;border-radius:999px;
}
.search-item{
  padding:11px 12px;margin-bottom:6px;
  background:rgba(232,200,135,.04);
  border:1px solid rgba(232,200,135,.1);
  border-radius:10px;cursor:pointer;
}
.search-item:active{background:rgba(232,200,135,.1)}
.search-item-title{
  font-size:14px;font-weight:600;color:var(--ink);
  line-height:1.4;
}
.search-item-sum{
  font-size:12px;color:var(--muted);
  margin-top:4px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.search-item-meta{
  font-size:11px;color:var(--faint);
  margin-top:5px;letter-spacing:.04em;
}
.search-empty{
  margin:24px 12px;border-radius:14px;background:var(--panel);border:1px solid var(--line);
}
.search-hist-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 2px;
}
.search-hist-head span{font-size:12px;color:var(--muted);letter-spacing:.06em}
.search-clear-hist{
  background:none;border:none;color:var(--faint);
  font-size:11px;cursor:pointer;
}
.search-hist-list{
  display:flex;flex-wrap:wrap;gap:8px;padding:4px 0;
}
.search-hist-tag{
  padding:5px 13px;
  background:rgba(232,200,135,.08);
  border:1px solid rgba(232,200,135,.15);
  border-radius:999px;
  font-size:12px;color:var(--ink);cursor:pointer;
}
.search-hist-tag:active{background:rgba(232,200,135,.16)}

/* ========== B8-2 字体大小抽屉（v0.4.11） ========== */
.font-opts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
  margin:16px 0;
}
.font-opt{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 8px;
  background:rgba(232,200,135,.06);
  border:1.5px solid rgba(232,200,135,.15);
  border-radius:12px;cursor:pointer;
  color:var(--muted);transition:all .15s;
}
.font-opt span{font-size:10px;color:var(--faint);letter-spacing:.04em}
.font-opt.is-active{
  background:rgba(212,162,78,.15);
  border-color:var(--gold);color:var(--gold-2);
}
.font-preview{
  text-align:center;padding:18px 12px;
  background:rgba(232,200,135,.05);
  border-radius:10px;
  color:var(--ink);font-family:var(--serif);
  line-height:1.7;
}