/* Gain 所得 · web app
   All design values come from css/tokens.css (generated from design/tokens.json).
   Nothing here should hardcode a colour, radius, duration or curve that has a token. */

@font-face{font-family:'Geologica';src:url('../fonts/geologica-latin-wght.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'HanSans';
  src:local('Alibaba PuHuiTi 3 45 Light'),local('AlibabaPuHuiTi-3-45-Light'),local('阿里巴巴普惠体 3.0 45 Light'),
      local('Noto Sans SC VF'),local('Noto Sans SC'),local('Noto Sans CJK SC'),local('Source Han Sans SC'),
      local('HarmonyOS Sans SC'),local('MiSans'),local('PingFang SC'),local('Microsoft YaHei UI');
  font-weight:100 900;font-style:normal;}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--canvas);color:var(--ink-92);
  font-family:var(--f-cjk);font-size:var(--fs-body);line-height:1.45;
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;
  padding-bottom:calc(var(--lay-tab-bar-height) + env(safe-area-inset-bottom))}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
input{font:inherit;color:inherit;font-size:16px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--accent-soft)}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1}
.micro{font-size:var(--fs-micro);color:var(--ink-38)}
[hidden]{display:none!important}

/* Press is asymmetric and it is the FACE that scales, never the button —
   the hit area must not move out from under the finger mid-press. */
.face{display:block;transition:transform var(--dur-settle) var(--ease-out)}
@supports (transition-timing-function:linear(0,1)){
  .face{transition:transform var(--dur-settle) var(--spring-snappy)}
}
button:active>.face{transform:scale(.97);transition:transform var(--dur-press) var(--ease-standard)}

/* ================= shell ================= */
.app{display:flex;align-items:flex-start;min-height:100dvh}
.stage{flex:1;min-width:0;padding:0 clamp(16px,4vw,40px)}
.cols{max-width:calc(var(--lay-content-max-width) + var(--lay-col-gap) + var(--lay-side-width));
  margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--lay-col-gap);padding:10px 0 44px}
/* 没有右栏内容的屏不许留一条空槽，整块收窄居中 */
.cols.solo{max-width:var(--lay-content-max-width);grid-template-columns:minmax(0,1fr)}
.col-full{grid-column:1/-1}
.col-full:empty{display:none}
.col-main{min-width:0}
.col-side:empty{display:none}
.col-side{min-width:0}
@media (min-width:760px){body{padding-bottom:0}}
@media (min-width:1120px){
  .cols{grid-template-columns:minmax(0,var(--lay-content-max-width)) var(--lay-side-width)}
}

/* ---------- rail (desktop) ---------- */
.rail{display:none}
@media (min-width:760px){
  .rail{display:flex;flex:none;width:var(--lay-rail-collapsed-width);flex-direction:column;
    padding:16px 10px 14px;position:sticky;top:0;height:100dvh;
    border-right:1px solid var(--rule);background:rgba(255,255,255,.6);
    backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%)}
  .rail .brand,.rail .nav .lb,.rail .kbd,.rail .foot{display:none}
  .rail .add .lb{display:none}
  .rail .add .ic{display:block}
}
@media (min-width:1120px){
  .rail{width:var(--lay-rail-width)}
  .rail .brand{display:flex}
  .rail .nav .lb,.rail .kbd,.rail .foot{display:block}
  .rail .add .lb{display:block}
  .rail .add .ic{display:none}
}
.rail .brand{display:flex;align-items:center;gap:9px;padding:2px 10px 16px;
  font-family:var(--f-num);font-size:var(--fs-body);font-weight:var(--w-label);
  letter-spacing:var(--tr-amount)}
.rail .brand .cn{font-family:var(--f-cjk);font-weight:400;color:var(--ink-38);
  letter-spacing:var(--tr-cjk-label);font-size:var(--fs-micro)}
.rail .brand .mark{width:18px;height:18px;display:grid;place-items:center;flex:none}
.rail .brand .mark svg{width:18px;height:18px;stroke:var(--ink-92);fill:none;stroke-width:1.7}
.rail .nav{position:relative;display:flex;flex-direction:column;gap:2px}
.rail .item{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 0;border-radius:var(--r-button);color:var(--ink-55);
  transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
@media (min-width:1120px){.rail .item{justify-content:flex-start;padding:9px 11px}}
.rail .item svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.rail .item.on{background:var(--ink-92);color:var(--paper)}
.rail .item .kbd{margin-left:auto;font-family:var(--f-num);font-size:10px;color:var(--ink-16)}
.rail .item.on .kbd{color:rgba(255,255,255,.4)}
@media (hover:hover) and (pointer:fine){
  .rail .item:hover{color:var(--ink-92);background-color:var(--ink-08)}
  .rail .item.on:hover{color:var(--paper);background-color:var(--ink-92)}
}
.rail .add{width:100%;margin-top:14px;font-size:var(--fs-body);letter-spacing:var(--tr-cjk-label)}
.rail .add .face{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 0;border-radius:var(--r-button);background:var(--ink-92);color:var(--paper);font-weight:500}
.rail .add .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){
  .rail .add:hover .face{background-color:#2A2B30}
}
.rail .foot{margin-top:auto;padding:12px 10px 0;font-size:var(--fs-micro);
  color:var(--ink-38);line-height:1.7;letter-spacing:.02em}

/* ---------- tab bar (mobile) ---------- */
.tabbar{display:flex;flex:none;position:fixed;left:0;right:0;bottom:0;z-index:30;
  align-items:flex-start;gap:2px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.78);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border-top:1px solid var(--ink-08)}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0;
  border-radius:var(--r-button);color:var(--ink-38);
  transition:color var(--dur-micro) var(--ease-standard)}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.tab .tl{font-size:var(--fs-micro);letter-spacing:var(--tr-cjk-label)}
