/* Pomodoro Bird v3 — 情感记忆 + 90 秒签到 + 云同步 样式 */

/* ---------- 小鸟情绪视觉（弱惩罚：只表达想念，不指责） ---------- */
.bird.mood-missing { transform: translateY(6px) rotate(-5deg); }
.bird.mood-missing .bird-wing { animation: none; transform: rotate(5deg); filter: brightness(.82); }
.bird.mood-missing .bird-eye::after,
.bird.mood-missing .bird-eye2::after { opacity:.35; transform: translateY(2px); }
.bird.mood-missing .bird-cheek { opacity:.35; }

.bird.mood-sad { transform: translateY(4px); }
.bird.mood-sad .bird-wing { animation: none; transform: rotate(7deg); filter: brightness(.75); }
.bird.mood-sad .bird-eye::after,
.bird.mood-sad .bird-eye2::after { opacity:.25; }
.bird.mood-sad .bird-head { filter: saturate(.85); }

.bird.mood-tired .bird-eye { animation: none; transform: scaleY(.28); }
.bird.mood-tired .bird-eye2 { animation: none; transform: scaleY(.28); }

.bird.mood-proud .bird-tail { animation: wing-happy .35s ease-in-out infinite; }
.bird.mood-proud { filter: brightness(1.08); }

.bird.bird-thin { transform-origin: 50% 100%; scale: .92; filter: saturate(.82) brightness(.97); }

/* 眼泪 / zZZ / 爱心粒子 */
.v3fx { position: absolute; pointer-events: none; z-index: 5; }
.v3tear {
  width: 6px; height: 8px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  background: rgba(120,200,235,.85); left: 62px; top: 42px;
  animation: v3-tear-drop 2.2s ease-in infinite;
}
@keyframes v3-tear-drop {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(46px) scale(1); }
}
.v3zzz {
  font-size: 14px; left: 88px; top: 6px; color: #78909c;
  animation: v3-zzz 2.8s ease-in-out infinite;
}
@keyframes v3-zzz {
  0% { opacity: 0; transform: translate(0,0) scale(.8); }
  40% { opacity: .9; }
  100% { opacity: 0; transform: translate(14px,-22px) scale(1.15); }
}
.v3heart {
  font-size: 16px; left: 50%; top: 18px;
  animation: v3-heart-up 1.5s ease-out forwards;
}
@keyframes v3-heart-up {
  0% { opacity: 1; transform: translate(-50%,0) scale(.7); }
  100% { opacity: 0; transform: translate(-50%,-58px) scale(1.4); }
}

/* ---------- 签到入口（stats 行新增一格） ---------- */
.stat-item.v3-checkin { position: relative; }
.stat-item.v3-checkin .num { transition: transform .2s; }
.stat-item.v3-checkin.nudge .num { animation: v3-pulse 1.6s ease-in-out infinite; }
@keyframes v3-pulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(38,198,218,.0); }
  50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(38,198,218,.12); }
}

