/* ============================================================
 * 我的日程 — 样式（双主题系统：🐶 卡通线条小狗 / ✨ 新拟物高级感）
 *
 * 主题由 html[data-theme] 驱动（app.js 持久化 + 页面内即时切换）：
 *   puppy — 奶油暖底 + 焦糖橙、粗线条描边、错位漫画阴影、爪印纹理
 *   neo   — 参考图 neomorphism：#ECEEF3 浅灰底、凹凸双影、琥珀黄强调
 * 下方 :root 保留一份中性兜底变量，两套主题各自完整覆盖。
 * 正文对比度均 ≥7:1，彩色标签文字取深色变体（≥4.5:1）。
 * ============================================================ */

:root{
  color-scheme:light;

  /* 基底（奶油色调） */
  --bg:#FAF4EC;
  --panel:#FFFDFB;
  --panel-2:#FCF6EF;
  --line:#F0E0D6;
  --line-soft:#F6ECE2;
  --line-strong:#E4CFC0;

  /* 文字 */
  --text:#46393E;
  --dim:#7C6A70;
  --faint:#A7959B;

  /* 主强调：玫瑰红（主按钮、勾选、进度、完成率环） */
  --accent:#CF4B46;
  --accent-hover:#B93E39;
  --accent-soft:#FBE9E7;
  --accent-line:#F3BCB7;
  --accent-ink:#FFFFFF;

  /* 分类色：生活=粉 · 工作=雾蓝 · 每月固定=鹅黄 */
  --pink:#BC4E6B;      --pink-soft:#FBE7EC;  --pink-dot:#F2A0B2;
  --blue:#3F7196;      --blue-soft:#E4F0F8;  --blue-dot:#94C1D8;
  --yellow:#8A6D1F;    --yellow-soft:#FBF3D6;--yellow-dot:#F3E283;

  /* 辅助：薄荷绿=成功 · 丁香紫=点缀 · 橄榄绿=结转提示 */
  --green:#33795C;     --green-soft:#E3F4EB; --green-dot:#A8DBC5;
  --lav:#7263A5;       --lav-soft:#EEEAF8;   --lav-dot:#BCB2D8;
  --olive:#6E7A34;

  /* 语义 */
  --warn:#9A6B1F;      --warn-soft:#FBF0D9;  --warn-line:#E7B455;
  --danger:#B23A34;    --danger-soft:#FBE6E2;--danger-line:#F0BFB8;

  --check:#D9BFB2;
  --toast-bg:#46393E;  --toast-ink:#FFF8F2;

  --r:12px;
  --r-sm:8px;
  --shadow:0 1px 2px rgba(93,62,55,.05), 0 6px 18px -12px rgba(93,62,55,.18);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  font-size:14px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}

button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,select{font-family:inherit;font-size:14px;color:var(--text)}
svg{display:block}

#app{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  padding:0 16px 40px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ================= 顶栏 ================= */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 2px 14px;
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{width:28px;height:28px;flex:none}
.brand-txt h1{font-size:16px;font-weight:600;letter-spacing:.2px;line-height:1.3}
.brand-txt p{font-size:11.5px;color:var(--faint);line-height:1.4}
.spacer{flex:1}

/* 周/月分段控件 */
.seg{
  display:inline-flex;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.seg button{
  padding:6px 16px;
  border-radius:999px;
  font-size:13px;
  color:var(--dim);
  transition:background .16s, color .16s;
  min-height:32px;
}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:500}
.seg button:not(.on):hover{background:var(--line-soft)}

/* 视觉主题切换（🐶 小狗 / ✨ 质感） */
.theme-switch{
  display:inline-flex;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  gap:2px;
}
.theme-switch button{
  padding:6px 12px;
  border-radius:999px;
  font-size:13px;
  color:var(--dim);
  min-height:32px;
  transition:background .16s, color .16s;
}
.theme-switch button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.theme-switch button:not(.on):hover{background:var(--line-soft)}
@media (max-width:639px){
  .theme-switch button span{display:none}
  .theme-switch button{padding:6px 10px}
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0 16px;
  height:40px;
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:10px;
  font-size:13.5px;
  font-weight:600;
  transition:filter .16s, transform .1s;
  white-space:nowrap;
  box-shadow:0 3px 10px -4px var(--accent-line);
}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:scale(.98)}
.btn-primary svg{width:16px;height:16px}

.btn-ghost{
  padding:7px 12px;
  border-radius:var(--r-sm);
  color:var(--dim);
  font-size:12.5px;
  border:1px solid transparent;
}
.btn-ghost:hover{background:var(--line-soft)}

.iconbtn{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  color:var(--dim);
}
.iconbtn:hover{background:var(--line-soft)}
.iconbtn svg{width:18px;height:18px}

/* ================= 统计条（小狗进度条） ================= */
.stats{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
  padding:14px 16px 12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.stat-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}

.stat-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat-title{font-size:13px;font-weight:500}
.stat-sub{font-size:12px;color:var(--faint)}
.stat-sub b{color:var(--dim);font-weight:500}