.tab.on{color:var(--ink-92)}
.fab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0}
.fab .disc{width:var(--lay-fab-disc);height:var(--lay-fab-disc);margin-top:calc(-1 * var(--lay-fab-overhang));
  border-radius:50%;background:var(--ink-92);color:var(--paper);display:grid;place-items:center;
  box-shadow:0 0 0 5px var(--canvas),0 10px 22px -10px rgba(16,20,26,.5);
  transition:transform var(--dur-settle) var(--ease-out)}
@supports (transition-timing-function:linear(0,1)){
  .fab .disc{transition:transform var(--dur-settle) var(--spring-snappy)}
}
.fab:active .disc{transform:scale(.9);background-color:#2A2B30;
  transition:transform var(--dur-press) var(--ease-standard)}
.fab .disc svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.fab .tl{font-size:var(--fs-micro);color:var(--ink-38);margin-top:8px;letter-spacing:var(--tr-cjk-label)}
@media (hover:hover) and (pointer:fine){
  .tab:hover{color:var(--ink-55)}
  .fab:hover .disc{background-color:#2A2B30}
}
@media (min-width:760px){.tabbar{display:none}}

/* ================= shared blocks ================= */
/* blocks enter the column with a short stagger so a screen change reads as
   assembly, not a teleport. capped at 7 so a long page never waits on motion. */
.blk{animation:viewin var(--dur-short) var(--ease-standard) both;  animation-delay:calc(var(--i,0) * var(--stagger-item))}
/* the sticky log header must not sit under an animating transform, or it stops sticking */
.blk.st{animation:none}
/* 换屏才演；--dx 由 JS 按导航方向给（往右翻从右边来，往左翻从左边来） */
.cols.noanim .blk{animation:none}
@keyframes viewin{from{opacity:0;transform:translate(var(--dx,0px),6px)}to{opacity:1;transform:none}}

.phead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:10px}
.phead .pt{font-size:var(--fs-title);font-weight:600;letter-spacing:var(--tr-amount)}
.phead .pr{display:flex;align-items:center;gap:10px}
.phead .yr{font-family:var(--f-num);font-size:var(--fs-label);color:var(--ink-38)}
.pillbtn{font-family:var(--f-num);font-size:var(--fs-label);color:var(--ink-55);
  padding:6px 12px;border:1px solid var(--rule);border-radius:var(--r-chip);background:var(--paper);
  transition:color var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard)}
@media (hover:hover) and (pointer:fine){.pillbtn:hover{color:var(--ink-92);border-color:var(--ink-38)}}
.gear{font-size:var(--fs-label);color:var(--ink-55);padding:6px 2px 6px 14px;
  transition:color var(--dur-micro) var(--ease-standard)}
@media (hover:hover) and (pointer:fine){.gear:hover{color:var(--ink-92)}}
.back{width:32px;height:32px;margin-left:-10px;display:grid;place-items:center;color:var(--ink-55);border-radius:50%;
  transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.back:hover{background-color:var(--ink-08);color:var(--ink-92)}}
.hr{height:1px;background:var(--rule);margin:var(--sp-section-gap) 0}
.sect{margin-top:var(--sp-section-gap)}
.sect-h{display:flex;align-items:baseline;justify-content:space-between;
  font-size:var(--fs-label);font-weight:var(--w-label);letter-spacing:var(--tr-cjk-label);
  color:var(--ink-38);margin-bottom:2px}
.sect-h .num{letter-spacing:var(--tr-amount)}

/* ---------- rows ---------- */
.row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;
  align-items:baseline;padding:var(--sp-row-pad-y) 0;border-bottom:1px solid var(--rule);text-align:left;
  transition:background-color var(--dur-micro) var(--ease-standard)}
.row:last-child{border-bottom-color:transparent}
.row .l{display:flex;align-items:baseline;gap:8px;min-width:0}
.row .src{font-size:var(--fs-title);font-weight:500;letter-spacing:var(--tr-cjk-label);
  color:var(--ink-75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-standard)}
