/* ==========================================================================
   液态玻璃 v3（2026-11-08）
   iOS 视觉语言：背景色场 + 半透明玻璃卡 + 单一强调蓝 + 悬浮胶囊底栏
   设计原则：卡与卡靠"材质+高光"分层，不靠重阴影；层级只留大标题/正文/说明三级
   ========================================================================== */

:root{
  --lq-accent:#0a84ff;
  --lq-accent-deep:#0071e3;
  --lq-accent-soft:rgba(10,132,255,.12);
  --lq-ink:#0b1220;
  --lq-ink-2:#3c4658;
  --lq-ink-3:#6b7690;

  /* 覆盖旧 token：所有用 var(--card)/var(--shadow) 的组件一次性换成玻璃 */
  --bg:#f4f7fd;
  --card:rgba(255,255,255,.46);
  --text:#0b1220;
  --text-2:#3c4658;
  --muted:#6b7690;
  --line:rgba(11,18,32,.09);
  --dots:transparent;
  --radius:24px;
  --shadow:0 12px 32px rgba(24,42,86,.12), 0 2px 6px rgba(24,42,86,.06), inset 0 1px 0 rgba(255,255,255,.92);
  --shadow-2:0 18px 44px rgba(24,42,86,.16), inset 0 1px 0 rgba(255,255,255,.9);
  --glass-line:rgba(255,255,255,.68);
}

/* 字体：优先系统 SF / 苹方 */
body,.btn,.field input,.field textarea,.sheet,input,textarea,button{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
}

/* ---------- 背景色场（玻璃要有东西可折射） ---------- */
body{background:#eef2fa}
.phone{
  background-color:#e6ecf8;
  background-image:none;
  position:relative;
  box-shadow:none;
}
/* 色雾独立成一层：锚点用可视百分比固定，保证整屏都有颜色
   （2026-11-08：之前锚点写到 104%，底部整片掉出可视区，看着就是死黑） */
.phone::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 30% at 14% 4%, rgba(120,168,255,.72), rgba(120,168,255,0) 72%),
    radial-gradient(48% 26% at 94% 16%, rgba(255,160,200,.60), rgba(255,160,200,0) 72%),
    radial-gradient(58% 24% at 82% 58%, rgba(180,170,255,.42), rgba(180,170,255,0) 74%),
    radial-gradient(66% 26% at 58% 92%, rgba(120,225,198,.55), rgba(120,225,198,0) 74%);
}
.phone > *{position:relative;z-index:1}
/* 底栏是 fixed 定位，不能跟着变 relative（否则 left:12 会顶出 12px 横向溢出） */
.phone>.tabbar{position:fixed;z-index:50}
@media(min-width:860px){
  body{
    background-color:#e4eaf7;
    background-image:
      radial-gradient(46% 44% at 18% 6%, rgba(126,170,255,.80) 0%, rgba(126,170,255,0) 68%),
      radial-gradient(40% 38% at 96% 8%, rgba(255,160,200,.60) 0%, rgba(255,160,200,0) 70%),
      radial-gradient(44% 30% at 62% 52%, rgba(178,168,255,.34) 0%, rgba(178,168,255,0) 72%),
      radial-gradient(56% 40% at 44% 104%, rgba(132,232,204,.58) 0%, rgba(132,232,204,0) 68%),
      linear-gradient(160deg,#f6faff 0%,#fbf8ff 50%,#f3fbf7 100%);
  }
  .phone{background:transparent;background-image:none}
  .phone::before{display:none}
}

/* ---------- 玻璃表面（统一 36 个卡片类） ---------- */
.card-note,.metric-card,.wsum,.log-row,.usage-hero,.ur-row,.pie-wrap,.hx-row,.vt-row,
.wish-sum,.wish-row,.skill-row,.goal-row,.reflex-card,.meal-row,.diet-chip,.diet-issue,
.uc-card,.acc-row,.book-sum,.book-row,.jr-input,.jr-row,.nt-row,.hb-row,.hb-chip,
.gd-row,.gd-mini-row,.acc-me,.jr-mbtn,.dash-hero,.hb2-row,.card,.task,.cr,.empty,
.task-stat,.day-detail,.stat-cards .sc,.cal-cell,.chart-box{
  background:var(--card);
  background-image:linear-gradient(158deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.06) 100%);
  backdrop-filter:blur(22px) saturate(185%);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
  border:1px solid var(--glass-line,rgba(255,255,255,.55));
  box-shadow:var(--shadow);
}
/* 列表行不需要那么"厚"，玻璃薄一点、圆角小一点 */
.task,.cr,.log-row,.ur-row,.hx-row,.vt-row,.wish-row,.skill-row,.goal-row,.meal-row,
.acc-row,.book-row,.jr-row,.nt-row,.hb-row,.gd-row,.hb2-row,.diet-chip{
  border-radius:18px;
  backdrop-filter:blur(18px) saturate(170%);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
}

