:root{
  --bg1:#fdf8f1; --bg2:#f8efe2;
  --surface:#ffffff; --surface-soft:#fbf3ea;
  --ink:#332c25; --ink-soft:#6f6357; --muted:#a99c8c;
  --accent:#5f8d6a; --accent-deep:#48704f; --accent-solid:#4e7a5c; --accent-soft:#dfeadd; --accent-tint:#eef6ef;
  --apricot:#e8a87c; --leaf:#7fb069;
  --line:#efe2d3; --line-soft:#f3e9dd;
  --shadow-sm:0 2px 8px rgba(160,110,70,.08);
  --shadow:0 10px 30px rgba(160,110,70,.12);
  --radius:20px; --radius-sm:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,
    BlinkMacSystemFont,"Segoe UI",system-ui,"Apple Color Emoji","Segoe UI Emoji",
    "Noto Color Emoji","Twemoji Mozilla",sans-serif;
  color:var(--ink); background:linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed; min-height:100vh; -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:14px clamp(16px,4vw,40px);
  background:rgba(253,248,241,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
.brand{display:flex; align-items:center; gap:12px}
.brand-mark{
  width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  font-size:22px; background:linear-gradient(135deg,#fff,#fbe9dc);
  box-shadow:var(--shadow-sm); border:1px solid var(--line-soft);
}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-name{font-size:22px; font-weight:800; letter-spacing:3px; color:var(--accent-deep)}
.brand-sub{font-size:12px; color:var(--muted); letter-spacing:.5px}
.tabs{display:flex; gap:6px; background:var(--surface); padding:5px; border-radius:16px; box-shadow:var(--shadow-sm); border:1px solid var(--line-soft)}
.tab{
  border:none; background:transparent; color:var(--ink-soft); font-size:15px; font-weight:600;
  padding:8px 14px; border-radius:12px; cursor:pointer; transition:.2s; display:flex; align-items:center; gap:5px;
}
.tab .tab-ico{font-size:14px; opacity:.7}
.tab:hover{color:var(--accent-deep)}
.tab.active{background:linear-gradient(135deg,var(--accent-solid),var(--accent-deep)); color:#fff; box-shadow:var(--shadow-sm)}
.tab.active .tab-ico{opacity:1}

main{max-width:720px; margin:0 auto; padding:22px clamp(14px,4vw,16px) 80px}

.card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); box-shadow:var(--shadow)}

/* ---------- 录入卡片 ---------- */
.composer{padding:20px; margin-bottom:22px}
.composer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.date-pill{
  display:inline-flex; align-items:center; gap:7px; background:var(--surface-soft);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}
.date-ico{font-size:14px}
#composerDate{border:none; background:transparent; color:var(--ink); font-size:14px; font-weight:600; outline:none; font-family:inherit}
.daily-hint{font-size:13px; color:var(--muted); font-weight:600}
.daily-hint.full{color:var(--accent); background:var(--accent-tint); padding:4px 12px; border-radius:999px}

textarea#composerText{
  width:100%; border:none; background:transparent; resize:none; outline:none;
  font-family:inherit; font-size:18px; line-height:1.7; color:var(--ink);
  min-height:72px; padding:6px 4px;
}
textarea#composerText::placeholder{color:#cbbbab}

/* 15 格字符可视化 */
.char-area{display:flex; align-items:center; gap:12px; margin:8px 2px 14px}
.char-grid{display:flex; flex-wrap:wrap; gap:7px}
.char-cell{
  width:30px; height:30px; border:1.5px solid var(--line); border-radius:9px;
  display:grid; place-items:center; font-size:15px; font-weight:600; color:var(--ink);
  background:var(--surface); transition:.15s; font-variant-numeric:tabular-nums;
}
.char-cell.filled{
  background:var(--accent-tint); border-color:var(--apricot); color:var(--accent-deep);
}
.char-count{font-size:13px; color:var(--muted); white-space:nowrap; font-weight:600; font-variant-numeric:tabular-nums}

.moods-label{font-size:13px; color:var(--muted); margin-bottom:8px; font-weight:600}
.moods{display:flex; gap:8px; flex-wrap:wrap}
.mood{
  border:1.5px solid var(--line); background:var(--surface); border-radius:14px;
  padding:9px 13px; cursor:pointer; font-size:14px; font-weight:600; color:var(--ink-soft);
  display:flex; align-items:center; gap:6px; transition:.15s; user-select:none;
}
.mood .emoji{font-size:18px; filter:grayscale(.15)}
.mood:hover{border-color:var(--accent); transform:translateY(-1px)}
.mood.active{color:#fff; border-color:transparent; box-shadow:var(--shadow-sm);background:var(--accent-solid)}   /* 兜底：即使没设内联底色也不会白字白底 */
.mood.active .emoji{filter:none}

.composer-bottom{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap}
.upload-btn{
  display:inline-flex; align-items:center; gap:6px; border:1.5px dashed var(--accent);
  color:var(--accent); border-radius:14px; padding:10px 16px; cursor:pointer; font-size:14px; font-weight:600;
  transition:.15s;
}
.upload-btn:hover{background:var(--accent-tint)}
.upload-note{font-size:11px; font-weight:600; color:var(--muted); background:var(--accent-tint);
  border-radius:999px; padding:2px 8px; white-space:nowrap}
.img-preview{display:flex; gap:8px; align-items:center}
.img-thumb{position:relative}
.img-thumb img{width:54px; height:54px; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.img-thumb .rm{position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--ink); color:#fff; border:none; font-size:11px; cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow-sm)}
.submit-btn{
  margin-left:auto; background:linear-gradient(135deg,var(--accent-solid),var(--accent-deep)); color:#fff;
  border:none; border-radius:14px; padding:11px 26px; font-size:15px; font-weight:700; cursor:pointer;
  box-shadow:var(--shadow-sm); transition:.18s;
}
.submit-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.submit-btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; background:var(--muted)}

/* ---------- 视图通用 ---------- */
.view{display:none; animation:rise .28s ease; animation-fill-mode:both}
.view.active{display:block}
@keyframes rise{from{opacity:.55; transform:translateY(6px)} to{opacity:1; transform:none}}
.view-head{display:flex; align-items:center; gap:14px; margin:4px 2px 18px}
.view-head h2{margin:0; font-size:22px; font-weight:800; letter-spacing:1px}
.muted{color:var(--muted); font-size:14px}
.nav-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--accent); font-size:20px; cursor:pointer; box-shadow:var(--shadow-sm); transition:.15s; line-height:1;
}
.nav-btn:hover{background:var(--accent-tint); transform:scale(1.05)}