.row .sub{font-size:var(--fs-label);color:var(--ink-38);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .amt{font-size:var(--fs-amount);letter-spacing:var(--tr-amount);color:var(--ink-92);white-space:nowrap}
.row .amt .sgn{font-size:.72em;font-weight:400;opacity:.55}
.row.is-pending .src{color:var(--ink-55);font-weight:400}
.row.is-pending .amt{color:transparent;-webkit-text-stroke:.75px var(--ink-38);font-weight:400}
.row .dt{grid-column:1;font-family:var(--f-num);font-size:var(--fs-micro);color:var(--ink-16)}
@media (hover:hover) and (pointer:fine){
  .row:hover{background-color:rgba(0,0,0,.022)}
  .row:hover .src{color:var(--ink-92)}
}
.flag{font-size:10px;letter-spacing:.02em;color:var(--ink-38);border:1px solid var(--rule);
  border-radius:var(--r-chip);padding:1px 7px;align-self:center;flex:none}
.flag.over{color:var(--danger);border-color:rgba(179,38,30,.34)}

/* the signature effect: a pending amount is outlined, and fills to solid ink
   as it is marked received. clip-path, so the glyphs never reflow. */
.fillwrap{position:relative;display:inline-block}
.fillwrap .solid{position:absolute;inset:0;color:var(--ink-92);font-weight:600;
  -webkit-text-stroke:0;clip-path:inset(0 100% 0 0);
  transition:clip-path var(--dur-signature) var(--ease-out)}
.fillwrap.is-filled .solid{clip-path:inset(0 0 0 0)}

/* ---------- overview ---------- */
.hero{padding-top:22px}
.hero-amount{display:flex;align-items:flex-start;gap:14px;font-size:var(--fs-hero);
  line-height:.96;letter-spacing:var(--tr-hero);font-weight:var(--w-hero);color:var(--accent)}
.hero-amount .cur{font-size:.42em;font-weight:400;margin-top:.34em;letter-spacing:0;opacity:.7}
.hero-amount .transit{font-size:.46em;letter-spacing:var(--tr-amount);font-weight:400;
  margin-top:.42em;color:transparent;-webkit-text-stroke:.9px var(--ink-38)}
.hero-cap{margin-top:14px;display:flex;align-items:baseline;gap:8px;font-size:var(--fs-body);color:var(--ink-55)}
.hero-cap .pend{font-size:var(--fs-label);color:var(--ink-38)}
.delta{font-size:var(--fs-label);color:var(--ink-38)}
.delta b{font-family:var(--f-num);font-weight:var(--w-label);color:var(--accent)}
.year-amt{margin-top:6px;font-size:var(--fs-year);letter-spacing:var(--tr-hero);
  font-weight:var(--w-hero);color:var(--accent)}
.year-amt .cur{font-size:.5em;opacity:.7;font-weight:400}

/* ---------- filters / chips ---------- */
.seg{display:flex;padding:3px;background:var(--ink-08);border-radius:var(--r-button);
  position:relative}
.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;border-radius:calc(var(--r-button) - 4px);
  background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.1);width:calc(33.333% - 2px);
  transition:transform var(--dur-short) var(--ease-in-out),width var(--dur-short) var(--ease-in-out)}
.seg[data-n="2"] .thumb{width:calc(50% - 3px)}
.seg[data-n="4"] .thumb{width:calc(25% - 1.5px)}
.seg[data-i="1"] .thumb{transform:translateX(100%)}
.seg[data-i="2"] .thumb{transform:translateX(200%)}
.seg[data-i="3"] .thumb{transform:translateX(300%)}
.seg button{flex:1;position:relative;z-index:1;padding:9px 0;font-size:var(--fs-body);color:var(--ink-38);
  transition:color var(--dur-micro) var(--ease-standard)}
.seg button.on{color:var(--ink-92)}
.chips{margin-top:11px;display:flex;flex-wrap:wrap;gap:var(--sp-chip-gap)}
.chip{font-size:var(--fs-body);padding:8px 14px;border-radius:var(--r-chip);border:1px solid var(--rule);
  background:var(--paper);color:var(--ink-55);letter-spacing:var(--tr-cjk-label);
  transition:color var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard),
  background-color var(--dur-micro) var(--ease-standard)}
.chip.on{border-color:var(--ink-92);background:var(--ink-92);color:var(--paper)}
/* 选中态是黑底，写死的墨灰小字会沉进去；色块也要一圈亮边才分得清 */
.chip.on .micro{color:rgba(255,255,255,.55)}
.chip.on .dotc{box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.chip.ghost{border-style:dashed;color:var(--ink-38)}
.chip.ghost.on{border-style:solid;color:var(--paper)}
.chip.mgr{border-style:solid;border-color:var(--rule);color:var(--ink-55)}
.chip .x{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:7px;border-radius:50%;
  background:var(--ink-16);color:var(--ink-75);vertical-align:-2px}
.chip .x svg{width:8px;height:8px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.pi{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;vertical-align:-.13em;margin-right:.3em}
.mg{font-size:var(--fs-label);color:var(--ink-38);padding:2px 0;
  transition:color var(--dur-micro) var(--ease-standard)}
.mg.on{color:var(--ink-92);font-weight:500}
.cap .x{font-size:var(--fs-label);color:var(--ink-38)}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:var(--ink-38)}
  .chip.on:hover{border-color:var(--ink-92);color:var(--paper)}
  .chip .x:hover{background-color:var(--danger)}
  .mg:hover,.cap .mg:hover{color:var(--ink-92)}
}

/* ---------- month group (log) ---------- */
.mgroup{border-bottom:1px solid var(--rule)}
.mhead{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:17px 0;text-align:left}
.mhead .mn{font-size:var(--fs-body);font-weight:500;display:flex;align-items:center;gap:9px;
  transition:color var(--dur-micro) var(--ease-standard)}
.mhead .mn svg{width:12px;height:12px;stroke:var(--ink-38);fill:none;stroke-width:1.8;
  transition:transform var(--dur-short) var(--ease-in-out)}
.mhead[aria-expanded="true"] .mn svg{transform:rotate(90deg)}
.mhead .mv{font-family:var(--f-num);font-size:var(--fs-title);font-weight:500;
  color:var(--accent);letter-spacing:var(--tr-amount)}
.mbody{overflow:hidden;height:0;transition:height var(--dur-short) var(--ease-standard)}
.mbody .row:first-child{border-top:1px solid var(--rule)}
@media (hover:hover) and (pointer:fine){.mhead:hover .mn{color:var(--ink-92)}}

.stick{position:sticky;top:0;z-index:16;margin:0 -14px;padding:12px 14px;
  background:rgba(244,245,246,.86);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border-radius:var(--r-popover);
  box-shadow:inset 0 -1px 0 var(--rule)}