/* --- 小狗进度条 --- */
.pup-track{
  --p:0;                 /* 0-100，由 JS 内联写入 */
  --pup-w:46px;          /* 小狗图片宽度，调尺寸改这里 */
  position:relative;
  height:calc(var(--pup-w) + 16px);
  margin:2px 2px 0;
}
.pup-rail{
  position:absolute;
  left:0;right:0;bottom:8px;
  height:12px;
  border-radius:999px;
  background:var(--line-soft);
  box-shadow:inset 1.5px 1.5px 3px rgba(0,0,0,.05);
  overflow:hidden;
}
.pup-rail::after{ /* 轨道上的稀疏爪印刻度 */
  content:"🐾🐾🐾🐾🐾🐾";
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-around;
  font-size:7px;
  opacity:.35;
  letter-spacing:2px;
}
.pup-fill{
  position:absolute;
  left:0;bottom:8px;
  height:12px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green-dot),var(--green));
  opacity:.9;
  transition:width .6s cubic-bezier(.34,1.3,.5,1);
}
.pup-rider{
  position:absolute;
  bottom:2px;
  left:calc(var(--pup-w) / 2 + var(--p) / 100 * (100% - var(--pup-w)));
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:left .6s cubic-bezier(.34,1.3,.5,1);
  pointer-events:none;
}
.pup-img{
  width:var(--pup-w);
  height:auto;
  mix-blend-mode:multiply;   /* 白纸底融进页面背景，保留蜡笔质感 */
  filter:brightness(1.08) contrast(1.06); /* 把偏灰纸纹推成纯白，multiply 后无痕 */
  user-select:none;
}
.pup-bubble{
  position:relative;
  font-size:11px;
  font-weight:600;
  color:#fff;
  background:var(--green);
  padding:2px 8px;
  border-radius:999px;
  margin-bottom:3px;
  white-space:nowrap;
}
.pup-bubble::after{          /* 气泡小尾巴指向小狗 */
  content:"";
  position:absolute;
  left:50%;bottom:-2px;
  margin-left:-3px;
  width:6px;height:6px;
  background:var(--green);
  transform:rotate(45deg);
  border-radius:1px;
}

@media (prefers-reduced-motion:reduce){
  .pup-fill,.pup-rider{transition:none}
}

/* 小狗进度条 · puppy 主题：轨道焦糖描边、绿填充加深 */
:root[data-theme="puppy"] .pup-rail{
  background:var(--panel);
  border:2px solid var(--line-strong);
  box-shadow:none;
}
:root[data-theme="puppy"] .pup-rail::after{opacity:.5;font-size:8px}
:root[data-theme="puppy"] .pup-fill{
  bottom:10px;height:12px;
  background:linear-gradient(90deg,var(--green-dot),var(--green));
}
:root[data-theme="puppy"] .pup-bubble{box-shadow:2px 2px 0 rgba(233,194,148,.7)}

