:root {
  --sky: #D6ECEF;
  --sky2: #BFE2EA;
  --panel: #FFF8E8;
  --paper: #FFFDF6;
  --ink: #253434;
  --line: #2E3B3B;
  --muted: #5B6B66;
  --soil: #E9DDBF;
  --soil2: #D6C79F;
  --grad: #3F8F4F;
  --grad-dark: #2C6A39;
  --side: #4E9CC0;
  --joy: #F6D24A;
  --rest: #F4B8C8;
  --sun: #FFF1C2;
  --leaf: #E3F2D9;
  --dusk: #E8E2F7;
  --pink: #FCE4EA;
  --mist: #E1F0F6;
  --orange: #E8862E;
  --red: #E0574B;
}

/* 像素字体放在自己网站上（SIL Open Font License），不向第三方请求；中文用设备自带字体 */
@font-face {
  font-family: 'Pixelify Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/pixelify-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif;
  line-height: 1.5;
}
a { color: var(--grad-dark); }
a:hover { color: #1F4D29; }
input, textarea, button, select { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3 { margin: 0; }
.num { font-family: 'Pixelify Sans', 'PingFang SC', 'Noto Sans SC', monospace; }
svg.sp { shape-rendering: crispEdges; }

.wrap { max-width: 480px; margin: 0 auto; padding: 16px 16px 120px; display: flex; flex-direction: column; gap: 18px; }

/* 像素边框 */
.px { box-shadow: 0 -3px 0 0 var(--line), 0 3px 0 0 var(--line), -3px 0 0 0 var(--line), 3px 0 0 0 var(--line), 0 8px 0 0 rgba(46,59,59,.16); margin: 3px; }
.pxs { box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line); margin: 2px; }
.btn {
  border: none; cursor: pointer; margin: 2px; min-height: 44px; padding: 0 12px;
  background: var(--paper); color: var(--ink); font-size: 14px;
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line), inset 0 -4px 0 0 rgba(0,0,0,.16);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}
.btn:active { transform: translateY(2px); box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line), inset 0 2px 0 0 rgba(0,0,0,.16); }
.btn:focus-visible, .cell:focus-visible, a:focus-visible { outline: 3px dashed var(--orange); outline-offset: 3px; }
.btn.on { transform: translateY(-3px); outline: 3px dashed var(--ink); outline-offset: 3px; }
.btn.primary { background: var(--grad); color: #fff; font-weight: 900; }
.btn.dark { background: var(--ink); color: #fff; font-weight: 700; }
.btn.big { min-height: 54px; font-size: 16px; font-weight: 900; }
.btn[disabled] { opacity: .45; cursor: default; }
.inp {
  border: none; outline: none; margin: 2px; min-height: 44px; padding: 0 10px; width: calc(100% - 4px);
  background: var(--paper); color: var(--ink); font-size: 15px; min-width: 0;
  box-shadow: 0 -2px 0 0 var(--line), 0 2px 0 0 var(--line), -2px 0 0 0 var(--line), 2px 0 0 0 var(--line), inset 0 3px 0 0 rgba(46,59,59,.10);
}
textarea.inp { padding: 10px 12px; line-height: 1.7; resize: vertical; }
.inp:focus { box-shadow: 0 -2px 0 0 var(--grad), 0 2px 0 0 var(--grad), -2px 0 0 0 var(--grad), 2px 0 0 0 var(--grad), inset 0 3px 0 0 rgba(46,59,59,.10); }
.inp.digits { font-family: 'Pixelify Sans', monospace; font-size: 20px; letter-spacing: 2px; font-weight: 700; }

.card { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--panel); }
.card.sun { background: var(--sun); } .card.leaf { background: var(--leaf); } .card.dusk { background: var(--dusk); }
.card.pink { background: var(--pink); } .card.mist { background: var(--mist); } .card.dark { background: var(--ink); color: #fff; }
.sub { padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--panel); }
.label { font-size: 13px; font-weight: 700; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.6; }
.row { display: flex; align-items: center; gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.grid5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.dash { height: 2px; background: repeating-linear-gradient(90deg, #C9BFA3 0 4px, transparent 4px 8px); }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; }
.check input { width: 20px; height: 20px; accent-color: var(--grad); }
.sec-title { display: flex; align-items: center; gap: 10px; padding-top: 8px; }
.sec-title h2 { font-size: 20px; font-weight: 900; }
.sec-title span { font-size: 13px; color: var(--muted); }
.defs { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 8px; font-size: 12px; line-height: 1.6; color: var(--muted); }

/* 顶部 */
.top { position: relative; height: 140px; background: var(--sky2); overflow: hidden; }
.top svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.top .inner { position: relative; max-width: 480px; margin: 0 auto; padding: 16px; display: flex; justify-content: space-between; align-items: flex-start; }
.brand { font-size: 13px; color: #2E4A4A; letter-spacing: 1px; }
.page-title { font-size: 26px; font-weight: 700; font-family: 'Pixelify Sans', 'Noto Sans SC', sans-serif; }

nav.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--sky); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -3px 0 0 var(--line); }
nav.tabs .in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
nav.tabs a { font-size: 14px; }
nav.tabs a.cur { background: var(--grad); color: #fff; font-weight: 700; }

/* 日历格 */
.cell { border: none; cursor: pointer; padding: 0; height: 44px; font-size: 12px; font-weight: 700; background: var(--soil); color: #8A7E5E; box-shadow: inset 0 -3px 0 0 rgba(0,0,0,.10); }
.cal { display: grid; grid-template-columns: 44px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }

.bars10 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.bars10 span { height: 12px; background: #E3E6DC; }

.toast { position: fixed; left: 50%; bottom: 92px; transform: translateX(-50%); z-index: 50; background: var(--ink); color: #fff; padding: 10px 16px; font-size: 14px; max-width: 90vw; box-shadow: 0 0 0 3px var(--panel); }
.banner { background: var(--sun); padding: 10px 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; }

.modal-bg { position: fixed; inset: 0; background: rgba(37,52,52,.5); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { max-width: 420px; width: 100%; }

@media (prefers-reduced-motion: reduce) { .btn.on { transform: none; } }