.stick .chips{margin-top:12px}
/* 记录页主栏很长，右栏跟着滚到底就空了 —— 让它吸在筛选条下面 */
@media (min-width:1120px){
  .cols.is-log .col-side{position:sticky;align-self:start;top:calc(var(--stick-h,0px) + 14px)}
}

/* ---------- sources ---------- */
.slist{border-top:1px solid var(--rule)}
.sitem{width:100%;display:block;text-align:left;padding:19px 0;border-bottom:1px solid var(--rule);
  transition:background-color var(--dur-micro) var(--ease-standard)}
.sitem .n{font-size:var(--fs-title);font-weight:500;display:flex;align-items:center;gap:8px}
.sitem .n svg{width:11px;height:11px;stroke:var(--ink-16);fill:none;stroke-width:1.8;margin-left:auto;
  transition:stroke var(--dur-micro) var(--ease-standard)}
.sitem .t{font-size:var(--fs-detail);font-weight:500;letter-spacing:var(--tr-hero);
  color:var(--accent);margin-top:7px}
.sitem .t .cur{font-size:.62em;opacity:.7}
.sitem .m{margin-top:5px;font-size:var(--fs-label);color:var(--ink-38);display:flex;flex-wrap:wrap;gap:3px 12px}
.sitem .m b{font-family:var(--f-num);font-weight:500;color:var(--ink-55)}
@media (hover:hover) and (pointer:fine){
  .sitem:hover{background-color:rgba(0,0,0,.022)}
  .sitem:hover .n svg{stroke:var(--ink-38)}
}

.share{margin-top:9px;display:flex;flex-direction:column;gap:7px}
.share .ln{display:flex;align-items:center;gap:10px;font-size:var(--fs-label);color:var(--ink-55)}
.share .ln .v{margin-left:auto;font-family:var(--f-num);font-size:var(--fs-label);color:var(--ink-92)}
.share .ln .p{font-family:var(--f-num);font-size:var(--fs-micro);color:var(--ink-38);width:34px;text-align:right}
.track{height:3px;background:var(--ink-08);border-radius:var(--r-track);overflow:hidden}
.track i{display:block;height:100%;background:var(--ink-16);border-radius:var(--r-track);
  transition:width var(--dur-signature) var(--ease-out)}

/* ---------- stats ---------- */
.chart{margin-top:20px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{font-family:var(--f-num);font-size:9.5px;fill:var(--ink-38)}
.chart .axis.hi{fill:var(--accent);font-weight:600}
.chart .hit{fill:transparent;cursor:pointer;transition:fill var(--dur-micro) var(--ease-standard)}
@media (hover:hover) and (pointer:fine){.chart .hit:hover{fill:rgba(0,0,0,.035)}}
.legend{margin-top:12px;display:flex;gap:16px;font-size:var(--fs-micro);color:var(--ink-38)}
.legend i{display:inline-block;width:16px;height:0;border-top:1.6px solid var(--accent);vertical-align:4px;margin-right:6px}
.legend i.d{border-top-style:dashed;border-top-color:var(--ink-38)}
.bignum{margin-top:16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bignum .v{font-size:var(--fs-year);font-weight:var(--w-hero);letter-spacing:var(--tr-hero);color:var(--accent)}
.bignum .k{font-size:var(--fs-label);color:var(--ink-55)}
.mini{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:var(--fs-label);color:var(--ink-38)}
.mini b{font-family:var(--f-num);font-weight:500;color:var(--ink-92)}
.srcrow{display:block;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--rule);
  transition:background-color var(--dur-micro) var(--ease-standard)}
.srcrow .a{display:flex;align-items:baseline;gap:12px}
.srcrow .a .n{font-size:var(--fs-body);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srcrow .a .v{margin-left:auto;font-family:var(--f-num);font-size:var(--fs-title);font-weight:500;
  letter-spacing:var(--tr-amount);color:var(--accent);flex:none}
.srcrow .b{display:flex;align-items:center;gap:10px;margin-top:9px}
.srcrow .b .track{flex:1;margin:0}
.srcrow .b .p{font-family:var(--f-num);font-size:var(--fs-micro);color:var(--ink-38);width:34px;text-align:right;flex:none}
@media (hover:hover) and (pointer:fine){.srcrow:hover{background-color:rgba(0,0,0,.022)}}

/* ---------- settings ---------- */
.grp{margin-top:var(--sp-section-gap)}
.grp .gt{font-size:var(--fs-label);color:var(--ink-38);margin-bottom:6px;letter-spacing:var(--tr-cjk-label)}
.item{width:100%;display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--rule);
  text-align:left;font-size:var(--fs-title);transition:background-color var(--dur-micro) var(--ease-standard)}
.item:last-child{border-bottom-color:transparent}
.item .v{margin-left:auto;font-size:var(--fs-label);color:var(--ink-38);font-family:var(--f-num);
  display:flex;align-items:center;gap:7px}
.item .v svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.8}
.item .dotc{width:11px;height:11px;border-radius:50%;flex:none}
.item .dang{color:var(--danger)}
@media (hover:hover) and (pointer:fine){.item:hover{background-color:rgba(0,0,0,.022)}}
.busy{width:14px;height:14px;border-radius:50%;border:1.6px solid var(--ink-16);border-top-color:var(--ink-92);
  animation:spin var(--dur-settle) linear infinite;margin-left:auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- empty ---------- */
.empty{padding:64px 20px 40px;text-align:center}
.empty .t{font-size:var(--fs-title);color:var(--ink-55);font-weight:500}
.empty .s{margin-top:8px;font-size:var(--fs-label);color:var(--ink-38);line-height:1.8}

/* ================= overlays ================= */
.scrim{position:fixed;inset:0;background:rgba(20,22,26,.3);backdrop-filter:blur(var(--blur-subtle));
  -webkit-backdrop-filter:blur(var(--blur-subtle));opacity:0;pointer-events:none;z-index:40;
  transition:opacity var(--dur-micro) var(--ease-exit)}
.scrim.open{opacity:1;pointer-events:auto;transition:opacity var(--dur-short) var(--ease-standard)}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-sheet-top) var(--r-sheet-top) 0 0;
  height:calc(100% - 44px);max-height:calc(100dvh - var(--kb,0px) - 24px);
  transform:translateY(105%);visibility:hidden;pointer-events:none;will-change:transform;
  transition:transform var(--dur-micro) var(--ease-exit),visibility 0s linear var(--dur-micro)}
