/* =============================================================
 * style.css —— 忙了啥
 * 移动端优先，视觉语言参照微信：
 *   · 灰底 + 白色分组卡片，分割线从内容左边缘起（不通到底）
 *   · 主色微信绿 #07C160
 *   · 底部标签栏 + 顶部居中标题栏
 *   · 弹层一律从底部升起（Action Sheet），不用居中对话框
 *   · 所有可点区域 ≥ 44px，单手可达
 * ============================================================= */

:root {
  /* 微信浅色 */
  --bg: #ededed;
  --surface: #ffffff;
  --surface-press: #ececec;
  --separator: #e5e5e5;
  --navbar: #ededed;
  --tabbar: #f7f7f7;

  --text: #191919;
  --text-2: #888888;
  --text-3: #b2b2b2;
  --placeholder: #c8c8c8;

  --green: #07c160;
  --green-press: #06ad56;
  --green-soft: #e8f8ef;
  --red: #fa5151;
  --red-soft: #fdecec;
  --orange: #fa9d3b;
  --orange-soft: #fef2e5;
  --blue: #10aeff;
  --blue-soft: #e7f5ff;
  --purple: #6467f0;

  --radius: 10px;
  --gap: 12px;
  --cell-pad: 16px;

  --nav-h: 46px;
  --tab-h: 52px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

html[data-theme='dark'] {
  --bg: #111111;
  --surface: #1e1e1e;
  --surface-press: #2a2a2a;
  --separator: #2c2c2c;
  --navbar: #1a1a1a;
  --tabbar: #1a1a1a;

  --text: #d8d8d8;
  --text-2: #7f7f7f;
  --text-3: #5e5e5e;
  --placeholder: #4a4a4a;

  --green: #07c160;
  --green-press: #06ad56;
  --green-soft: #12301f;
  --red: #cf5148;
  --red-soft: #331d1c;
  --orange: #c8873a;
  --orange-soft: #2e2415;
  --blue: #1a90c9;
  --blue-soft: #14262f;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  font-size: 17px;                 /* 微信正文尺寸，手机上不费眼 */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button { font-family: inherit; }

/* ---------------- 整体骨架 ---------------- */
.app {
  max-width: 560px;                /* 窄屏形态：手机宽度 */
  margin: 0 auto;
  min-height: 100%;
  background: var(--bg);
  position: relative;
}

/* 品牌区只在宽屏的左侧导航里出现 */
.brand { display: none; }

/* 两栏容器：窄屏就是普通竖排，宽屏才分栏 */
.cols > .col > .group-title:first-child { padding-top: 20px; }

/* ---------------- 顶部标题栏 ---------------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  height: calc(var(--nav-h) + var(--safe-t));
  padding-top: var(--safe-t);
  background: var(--navbar);
  display: flex; align-items: center;
  border-bottom: .5px solid transparent;
  transition: border-color .2s;
}
.navbar.scrolled { border-bottom-color: var(--separator); }
.nav-title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 17px; font-weight: 600; letter-spacing: .01em;
  white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis;
  top: var(--safe-t); line-height: var(--nav-h);
}
.nav-side {
  height: var(--nav-h); display: flex; align-items: center;
  padding: 0 8px; min-width: 60px;
}
.nav-side.right { margin-left: auto; justify-content: flex-end; }
.nav-btn {
  border: none; background: none; color: var(--text);
  font-size: 16px; padding: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 2px; border-radius: 6px;
  min-height: 40px;
}
.nav-btn:active { opacity: .5; }
.nav-btn.accent { color: var(--green); font-weight: 500; }
.nav-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ---------------- 内容区 ---------------- */
.page {
  padding-bottom: calc(var(--tab-h) + var(--safe-b) + 24px);
  min-height: calc(100vh - var(--nav-h));
}
.page.no-tabbar { padding-bottom: calc(var(--safe-b) + 32px); }

/* ---------------- 底部标签栏 ---------------- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 560px; z-index: 60;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--tabbar);
  border-top: .5px solid var(--separator);
  display: flex;
  backdrop-filter: saturate(180%) blur(20px);
}
.tabbar.hidden { display: none; }
.tab {
  flex: 1; border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--text-3); padding: 4px 0 2px;
}
.tab svg { width: 24px; height: 24px; fill: currentColor; }
.tab span { font-size: 10.5px; line-height: 1.2; }
.tab.active { color: var(--green); }
.tab:active { opacity: .6; }

/* ---------------- 分组卡片（微信列表核心） ---------------- */
.group-title {
  font-size: 13px; color: var(--text-2);
  padding: 20px var(--cell-pad) 8px;
  display: flex; align-items: center; gap: 8px;
}
.group-title .more { margin-left: auto; color: var(--text-2); font-size: 13px; }

.group {
  background: var(--surface);
  border-radius: var(--radius);
  margin: 0 var(--gap);
  overflow: hidden;
}
.group + .group { margin-top: var(--gap); }
.group.flush { border-radius: 0; margin: 0; }

/* 单元格：微信的行。分割线用 ::after，左侧内缩，最后一行不显示 */
.cell {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 12px var(--cell-pad);
  background: var(--surface);
  width: 100%; border: none; text-align: left;
  color: var(--text); font-size: 17px; font-family: inherit;
}
.cell::after {
  content: ''; position: absolute; left: var(--cell-pad); right: 0; bottom: 0;
  height: .5px; background: var(--separator); transform: scaleY(.8);
}
.cell:last-child::after { display: none; }
button.cell, .cell.tappable { cursor: pointer; }
button.cell:active, .cell.tappable:active { background: var(--surface-press); }

.cell-body { flex: 1; min-width: 0; }
.cell-title { font-size: 17px; line-height: 1.4; word-break: break-word; }
.cell-sub {
  font-size: 13px; color: var(--text-2); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.cell-value { color: var(--text-2); font-size: 15px; flex: 0 0 auto; }
.cell-arrow {
  flex: 0 0 auto; width: 8px; height: 8px; margin-left: 2px;
  border-right: 1.6px solid var(--text-3); border-top: 1.6px solid var(--text-3);
  transform: rotate(45deg);
}
.cell-icon {
  width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 15px; color: #fff;
}

.group-foot {
  font-size: 12.5px; color: var(--text-2);
  padding: 8px var(--cell-pad) 0; margin: 0 var(--gap);
  line-height: 1.5;
}

/* ---------------- 概览的问候区 ---------------- */
.hero { padding: 18px var(--cell-pad) 4px; }
.hero h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.hero p { margin: 4px 0 0; color: var(--text-2); font-size: 14px; }

/* 四宫格数字 */
.stat-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border-radius: var(--radius);
  margin: 14px var(--gap) 0; padding: 16px 4px;
}
.stat-cell { text-align: center; position: relative; }
.stat-cell + .stat-cell::before {
  content: ''; position: absolute; left: 0; top: 12%; bottom: 12%;
  width: .5px; background: var(--separator);
}
.stat-cell .n {
  font-size: 22px; font-weight: 600; line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.stat-cell .n.warn { color: var(--red); }
.stat-cell .l { font-size: 11.5px; color: var(--text-2); margin-top: 3px; }

/* 快捷入口两个大按钮 */
.quick { display: flex; gap: var(--gap); margin: var(--gap) var(--gap) 0; }
.quick button {
  flex: 1; border: none; border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 16px 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 14px;
}
.quick button:active { background: var(--surface-press); }
.quick .qi {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; font-size: 19px; color: #fff;
}
.quick .primary .qi { background: var(--green); }
.quick .secondary .qi { background: var(--blue); }

/* ---------------- 待办行 ---------------- */
.task { position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 13px var(--cell-pad); background: var(--surface); }
.task::after {
  content: ''; position: absolute; left: 52px; right: 0; bottom: 0;
  height: .5px; background: var(--separator); transform: scaleY(.8);
}
.task:last-child::after { display: none; }
.task-check {
  width: 24px; height: 24px; flex: 0 0 auto; margin-top: 1px;
  border: 1.5px solid var(--text-3); border-radius: 50%;
  background: transparent; cursor: pointer; padding: 0;
  display: grid; place-items: center;
  font-size: 13px; color: transparent; line-height: 1;
  transition: background .15s, border-color .15s;
}
.task-check:active { transform: scale(.9); }
.task-check.on { background: var(--green); border-color: var(--green); color: #fff; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 17px; line-height: 1.45; word-break: break-word; }
.task.is-done .task-title { color: var(--text-3); text-decoration: line-through; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.task-more {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: var(--text-3); font-size: 20px; line-height: 1; padding: 4px 2px 4px 8px;
  align-self: center;
}

/* ---------------- 标签 / 徽标 ---------------- */
.pill {
  display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 11.5px; font-weight: 500; line-height: 1.6;
}
.pill.p1 { background: var(--red-soft); color: var(--red); }
.pill.p2 { background: var(--orange-soft); color: var(--orange); }
.pill.p3 { background: var(--bg); color: var(--text-2); }
.pill.doing { background: var(--blue-soft); color: var(--blue); }
.pill.done { background: var(--green-soft); color: var(--green); }
.pill.overdue { background: var(--red-soft); color: var(--red); }

.tag {
  display: inline-block; padding: 1.5px 8px; border-radius: 4px;
  font-size: 12.5px; background: var(--bg); color: var(--text-2);
}
html[data-theme='dark'] .tag { background: #2a2a2a; }
.badge {
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: 99px;
  background: var(--red); color: #fff; font-size: 11px; line-height: 17px;
  text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------------- 目标进度 ---------------- */
.goal { position: relative; padding: 13px var(--cell-pad); background: var(--surface); cursor: pointer; }
.goal::after {
  content: ''; position: absolute; left: var(--cell-pad); right: 0; bottom: 0;
  height: .5px; background: var(--separator); transform: scaleY(.8);
}
.goal:last-child::after { display: none; }
.goal:active { background: var(--surface-press); }
.goal-head { display: flex; align-items: baseline; gap: 8px; }
.goal-head .t { flex: 1; min-width: 0; font-size: 16px; }
.goal-head .v { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.bar { height: 4px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-top: 9px; }
html[data-theme='dark'] .bar { background: #2c2c2c; }
.bar > i { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .35s; }

/* ---------------- 日志卡片 ---------------- */
.logcard { position: relative; padding: 14px var(--cell-pad); background: var(--surface); cursor: pointer; }
.logcard::after {
  content: ''; position: absolute; left: var(--cell-pad); right: 0; bottom: 0;
  height: .5px; background: var(--separator); transform: scaleY(.8);
}
.logcard:last-child::after { display: none; }
.logcard:active { background: var(--surface-press); }
.log-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.log-date { font-size: 15px; font-weight: 500; }
.log-block h5 {
  margin: 11px 0 2px; font-size: 12.5px; color: var(--text-2); font-weight: 400;
}
.log-block p { margin: 0; font-size: 15.5px; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.log-kind {
  width: 3px; height: 14px; border-radius: 2px; display: inline-block;
  background: var(--text-3); vertical-align: -2px;
}
.log-kind.weekly { background: var(--green); }
.log-kind.monthly { background: var(--purple); }

/* ---------------- 笔记 ---------------- */
.note-cell { position: relative; padding: 14px var(--cell-pad); background: var(--surface); cursor: pointer; }
.note-cell::after {
  content: ''; position: absolute; left: var(--cell-pad); right: 0; bottom: 0;
  height: .5px; background: var(--separator); transform: scaleY(.8);
}
.note-cell:last-child::after { display: none; }
.note-cell:active { background: var(--surface-press); }
.note-cell h4 { margin: 0 0 4px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.note-excerpt {
  margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: pre-wrap; word-break: break-word;
}
.note-foot { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ---------------- 搜索框（微信样式） ---------------- */
.searchbar { padding: 8px var(--gap); background: var(--bg); position: sticky; top: calc(var(--nav-h) + var(--safe-t)); z-index: 40; }
.searchbar input {
  width: 100%; height: 36px; border: none; border-radius: 8px;
  background: var(--surface); color: var(--text);
  padding: 0 12px 0 34px; font-size: 15px; font-family: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b2b2b2'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5 5 1.4-1.4-5-5A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 10px center; background-size: 16px;
}
.searchbar input:focus { outline: none; }
.searchbar input::placeholder { color: var(--placeholder); }

/* ---------------- 分段控件 ---------------- */
.segbar { padding: 0 var(--gap) 0; background: var(--bg); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.segbar::-webkit-scrollbar { display: none; }
.seg { display: inline-flex; gap: 8px; padding: 10px 0; }
.seg button {
  border: none; border-radius: 99px; padding: 6px 14px;
  background: var(--surface); color: var(--text-2);
  font-size: 14px; cursor: pointer; white-space: nowrap; font-family: inherit;
}
.seg button.on { background: var(--green); color: #fff; }
.seg button:active { opacity: .7; }

/* 标签横向滚动条 */
.tagbar { padding: 0 var(--gap) 10px; overflow-x: auto; display: flex; gap: 8px; }
.tagbar::-webkit-scrollbar { display: none; }
.tagbar .tag { flex: 0 0 auto; padding: 5px 12px; border-radius: 99px; font-size: 13.5px; cursor: pointer; background: var(--surface); }
html[data-theme='dark'] .tagbar .tag { background: var(--surface); }
.tagbar .tag.on { background: var(--green); color: #fff; }

/* ---------------- 登录页 ---------------- */
body.logged-out .navbar,
body.logged-out .brand { display: none; }

.login {
  max-width: 400px; margin: 0 auto; padding: 8vh var(--cell-pad) 40px;
  text-align: center;
}
.login .lm { width: 76px; height: 76px; border-radius: 50%; }
.login h1 { margin: 16px 0 2px; font-size: 27px; font-weight: 600; }
.login .lsub { margin: 0; color: var(--green); font-size: 15px; }
.login .form-group { margin-left: 0; margin-right: 0; text-align: left; }
.login .lerr {
  min-height: 20px; margin: 12px 0 4px; font-size: 13.5px; color: var(--red);
}
.login .btn-block { width: 100%; margin: 0; }
.login .lhint { margin: 16px 0 0; font-size: 12.5px; color: var(--text-3); }
.login .btn-block:disabled { opacity: .6; cursor: default; }

/* ---------------- 开场页 ---------------- */
.welcome { padding: 26px var(--cell-pad) 40px; text-align: center; max-width: 640px; margin: 0 auto; }
.welcome .wm { width: 72px; height: 72px; border-radius: 50%; }
.welcome h1 { margin: 14px 0 2px; font-size: 27px; font-weight: 600; }
.welcome .wsub { margin: 0; color: var(--green); font-size: 15px; }
.welcome .wtext { margin: 18px 0 0; color: var(--text-2); font-size: 15px; line-height: 1.75; }

.wsteps {
  margin: 26px 0 4px; background: var(--surface); border-radius: var(--radius);
  overflow: hidden; text-align: left;
}
.wstep { display: flex; gap: 12px; padding: 14px var(--cell-pad); align-items: flex-start; }
.wstep + .wstep { border-top: .5px solid var(--separator); }
.wstep b {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-soft); color: var(--green);
  font-size: 12px; font-weight: 600; display: grid; place-items: center; margin-top: 2px;
}
.wstep strong { display: block; font-size: 15.5px; font-weight: 500; }
.wstep span { font-size: 13px; color: var(--text-2); }

.wacts { margin-top: 24px; }
.wacts .btn-block { width: 100%; margin: 0 0 10px; }
.welcome .whint { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); }

/* ---------------- 空状态 ---------------- */
.empty { text-align: center; padding: 46px 32px; color: var(--text-3); }
.empty .ei { font-size: 40px; line-height: 1; margin-bottom: 12px; opacity: .35; }
.empty strong { display: block; color: var(--text-2); font-size: 16px; font-weight: 400; margin-bottom: 6px; }
.empty span { font-size: 13.5px; line-height: 1.6; }

/* ---------------- 按钮 ---------------- */
.btn-block {
  display: block; width: calc(100% - var(--gap) * 2); margin: var(--gap) var(--gap) 0;
  padding: 13px; border-radius: 8px; border: none;
  background: var(--green); color: #fff; font-size: 17px; font-weight: 500;
  cursor: pointer; font-family: inherit;
}
.btn-block:active { background: var(--green-press); }
.btn-block.plain { background: var(--surface); color: var(--text); }
.btn-block.plain:active { background: var(--surface-press); }
.btn-block.danger { background: var(--surface); color: var(--red); }
.btn-block.danger:active { background: var(--surface-press); }

/* ---------------- 底部弹层（Action Sheet） ---------------- */
.sheet-mask, .modal-mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadein .2s ease-out;
}
@keyframes fadein { from { opacity: 0; } }

.sheet, .modal {
  width: 100%; max-width: 560px;
  background: var(--bg);
  border-radius: 14px 14px 0 0;
  max-height: 92vh; display: flex; flex-direction: column;
  animation: slideup .26s cubic-bezier(.22,.68,.36,1);
  padding-bottom: var(--safe-b);
}
@keyframes slideup { from { transform: translateY(100%); } }

.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; height: 50px; flex: 0 0 auto;
  background: var(--surface); border-radius: 14px 14px 0 0;
  border-bottom: .5px solid var(--separator);
}
.sheet-head h3 { margin: 0; font-size: 17px; font-weight: 600; }
.sheet-head button {
  border: none; background: none; font-size: 16px; cursor: pointer;
  padding: 10px 12px; color: var(--text-2); font-family: inherit; min-width: 62px;
}
.sheet-head button.ok { color: var(--green); font-weight: 500; text-align: right; }
.sheet-head button:active { opacity: .5; }

.sheet-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--gap) 0 20px;
}
.sheet-foot { flex: 0 0 auto; padding: 0 0 12px; }

/* 确认类弹层（微信 Action Sheet） */
.confirm { padding: 8px var(--gap) 8px; }
.confirm .box { background: var(--surface); border-radius: 12px; overflow: hidden; }
.confirm .msg { padding: 20px 20px 18px; text-align: center; font-size: 15px; color: var(--text-2); line-height: 1.55; }
.confirm .act {
  display: block; width: 100%; padding: 14px; border: none; background: var(--surface);
  font-size: 17px; cursor: pointer; font-family: inherit;
  border-top: .5px solid var(--separator); color: var(--text);
}
.confirm .act.danger { color: var(--red); }
.confirm .act:active { background: var(--surface-press); }
.confirm .cancel {
  display: block; width: 100%; margin-top: 8px; padding: 14px;
  border: none; border-radius: 12px; background: var(--surface);
  font-size: 17px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--text);
}
.confirm .cancel:active { background: var(--surface-press); }

/* ---------------- 表单（微信设置页风格） ---------------- */
.form-group { background: var(--surface); border-radius: var(--radius); margin: 0 var(--gap) var(--gap); overflow: hidden; }
.form-cell {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 10px var(--cell-pad);
}
.form-cell::after {
  content: ''; position: absolute; left: var(--cell-pad); right: 0; bottom: 0;
  height: .5px; background: var(--separator); transform: scaleY(.8);
}
.form-cell:last-child::after { display: none; }
.form-cell > label { flex: 0 0 84px; font-size: 16px; color: var(--text); }
.form-cell.stack { display: block; padding-top: 12px; padding-bottom: 12px; }
.form-cell.stack > label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--text-2); }

.form-cell input, .form-cell select, .form-cell textarea {
  flex: 1; min-width: 0; width: 100%;
  border: none; background: transparent; color: var(--text);
  font-size: 16px; font-family: inherit; padding: 6px 0; line-height: 1.5;
  -webkit-appearance: none; appearance: none; border-radius: 0;
}
.form-cell input:focus, .form-cell select:focus, .form-cell textarea:focus { outline: none; }
.form-cell input::placeholder, .form-cell textarea::placeholder { color: var(--placeholder); }
.form-cell textarea { resize: none; min-height: 80px; }
.form-cell select {
  text-align: right; direction: rtl; color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23b2b2b2'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left center; background-size: 18px;
  padding-left: 20px;
}
.form-cell select option { direction: ltr; }
.form-cell input[type='date'], .form-cell input[type='number'] { text-align: right; }
.form-hint { font-size: 12.5px; color: var(--text-2); padding: 0 var(--cell-pad) 0; margin: -4px var(--gap) var(--gap); line-height: 1.5; }

/* 开关 */
.switch { position: relative; width: 50px; height: 30px; flex: 0 0 auto; margin-left: auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch i {
  position: absolute; inset: 0; border-radius: 99px; background: #e5e5e5;
  transition: background .22s;
}
html[data-theme='dark'] .switch i { background: #3a3a3a; }
.switch i::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; transition: transform .22s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.switch input:checked + i { background: var(--green); }
.switch input:checked + i::after { transform: translateX(20px); }

/* ---------------- 我的：头像区 ---------------- */
.profile {
  display: flex; align-items: center; gap: 14px;
  padding: 22px var(--cell-pad); background: var(--surface); margin-bottom: var(--gap);
}
.profile img { width: 62px; height: 62px; border-radius: 8px; flex: 0 0 auto; object-fit: cover; }
.profile .pn { font-size: 21px; font-weight: 500; }
.profile .ps { font-size: 13.5px; color: var(--text-2); margin-top: 4px; }

/* ---------------- 图表 ---------------- */
.chart-wrap { background: var(--surface); border-radius: var(--radius); margin: 0 var(--gap) var(--gap); padding: 14px 12px 12px; }
.chart-wrap h4 { margin: 0 4px 10px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.chart-box { position: relative; height: 200px; }

.heat { display: flex; gap: 3px; overflow-x: auto; padding: 2px 0 6px; }
.heat::-webkit-scrollbar { display: none; }
.heat-col { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.heat-cell { width: 12px; height: 12px; border-radius: 2.5px; background: var(--bg); }
html[data-theme='dark'] .heat-cell { background: #2a2a2a; }
.heat-cell.l2 { background: rgba(7,193,96,.35); }
.heat-cell.l3 { background: rgba(7,193,96,.65); }
.heat-cell.l4 { background: var(--green); }
.heat-legend { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-3); margin-top: 8px; flex-wrap: wrap; }

/* ---------------- 提示条 ---------------- */
.toast-wrap {
  position: fixed; left: 50%; top: 42%; transform: translateX(-50%);
  z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(0,0,0,.78); color: #fff;
  padding: 12px 20px; border-radius: 8px; font-size: 15px;
  animation: tin .18s ease-out; max-width: 74vw; text-align: center;
}
@keyframes tin { from { opacity: 0; transform: scale(.92); } }

/* ---------------- 杂项 ---------------- */
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }

/* =============================================================
 * 宽屏形态（≥ 860px）—— 同一套 HTML，换一种布局
 *   底部标签栏 → 左侧固定导航
 *   单栏 → 双栏
 *   底部弹层 → 居中弹窗
 *   加上 hover 反馈（触屏没有 hover，所以只在这里加）
 * ============================================================= */
@media (min-width: 860px) {
  :root { --gap: 16px; --cell-pad: 18px; --side-w: 216px; --nav-h: 64px; }

  body { background: var(--bg); }

  .app { max-width: none; margin: 0 0 0 var(--side-w); }

  /* --- 左侧导航 --- */
  .brand {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; z-index: 61;
    width: var(--side-w); height: var(--nav-h);
    padding: 0 16px; background: var(--surface);
    border-right: .5px solid var(--separator);
  }
  .brand img { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; }
  .brand .bn { font-size: 16px; font-weight: 600; line-height: 1.25; }
  .brand .bs { font-size: 11.5px; color: var(--text-3); line-height: 1.3; }

  .tabbar {
    position: fixed; top: var(--nav-h); left: 0; bottom: 0; transform: none;
    width: var(--side-w); max-width: none; height: auto;
    flex-direction: column; gap: 2px; padding: 10px 10px 20px;
    background: var(--surface);
    border-top: none; border-right: .5px solid var(--separator);
    backdrop-filter: none;
  }
  .tabbar.hidden { display: flex; }          /* 二级页也保留导航 */
  .tab {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start;
    gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-2);
    transition: background .12s, color .12s;
  }
  .tab svg { width: 21px; height: 21px; }
  .tab span { font-size: 15px; }
  .tab:hover { background: var(--bg); color: var(--text); }
  .tab.active { background: var(--green-soft); color: var(--green); font-weight: 500; }
  html[data-theme='dark'] .tab:hover { background: #262626; }

  /* --- 顶部标题栏：标题左对齐 --- */
  .navbar { height: var(--nav-h); padding: 0 24px; background: var(--bg); }
  .nav-title {
    position: static; transform: none; max-width: none;
    font-size: 21px; font-weight: 600; line-height: var(--nav-h);
  }
  .nav-side { min-width: 0; padding: 0; height: var(--nav-h); }
  .nav-side:empty { display: none; }
  .nav-side.right { margin-left: auto; }
  .nav-btn { border-radius: 8px; padding: 8px 10px; }
  .nav-btn:hover { background: var(--surface); opacity: 1; }

  /* --- 内容区 --- */
  .page {
    max-width: 1120px; padding: 0 8px 60px;
    min-height: calc(100vh - var(--nav-h));
  }
  .page.no-tabbar { padding-bottom: 60px; }
  .searchbar { top: var(--nav-h); max-width: 420px; }

  /* --- 双栏 --- */
  .cols { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .cols-side { grid-template-columns: minmax(300px, 380px) 1fr; }
  .cols > .col > .group-title:first-child { padding-top: 12px; }

  .hero { padding: 10px var(--cell-pad) 0; }
  .hero h1 { font-size: 30px; }

  .stat-row { padding: 20px 8px; }
  .stat-cell .n { font-size: 26px; }
  .stat-cell .l { font-size: 12.5px; }

  .quick button { flex-direction: row; justify-content: center; gap: 10px; padding: 14px; }
  .quick button:hover { background: var(--surface-press); }
  .quick .qi { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }

  /* --- 笔记变成卡片网格 --- */
  .group-notes {
    background: transparent; border-radius: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
    gap: var(--gap);
  }
  .group-notes .note-cell {
    background: var(--surface); border-radius: var(--radius);
    padding: 16px 18px;
  }
  .group-notes .note-cell::after { display: none; }
  .group-notes .note-excerpt { -webkit-line-clamp: 4; }
  .group-notes .empty {
    grid-column: 1 / -1; background: var(--surface); border-radius: var(--radius);
  }

  /* --- 图表两栏 --- */
  .chart-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .chart-box { height: 230px; }

  /* --- hover 反馈 --- */
  button.cell:hover, .cell.tappable:hover,
  .note-cell:hover, .logcard:hover, .goal:hover { background: var(--surface-press); }
  .task:hover { background: var(--surface-press); }
  .task-check:hover { border-color: var(--green); }
  .seg button:hover:not(.on) { background: var(--surface-press); }
  .tagbar .tag:hover:not(.on) { background: var(--surface-press); }
  .btn-block:hover { filter: brightness(1.04); }

  /* --- 弹层改成居中弹窗 --- */
  .sheet-mask { align-items: center; padding: 28px 20px; }
  .sheet {
    max-width: 620px; border-radius: 14px; max-height: 86vh;
    padding-bottom: 0; animation: popin .16s ease-out;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }
  .sheet-head { border-radius: 14px 14px 0 0; height: 56px; }
  .sheet-head button:hover { opacity: .7; }
  .sheet-body { padding: var(--gap) 0 var(--gap); }
  .sheet-foot { padding: 0 0 var(--gap); }
  .confirm { max-width: 380px; margin: 0 auto; padding: 0; }
  .confirm .act:hover, .confirm .cancel:hover { background: var(--surface-press); }

  /* --- 开场页 --- */
  .welcome { padding-top: 20px; max-width: 720px; }
  .wsteps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
  .wstep + .wstep { border-top: none; }
  .wsteps .wstep:nth-child(n+3) { border-top: .5px solid var(--separator); }
  .wsteps .wstep:nth-child(even) { border-left: .5px solid var(--separator); }
  .wacts { display: flex; gap: 10px; }
  .wacts .btn-block { margin: 0; flex: 1; }
}
@keyframes popin { from { opacity: 0; transform: translateY(-10px) scale(.98); } }

/* 超宽屏时给内容留出更舒服的左右余量 */
@media (min-width: 1400px) {
  .page { max-width: 1240px; }
}

@media print {
  .navbar, .tabbar, .brand, .searchbar, .segbar { display: none !important; }
  .page { padding: 0; }
  .app { max-width: none; margin: 0; }
}