/* ---------- 记录卡片 ---------- */
.record-list{display:flex; flex-direction:column; gap:14px}
.record-card{
  display:flex; gap:14px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); position:relative; transition:.18s;
  animation:rise .28s ease; animation-fill-mode:both;
}
.record-card:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.time-badge{
  flex-shrink:0; width:46px; text-align:center; font-size:13px; font-weight:700; color:var(--accent-deep);
  background:var(--accent-tint); border-radius:12px; padding:6px 0; height:fit-content;
}
.record-main{flex:1; min-width:0}
.record-text{font-size:17px; line-height:1.6; word-break:break-word; color:var(--ink)}
.record-img{margin-top:10px; width:100%; max-height:260px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line-soft)}
.mood-badge{
  display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:700;
  padding:4px 12px; border-radius:999px; margin-top:10px;
}
.del-btn{position:absolute; top:12px; right:12px; width:30px; height:30px; border:none; border-radius:50%;
  background:var(--surface-soft); color:var(--muted); cursor:pointer; font-size:14px; transition:.15s}
.del-btn:hover{background:var(--accent-tint); color:var(--accent)}

.empty{text-align:center; color:var(--muted); padding:60px 20px; font-size:15px}
.empty .emo{font-size:42px; display:block; margin-bottom:12px; opacity:.8}