.sheet.open{transform:none;visibility:visible;pointer-events:auto;
  transition:transform var(--dur-sheet) var(--spring-smooth),visibility 0s}
@media (min-width:760px){
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(440px,calc(100vw - 96px));height:auto;
    max-height:min(84dvh,760px);border-radius:var(--r-popover);border:1px solid var(--rule);
    box-shadow:0 30px 70px -24px rgba(16,20,26,.4);
    transform:translate(-50%,calc(-50% + 10px)) scale(.97);opacity:0;
    transition:transform var(--dur-micro) var(--ease-exit),opacity var(--dur-micro) var(--ease-exit),visibility 0s linear var(--dur-micro)}
  .sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1;
    transition:transform var(--dur-sheet) var(--spring-smooth),opacity var(--dur-short) var(--ease-standard),visibility 0s}
}
/* keyboard-initiated opens are a 100+/day action — they land instantly */
.jump,.jump *{transition:none!important;animation:none!important}
.sheet-h{flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 6px;background:var(--paper);border-radius:var(--r-sheet-top) var(--r-sheet-top) 0 0;position:relative;z-index:2}
@media (min-width:760px){.sheet-h{border-radius:var(--r-popover) var(--r-popover) 0 0}}
.sheet-h .t{font-size:var(--fs-title);font-weight:600;letter-spacing:var(--tr-amount)}
.iconbtn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink-55);
  transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){.iconbtn:hover{background-color:var(--ink-08);color:var(--ink-92)}}
.sheet-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 24px 20px;scrollbar-width:none}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-foot{flex:none;padding:12px 24px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--rule);background:var(--paper)}

.amount{display:flex;align-items:baseline;gap:8px;padding:22px 0 8px;border-bottom:1px solid var(--rule)}
.amount .cur{font-size:26px;font-weight:300;color:var(--ink-38)}
.amount input{flex:1;min-width:0;border:0;outline:0;background:none;padding:0 0 4px;
  font-family:var(--f-num);font-size:var(--fs-hero);font-weight:var(--w-hero);
  letter-spacing:var(--tr-hero);font-variant-numeric:tabular-nums;color:var(--accent);caret-color:var(--accent)}
.amount input::placeholder{color:var(--ink-16)}
.amount.is-pending input{color:transparent;-webkit-text-stroke:.9px var(--ink-38)}
.gross{display:flex;align-items:baseline;gap:8px;padding:12px 0 8px;border-bottom:1px solid var(--rule);margin-top:12px}
.gross .k{font-size:var(--fs-label);color:var(--ink-38)}
.gross input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:var(--f-num);
  font-size:var(--fs-detail);font-weight:400;letter-spacing:var(--tr-amount);color:var(--ink-55);
  text-align:right;font-variant-numeric:tabular-nums}
.gross .eq{font-size:var(--fs-label);color:var(--ink-16);font-family:var(--f-num)}
.more{font-size:var(--fs-label);color:var(--ink-38);padding:4px 0;
  transition:color var(--dur-micro) var(--ease-standard)}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--ink-92)}}
.hint{padding-top:8px;min-height:18px;font-size:var(--fs-label);color:var(--ink-38);
  transition:color var(--dur-micro) var(--ease-standard)}
.hint.err{color:var(--danger)}
.field{padding-top:var(--sp-section-gap)}
.field>.cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.field .cap .k{font-size:var(--fs-label);font-weight:var(--w-label);color:var(--ink-55);letter-spacing:var(--tr-cjk-label)}
.text-input{width:100%;border:0;border-bottom:1px solid var(--rule);background:none;padding:12px 0;
  font-size:var(--fs-title);outline:none;transition:border-color var(--dur-micro) var(--ease-standard)}