/* ---------- 云同步状态胶囊 ---------- */
.v3-sync {
  position: fixed; top: 44px; right: 14px; z-index: 60;
  font-size: 11px; padding: 3px 10px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.62); color: #607d8b;
  border: 1px solid rgba(0,0,0,.08); backdrop-filter: blur(8px);
  transition: all .2s; text-decoration: none; white-space: nowrap;
}
.v3-sync:hover { background: rgba(255,255,255,.9); }
.v3-sync.on { color: #2e7d32; border-color: rgba(46,125,50,.25); }
.v3-sync.off { color: #ef6c00; }
.v3-sync.err { color: #c62828; }

/* ---------- 签到弹层 ---------- */
.v3-mask {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(20,40,45,.42); backdrop-filter: blur(6px); z-index: 300; padding: 16px;
}
.v3-mask.show { display: flex; animation: v3-fade .25s; }
@keyframes v3-fade { from { opacity: 0 } to { opacity: 1 } }
.v3-card {
  width: 100%; max-width: 420px; background: #fff; border-radius: 26px; padding: 26px 24px 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22); animation: v3-pop .35s cubic-bezier(.34,1.56,.64,1);
  max-height: 92vh; overflow-y: auto;
}
@keyframes v3-pop { from { transform: translateY(18px) scale(.96); opacity: 0 } to { transform: none; opacity: 1 } }
.v3-card h3 { font-size: 18px; color: #37474f; margin-bottom: 2px; }
.v3-card .v3-sub { font-size: 12px; color: #90a4ae; margin-bottom: 16px; line-height: 1.5; }
.v3-q { font-size: 12px; color: #607d8b; font-weight: 600; margin: 14px 0 7px; }
.v3-moods { display: flex; gap: 8px; }
.v3-mood {
  flex: 1; border: 1.5px solid #eceff1; border-radius: 14px; background: #fafbfc;
  padding: 9px 2px 7px; text-align: center; cursor: pointer; transition: all .15s;
}
.v3-mood .e { font-size: 21px; display: block; }
.v3-mood .l { font-size: 10px; color: #90a4ae; }
.v3-mood:hover { border-color: #b2ebf2; transform: translateY(-2px); }
.v3-mood.active { border-color: #26c6da; background: rgba(38,198,218,.09); }
.v3-mood.active .l { color: #00838f; }
.v3-cares { display: flex; flex-wrap: wrap; gap: 7px; }
.v3-care {
  font-size: 12px; padding: 6px 12px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid #eceff1; background: #fafbfc; color: #78909c; transition: all .15s;
}
.v3-care.active { border-color: #4dd0e1; background: rgba(77,208,225,.12); color: #00838f; }
.v3-note {
  width: 100%; padding: 10px 12px; border: 1.5px solid #e0e0e0; border-radius: 14px;
  font-size: 13px; font-family: inherit; outline: none; resize: none; color: #37474f;
}
.v3-note:focus { border-color: #4dd0e1; }
.v3-actions { display: flex; gap: 10px; margin-top: 20px; }
.v3-btn {
  flex: 1; border: none; border-radius: 20px; padding: 11px 14px; font-size: 14px;
  font-weight: 500; cursor: pointer; transition: all .2s; font-family: inherit;
}
.v3-btn.primary {
  background: linear-gradient(135deg, #26c6da, #00acc1); color: #fff;
  box-shadow: 0 4px 16px rgba(38,198,218,.25);
}
.v3-btn.primary:hover { transform: scale(1.02); }
.v3-btn.ghost { background: #f5f5f5; color: #78909c; flex: 0 0 auto; padding: 11px 18px; }
.v3-btn.ghost:hover { background: #eee; }
.v3-tip { font-size: 11px; color: #b0bec5; margin-top: 12px; line-height: 1.6; }

/* ---------- 提示条（首次/回归引导，不遮挡） ---------- */
.v3-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px);
  background: rgba(55,71,79,.94); color: #fff; font-size: 12.5px; line-height: 1.5;
  padding: 10px 18px; border-radius: 18px; z-index: 320; opacity: 0; cursor: pointer;
  transition: all .3s; max-width: 90vw; text-align: center;
}
.v3-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.v3-toast b { color: #80deea; }

/* ---------- 个人中心 / 设置页共用 ---------- */
.v3-panel { background: #fff; border-radius: 22px; padding: 20px 22px; margin-bottom: 16px; box-shadow: 0 8px 30px rgba(0,150,136,.07); }
.v3-panel h2 { font-size: 15px; color: #37474f; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.v3-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f2f4f5; font-size: 13px; color: #546e7a; }
.v3-row:last-child { border-bottom: none; }
.v3-row .k { color: #78909c; }
.v3-row input[type=number] { width: 76px; padding: 7px 9px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 13px; outline: none; font-family: inherit; }
.v3-row input[type=number]:focus { border-color: #4dd0e1; }
.v3-row select { padding: 7px 10px; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: 13px; background: #fff; outline: none; font-family: inherit; }
.v3-switch { position: relative; width: 44px; height: 25px; flex: 0 0 auto; cursor: pointer; }
.v3-switch input { display: none; }
.v3-switch i { position: absolute; inset: 0; background: #cfd8dc; border-radius: 14px; transition: .2s; }
.v3-switch i::after { content: ''; position: absolute; width: 21px; height: 21px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.v3-switch input:checked + i { background: linear-gradient(135deg, #26c6da, #00acc1); }
.v3-switch input:checked + i::after { transform: translateX(19px); }
.v3-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-btns .v3-btn { flex: 1 1 auto; }
.v3-btn.warn { background: #fff3e0; color: #e65100; }
.v3-btn.danger { background: #ffebee; color: #c62828; }
.v3-btn.mini { flex: 0 0 auto; padding: 8px 14px; font-size: 12.5px; border-radius: 16px; background: #eceff1; color: #546e7a; }

/* 热力图 */
.v3-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.v3-cell { aspect-ratio: 1; border-radius: 8px; background: #f1f5f6; display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; }
.v3-cell.l1 { background: rgba(38,198,218,.18); }
.v3-cell.l2 { background: rgba(38,198,218,.38); }
.v3-cell.l3 { background: rgba(38,198,218,.62); }
.v3-cell.today { outline: 2px solid #00acc1; outline-offset: 1px; }
.v3-cell .d { position: absolute; top: 2px; left: 4px; font-size: 8px; color: rgba(0,0,0,.28); }
.v3-legend { font-size: 11px; color: #b0bec5; margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.v3-legend span { width: 11px; height: 11px; border-radius: 4px; display: inline-block; }

/* 日记列表 */
.v3-journal-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed #eceff1; font-size: 13px; }
.v3-journal-item:last-child { border-bottom: none; }
.v3-journal-item .date { flex: 0 0 68px; font-size: 11px; color: #b0bec5; padding-top: 2px; }
.v3-journal-item .body { flex: 1; color: #546e7a; }
.v3-journal-item .care { font-size: 11px; color: #90a4ae; margin-top: 3px; }
.v3-empty { font-size: 13px; color: #b0bec5; text-align: center; padding: 18px 0; line-height: 1.7; }

@media (max-width: 420px) {
  .v3-card { padding: 22px 18px 18px; border-radius: 22px; }
  .v3-mood .e { font-size: 19px; }
}

/* ---- 硬核模式 chip（v3.js injectHardcoreChip，点击跳设置） ---- */
.v3-hc {
  display: inline-block; width: max-content; margin: 8px auto 0; padding: 4px 12px;
  border-radius: 14px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  background: rgba(38, 198, 218, .10); color: #00838f; border: 1px solid rgba(38, 198, 218, .28);
}
.v3-hc:hover { background: rgba(38, 198, 218, .18); }
body.theme-deepspace .v3-hc { color: #9fa8da; background: rgba(124, 77, 255, .12); border-color: rgba(124, 77, 255, .28); }

/* ---- 徽章墙（me.html） ---- */
.v3-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.v3-badge { border-radius: 14px; padding: 10px 6px; text-align: center; background: rgba(0, 0, 0, .04); border: 1.5px solid transparent; }
.v3-badge .bi { font-size: 22px; line-height: 1.2; display: block; }
.v3-badge .bn { font-size: 10.5px; font-weight: 600; color: #37474f; margin-top: 3px; display: block; }
.v3-badge .bd { font-size: 9.5px; color: #b0bec5; margin-top: 2px; display: block; line-height: 1.3; }
.v3-badge.on { background: rgba(38, 198, 218, .10); border-color: rgba(38, 198, 218, .35); }
.v3-badge.on .bi { filter: none; }
.v3-badge.off .bi { filter: grayscale(1); opacity: .45; }
.v3-badge.off .bn { color: #b0bec5; }
body.theme-deepspace .v3-badge { background: rgba(255, 255, 255, .06); }
body.theme-deepspace .v3-badge .bn { color: #c5cae9; }
body.theme-deepspace .v3-badge.on { background: rgba(124, 77, 255, .16); border-color: rgba(124, 77, 255, .45); }

/* ── 全站导航条（淡化版，贴顶，随页滚动） ── */
.v3-nav { display: flex; gap: 6px; margin: 0 0 22px; padding: 5px 6px; background: rgba(255,255,255,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; border: 1px solid rgba(38,50,56,.05); }
.container > .v3-nav { margin-top: -24px; }
.v3-nav a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 4px; border-radius: 9px; text-decoration: none; font-size: 12.5px; font-weight: 500; color: #90a4ae; transition: background .18s, color .18s; min-width: 0; }
.v3-nav a:hover { background: rgba(38,198,218,.08); color: #4db6ac; }
.v3-nav a.on { background: rgba(38,198,218,.12); color: #00897b; font-weight: 600; box-shadow: none; }
.v3-nav .ni { font-size: 14px; line-height: 1; }
.v3-nav .nt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.theme-deepspace .v3-nav { background: rgba(20,24,48,.45); border-color: rgba(255,255,255,.06); box-shadow: none; }
body.theme-deepspace .v3-nav a { color: #5c6b9e; }
body.theme-deepspace .v3-nav a:hover { background: rgba(124,77,255,.10); color: #9fa8da; }
body.theme-deepspace .v3-nav a.on { background: rgba(124,77,255,.16); color: #b39ddb; font-weight: 600; box-shadow: none; }
@media (max-width:480px){ .v3-nav .nt { font-size: 11px; } .v3-nav .ni { font-size: 13px; } }

/* ── 首页签到横幅（统一淡蓝主色，位于开始按钮下方） ── */
.v3-ckbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 0; padding: 10px 14px; border-radius: 12px; cursor: pointer; background: rgba(38,198,218,.05); border: 1px solid rgba(38,198,218,.16); transition: background .15s; }
.v3-ckbar:hover { background: rgba(38,198,218,.09); }
.v3-ckbar .ck-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-ckbar .ck-txt b { font-size: 13px; font-weight: 600; color: #607d8b; }
.v3-ckbar .ck-txt span { font-size: 11px; color: #a4b7c0; }
.v3-ckbtn { border: 1px solid rgba(38,198,218,.3); border-radius: 9px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; color: #00838f; background: rgba(38,198,218,.10); cursor: pointer; flex-shrink: 0; }
.v3-ckbar.done { background: rgba(38,198,218,.07); border-color: rgba(38,198,218,.22); }
.v3-ckbar.done .ck-txt b { color: #00838f; }
.v3-ckbar.done .v3-ckbtn { color: #fff; background: rgba(38,198,218,.55); border-color: transparent; }
body.theme-deepspace .v3-ckbar { background: rgba(124,77,255,.08); border-color: rgba(124,77,255,.2); }
body.theme-deepspace .v3-ckbar .ck-txt b { color: #9fa8da; }
body.theme-deepspace .v3-ckbar .ck-txt span { color: #5c6b9e; }
body.theme-deepspace .v3-ckbar .v3-ckbtn { color: #b39ddb; background: rgba(124,77,255,.12); border-color: rgba(124,77,255,.28); }
body.theme-deepspace .v3-ckbar.done { background: rgba(124,77,255,.12); border-color: rgba(124,77,255,.3); }
body.theme-deepspace .v3-ckbar.done .ck-txt b { color: #b39ddb; }

/* ── 首页纵向呼吸节奏（块与块上下错开） ── */
.container > .bird-area { margin-bottom: 16px; }
.container > .tier-row { margin: 4px 0 14px; }
.container > .stats-row { margin: 2px 0 24px; }
.container > .timer { margin: 10px 0 6px; }
.container > .progress-bar { margin-bottom: 18px; }
.container > .modes { margin: 4px 0 16px; }
.container > .custom-row { margin-bottom: 14px; }
.container > .controls { margin: 12px 0 8px; }
.container > .v3-ckbar { margin: 16px 0 6px; }
.container > .grid { margin-top: 20px; }