:root{
  --bg:#f2f4f7;
  --card:#ffffff;
  --text:#14181d;
  --muted:#7b848e;
  --line:#e6e9ed;
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --green:#0f9d58;
  --amber:#b45309;
  --red:#dc2626;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}

/* 必须放在所有 display 规则前面：JS 用 el.hidden 控制显隐，
   如果别处无条件写了 display:flex，会把 hidden 覆盖掉，弹层就永远盖在屏幕上 */
[hidden]{display:none!important}

html,body{
  margin:0;padding:0;
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(242,244,247,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-title{font-size:20px;font-weight:700;letter-spacing:.5px}
.brand-sub{font-size:12px;color:var(--muted);margin-top:1px}
.month-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);
  color:var(--text);font-size:16px;font-weight:600;
  padding:9px 14px;border-radius:999px;box-shadow:var(--shadow);
}
.chev{font-size:11px;color:var(--muted)}

/* ---------------- 页面 ---------------- */
#main{max-width:600px;margin:0 auto;padding:14px 14px 10px}
.page{display:none}
.page.active{display:block;animation:fade .18s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---------------- 合计大卡 ---------------- */
.hero{
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;border-radius:20px;padding:20px 20px 18px;
  box-shadow:0 6px 18px rgba(37,99,235,.22);margin-bottom:16px;
}
.hero-label{font-size:13px;opacity:.85;letter-spacing:1px}
.hero-num{font-size:38px;font-weight:700;margin:4px 0 2px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.hero-meta{font-size:13px;opacity:.82}

/* ---------------- 全年累计 ---------------- */
.year-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  margin-bottom:14px;overflow:hidden;
}
.year-head{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer}
.year-head:active{background:#f7f8fa}
.year-left{min-width:0}
.year-title{font-size:12px;color:var(--muted);font-weight:500}
.year-num{font-size:22px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.3px;margin-top:1px}
.year-right{margin-left:auto;text-align:right;flex-shrink:0}
.year-meta{font-size:12px;color:var(--muted)}
.year-arrow{font-size:12px;color:var(--blue);margin-top:2px}
.year-months{border-top:1px solid var(--line);padding:8px 12px 12px;background:#fbfcfd}
.ym-row{
  display:flex;align-items:center;gap:8px;padding:7px 4px;border-radius:8px;cursor:pointer;
}
.ym-row:active{background:#eef2ff}
.ym-row.on{background:#eef2ff}
.ym-row.dim{opacity:.45}
.ym-label{width:34px;font-size:13px;color:var(--muted);flex-shrink:0}
.ym-bar{flex:1;height:7px;background:#eaeef4;border-radius:4px;overflow:hidden}
.ym-bar i{display:block;height:100%;background:linear-gradient(90deg,#60a5fa,#2563eb);border-radius:4px}
.ym-amt{width:88px;text-align:right;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.ym-n{width:42px;text-align:right;font-size:11px;color:var(--muted);flex-shrink:0}

/* ---------------- 账单列表 ---------------- */
.bill-list{display:flex;flex-direction:column;gap:14px}
.day-block{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.day-head{
  display:flex;align-items:center;gap:8px;
  padding:11px 16px;background:#fafbfc;border-bottom:1px solid var(--line);
}
.day-date{font-weight:700;font-size:16px}
.day-wd{font-size:12px;color:var(--muted)}
.day-sum{margin-left:auto;font-size:15px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}

.entry{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid #f1f3f5;
  cursor:pointer;
}
.entry:last-child{border-bottom:none}
.entry:active{background:#f7f9fc}
.e-main{flex:1;min-width:0}
.e-name{font-size:16px;font-weight:500;line-height:1.3;word-break:break-all}
.e-sub{font-size:13px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.e-amt{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{
  display:inline-block;font-size:11px;font-weight:500;
  background:#eef2ff;color:#4257b2;border-radius:6px;
  padding:1px 6px;margin-left:6px;vertical-align:1px;
}
/* 原表那一格没填工序，标出来，不是漏数据 */
.tag-blank{
  background:#f3f4f6;color:#8b8f9a;border:1px dashed #d4d7de;
}

/* ---------------- 工序：一道一个方框 ----------------
   车发、打眼是两道工序，不是一个词。方框分得开才好核对、
   也才好在手机上单独点掉某一道。 */
.tag-row{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:1px}
.e-title{display:inline}
.ptag-list{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center}
.ptag{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;line-height:1.35;font-weight:500;
  background:#eef2ff;color:#3950b5;
  border:1px solid #dae2ff;border-radius:8px;
  padding:3px 8px;word-break:keep-all;
}
.ptag.none{
  background:#f3f4f6;color:#8b8f9a;border:1px dashed #d4d7de;font-weight:400;
}
.ptag b{
  font-weight:400;color:#8f9ac4;cursor:pointer;
  padding:0 1px;font-size:14px;line-height:1;
}
.ptag b:active{color:#d14343}
.ptag-add{
  appearance:none;-webkit-appearance:none;
  font-size:13px;line-height:1.35;
  border:1px dashed #c7cede;background:#fff;color:#8b8f9a;
  border-radius:8px;padding:3px 10px;cursor:pointer;
}
.proc-edit{display:block}
.proc-edit .ptag-list{min-height:32px}
/* 拍单子页那一行留点白，别和数量挤在一起 */
.scan-line .proc-edit{flex:1;min-width:0}

/* ---------------- 卡片与表单 ---------------- */
.card{
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;margin-bottom:14px;
}
.card.center{text-align:center}
.field-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.mt{margin-top:16px}
.mb{margin-bottom:8px}
.input{
  width:100%;padding:13px 14px;font-size:17px;
  border:1px solid var(--line);border-radius:12px;background:#fff;
  color:var(--text);font-family:inherit;
}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.input.big{font-size:19px;padding:15px 14px;font-weight:500}
.input.num{font-variant-numeric:tabular-nums;font-weight:600}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.date-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.date-quick{
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-size:15px;color:var(--text);font-family:inherit;
}
.date-quick.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.date-input{flex:1;min-width:140px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.chip{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:#f8fafc;font-size:14px;color:#374151;font-family:inherit;
}
.chip.on{background:#eef2ff;border-color:#c7d2fe;color:var(--blue-dark);font-weight:600}

.suggest{position:relative}
.sug-item{
  padding:12px 14px;border:1px solid var(--line);border-bottom:none;
  background:#fff;font-size:15px;
}
.sug-item:first-child{border-radius:12px 12px 0 0;margin-top:6px}
.sug-item:last-child{border-bottom:1px solid var(--line);border-radius:0 0 12px 12px}
.sug-item:active{background:#f7f9fc}
.sug-price{float:right;color:var(--muted);font-size:14px}

.hint{font-size:13px;color:var(--muted);line-height:1.5}
.hint.center{text-align:center}
.hint.warn{color:var(--amber)}
/* 价目表弹层里的历史价 */
.hist-title{font-size:12px;color:var(--muted);margin-bottom:4px}
.hist{max-height:158px;overflow-y:auto;background:#f7f8fa;border-radius:8px;padding:4px 10px}
.hist-row{display:flex;justify-content:space-between;align-items:baseline;padding:4px 0;border-bottom:1px solid #eef0f4}
.hist-row:last-child{border-bottom:0}
.hist-date{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.hist-price{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}

.calc-line{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
  font-size:15px;color:var(--muted);
}
.calc-line strong{font-size:24px;color:var(--text);font-variant-numeric:tabular-nums}

.btn{
  width:100%;padding:14px;border-radius:12px;border:1px solid var(--line);
  background:#fff;font-size:16px;font-family:inherit;color:var(--text);
  font-weight:500;
}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.primary:active{background:var(--blue-dark)}
.btn.ghost{background:#f8fafc}
.btn.danger{color:var(--red);border-color:#fecaca;background:#fef2f2}
.btn.big-btn{padding:17px;font-size:18px;border-radius:14px;margin-top:14px}
.btn:disabled{opacity:.5}

.save-tip{text-align:center;font-size:14px;color:var(--green);margin-top:10px;min-height:20px}

.warn{
  background:#fffbeb;border:1px solid #fde68a;color:#92400e;
  border-radius:14px;padding:14px 16px;margin-bottom:14px;font-size:14px;line-height:1.6;
}
.warn strong{display:block;margin-bottom:4px;font-size:15px}

/* ---------------- 拍单子 ---------------- */
.preview-img{width:100%;border-radius:12px;display:block;margin-bottom:10px;max-height:340px;object-fit:contain;background:#f8fafc}
.scan-rows{margin-top:8px}
.scan-row{
  border:1px solid var(--line);border-radius:12px;padding:10px;margin-top:10px;background:#fff;
}
.scan-row.low{background:#fffbeb;border-color:#fde68a}
.scan-line{display:flex;gap:8px;align-items:center}
.scan-line + .scan-line{margin-top:8px}
.scan-input{
  border:1px solid var(--line);border-radius:9px;padding:10px;font-size:15px;font-family:inherit;
  width:100%;background:#fff;
}
.scan-input.num{width:88px;text-align:center;font-variant-numeric:tabular-nums}
/* 删一行的按钮。以前是红色的光秃秃一个 ×，放在每行末尾，
   第一眼像「这行有错」，不像「可以删掉」——改成灰底的小按钮写「删」，
   真按下去才变红（那一下才是「要删了」的提示）。 */
.scan-x{
  border:none;background:#f1f3f7;color:var(--muted);
  font-size:13px;font-family:inherit;line-height:1;
  padding:10px 11px;border-radius:9px;flex-shrink:0;
}
.scan-x:active{background:rgba(220,53,69,.12);color:var(--red)}
.scan-note{font-size:12px;color:var(--amber);margin-top:6px}
/* 程序动过钱的行：单价跟价目表不一致，已经按价目表改掉，用红色顶上去 */
.scan-note.scan-fix{color:var(--red);font-weight:600;background:rgba(220,53,69,.08);
  border-left:3px solid var(--red);padding:4px 8px;border-radius:3px}
.row-between{display:flex;align-items:center;justify-content:space-between}
.muted{color:var(--muted);font-size:13px}

/* ---- 拍单子：一次多张 ---- */
.thumb-strip{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.thumb{
  width:52px;height:52px;object-fit:cover;border-radius:8px;
  border:2px solid #e5e7eb;
}
.slip-block{
  border:1px solid var(--line);border-radius:14px;padding:10px;margin-top:14px;background:#fcfdff;
}
.slip-block + .slip-block{margin-top:16px}
.slip-head{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.slip-thumb{width:46px;height:46px;object-fit:cover;border-radius:8px;flex-shrink:0;background:#eef0f4}
.slip-meta{flex:1;min-width:0}
.slip-title{font-size:12px;color:var(--muted);margin-bottom:4px}
.slip-meta .scan-input{padding:7px 9px;font-size:14px}
/* 删整张的按钮：同理，不再是一个 ×，写成字。 */
.slip-del{
  border:1px solid var(--line);background:#fff;color:var(--muted);
  font-size:12px;font-family:inherit;line-height:1;
  padding:8px 9px;border-radius:9px;flex-shrink:0;
}
.slip-del:active{color:var(--red);border-color:var(--red);background:rgba(220,53,69,.06)}
.big-btn.mt{margin-top:10px}

/* ---------------- 看原图 ---------------- */
/* 核对的时候要看清手写的字，46 像素的小图不够用。 */
.photo-mask{
  position:fixed;inset:0;z-index:300;background:rgba(8,11,18,.96);
}
.photo-mask[hidden]{display:none}
.photo-scroll{
  position:absolute;inset:0;overflow:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;                 /* 配合下面 img 的 margin:auto 做居中 */
  padding:0 0 76px;
}
/* margin:auto 而不是 justify-content:center：
   内容比容器大的时候，auto 边距会退成 0，顶部还能滚到；
   justify-content:center 会把溢出的那部分永远裁掉。 */
.photo-img{display:block;width:100%;height:auto;margin:auto}
/* 放大：横向铺到 300%，上下自己滚。够看清字，又不至于滑得没边 */
.photo-mask.zoomed .photo-img{width:300%;max-width:none}
.photo-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:301;
  display:flex;gap:10px;justify-content:center;
  padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(8,11,18,.92),rgba(8,11,18,0));
}
.photo-btn{
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);
  color:#fff;font-size:14px;font-family:inherit;line-height:1;
  padding:12px 22px;border-radius:999px;
}
.photo-btn:active{background:rgba(255,255,255,.24)}

/* 识别结果顶上的异常汇总。以前这些提示只长在行里，得往下滑才看得见。 */
.scan-issues{
  margin-top:10px;padding:9px 10px 7px;border-radius:10px;
  background:#fffbeb;border:1px solid #fde68a;
}
.scan-issues-head{font-size:12px;font-weight:600;color:#8a5a00;margin-bottom:5px}
.scan-issue{
  display:block;width:100%;text-align:left;
  border:none;background:none;font-family:inherit;
  font-size:12px;line-height:1.55;color:#8a5a00;padding:2px 0;
}
.scan-issue:active{opacity:.55}
.scan-issue-more{font-size:12px;color:var(--muted);padding-top:2px}

/* 点了顶上那一条之后，对应的行闪一下，眼睛跟得上 */
@keyframes scanFlash{0%,100%{background:#fff}25%{background:#fde68a}}
.scan-row.flash,.slip-block.flash{animation:scanFlash .9s ease-in-out 1}

/* 单据上的两个动作：看原图 / 删掉这张。
   以前「删」挤在右上角，现在两个并排放在下面一行，谁也不容易看错。 */
.slip-actions{display:flex;gap:8px;margin-top:8px}
.slip-view{
  border:1px solid var(--line);background:#fff;color:#3950b5;
  font-size:12px;font-family:inherit;line-height:1;
  padding:8px 10px;border-radius:9px;flex-shrink:0;
}
.slip-view:active{background:rgba(57,80,181,.1)}

/* ---------------- 价目表 ---------------- */
.search-wrap{position:sticky;top:calc(64px + env(safe-area-inset-top));z-index:10;padding-bottom:12px}
.price-list{display:flex;flex-direction:column;gap:10px}

/* ---- 价目表：分区标题 ---- */
.sec-title{
  font-size:14px;font-weight:700;color:var(--muted);
  margin:6px 2px 10px;display:flex;align-items:baseline;gap:8px;
}
.sec-sub{font-size:12px;font-weight:400;color:#9aa3ad}

/* ---- 价目表：按系列折叠 ---- */
.pgroup{
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  margin-bottom:10px;overflow:hidden;
}
.pgroup>summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:16px;font-size:16px;font-weight:600;
}
.pgroup>summary::-webkit-details-marker{display:none}
.pgroup-name{flex:1}
.pgroup-n{font-size:13px;font-weight:400;color:var(--muted)}
.pgroup-arrow{
  font-size:20px;color:#c4ccd6;transition:transform .18s;
  transform:rotate(90deg);line-height:1;
}
.pgroup[open]>summary .pgroup-arrow{transform:rotate(-90deg)}
.pgroup[open]>summary{border-bottom:1px solid var(--line)}
.pgroup>.price-list{padding:10px;background:var(--bg);gap:8px}

.prod-card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:14px 16px}
.prod-name{font-weight:600;font-size:16px;margin-bottom:8px;word-break:break-all}
.proc-line{
  display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid #f1f3f5;
}
.proc-line:first-of-type{border-top:none}
.proc-name{font-size:14px;color:#374151;flex:1;min-width:0}
.proc-price{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.proc-since{font-size:11px;color:var(--muted);margin-left:6px}

/* ---------------- 空状态 ---------------- */
.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty-icon{font-size:40px;margin-bottom:10px;opacity:.6}
.empty-hint{font-size:13px;margin-top:6px;opacity:.75}

/* ---------------- 底部导航 ---------------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  border:none;background:none;padding:7px 2px;
  font-size:11px;color:var(--muted);font-family:inherit;
}
.tab-ico{font-size:21px;line-height:1.1;filter:grayscale(1);opacity:.65}
.tab.active{color:var(--blue);font-weight:600}
.tab.active .tab-ico{filter:none;opacity:1}

/* ---------------- 登录门 ---------------- */
.auth-mask{
  position:fixed;inset:0;z-index:200;
  background:linear-gradient(160deg,#1e3a8a,#2563eb 55%,#1d4ed8);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.auth-box{
  width:100%;max-width:340px;
  background:var(--card);border-radius:22px;
  padding:30px 22px 24px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  text-align:center;
}
.auth-logo{
  width:54px;height:54px;margin:0 auto 14px;
  border-radius:16px;background:var(--blue);color:#fff;
  font-size:28px;font-weight:700;line-height:54px;
}
.auth-title{font-size:20px;font-weight:700;margin-bottom:6px}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5}

/* ---------------- 弹层 ---------------- */

.sheet-mask{
  position:fixed;inset:0;z-index:50;background:rgba(15,23,42,.42);
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;                 /* 弹层自己不滚，滚的是里面的 .sheet */
  overscroll-behavior:contain;     /* 滑到底不要再传给下层 */
}
.sheet{
  width:100%;max-width:600px;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:22px 22px 0 0;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  animation:up .22s cubic-bezier(.2,.8,.3,1);
  overscroll-behavior:contain;     /* 滑到顶/底就停住，不要带着后面一起滚 */
  -webkit-overflow-scrolling:touch;
  position:relative;
}

/* 滚动内容的外壳：回弹时只位移这一层，弹层本身不动 */
.sheet-inner{will-change:transform}

/* 弹层打开时把页面钉住：见 app.js 里的 openMask / closeMask。
   光靠 overscroll-behavior 不够——弹层内容比屏幕短的时候根本没有滚动容器，
   手感上的任何拖动都会落到底下的页面上。 */
body.mask-open{
  position:fixed;left:0;right:0;width:100%;overflow:hidden;
}
@keyframes up{from{transform:translate3d(0,100%,0)}to{transform:translate3d(0,0,0)}}

/* 收回：和打开对称，顺着来的方向缩回去，遮罩同时淡出。
   直接 hidden 会"啪"地消失，点空白处关掉时特别突兀。

   淡的是遮罩的底色，不是整块元素的 opacity——不然弹层会跟着一起变透明，
   看着像"溶解"，而不是"滑走"。

   用 translate3d 而不是 translateY：前者明确告诉浏览器"这层交给 GPU 合成"。
   展开一整年时弹层很高，纯 translateY 在低端机上会掉帧，看起来就是"卡一下"。 */
.sheet-mask.sheet-closing{animation:maskOut .2s ease forwards}
.sheet-mask.sheet-closing .sheet{
  animation:down .2s cubic-bezier(.4,0,.7,1) forwards;
}
@keyframes down{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,100%,0)}}
@keyframes maskOut{
  from{background:rgba(15,23,42,.42)}
  to{background:rgba(15,23,42,0)}
}
.sheet-title{font-size:18px;font-weight:700;margin-bottom:14px;text-align:center}
.sheet-cancel{margin-top:10px}
.month-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.month-item{
  padding:14px 10px;border-radius:12px;border:1px solid var(--line);
  background:#f8fafc;font-family:inherit;font-size:15px;color:var(--text);
}
.month-item.on{background:#eef2ff;border-color:#c7d2fe;color:var(--blue-dark);font-weight:600}
.month-item small{display:block;font-size:12px;color:var(--muted);margin-top:3px;font-weight:400}

/* 年份叠起来：一年一行，点开才摊开它的月份 */
.year-block{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.year-block.open{border-color:#c7d2fe}
.year-head{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:14px 12px;border:0;background:#f8fafc;font-family:inherit;
  font-size:15px;color:var(--text);text-align:left;
}
.year-block.open .year-head{background:#eef2ff;color:var(--blue-dark)}
.year-head:active{background:#e8eefc}
.year-name{font-weight:600;flex:0 0 auto}
.year-meta{flex:1 1 auto;font-size:12px;color:var(--muted);text-align:right}
.year-block.open .year-meta{color:var(--blue-dark);opacity:.75}
.year-chev{flex:0 0 auto;font-size:12px;color:var(--muted);width:12px;text-align:center}
.year-months{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  padding:10px;border-top:1px solid var(--line);background:#fff;
}
.year-months .month-item{text-align:center}

.nm-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.nm-item{
  padding:14px;border-radius:12px;border:1px solid var(--line);
  background:#f8fafc;font-family:inherit;font-size:15px;color:var(--text);text-align:left;
}
.nm-item:active{background:#eef2ff;border-color:#c7d2fe}

/* ---------------- 提示 ---------------- */
.toast{
  position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));
  transform:translateX(-50%);z-index:100;
  background:rgba(20,24,29,.92);color:#fff;
  padding:12px 20px;border-radius:12px;font-size:15px;
  max-width:84vw;text-align:center;animation:fade .2s;
}