.text-input::placeholder{color:var(--ink-16)}
.text-input:focus{border-bottom-color:var(--ink-55)}
.primary{display:block;width:100%;font-size:var(--fs-title);letter-spacing:.08em}
.primary .face{padding:15px 0;border-radius:var(--r-button);background:var(--ink-92);color:var(--paper);font-weight:500}
@media (hover:hover) and (pointer:fine){.primary:hover .face{background-color:#2A2B30}}

.pop{position:fixed;z-index:60;left:0;top:0;width:280px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--rule);
  border-radius:var(--r-popover);box-shadow:0 18px 44px -18px rgba(16,20,26,.3);
  padding:14px 16px 12px;opacity:0;transform:translateY(-6px) scale(.97);
  pointer-events:none;
  /* 收拢态：从触发元素那一边切掉，所以出场是"长回去"而不是整体淡掉。
     -16px 是把描角(--ax 那颗菱形)留在裁剪外，别改成 0 */
  clip-path:inset(-16px -16px 100% -16px);transform-origin:var(--ax,18px) 0;
  transition:opacity var(--dur-micro) var(--ease-exit),
    transform var(--dur-micro) var(--ease-exit),clip-path var(--dur-micro) var(--ease-exit)}
.pop.above{clip-path:inset(100% -16px -16px -16px);transform-origin:var(--ax,18px) 100%}
.pop.open{opacity:1;transform:none;pointer-events:auto;clip-path:inset(-16px);
  transition:opacity var(--dur-micro) var(--ease-standard),
    transform var(--dur-short) var(--spring-snappy),
    clip-path var(--dur-standard) var(--spring-smooth)}
.pop.arr::before{content:'';position:absolute;left:var(--ax,18px);width:11px;height:11px;
  background:inherit;transform:rotate(45deg)}
.pop.arr.below::before{top:-6px;border-left:1px solid var(--rule);border-top:1px solid var(--rule);border-top-left-radius:3px}
.pop.arr.above::before{bottom:-6px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);border-bottom-right-radius:3px}
/* ---------- Arc 动效补：数字生长 / 拖读 / 电阻 ---------- */
.roll{display:inline-block;overflow:hidden;height:1.1em;vertical-align:bottom;line-height:1.1}
.roll>i{display:block;font-style:normal;
  transition:transform var(--dur-settle) var(--spring-smooth)}
.roll.sp{width:.26em}
.chart{position:relative}
.rib{position:absolute;z-index:2;top:0;left:0;opacity:0;pointer-events:none;white-space:nowrap;
  background:var(--paper);border:1px solid var(--rule);border-radius:8px;padding:4px 9px;
  font-family:var(--f-num);font-size:12px;color:var(--ink-92);transform:translate(-50%,-8px);
  transition:opacity var(--dur-micro) var(--ease-standard)}
.rib.on{opacity:1}
.rib .p{color:var(--ink-38)}
.chart .hit.scrb{fill:rgba(0,0,0,.055)}
.nudge{animation:nudge 220ms var(--ease-in-out)}
@keyframes nudge{0%{transform:translateX(0)}30%{transform:translateX(-5px)}
  55%{transform:translateX(3px)}78%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.sheet.dragging{transition:none!important}
.sheet.dragging .sheet-h{cursor:grabbing}
@media (max-width:759px){.sheet-h{cursor:grab;touch-action:pan-y}}
.draghint{display:inline-flex;align-items:center;gap:6px;color:var(--ink-38)}
.draghint svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){
  .roll>i{transition:none}
  .nudge{animation:none}
}

.cal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-h .m{font-size:var(--fs-body);font-weight:var(--w-label)}
.cal-nav{display:flex;gap:2px}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-g .wd{text-align:center;font-size:10px;color:var(--ink-38);padding:4px 0}
.cal-g .d{text-align:center;font-size:var(--fs-body);padding:7px 0;border-radius:9px;color:var(--ink-55);
  font-variant-numeric:tabular-nums;transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
.cal-g .d.off{color:var(--ink-16)}
.cal-g .d.today{color:var(--ink-92);font-weight:600}
.cal-g .d.sel{background:var(--ink-92);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.cal-g .d:hover:not(.sel):not(.off){background-color:var(--ink-08)}}

.bubble{position:fixed;z-index:60;left:0;top:0;display:flex;align-items:center;
  background:rgba(255,255,255,.94);backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);border:1px solid var(--rule);
  border-radius:var(--r-bubble);box-shadow:0 14px 34px -14px rgba(16,20,26,.32);padding:4px;
  opacity:0;transform:scale(.94);transform-origin:bottom center;pointer-events:none;
  transition:opacity var(--dur-micro) var(--ease-exit),transform var(--dur-micro) var(--ease-exit)}
.bubble.open{opacity:1;transform:none;pointer-events:auto;
  transition:opacity var(--dur-micro) var(--ease-standard),transform var(--dur-short) var(--spring-snappy)}
.bubble::after{content:'';position:absolute;bottom:-6px;left:50%;width:11px;height:11px;margin-left:-5.5px;
  background:rgba(255,255,255,.94);border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transform:rotate(45deg)}
.bubble button{padding:9px 12px;font-size:var(--fs-body);border-radius:9px;white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
.bubble .ok{color:var(--accent);font-weight:500}
.bubble .dang{color:var(--danger)}
.bubble .no{color:var(--ink-38)}
.bubble .tinp{width:104px;border:0;outline:0;background:none;font-size:var(--fs-body);
  padding:9px 6px 9px 10px;min-width:0}
.bubble .tinp::placeholder{color:var(--ink-16)}
.bubble .sep{width:1px;align-self:stretch;background:var(--rule);margin:4px 2px}
@media (hover:hover) and (pointer:fine){.bubble button:hover{background-color:var(--ink-08)}}

.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:24px;
  background:rgba(20,22,26,.32);backdrop-filter:blur(var(--blur-soft));-webkit-backdrop-filter:blur(var(--blur-soft));
  opacity:0;pointer-events:none;transition:opacity var(--dur-micro) var(--ease-exit)}
.modal.open{opacity:1;pointer-events:auto;transition:opacity var(--dur-short) var(--ease-standard)}
.modal .box{width:min(320px,100%);background:rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 60px -20px rgba(16,20,26,.4);
  border-radius:var(--r-popover);padding:22px 20px 12px;text-align:center;
  transform:scale(.94);transition:transform var(--dur-micro) var(--ease-exit)}