/* 小狗进度条 · neo 主题：轨道内凹双影 */
:root[data-theme="neo"] .pup-rail{
  background:#DFE2EA;
  box-shadow:inset 3px 3px 6px #D0D4DE, inset -2px -2px 4px #FFFFFF;
}
:root[data-theme="neo"] .pup-rail::after{opacity:.25}
:root[data-theme="neo"] .pup-fill{
  background:linear-gradient(90deg,#ACD6B4,var(--green));
  box-shadow:1px 1px 3px rgba(120,150,130,.35);
}
:root[data-theme="neo"] .pup-bubble{box-shadow:2px 2px 5px rgba(163,177,198,.35)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:999px;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
.pill.overdue{background:var(--danger-soft);color:var(--danger)}
.pill.calm{background:var(--green-soft);color:var(--green)}
.pill.empty{background:var(--line-soft);color:var(--faint)}

/* ================= 周期导航 ================= */
.periodnav{
  display:flex;
  align-items:center;
  gap:8px;
  padding:2px 2px 14px;
}
.navbtn{
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--dim);
  flex:none;
  transition:border-color .16s,color .16s;
}
.navbtn:hover{border-color:var(--accent-line);color:var(--accent)}
.navbtn svg{width:18px;height:18px}

.period-label{display:flex;align-items:baseline;gap:8px;flex:1;min-width:0;flex-wrap:wrap}
.period-label span{font-size:15px;font-weight:600;letter-spacing:.2px}
.period-label em{font-size:11.5px;color:var(--faint);font-style:normal}

/* ================= 列表 ================= */
.list{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  align-content:start;
  flex:1;
}
@media (min-width:640px){
  .list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (min-width:1024px){
  .list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- 分类分区头（工作 / 生活 / 每月固定） --- */
.cat-head{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:16px 2px 2px;
}
.cat-head:first-child{padding-top:2px}
.cat-head .dot{
  width:11px;height:11px;
  border-radius:4px;
  flex:none;
  box-shadow:0 0 0 3px var(--line-soft);
}
.cat-head .t{font-size:13.5px;font-weight:700;letter-spacing:.5px}
.cat-head .cnt{
  display:inline-grid;place-items:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
}
.cat-head .line{flex:1;height:1.5px;border-radius:2px;opacity:.5}

.cat-head.work .t{color:var(--blue)}
.cat-head.work .dot{background:var(--blue-dot)}
.cat-head.work .cnt{background:var(--blue-soft);color:var(--blue)}
.cat-head.work .line{background:var(--blue-dot)}

.cat-head.life .t{color:var(--pink)}
.cat-head.life .dot{background:var(--pink-dot)}
.cat-head.life .cnt{background:var(--pink-soft);color:var(--pink)}
.cat-head.life .line{background:var(--pink-dot)}

.cat-head.monthly .t{color:var(--yellow)}
.cat-head.monthly .dot{background:var(--yellow-dot)}
.cat-head.monthly .cnt{background:var(--yellow-soft);color:var(--yellow)}
.cat-head.monthly .line{background:var(--yellow-dot)}

/* --- 时间子分组头（逾期 / 今天 / 本周稍后 / 已完成） --- */
.group-head{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 2px 0;
  font-size:12px;
  color:var(--dim);
  font-weight:500;
  letter-spacing:.3px;
}
.cat-head + .group-head{padding-top:4px}
.group-head .count{
  display:inline-grid;place-items:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--line-soft);
  border-radius:999px;
  font-size:11px;
  color:var(--dim);
}
.group-head.danger{color:var(--danger)}
.group-head.danger .count{background:var(--danger-soft);color:var(--danger)}
.group-head .line{flex:1;height:1px;background:var(--line-soft)}
.group-head button{
  font-size:12px;color:var(--faint);
  padding:4px 8px;border-radius:6px;
}
.group-head button:hover{background:var(--line-soft);color:var(--dim)}

/* --- 已完成摘要条：一行「已完成（N）」，整条可点击展开/收起 --- */
.done-summary{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  padding:9px 12px;
  background:var(--green-soft);
  border:1px solid var(--green-dot);
  border-radius:var(--r-sm);
  color:var(--green);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.3px;
  text-align:left;
  cursor:pointer;
  transition:border-color .16s, background .16s;
}
.done-summary:hover{border-color:var(--green)}
.done-summary .chev{width:14px;height:14px;flex:none;transition:transform .18s ease}
.done-summary.open .chev{transform:rotate(90deg)}
.done-summary .t{white-space:nowrap}
.done-summary .line{flex:1;height:1px;background:var(--green-dot);opacity:.7}
.done-summary .hint{font-size:11.5px;font-weight:400;color:var(--dim);white-space:nowrap}

/* --- 卡片 --- */
.card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px 12px 10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:border-color .16s, background .16s, opacity .2s, transform .12s;
  animation:cardIn .22s ease both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.card:hover{border-color:var(--line-strong)}
.card.overdue{border-color:var(--danger-line);background:var(--danger-soft)}
/* 已完成态：马卡龙薄荷绿 · 左侧色条 + 浅绿底 + 深色文字（与成功语义色一致） */
.card.done{
  background:var(--green-soft);
  border-color:var(--green-dot);
}
.card.done::before{
  content:"";
  position:absolute;
  left:0;top:12px;bottom:12px;
  width:3.5px;
  border-radius:0 4px 4px 0;
  background:var(--green-dot);
}
.card.done:hover{border-color:var(--green);opacity:1}
.card.done .card-title{text-decoration:line-through;text-decoration-color:var(--faint);color:var(--dim)}

/* 勾选框 44px 触控区 */
.check{
  width:44px;height:44px;
  flex:none;
  display:grid;place-items:center;
  margin:-6px 0 -6px -6px;
  border-radius:10px;
}
.check:hover{background:var(--line-soft)}
.check .box{
  width:22px;height:22px;
  border:1.8px solid var(--check);
  border-radius:7px;
  display:grid;place-items:center;
  transition:background .15s, border-color .15s;
}
.check:hover .box{border-color:var(--accent)}
.card.overdue .check .box{border-color:var(--danger-line)}
/* 勾选完成态：成功语义绿，与已完成卡片的绿色标识一致 */
.check.on .box{background:var(--green);border-color:var(--green)}
.check .box svg{width:13px;height:13px;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.check.on .box svg{opacity:1;transform:none}

.card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.card-title{
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  word-break:break-word;
}
.card-title .ord{font-size:11.5px;color:var(--faint);font-weight:400}

.card-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tag{
  font-size:11px;
  padding:2px 7px;
  border-radius:5px;
  font-weight:600;
  white-space:nowrap;
}
.tag.life{background:var(--pink-soft);color:var(--pink)}
.tag.work{background:var(--blue-soft);color:var(--blue)}
.tag.monthly{background:var(--yellow-soft);color:var(--yellow)}
/* 已完成状态标签：马卡龙绿 */
.tag.done-tag{background:#FFFFFF;color:var(--green);border:1px solid var(--green-dot)}

.due{font-size:11.5px;color:var(--faint);display:inline-flex;align-items:center;gap:4px}
.due svg{width:12px;height:12px;opacity:.65}
.due.soon{color:var(--accent);font-weight:600}
.due.late{color:var(--danger);font-weight:600}

.card-note{
  font-size:11.5px;
  color:var(--faint);
  line-height:1.5;
  word-break:break-word;
}

/* 多次事项进度 */
.progress{
  display:flex;align-items:center;gap:8px;
  margin-top:1px;
}
.progress .bar{
  flex:1;height:5px;border-radius:999px;
  background:var(--line-soft);overflow:hidden;
  min-width:40px;
}
.progress .bar i{
  display:block;height:100%;
  background:var(--green-dot);
  border-radius:999px;
  transition:width .3s ease;
}
.progress .num{
  font-size:11.5px;
  color:var(--dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.progress .num b{color:var(--green);font-weight:600}
.carry-note{
  font-size:11px;color:var(--olive);
  background:var(--green-soft);
  padding:1px 6px;border-radius:5px;
  white-space:nowrap;
}

/* 卡片操作（桌面 hover 显示） */
.card-acts{
  position:absolute;
  top:6px;right:6px;
  display:flex;
  gap:2px;
  opacity:0;
  transition:opacity .16s;
}
.card:hover .card-acts{opacity:1}
.card-acts button{
  width:30px;height:30px;
  display:grid;place-items:center;
  border-radius:7px;
  color:var(--faint);
  background:var(--panel);
  border:1px solid var(--line-soft);
}
.card-acts button:hover{color:var(--accent);border-color:var(--accent-line)}
.card-acts button.del:hover{color:var(--danger);border-color:var(--danger-line)}
.card-acts svg{width:14px;height:14px}

@media (hover:none){
  .card-acts{opacity:1;position:static;order:2;border:none}
  .card-acts button{width:34px;height:34px;background:transparent;border-color:transparent}
  .card-acts{flex-direction:column}
}

/* --- 空状态 --- */
.empty{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:48px 20px;
  border:1.5px dashed var(--line-strong);
  border-radius:var(--r);
  background:var(--panel-2);
  text-align:center;
  color:var(--faint);
}
.empty svg{width:56px;height:56px;opacity:.7}
.empty p{font-size:13px;color:var(--dim)}
.empty span{font-size:12px;color:var(--faint)}

/* 日期分组（月视图） */
.date-head{
  grid-column:1 / -1;
  display:flex;align-items:center;gap:8px;
  padding:12px 2px 2px;
  font-size:12.5px;
  color:var(--dim);
}
.date-head .d{font-weight:600;color:var(--text)}
.date-head .w{color:var(--faint);font-size:11.5px}
.date-head .line{flex:1;height:1px;background:var(--line-soft)}
.date-head.today .d{color:var(--accent)}
.date-head.late .d{color:var(--danger)}

/* ================= 页脚 ================= */
.foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
  font-size:11.5px;
  color:var(--faint);
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.foot .dot{opacity:.5}

/* ================= 弹窗 ================= */
.dialog{
  border:none;
  border-radius:16px;
  padding:0;
  width:min(480px, calc(100vw - 24px));
  max-height:min(88vh, 720px);
  background:var(--panel);
  color:var(--text);
  box-shadow:0 24px 60px -20px rgba(70,40,45,.45);
  overflow:hidden;
}
.dialog::backdrop{background:rgba(58,42,46,.4);backdrop-filter:blur(2px)}
.dialog form{display:flex;flex-direction:column;max-height:min(88vh,720px)}

.dlg-head{
  display:flex;align-items:center;
  padding:16px 14px 12px 18px;
  border-bottom:1px solid var(--line-soft);
}
.dlg-head h2{font-size:15px;font-weight:600;flex:1}

.dlg-body{
  padding:16px 18px 6px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.field{display:flex;flex-direction:column;gap:6px}
.field .lbl{font-size:12px;color:var(--dim);font-weight:500}
.field .lbl i{font-style:normal;color:var(--faint);font-weight:400}
.field .hint{font-size:11px;color:var(--faint);line-height:1.5;min-height:0}
.field .hint.warn{color:var(--warn)}
.field .hint.ok{color:var(--green)}

.field input[type=text],
.field input[type=date],
.field input[type=number],
.field select{
  height:42px;
  padding:0 12px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  transition:border-color .16s, box-shadow .16s;
  width:100%;
}
.field input:focus,.field select:focus{
  border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field .row{display:flex;gap:8px}
.field .row input{flex:1}
.field .row select{width:118px;flex:none}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  padding:8px 13px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--panel);
  font-size:12.5px;
  color:var(--dim);
  min-height:38px;
  transition:all .15s;
}
.chip:hover{border-color:var(--line-strong)}
.chip.on{
  background:var(--accent-soft);
  border-color:var(--accent-line);
  color:var(--accent);
  font-weight:600;
}
/* 分类 chip 选中时用各自的分类色，所见即所得 */
#fCategory .chip.on[data-v="life"]{background:var(--pink-soft);border-color:var(--pink-dot);color:var(--pink)}
#fCategory .chip.on[data-v="work"]{background:var(--blue-soft);border-color:var(--blue-dot);color:var(--blue)}
#fCategory .chip.on[data-v="monthly"]{background:var(--yellow-soft);border-color:var(--yellow-dot);color:var(--yellow)}

.stepper{
  display:flex;
  align-items:center;
  gap:8px;
}
.stepper button{
  width:38px;height:38px;
  flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:17px;
  color:var(--dim);
  background:var(--panel);
}
.stepper button:hover{border-color:var(--accent-line);color:var(--accent)}
.stepper input{
  width:64px;
  height:38px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:9px;
  outline:none;
  font-variant-numeric:tabular-nums;
}
.stepper input:focus{border-color:var(--accent-line)}
.stepper-note{font-size:12px;color:var(--faint)}

.dlg-foot{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 18px 16px;
  border-top:1px solid var(--line-soft);
  background:var(--panel);
}
.dlg-foot .spacer{flex:1}
.dlg-foot .btn-ghost{
  height:40px;padding:0 16px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--dim);
  font-size:13.5px;
}
.dlg-foot .btn-primary{height:40px}
.btn-danger-ghost{
  height:40px;padding:0 14px;
  border-radius:10px;
  color:var(--danger);
  font-size:13px;
  border:1px solid transparent;
}
.btn-danger-ghost:hover{background:var(--danger-soft)}

/* ================= Toast ================= */
.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%, 12px);
  padding:10px 18px;
  background:var(--toast-bg);
  color:var(--toast-ink);
  font-size:12.5px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s, transform .2s;
  z-index:99;
  max-width:calc(100vw - 32px);
  text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ================= 手机细节 ================= */
@media (max-width:639px){
  #app{padding:0 12px 32px}
  .topbar{padding:14px 2px 12px;gap:10px}
  .brand-txt h1{font-size:15px}
  .logo-img{width:26px}          /* 小屏等比缩小，不拉伸 */
  .btn-primary span{display:none}
  .btn-primary{padding:0;width:40px;justify-content:center}
  .seg button{padding:6px 13px}
  .stats{padding:12px 14px 10px;gap:6px}
  .pup-track{--pup-w:38px}
  .pup-bubble{font-size:10px;padding:1.5px 7px}
  .period-label span{font-size:14px}
  .card{padding:13px 12px 13px 8px}
  .card-title{font-size:14.5px}
  .dialog{border-radius:16px 16px 0 0}
  .foot{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ============================================================
 * 主题 1 · 🐶 卡通线条小狗
 * 奶油暖底 + 焦糖橙主色；粗描边、圆胖圆角、错位漫画阴影、爪印纹理
 * ============================================================ */
:root[data-theme="puppy"]{
  color-scheme:light;

  --bg:#FFF6EA;  --panel:#FFFDF8;  --panel-2:#FFF1DE;
  --line:#F2D5B0;--line-soft:#F8E9D2;--line-strong:#E9C294;

  --text:#5C4033;--dim:#8A6A55;--faint:#B49A85;

  --accent:#C96A1E;--accent-hover:#B05711;--accent-soft:#FDEBDA;--accent-line:#F3BE8C;--accent-ink:#FFFFFF;

  --pink:#D95F7F;  --pink-soft:#FDE7ED;--pink-dot:#F4A7BC;
  --blue:#4A7FB5;  --blue-soft:#E4EFFA;--blue-dot:#9CC3E4;
  --yellow:#A87E1C;--yellow-soft:#FBF1D4;--yellow-dot:#F3DC7A;

  --green:#3E7A52; --green-soft:#E5F4E7;--green-dot:#A9DDB4;
  --lav:#7A6AAE;   --lav-soft:#EEEAF8;  --lav-dot:#C5BBE2;
  --olive:#7C8A3E;

  --warn:#A8741C;  --warn-soft:#FCF0D7;--warn-line:#E9BE62;
  --danger:#C4503E;--danger-soft:#FCE8E2;--danger-line:#F2BBAE;

  --check:#E0BC93;
  --toast-bg:#5C4033;--toast-ink:#FFF6EA;

  --r:16px;--r-sm:10px;
  --shadow:4px 4px 0 rgba(233,194,148,.55);
}

:root[data-theme="puppy"] body{
  font-family:"Comic Sans MS","Segoe UI","Microsoft YaHei","PingFang SC",sans-serif;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190' viewBox='0 0 190 190'%3E%3Cg fill='%23EDD3B0' opacity='.5'%3E%3Cellipse cx='42' cy='48' rx='11' ry='9'/%3E%3Ccircle cx='29' cy='34' r='5'/%3E%3Ccircle cx='42' cy='30' r='5'/%3E%3Ccircle cx='55' cy='34' r='5'/%3E%3C/g%3E%3Cg fill='%23EDD3B0' opacity='.35'%3E%3Cellipse cx='128' cy='124' rx='9' ry='7.5'/%3E%3Ccircle cx='117' cy='112' r='4'/%3E%3Ccircle cx='128' cy='108.5' r='4'/%3E%3Ccircle cx='139' cy='112' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-theme="puppy"] .brand-txt h1{font-weight:700;letter-spacing:.5px}

:root[data-theme="puppy"] .card{border:2px solid var(--line-strong)}
:root[data-theme="puppy"] .card:hover{transform:translate(-1px,-1px);border-color:var(--accent-line);box-shadow:5px 5px 0 rgba(233,194,148,.7)}
:root[data-theme="puppy"] .card.overdue{border-color:var(--danger-line)}
/* 已完成卡片：绿色描边 + 薄荷绿错位阴影 */
:root[data-theme="puppy"] .card.done{border-color:#B7DCC1}
:root[data-theme="puppy"] .card.done:hover{
  transform:translate(-1px,-1px);
  border-color:var(--green);
  box-shadow:5px 5px 0 rgba(169,221,180,.6);
}
:root[data-theme="puppy"] .card.done::before{width:4.5px;top:10px;bottom:10px}
:root[data-theme="puppy"] .done-summary{border:2px solid #B7DCC1;border-radius:12px}
:root[data-theme="puppy"] .done-summary:hover{border-color:var(--green)}
:root[data-theme="puppy"] .tag.done-tag{border-radius:999px}

:root[data-theme="puppy"] .stats{border:2px solid var(--line-strong);border-radius:20px}
:root[data-theme="puppy"] .seg,
:root[data-theme="puppy"] .theme-switch{border:2px solid var(--line-strong)}
:root[data-theme="puppy"] .seg button.on,
:root[data-theme="puppy"] .theme-switch button.on{font-weight:700}

:root[data-theme="puppy"] .btn-primary{
  border-radius:999px;
  border:2px solid var(--accent-hover);
  box-shadow:0 3px 0 var(--accent-hover);
  font-weight:700;
}
:root[data-theme="puppy"] .btn-primary:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-hover)}

:root[data-theme="puppy"] .navbtn{border:2px solid var(--line-strong);border-radius:12px}
:root[data-theme="puppy"] .check .box{border-radius:50%;border-width:2.2px}
:root[data-theme="puppy"] .chip{border:2px solid var(--line);border-radius:14px}
:root[data-theme="puppy"] .stepper button{border:2px solid var(--line);border-radius:12px}
:root[data-theme="puppy"] .field input[type=text],
:root[data-theme="puppy"] .field input[type=date],
:root[data-theme="puppy"] .field input[type=number],
:root[data-theme="puppy"] .field select{border:2px solid var(--line);border-radius:14px}
:root[data-theme="puppy"] .dialog{border-radius:22px;border:2px solid var(--line-strong)}
:root[data-theme="puppy"] .empty{border:2.5px dashed var(--line-strong)}
:root[data-theme="puppy"] .progress .bar{height:9px;border:1.5px solid var(--line-strong);background:var(--panel)}
:root[data-theme="puppy"] .tag{border-radius:999px;padding:2.5px 9px}
:root[data-theme="puppy"] .toast{border:2px solid rgba(255,255,255,.25)}

/* 分区头：爪印 + 保留分类色文字 */
:root[data-theme="puppy"] .cat-head .dot{display:none}
:root[data-theme="puppy"] .cat-head .t::before{content:"🐾 "}

/* Logo：两套主题统一使用用户提供的静态小狗图片（无任何动画） */
.logo-base{display:none}
.logo-link{display:flex;align-items:center;text-decoration:none}

/* 静态 Logo 图片：保比例、白底无痕融入浅色背景 */
.logo-img{
  width:30px;               /* 与原 puppy Logo 同尺寸 */
  height:auto;              /* 保比例，不拉伸变形 */
  mix-blend-mode:multiply;  /* 白底融进奶油/浅灰背景 */
  filter:brightness(1.08) contrast(1.06); /* 纸纹推成纯白，multiply 后无痕 */
  user-select:none;
  pointer-events:none;      /* 点击交给外层 <a> */
}

/* ============================================================
 * 主题 2 · ✨ 新拟物主义（高级感）
 * 参考图 neomorphism：#ECEEF3 浅灰底、凹凸双影、琥珀黄强调、细字重
 * ============================================================ */
:root[data-theme="neo"]{
  color-scheme:light;

  --bg:#ECEEF3;  --panel:#EFF1F6;  --panel-2:#E7E9EF;
  --line:#DFE2EA;--line-soft:#E4E7EE;--line-strong:#D2D6E0;

  --text:#414654;--dim:#6A7080;--faint:#949AAC;

  --accent:#E8A63C;--accent-hover:#DE9726;--accent-soft:#F7ECD6;--accent-line:#E9C684;--accent-ink:#43350A;

  --pink:#B87A1F;  --pink-soft:#F7ECD4;--pink-dot:#F0C169;
  --blue:#6E7FA3;  --blue-soft:#E6EAF4;--blue-dot:#A9B6D6;
  --yellow:#A8842A;--yellow-soft:#F6EED6;--yellow-dot:#EFD98A;

  --green:#47735A; --green-soft:#E4EFE6;--green-dot:#ACD6B4;
  --lav:#8577AE;   --lav-soft:#EAE8F4;  --lav-dot:#C3BBDE;
  --olive:#7F8A4A;

  --warn:#B08430;  --warn-soft:#F5EDD9;--warn-line:#E3C57E;
  --danger:#C46A5A;--danger-soft:#F6E7E2;--danger-line:#E8BFB4;

  --check:#C9CEDB;
  --toast-bg:#414654;--toast-ink:#F2F4F8;

  --r:20px;--r-sm:12px;
  --shadow:7px 7px 14px #C9CEDA, -7px -7px 14px #FFFFFF;
}

:root[data-theme="neo"] body{
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  letter-spacing:.2px;
}
:root[data-theme="neo"] .brand-txt h1{font-weight:300;font-size:17px;letter-spacing:2.5px}
:root[data-theme="neo"] .brand-txt p{letter-spacing:1.5px}

:root[data-theme="neo"] .card{border:none;background:linear-gradient(145deg,#F3F5F9,#E7E9EF)}
:root[data-theme="neo"] .card:hover{box-shadow:8px 8px 18px #C4C9D6, -8px -8px 18px #FFFFFF}
:root[data-theme="neo"] .card.overdue{
  background:linear-gradient(145deg,#F5E6E1,#EDDCD6);
  box-shadow:6px 6px 14px #CFC6C0, -6px -6px 14px #FFFDFB;
}
:root[data-theme="neo"] .card.done{
  background:linear-gradient(145deg,#E9F1EB,#DFE8E1);
  box-shadow:inset 3px 3px 8px #D3DDD5, inset -3px -3px 8px #F5FAF6;
}
:root[data-theme="neo"] .card.done:hover{
  border:none;
  box-shadow:8px 8px 18px #C2CFC5, -8px -8px 18px #FBFDFB;
}
:root[data-theme="neo"] .card.done::before{border-radius:0 4px 4px 0}
:root[data-theme="neo"] .done-summary{
  border:none;
  background:linear-gradient(145deg,#E9F1EB,#DFE8E1);
  box-shadow:3px 3px 7px #CBD8CE, -3px -3px 7px #F7FBF8;
}
:root[data-theme="neo"] .done-summary:hover{
  border:none;
  box-shadow:4px 4px 9px #C4D2C7, -4px -4px 9px #FBFDFB;
}
:root[data-theme="neo"] .check.on .box{
  background:linear-gradient(145deg,#8CC29C,#6FAE81);
  border:none;
  box-shadow:inset 2px 2px 5px rgba(53,94,66,.45), inset -1px -1px 3px rgba(235,250,238,.8);
}
:root[data-theme="neo"] .tag.done-tag{background:#F2F8F3}

:root[data-theme="neo"] .stats{border:none;background:linear-gradient(145deg,#F3F5F9,#E7E9EF);border-radius:22px}
:root[data-theme="neo"] .seg,
:root[data-theme="neo"] .theme-switch{border:none;box-shadow:4px 4px 9px #CFD4DF, -4px -4px 9px #FFFFFF}
:root[data-theme="neo"] .seg button.on,
:root[data-theme="neo"] .theme-switch button.on{
  background:linear-gradient(145deg,#F2B45A,#E09A28);
  color:#FFFFFF;font-weight:600;
  box-shadow:2px 2px 6px rgba(184,138,42,.45);
}
:root[data-theme="neo"] .seg button:not(.on):hover,
:root[data-theme="neo"] .theme-switch button:not(.on):hover{background:var(--panel-2)}

:root[data-theme="neo"] .btn-primary{
  border-radius:14px;
  background:linear-gradient(145deg,#F2B45A,#DF9A28);
  color:#43350A;font-weight:700;
  box-shadow:5px 5px 12px rgba(178,146,72,.45), -4px -4px 10px #FFFFFF;
}
:root[data-theme="neo"] .btn-primary:hover{filter:brightness(1.05)}
:root[data-theme="neo"] .btn-primary:active{
  box-shadow:inset 3px 3px 7px rgba(150,105,20,.5), inset -2px -2px 6px rgba(255,240,200,.7);
}

:root[data-theme="neo"] .navbtn{
  border:none;border-radius:50%;
  background:linear-gradient(145deg,#F3F5F9,#E7E9EF);
  box-shadow:4px 4px 9px #CFD4DF, -4px -4px 9px #FFFFFF;
}
:root[data-theme="neo"] .navbtn:active{box-shadow:inset 3px 3px 6px #D3D8E2, inset -3px -3px 6px #FFFFFF}

:root[data-theme="neo"] .check .box{
  border:none;border-radius:50%;
  background:linear-gradient(145deg,#F3F5F9,#E7E9EF);
  box-shadow:3px 3px 6px #CDD2DD, -3px -3px 6px #FFFFFF;
}
:root[data-theme="neo"] .check.on .box{
  background:linear-gradient(145deg,#F2B45A,#E09A28);
  box-shadow:inset 2px 2px 5px rgba(150,105,20,.5), inset -1px -1px 3px rgba(255,235,190,.8);
}
:root[data-theme="neo"] .check.on .box svg path{stroke:#FFFFFF}

:root[data-theme="neo"] .field input[type=text],
:root[data-theme="neo"] .field input[type=date],
:root[data-theme="neo"] .field input[type=number],
:root[data-theme="neo"] .field select{
  border:none;border-radius:14px;
  background:var(--bg);
  box-shadow:inset 4px 4px 8px #D9DDE6, inset -4px -4px 8px #FFFFFF;
}
:root[data-theme="neo"] .field input:focus,
:root[data-theme="neo"] .field select:focus{
  border:none;
  box-shadow:inset 4px 4px 8px #D9DDE6, inset -4px -4px 8px #FFFFFF, 0 0 0 2.5px var(--accent-line);
}

:root[data-theme="neo"] .chip{
  border:none;border-radius:14px;
  background:linear-gradient(145deg,#F3F5F9,#E7E9EF);
  box-shadow:3px 3px 7px #D0D5E0, -3px -3px 7px #FFFFFF;
}
:root[data-theme="neo"] .chip:hover{border:none;box-shadow:4px 4px 9px #CBD0DC, -4px -4px 9px #FFFFFF}
:root[data-theme="neo"] .chip.on{
  background:var(--bg);
  box-shadow:inset 3px 3px 6px #D5DAE4, inset -2px -2px 5px #FFFFFF;
}
:root[data-theme="neo"] #fCategory .chip.on[data-v="life"]{background:#F3EBD6}
:root[data-theme="neo"] #fCategory .chip.on[data-v="work"]{background:#E3E8F2}

:root[data-theme="neo"] .stepper button{
  border:none;border-radius:12px;
  background:linear-gradient(145deg,#F3F5F9,#E7E9EF);
  box-shadow:3px 3px 7px #D0D5E0, -3px -3px 7px #FFFFFF;
}
:root[data-theme="neo"] .stepper input{
  border:none;border-radius:12px;background:var(--bg);
  box-shadow:inset 3px 3px 6px #D9DDE6, inset -3px -3px 6px #FFFFFF;
}

:root[data-theme="neo"] .dialog{border:none;background:var(--bg);box-shadow:0 30px 70px -20px rgba(70,80,110,.5)}
:root[data-theme="neo"] .dialog::backdrop{background:rgba(90,96,116,.38);backdrop-filter:blur(3px)}

:root[data-theme="neo"] .empty{
  border:none;background:var(--panel-2);
  box-shadow:inset 5px 5px 12px #DBDFE8, inset -5px -5px 12px #F7F8FB;
}
:root[data-theme="neo"] .progress .bar{
  background:#DFE2EA;
  box-shadow:inset 2px 2px 4px #D0D4DE, inset -2px -2px 4px #FFFFFF;
}
:root[data-theme="neo"] .progress .bar i{background:linear-gradient(90deg,#EFC275,#E09A28)}
:root[data-theme="neo"] .cat-head .dot{border-radius:50%;box-shadow:2px 2px 4px rgba(163,177,198,.4)}
:root[data-theme="neo"] .card-acts button{
  border:none;background:var(--bg);
  box-shadow:2px 2px 5px #CDD2DD, -2px -2px 5px #FFFFFF;
}
:root[data-theme="neo"] .pill{
  box-shadow:2px 2px 5px rgba(163,177,198,.3), -2px -2px 5px rgba(255,255,255,.9);
}
:root[data-theme="neo"] .toast{border-radius:14px}

/* ============================================================
 * 云端版新增 UI（两套主题共用变量，自动跟随配色）
 *   同步徽标 / 账号菜单 / 离线横幅 / 登录浮层 / iOS 添加到主屏幕引导
 * ============================================================ */

/* ---- 顶栏同步徽标 ---- */
.sync-badge{position:relative;display:flex;align-items:center}
.sync-pill{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 11px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line-strong);
  color:var(--text);font:inherit;font-size:12.5px;line-height:1;
  cursor:pointer;white-space:nowrap;max-width:200px;
  transition:background .18s,border-color .18s,color .18s;
}
.sync-pill:hover{background:var(--panel-2);border-color:var(--accent-line)}
.sync-pill svg{width:14px;height:14px;flex:none}
.sync-pill .ava{
  width:19px;height:19px;flex:none;border-radius:50%;
  display:inline-grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
  font-size:11px;font-weight:700;
}
.sync-pill.busy{color:var(--dim);border-style:dashed}
.sync-pill.busy .ava{animation:avaPulse 1.4s ease-in-out infinite}
.sync-pill.err{color:var(--danger);border-color:var(--danger-line);background:var(--danger-soft)}
.sync-pill.off{color:var(--warn);border-color:var(--warn-line);background:var(--warn-soft)}
@keyframes avaPulse{0%,100%{opacity:1}50%{opacity:.4}}
.sync-pill span:last-child{overflow:hidden;text-overflow:ellipsis}

/* ---- 账号下拉菜单 ---- */
.acct-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;
  min-width:192px;padding:6px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:0 16px 36px -18px rgba(93,62,55,.45);
  display:flex;flex-direction:column;
}
.acct-menu[hidden]{display:none}
.acct-menu .acct-mail{
  padding:8px 10px 7px;margin-bottom:4px;
  font-size:12px;color:var(--dim);word-break:break-all;
  border-bottom:1px solid var(--line-soft);
}
.acct-menu button{
  text-align:left;padding:9px 10px;border:none;border-radius:8px;
  background:transparent;color:var(--text);font:inherit;font-size:13px;cursor:pointer;
}
.acct-menu button:hover{background:var(--line-soft)}
.acct-menu button.danger{color:var(--danger)}

/* ---- 离线横幅 ---- */
.offline-banner{
  margin:10px 2px 0;padding:9px 13px;border-radius:10px;
  font-size:12.5px;line-height:1.5;
  background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn-line);
}
.offline-banner[hidden]{display:none}

/* ---- iOS「添加到主屏幕」引导条 ---- */
.a2hs{
  display:flex;align-items:center;gap:9px;
  margin:10px 2px 0;padding:10px 12px;border-radius:12px;
  background:var(--lav-soft);border:1px solid var(--lav-dot);
  color:var(--text);font-size:12.5px;line-height:1.55;
}
.a2hs-ico{font-size:16px;flex:none;line-height:1}
.a2hs-txt{flex:1;min-width:0}
.a2hs-x{
  flex:none;border:none;background:transparent;cursor:pointer;
  color:var(--lav);font:inherit;font-size:12px;text-decoration:underline;
}

/* ---- 登录浮层 ---- */
.login-mask{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(70,57,62,.42);backdrop-filter:blur(3px);
}
.login-mask.show{display:flex}
.login-box{
  position:relative;width:100%;max-width:392px;padding:24px 22px 18px;
  border-radius:18px;background:var(--panel);border:1px solid var(--line-strong);
  box-shadow:0 30px 70px -24px rgba(70,57,62,.55);color:var(--text);
  animation:loginIn .22s ease-out;
}
@keyframes loginIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.login-box h2{font-size:17px;font-weight:600;margin-bottom:5px}
.login-sub{font-size:12.5px;color:var(--dim);margin-bottom:16px;line-height:1.6}
.login-label{display:block;font-size:12px;color:var(--dim);margin-bottom:5px}
.login-box input[type="email"],
.login-box input[type="text"]{
  width:100%;height:42px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line-strong);background:var(--panel-2);
  color:var(--text);font:inherit;font-size:14px;
}
.login-box input[type="email"]:focus,
.login-box input[type="text"]:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.login-tip{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.5}
/* btn-primary 是 inline-flex，会盖掉 HTML 的 hidden 属性，这里补一刀 */
.btn-primary[hidden]{display:none!important}
.login-newbox{
  margin-top:12px;padding:10px 12px 12px;
  border:1px dashed var(--line-strong);border-radius:10px;background:var(--panel-2);
}
.login-newbox .login-label{margin-top:0}
.login-dot{margin:0 6px;color:var(--faint)}
.login-remember{
  display:flex;gap:8px;align-items:flex-start;
  margin:15px 0 2px;font-size:12.5px;color:var(--dim);line-height:1.5;cursor:pointer;
}
.login-remember input{margin-top:2px;width:15px;height:15px;flex:none;accent-color:var(--accent)}
.login-go{width:100%;height:44px;margin-top:12px;justify-content:center}
.login-go.busy{opacity:.6;pointer-events:none}
.login-err{min-height:18px;margin-top:8px;font-size:12.5px;color:var(--danger)}
.login-forgot{margin-top:2px;font-size:12px}
.login-forgot a{color:var(--faint);text-decoration:none;border-bottom:1px dashed rgba(127,127,127,.45)}
.login-forgot a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.login-privacy{font-size:11.5px;color:var(--faint);line-height:1.65;margin-top:10px}
.login-privacy a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-line)}
.login-x{
  position:absolute;top:8px;right:10px;width:30px;height:30px;
  border:none;background:transparent;color:var(--faint);
  font-size:22px;line-height:1;cursor:pointer;border-radius:8px;
}
.login-x:hover{background:var(--line-soft);color:var(--text)}

/* 页脚链接 */
.foot a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line-strong)}
.foot a:hover{color:var(--accent);border-color:var(--accent-line)}

/* ---- 质感主题：同步徽标也走新拟物 ---- */
:root[data-theme="neo"] .sync-pill{
  border:none;background:var(--bg);
  box-shadow:2px 2px 5px #CDD2DD, -2px -2px 5px #FFFFFF;
}
:root[data-theme="neo"] .sync-pill.err,
:root[data-theme="neo"] .sync-pill.off{box-shadow:none;border:1px solid currentColor}
:root[data-theme="neo"] .acct-menu{border:none;box-shadow:0 20px 44px -16px rgba(70,80,110,.45)}
:root[data-theme="neo"] .login-box{border:none;background:var(--bg);box-shadow:0 34px 80px -26px rgba(70,80,110,.55)}
:root[data-theme="neo"] .login-box input[type="email"],
:root[data-theme="neo"] .login-box input[type="text"]{
  border:none;background:var(--bg);
  box-shadow:inset 2px 2px 5px #D9DDE6, inset -2px -2px 5px #FFFFFF;
}
:root[data-theme="neo"] .offline-banner,
:root[data-theme="neo"] .a2hs{border:none;box-shadow:2px 2px 6px rgba(163,177,198,.35), -2px -2px 6px rgba(255,255,255,.9)}

/* ---- 手机：徽标收成图标 + 短状态 ---- */
@media (max-width:639px){
  .sync-pill{height:30px;padding:0 9px;font-size:12px;max-width:140px}
  .sync-pill span:last-child{max-width:80px}
  .login-box{padding:22px 18px 16px;border-radius:16px}
  .a2hs{font-size:12px;align-items:flex-start}
  .a2hs-x{align-self:flex-end}
}