/* ---------- 月历 ---------- */
.weekdays{display:grid; grid-template-columns:repeat(7,1fr); text-align:center; color:var(--muted); font-size:13px; margin-bottom:8px; font-weight:600}
.calendar{display:grid; grid-template-columns:repeat(7,1fr); gap:8px}
.cal-cell{
  aspect-ratio:1/1; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative;
  box-shadow:var(--shadow-sm); transition:.15s;
}
.cal-cell .d{font-size:15px; font-weight:700; color:var(--ink-soft)}
.cal-cell.has-rec{cursor:pointer; border-color:var(--accent-soft); background:linear-gradient(180deg,#fff,var(--accent-tint))}
.cal-cell.has-rec:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.cal-cell .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); margin-top:5px; box-shadow:0 0 0 3px var(--accent-tint)}
.cal-cell .cnt{font-size:11px; color:var(--muted); font-weight:600; margin-top:2px}
.cal-cell.today{outline:2px solid var(--accent); outline-offset:1px}
.cal-cell.today .d{color:var(--accent)}
.cal-legend{display:flex; align-items:center; gap:7px; justify-content:center; color:var(--muted); font-size:12px; margin-top:16px}
.legend-dot{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-tint)}

/* ---------- 年看板 ---------- */
.year-bars{display:flex; flex-direction:column; gap:11px}
.year-row{
  display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:16px; padding:12px 16px; box-shadow:var(--shadow-sm); cursor:pointer; transition:.15s;
}
.year-row:hover{transform:translateX(3px); border-color:var(--accent-soft); background:linear-gradient(90deg,#fff,var(--accent-tint))}
.year-row .m{width:38px; font-weight:800; font-size:16px; color:var(--accent-deep)}
.year-row .bar-wrap{flex:1; background:var(--line-soft); border-radius:99px; height:24px; overflow:hidden}
.year-row .bar{
  height:100%; background:linear-gradient(90deg,var(--apricot),var(--accent)); border-radius:99px;
  display:flex; align-items:center; justify-content:flex-end; padding-right:8px; color:#fff;
  font-size:12px; font-weight:700; min-width:26px; transition:width .5s ease;
}
.year-row .avg{font-size:13px; color:var(--muted); width:96px; text-align:right; white-space:nowrap}
.year-row .avg b{color:var(--accent); font-size:15px}

/* ---------- 集锦 ---------- */
.comp-body{display:flex; flex-direction:column; gap:18px}
.comp-card{background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
.comp-stats{display:flex; gap:14px}
.comp-stat{flex:1; text-align:center; background:var(--surface-soft); border-radius:16px; padding:14px 6px}
.comp-stat .num{font-size:28px; font-weight:800; color:var(--accent); line-height:1.1}
.comp-stat .lbl{font-size:12px; color:var(--muted); margin-top:4px}
.collage{display:flex; gap:8px; margin-top:16px}
.collage img{width:33.34%; height:140px; object-fit:cover; border-radius:14px; border:1px solid var(--line-soft); transition:.2s}
.collage img:hover{transform:scale(1.02)}
.collage .placeholder{flex:1; height:140px; border-radius:14px; background:var(--surface-soft); display:grid; place-items:center; color:var(--muted); font-size:13px; border:1px dashed var(--line)}
.summary-head{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:10px; font-weight:600}
.summary-head .q{font-size:22px; color:var(--accent); line-height:1}
.summary-box{background:linear-gradient(180deg,#fff,var(--surface-soft)); border-left:4px solid var(--accent);
  border-radius:12px; padding:16px 18px; line-height:1.95; font-size:16px; color:#5a4636; white-space:pre-wrap}
.summary-edit{width:100%; border:1px solid var(--line); border-radius:12px; padding:14px; font-size:15px; font-family:inherit; resize:vertical; min-height:100px; display:none; outline:none}
.summary-edit:focus{border-color:var(--accent)}
.moment{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px dashed var(--line)}
.moment:first-of-type{border-top:none}
.moment .tag{font-size:12px; font-weight:800; padding:4px 10px; border-radius:9px; white-space:nowrap; flex-shrink:0}
.moment.best .tag{background:var(--accent-tint); color:var(--accent-deep)}
.moment.care .tag{background:#e6eef0; color:#5b7c99}
.moment .m-body{font-size:15px}
.moment .meta{font-size:12px; color:var(--muted)}
.comp-records{display:flex; flex-direction:column; gap:9px}
.comp-rec{display:flex; gap:12px; align-items:center; background:var(--surface-soft); border:1px solid var(--line-soft);
  border-radius:14px; padding:10px 12px; transition:.15s}
.comp-rec img{width:48px; height:48px; object-fit:cover; border-radius:10px; flex-shrink:0}
.comp-rec .t{flex:1; font-size:14px; min-width:0}
.comp-rec .meta{font-size:12px; color:var(--muted); margin-top:2px}
.comp-rec.excluded{opacity:.4}
.comp-rec button{border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--ink-soft); transition:.15s; flex-shrink:0}
.comp-rec button:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-tint)}
.comp-actions{display:flex; gap:12px; margin-top:4px}
.comp-actions button{flex:1; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:700; cursor:pointer; transition:.18s}
.btn-export{background:linear-gradient(135deg,var(--accent-solid),var(--accent-deep)); color:#fff; box-shadow:var(--shadow-sm)}
.btn-export:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-share{background:var(--accent-tint); color:var(--accent-deep)}
.btn-share:hover{background:var(--accent-soft)}

/* ---------- 弹层 ---------- */
.modal-mask{position:fixed; inset:0; background:rgba(50,35,25,.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:60; padding:18px; animation:fade .2s}
.modal-mask.hidden{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg1); border-radius:22px; max-width:480px; width:100%; max-height:86vh; overflow:auto; padding:20px; box-shadow:var(--shadow); animation:rise .25s}
.share-modal{max-width:700px}
.share-frame{width:100%; height:58vh; border:1px solid var(--line); border-radius:14px; background:#fff}
.share-actions{margin-top:14px}
.share-actions button{flex:1}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.modal-head h3{margin:0; font-size:18px}
.icon-btn{border:none; background:var(--surface-soft); width:32px; height:32px; border-radius:50%; font-size:15px; cursor:pointer; color:var(--muted); transition:.15s}
.icon-btn:hover{background:var(--accent-tint); color:var(--accent)}
.modal-body{display:flex; flex-direction:column; gap:12px}

.toast{position:fixed; bottom:32px; left:50%; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:#fff; padding:11px 22px; border-radius:999px; font-size:14px; z-index:99;
  box-shadow:var(--shadow); opacity:0; transition:.25s; pointer-events:none}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.hidden{display:none}

@media (max-width:540px){
  .brand-sub{display:none}
  .tab{padding:8px 11px; font-size:14px}
  .comp-stats{gap:8px}
  .collage img{height:110px}
}

/* ---------- 本地版新增：备份横幅 / 数据面板 / 存储状态 ---------- */
.backup-banner{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:linear-gradient(135deg,var(--accent-solid),var(--accent-deep)); color:#fff;
  padding:12px clamp(16px,4vw,24px); display:flex; align-items:center; gap:12px;
  box-shadow:0 -6px 20px rgba(160,110,70,.25); flex-wrap:wrap;
}
.backup-banner.hidden{display:none}
.backup-banner .bb-msg{flex:1; min-width:200px; font-size:14px; font-weight:600}
.backup-banner button{border:none; border-radius:10px; padding:8px 16px; font-size:13px; font-weight:700; cursor:pointer}
.backup-banner .bb-export{background:#fff; color:var(--accent-deep)}
.backup-banner .bb-later{background:rgba(255,255,255,.18); color:#fff}
.data-btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  width:42px; height:42px; border-radius:14px; font-size:18px; cursor:pointer; box-shadow:var(--shadow-sm); transition:.15s;
}
.data-btn:hover{color:var(--accent); border-color:var(--accent-soft)}
.data-panel{display:flex; flex-direction:column; gap:10px}
.data-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:14px; padding:12px 14px;
}
.data-row .dr-label{font-size:14px; font-weight:600}
.data-row .dr-sub{font-size:12px; color:var(--muted); margin-top:2px}
.data-row button{border:1px solid var(--line); background:var(--surface-soft); border-radius:10px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; color:var(--accent-deep); white-space:nowrap}
.data-row button:hover{border-color:var(--accent); background:var(--accent-tint)}
.data-row.danger button{color:#b3261e}
.storage-note{font-size:12px; color:var(--muted); line-height:1.7; background:var(--surface-soft); border-radius:12px; padding:10px 12px}
.storage-meter{height:8px; border-radius:99px; background:var(--line-soft); overflow:hidden; margin-top:6px}
.storage-meter i{display:block; height:100%; background:linear-gradient(90deg,var(--leaf),var(--apricot)); border-radius:99px}
@media (max-width:540px){
  .backup-banner{padding:10px 14px}
}

.storage-error.hidden{display:none}