.modal.open .box{transform:none;transition:transform var(--dur-short) var(--spring-snappy)}
.modal .mt{font-size:var(--fs-title);font-weight:500}
.modal .ms{margin-top:8px;font-size:var(--fs-label);color:var(--ink-38);line-height:1.8}
.modal .mb{margin-top:20px;display:flex;flex-direction:column;gap:8px;text-align:left}
.modal .mb button{display:block;width:100%;padding:12px 14px;border-radius:var(--r-button);
  font-size:var(--fs-body);font-weight:500;border:1px solid var(--rule);background:var(--paper);
  text-align:left;line-height:1.35;
  transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard),
  border-color var(--dur-micro) var(--ease-standard)}
.modal .mb .sub{display:block;font-size:var(--fs-micro);font-weight:400;color:var(--ink-38);margin-top:3px;line-height:1.6}
.modal .mb .danger{color:var(--danger);border-color:rgba(179,38,30,.26);background:rgba(179,38,30,.045)}
.modal .mb .danger .sub{color:rgba(179,38,30,.62)}
.modal .mb .ghost{border:0;background:none;color:var(--ink-55);text-align:center;font-weight:400;
  font-size:var(--fs-label);padding:9px 0}
@media (hover:hover) and (pointer:fine){
  .modal .mb button:hover{background-color:var(--ink-08)}
  .modal .mb .danger:hover{background-color:rgba(179,38,30,.09)}
  .modal .mb .ghost:hover{background-color:transparent;color:var(--ink-92)}
}

.toast{position:fixed;left:50%;bottom:calc(var(--lay-tab-bar-height) + 20px + env(safe-area-inset-bottom));
  z-index:80;width:max-content;max-width:calc(100% - 32px);transform:translate(-50%,14px) scale(.97);
  display:flex;align-items:center;gap:11px;padding:10px 12px 10px 15px;border-radius:var(--r-chip);
  background:rgba(255,255,255,.94);color:var(--ink-92);
  backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid var(--rule);box-shadow:0 14px 34px -14px rgba(16,20,26,.32);
  font-size:var(--fs-label);opacity:0;pointer-events:none;
  transition:opacity var(--dur-micro) var(--ease-exit),transform var(--dur-micro) var(--ease-exit)}
.toast.show{opacity:1;transform:translate(-50%,0) scale(1);pointer-events:auto;cursor:default;
  transition:opacity var(--dur-short) var(--ease-standard),transform var(--dur-short) var(--spring-snappy)}
@media (min-width:760px){.toast{bottom:32px}}
.toast .tdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.toast .undo{font-size:var(--fs-label);font-weight:600;color:var(--accent);padding:2px 8px;border-radius:8px;margin:-2px 0;
  transition:color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
@media (hover:hover) and (pointer:fine){.toast .undo:hover{background-color:var(--accent-soft)}}

/* ================= 云备份 ================= */
.cl-lead{font-size:var(--fs-label);color:var(--ink-55);line-height:1.75;padding-top:6px}
.cl-lead b{color:var(--ink-92);font-weight:600}
.cl-pane{display:grid;gap:12px;padding-top:14px}
.cl-opt{display:grid;gap:3px;text-align:left;padding:14px 16px;border:1px solid var(--rule);
  border-radius:var(--r-button);background:var(--paper);
  transition:border-color var(--dur-micro) var(--ease-standard),background-color var(--dur-micro) var(--ease-standard)}
.cl-opt .k{font-size:var(--fs-body);font-weight:500;color:var(--ink-92)}
.cl-opt .s{font-size:var(--fs-micro);color:var(--ink-38)}
@media (hover:hover) and (pointer:fine){.cl-opt:hover{border-color:var(--ink-38);background-color:rgba(0,0,0,.022)}}
.cl-code{font-size:var(--fs-detail);letter-spacing:var(--tr-amount);line-height:1.5;
  padding:18px 16px;border:1px dashed var(--ink-16);border-radius:var(--r-button);
  background:var(--paper);text-align:center;word-break:break-all;user-select:all}
.cl-warn{font-size:var(--fs-micro);color:var(--ink-38);line-height:1.75}
.cl-warn b{color:var(--danger);font-weight:600}
.cl-hint{font-size:var(--fs-micro);color:var(--ink-38);line-height:1.7;min-height:18px;
  transition:color var(--dur-micro) var(--ease-standard)}
.cl-hint.warn{color:var(--danger)}
.cl-hint.good{color:var(--accent)}
.cl-row{display:flex;gap:10px;flex-wrap:wrap}
.cl-sum{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.cl-sum li{display:flex;align-items:baseline;gap:10px;font-size:var(--fs-label);color:var(--ink-55)}
.cl-sum b{margin-left:auto;font-family:var(--f-num);font-weight:600;color:var(--ink-92)}
.cl-foot{display:flex;gap:10px;align-items:stretch}
.cl-go{flex:1;min-width:0}
.cl-go .face{display:block;width:100%;padding:14px 0;border-radius:var(--r-button);background:var(--ink-92);
  color:var(--paper);font-size:var(--fs-body);font-weight:500;letter-spacing:var(--tr-cjk-label);text-align:center}
.cl-go[disabled]{opacity:.4;cursor:default}
@media (hover:hover) and (pointer:fine){.cl-go:not([disabled]):hover .face{background-color:#2A2B30}}
.clbtn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--fs-label);
  padding:14px 18px;border-radius:var(--r-button);border:1px solid var(--rule);background:var(--paper);
  color:var(--ink-75);white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-standard),border-color var(--dur-micro) var(--ease-standard),
  background-color var(--dur-micro) var(--ease-standard)}
.clbtn.ghost{border-color:transparent;background:var(--ink-08);color:var(--ink-55)}
.clbtn[disabled]{opacity:.4;cursor:default}
@media (hover:hover) and (pointer:fine){.clbtn:hover{border-color:var(--ink-38);color:var(--ink-92)}}
.spin{display:inline-block;width:13px;height:13px;border-radius:50%;border:1.6px solid var(--ink-16);
  border-top-color:var(--ink-92);animation:spin var(--dur-settle) linear infinite;vertical-align:-2px;margin-right:7px}

/* 设置里的云备份组 */
.cloud-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--rule)}
.cloud-row .st{margin-left:auto;font-size:var(--fs-label);color:var(--ink-38);font-family:var(--f-num);
  display:flex;align-items:center;gap:7px;text-align:right}