/* ---------- 侧栏：整块玻璃 ---------- */
.side{
  background:rgba(255,255,255,.30);
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  border-right:1px solid rgba(255,255,255,.6);
  box-shadow:1px 0 0 rgba(11,18,32,.04);
}
@media(min-width:860px){
  .app>.side{
    background:rgba(255,255,255,.40);
    border-right:1px solid rgba(255,255,255,.55);
    box-shadow:inset -1px 0 0 rgba(11,18,32,.04);
  }
}
.side-brand .brand-name{letter-spacing:-.2px}
.side-item{border-radius:13px;transition:background .14s,color .14s}
.side-item.on{
  background:rgba(255,255,255,.78);
  color:var(--lq-accent);
  box-shadow:0 2px 8px rgba(24,42,86,.08), inset 0 0 0 .5px rgba(255,255,255,.9);
}
.side-item.on .si-ico{color:var(--lq-accent)}
.side-group-t{color:#8b96aa;letter-spacing:.6px}
.side-scroll::-webkit-scrollbar{width:0}

/* ---------- 顶栏：iOS 大标题 ---------- */
/* 顶栏左右内边距必须保留 18px：标题会贴到边缘（2026-11-08 修）
   标题一律左对齐（和今日页的大标题同一套语言），汉堡按钮不再把标题"推"到中间 */
.topbar{
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 6px;
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
}
.topbar>div{flex:1;min-width:0}
.topbar h1{font-size:25px;font-weight:800;letter-spacing:-.7px;line-height:1.2}
.topbar .sub{font-size:11.5px;color:var(--lq-ink-3);margin-top:5px;font-weight:500}
.topbar .sub i{color:var(--lq-ink-3)}

/* ---------- 区块标题 ---------- */
.sec-head h2{font-size:13px;font-weight:800;letter-spacing:.1px}
.sec-head .count{
  font-size:10.5px;font-weight:700;color:var(--lq-ink-3);
  background:rgba(255,255,255,.6);border-radius:9px;padding:2px 8px;box-shadow:none;
}
.sec-head .add{color:var(--lq-accent);font-weight:700;font-size:12px}

/* ---------- 按钮 ---------- */
.btn{
  background:linear-gradient(180deg,#3ea2ff 0%,#0a84ff 100%);
  color:#fff;border-radius:16px;font-weight:700;letter-spacing:-.1px;
  box-shadow:0 8px 20px rgba(10,132,255,.28), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.ghost{
  background:rgba(255,255,255,.55);
  color:var(--lq-accent);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 8px rgba(24,42,86,.06);
}
.btn.danger{background:rgba(255,255,255,.55);color:#e5484d;border:1px solid rgba(255,214,220,.9);box-shadow:none}

/* ---------- 胶囊控件 ---------- */
.seg{background:rgba(11,18,32,.055);border-radius:12px;padding:3px}
.seg button{border-radius:9px;font-weight:600;color:var(--lq-ink-3)}
.seg button.on{
  background:rgba(255,255,255,.92);color:var(--lq-ink);
  box-shadow:0 1px 4px rgba(24,42,86,.12), inset 0 0 0 .5px rgba(255,255,255,.9);
}
.chip{
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);
  border-radius:11px;font-weight:600;color:var(--lq-ink-2);box-shadow:none;
}
.chip.on{background:var(--lq-accent-soft);border-color:rgba(10,132,255,.35);color:var(--lq-accent-deep);font-weight:700}

/* ---------- 悬浮玻璃底栏 ---------- */
.tabbar{
  left:12px;right:12px;bottom:10px;width:auto;max-width:none;margin:0;box-sizing:border-box;
  height:60px;border-radius:26px;border:1px solid rgba(255,255,255,.6);
  background:rgba(255,255,255,.34);
  background-image:linear-gradient(158deg,rgba(255,255,255,.62),rgba(255,255,255,.12));
  backdrop-filter:blur(34px) saturate(200%);
  -webkit-backdrop-filter:blur(34px) saturate(200%);
  box-shadow:0 14px 32px rgba(24,42,86,.16), inset 0 1px 0 rgba(255,255,255,.9);
  padding:0 6px;
}
.tab{font-size:10px;font-weight:600;color:#5c6a80;border-radius:16px;padding:5px 0 4px;gap:1px}
.tab.active{color:var(--lq-accent)}
.tab.active .tico{background:var(--lq-accent-soft);border-radius:11px;padding:2px 12px;margin:-2px -12px}
.view{padding-bottom:120px}
.fab-wrap,.quick-add{bottom:96px}

/* ---------- 表单与弹层 ---------- */
.sheet{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(34px) saturate(190%);
  -webkit-backdrop-filter:blur(34px) saturate(190%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 -14px 40px rgba(24,42,86,.18);
}
.field input,.field textarea{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(11,18,32,.08);
  border-radius:14px;
  box-shadow:inset 0 1px 2px rgba(11,18,32,.03);
}
.field input:focus,.field textarea:focus{background:#fff;border-color:rgba(10,132,255,.55);box-shadow:0 0 0 4px rgba(10,132,255,.12)}
.confirm-box{
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
}

/* ---------- 今日进度卡：去渐变，改玻璃 + 细环 ---------- */
.progress-card{
  background:var(--card);
  background-image:linear-gradient(158deg,rgba(255,255,255,.6),rgba(255,255,255,.14));
  backdrop-filter:blur(24px) saturate(185%);
  -webkit-backdrop-filter:blur(24px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:24px;
  box-shadow:var(--shadow);
}

/* ---------- 勾选框（iOS 圆形） ---------- */
.tick{border-radius:50%;background:rgba(255,255,255,.7);border:1.6px solid rgba(11,18,32,.14);box-shadow:none}
.tick.on{
  background:linear-gradient(180deg,#3ea2ff,#0a84ff);
  border-color:transparent;
  box-shadow:0 4px 10px rgba(10,132,255,.32), inset 0 1px 0 rgba(255,255,255,.45);
}

/* ---------- 深色：暗色玻璃 ----------
   做法：底色不纯黑（深海军蓝），上面铺几团高饱和光雾；
   卡片用「白色薄膜」（rgba(255,255,255,.09)）而不是深色实块 ——
   这样玻璃才有"覆了一层霜"的感觉，而不是和背景糊在一起。 */
body.dark{
  background-color:#0b1224;
  /* 中央补一层柔光：不给的话页面中段是死黑，内容会"浮不起来" */
  background-image:
    radial-gradient(80% 56% at 50% 32%, rgba(64,86,150,.30) 0%, rgba(64,86,150,0) 72%),
    radial-gradient(44% 42% at 20% 6%, rgba(37,99,235,.60) 0%, rgba(37,99,235,0) 70%),
    radial-gradient(40% 38% at 96% 8%, rgba(147,51,234,.44) 0%, rgba(147,51,234,0) 70%),
    radial-gradient(42% 30% at 60% 50%, rgba(99,102,241,.30) 0%, rgba(99,102,241,0) 72%),
    radial-gradient(54% 38% at 44% 104%, rgba(16,185,129,.38) 0%, rgba(16,185,129,0) 70%),
    linear-gradient(160deg,#0d1528 0%,#0b1120 52%,#0d1a26 100%);
  --glass-line:rgba(255,255,255,.16);
}
body.dark .phone{
  background-color:#0b1224;
  background-image:none;
}
body.dark .phone::before{
  background:
    radial-gradient(96% 46% at 50% 34%, rgba(58,82,146,.34), rgba(58,82,146,0) 74%),
    radial-gradient(58% 30% at 16% 3%, rgba(37,99,235,.62), rgba(37,99,235,0) 72%),
    radial-gradient(46% 24% at 96% 18%, rgba(168,85,247,.46), rgba(168,85,247,0) 72%),
    radial-gradient(54% 22% at 26% 56%, rgba(99,102,241,.34), rgba(99,102,241,0) 74%),
    radial-gradient(62% 26% at 62% 94%, rgba(16,185,129,.40), rgba(16,185,129,0) 74%);
}
/* 深色玻璃的"薄膜"与高光 */
body.dark .side{
  background:rgba(255,255,255,.09);
  background-image:linear-gradient(158deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 60%);
  border-right:1px solid rgba(255,255,255,.16);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.06), 0 0 60px rgba(0,0,0,.28);
  backdrop-filter:blur(36px) saturate(175%);
  -webkit-backdrop-filter:blur(36px) saturate(175%);
}
body.dark .side-item{color:#c3cae0}
body.dark .side-item.on{background:rgba(255,255,255,.16);color:#8fc2ff}
body.dark .side-group-t{color:#7d87a0}
body.dark .tabbar{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.26)}
body.dark .tab{color:#a9b2c8}
body.dark .tab.active{color:#6fb6ff}
body.dark .sheet{background:rgba(28,34,52,.82);border-color:rgba(255,255,255,.14);box-shadow:0 -14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.16)}
body.dark .field input,body.dark .field textarea{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
body.dark .seg{background:rgba(255,255,255,.08)}
body.dark .seg button.on{background:rgba(255,255,255,.16);color:#f2f5fb}
body.dark .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#d3d9e8}
body.dark .chip.on{background:rgba(10,132,255,.22);border-color:rgba(10,132,255,.45);color:#8fc2ff}
body.dark .side-item.on{background:rgba(255,255,255,.12);color:#8fc2ff}
body.dark .sec-head .count{background:rgba(255,255,255,.08)}
body.dark .btn.ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#8fc2ff}
body.dark .tick{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16)}
body.dark .confirm-box{background:rgba(24,28,40,.9);border-color:rgba(255,255,255,.1)}

/* 不支持 backdrop-filter 时退化成不透明卡（老安卓 WebView） */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card,.task,.cr,.card-note,.log-row,.book-row,.acc-row,.hb2-row,.dash-hero,.jr-input,
  .progress-card,.stat-cards .sc,.metric-card,.usage-hero,.pie-wrap,.reflex-card,.sheet,.tabbar{
    background:rgba(255,255,255,.92) !important;
    background-image:none !important;
  }
  body.dark .card,body.dark .task,body.dark .cr,body.dark .card-note,body.dark .sheet,body.dark .tabbar{
    background:#1a1e2b !important;
  }
}

/* 今日页头部：去掉 2026-10-22 那块绿紫渐变横幅（配色与新蓝调冲突，且和外层 18px 内边距叠加） */
#view-today .topbar{
  background:none;
  border-radius:0;
  margin:6px 0 10px;
  padding:calc(14px + env(safe-area-inset-top,0px)) 18px 4px;
  align-items:center;
}

/* ==========================================================================
   可读性：列表行字号抬一档（2026-11-08 他反馈"字体太小"）
   原值普遍 13px / 10.5px，手机上是 2x 屏，看着只有 6-7pt
   ========================================================================== */
.t-title{font-size:14.5px}
.t-meta span{font-size:10.5px}
.gd-n{font-size:14px}
.gd-meta,.gd-note{font-size:11.5px}
.gd-badge,.gd-again{font-size:11px}
.book-row .bk-t{font-size:14px}
.book-row .bk-n{font-size:11.5px}
.book-row .bk-cat,.book-row .bk-st{font-size:11px}
.jr-text{font-size:14px}
.jr-time{font-size:11px}
.acc-p{font-size:14px}
.acc-a{font-size:11.5px}
.acc-n{font-size:11px}
.nt-t{font-size:14px}
.nt-m{font-size:11.5px}
.hb2-n{font-size:14px}
.hb2-note{font-size:11.5px}
.log-row .lr-t{font-size:14px}
.stat-cards .sl{font-size:11.5px}
.sec-head h2{font-size:13.5px}
.hint{font-size:12px}

/* ==========================================================================
   大屏：内容列加宽（原 720px 固定，2K 屏上左右全是空）
   ========================================================================== */
@media(min-width:1100px){
  #view-page > *{max-width:860px}
}
@media(min-width:1500px){
  #view-page > *{max-width:980px}
}

/* 宽屏：小列表改两栏，避免右侧一大片空（2026-11-08） */
@media(min-width:1100px){
  .gd-list,.book-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
  .gd-list>.gd-row,.book-list>.book-row{margin-bottom:0}
}

/* 资料卡：原来写死 #fff，深色下整块发白（2026-11-08 扫出来的） */
.profile-card{
  background:var(--card);
  background-image:linear-gradient(158deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.06) 100%);
  backdrop-filter:blur(22px) saturate(185%);
  -webkit-backdrop-filter:blur(22px) saturate(185%);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  border-radius:20px;
}
body.dark .profile-card{
  background:var(--card);
  background-image:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
  border-color:var(--glass-line);
}
body.dark .stepper{background:rgba(255,255,255,.07)}
body.dark .stepper button:active{background:rgba(255,255,255,.14)}

/* ==========================================================================
   个人问题总表 / 复盘管理（2026-11-08 上线）
   ========================================================================== */
.pb-row,.rv-row{
  display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;
  padding:11px 13px;margin-bottom:7px;border-radius:18px;
  background:var(--card);
  background-image:linear-gradient(158deg,rgba(255,255,255,.40),rgba(255,255,255,.12) 46%,rgba(255,255,255,.04));
  backdrop-filter:blur(18px) saturate(175%);
  -webkit-backdrop-filter:blur(18px) saturate(175%);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.pb-row:active,.rv-row:active{transform:scale(.992)}
.pb-st,.rv-type{
  flex:0 0 auto;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:9px;
  background:rgba(10,132,255,.13);color:#0a6ad4;letter-spacing:.2px;
}
.pb-row.st-doing .pb-st{background:rgba(255,159,10,.18);color:#a9600a}
.pb-row.st-done .pb-st{background:rgba(52,199,89,.18);color:#1f8f42}
.pb-row.st-drop .pb-st{background:rgba(120,120,150,.16);color:#6b7690}
.pb-main,.rv-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pb-t,.rv-t{font-size:14px;font-weight:700;color:var(--text);line-height:1.4}
.pb-d{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-meta,.rv-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;font-weight:600}
.pb-row.st-done .pb-t{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(120,120,150,.5)}
.pb-go{flex:0 0 auto;color:var(--muted);font-size:17px;line-height:1;padding-top:2px}
body.dark .pb-st{background:rgba(10,132,255,.24);color:#8fc2ff}
body.dark .pb-row.st-doing .pb-st{background:rgba(255,159,10,.22);color:#ffc46b}
body.dark .pb-row.st-done .pb-st{background:rgba(52,199,89,.22);color:#7ee2a0}
body.dark .pb-row.st-drop .pb-st{background:rgba(255,255,255,.10);color:#a9b2c8}
body.dark .rv-row{background-image:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
body.dark .rv-type{background:rgba(10,132,255,.24);color:#8fc2ff}

/* 问题/复盘的筛选条：单行横滑，不要折成两行（2026-11-08） */
#prob-filter,#rv-filter{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:2px 2px 4px;scrollbar-width:none;-ms-overflow-style:none}
#prob-filter::-webkit-scrollbar,#rv-filter::-webkit-scrollbar{display:none}
#prob-filter .chip,#rv-filter .chip{flex:0 0 auto}

/* 复盘摘要最多三行；问题行的"结果"保持单行 */
.rv-t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pb-meta{flex-wrap:nowrap;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* 仪表盘「接下来」（2026-11-12） */
.up-row{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 12px;margin-bottom:7px;border-radius:16px;
  background:var(--card);
  background-image:linear-gradient(158deg,rgba(255,255,255,.40),rgba(255,255,255,.12) 46%,rgba(255,255,255,.04));
  backdrop-filter:blur(18px) saturate(175%);
  -webkit-backdrop-filter:blur(18px) saturate(175%);
  border:1px solid var(--glass-line);
  box-shadow:var(--shadow);
}
.up-date{
  flex:0 0 auto;min-width:64px;text-align:center;font-size:10.5px;font-weight:800;
  padding:4px 8px;border-radius:9px;background:rgba(10,132,255,.12);color:#0a6ad4;letter-spacing:.2px;
}
.up-date.now{background:rgba(52,199,89,.16);color:#1f8f42}
.up-date.over{background:rgba(255,59,48,.16);color:#c62f26}
.up-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.up-t{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px;font-weight:600}
body.dark .up-row{background-image:linear-gradient(158deg,rgba(255,255,255,.10),rgba(255,255,255,.03))}
body.dark .up-date{background:rgba(10,132,255,.24);color:#8fc2ff}
body.dark .up-date.now{background:rgba(52,199,89,.22);color:#7ee2a0}
body.dark .up-date.over{background:rgba(255,59,48,.24);color:#ff9a92}