.cloud-row .st .dot{width:6px;height:6px;border-radius:50%;background:var(--ink-16);flex:none}
.cloud-row.on .st .dot{background:var(--accent)}
.sw{position:relative;width:44px;height:26px;border-radius:13px;background:var(--ink-16);flex:none;
  transition:background-color var(--dur-short) var(--ease-in-out)}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform var(--dur-short) var(--ease-in-out)}
.sw.on{background:var(--ink-92)}
.sw.on::after{transform:translateX(18px)}

/* ================= reduced motion =================
   Keep the fades that tell you what changed; drop movement, travel and the fill morph. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0ms!important;transition-delay:0ms!important;
    transition-property:opacity,color,background-color,border-color,visibility,fill,stroke!important;
    transition-duration:.01ms!important}
  .busy{animation:spin 1.6s linear infinite!important}
  .sheet.open,.pop.open,.bubble.open,.modal,.modal.open,.scrim.open,.toast.show{transition-duration:180ms!important}
}

/* ---------- 月历概览（设置里可切，默认仍是月度版） ---------- */
.mcal-sum{display:flex;gap:26px;align-items:baseline;margin-bottom:12px}
.mcal-sum>span{display:flex;align-items:baseline;gap:7px}
.mcal-sum i{font-style:normal;font-size:var(--fs-label);color:var(--ink-38);letter-spacing:var(--tr-cjk-label)}
.mcal-sum b{font-family:var(--f-num);font-size:var(--fs-detail);font-weight:var(--w-amount);
  letter-spacing:var(--tr-amount);color:var(--ink-92)}
.mcal-sum b .cur{font-size:.58em;font-weight:400;margin-right:3px;letter-spacing:0;opacity:.62}
.mcal-sum b.pnd{color:transparent;-webkit-text-stroke:.8px var(--ink-38);font-weight:400}
.mcal-sum b.pnd .cur{-webkit-text-stroke:0;color:var(--ink-38);opacity:1}
.mcal .wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.mcal .wd{text-align:center;font-size:var(--fs-micro);color:var(--ink-38);padding:2px 0 6px;letter-spacing:var(--tr-cjk-label)}
.mcal .d{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:44px;padding:5px 5px 4px;
  border:0;border-radius:10px;background:rgba(0,0,0,.04);color:var(--ink-92);font:inherit;text-align:left;
  cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out,ease),box-shadow var(--dur-micro) var(--ease-out,ease);
  -webkit-tap-highlight-color:transparent}
.mcal .d .n{font-family:var(--f-num);font-size:var(--fs-label);color:var(--ink-55);line-height:1.2}
.mcal .d .a{font-family:var(--f-num);font-size:var(--fs-micro);line-height:1.25;letter-spacing:var(--tr-amount);
  font-weight:500;color:var(--ink-92);max-width:100%;overflow:hidden;white-space:nowrap}
.mcal .d .a.pnd{color:transparent;-webkit-text-stroke:.7px var(--ink-38);font-weight:400}
.mcal .d .a.sm{font-size:10px;opacity:.85}
.mcal .d.blank{background:transparent;box-shadow:none}
.mcal .d.blank .n{color:var(--ink-38)}
.mcal .d.today{box-shadow:inset 0 0 0 1px var(--ink-16)}
.mcal .d.today .n{color:var(--ink-92);font-weight:600}
.mcal .d.today.sel{box-shadow:inset 0 0 0 1.5px var(--ink-92)}
.mcal .d.today.blank{box-shadow:none}
.mcal .d.sel{box-shadow:inset 0 0 0 1.5px var(--ink-92)}
.mcal .d.fut{background:transparent;color:var(--ink-16);cursor:default;box-shadow:none}
.mcal .d.fut .n{color:var(--ink-16)}
.mcal .d.out{background:transparent;box-shadow:none;cursor:default;padding:5px}
.mcal .d.out .n{color:var(--ink-16)}
@media (hover:hover) and (pointer:fine){
  .mcal .d:not(.fut):not(.out):hover{background:var(--ink-08)}
  .mcal .d.blank:hover{background:var(--ink-08);box-shadow:inset 0 0 0 1px var(--ink-16)}
}
.mcal-foot{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:var(--fs-micro);color:var(--ink-38)}
.mcal-foot>span{min-width:0}
.mcal-foot .k{display:inline-block;width:9px;height:9px;border-radius:3px;background:rgba(0,0,0,.10);
  margin-right:5px;vertical-align:-1px}
.mcal-foot .k.pnd{background:transparent;border:1px solid var(--ink-38)}
.mcal-foot .hint{margin-left:auto;color:var(--ink-38)}
.mcal-day{margin-top:14px;padding-top:12px;border-top:1px solid var(--rule)}
.mcal-day .sect-h{margin-bottom:2px}
@media (min-width:760px){.mcal .d{min-height:56px;padding:7px 8px 6px}.mcal .d .a{font-size:var(--fs-label)}}