/* ════════════════════════════════════════════════
   A Lone  —  style.css
   ════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --black:#000;
  --dark:#0a0a0a;
  --surf:#111;
  --line:rgba(255,255,255,0.07);
  --white:#fff;
  --g1:#888;
  --g2:#3a3a3a;
  --g3:#1a1a1a;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
  /* safe-area insets — real device uses system status/gesture bars */
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

html, body {
  height:100%;
  background:#111;
  color:var(--white);
  font-family:var(--font);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ════════════════════════════════════════════════
   LAYOUT — mobile-first.
   Default = real device: app fills the whole screen.
   Desktop (≥500px) = browser preview with phone mockup.
   ════════════════════════════════════════════════ */

/* ──────── FRAME ──────── */
#frame {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--dark);
}

/* ──────── PHONE SHELL ──────── */
/* On device: invisible wrapper that simply fills. */
#phone-shell {
  position:relative;
  width:100%; height:100%;
}

/* Mockup-only decorations (hidden on device) */
.btn-vol-up, .btn-vol-down, .btn-power { display:none; }

/* ──────── APP SHELL (screen area) ──────── */
#app {
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  background:var(--dark);
  overflow:hidden;
}

/* ──────── STATUS BAR (mockup only, hidden on device) ──────── */
#status-bar {
  display:none;
  position:absolute; top:0; left:0; right:0; z-index:200;
  height:44px;
  align-items:center;
  padding:0 22px;
  pointer-events:none;
}
.sb-left {
  flex:1; display:flex; align-items:center;
}
.sb-center {
  display:flex; align-items:center; justify-content:center;
  width:44px;
}
.sb-right {
  flex:1; display:flex; align-items:center; justify-content:flex-end;
  gap:6px;
}

/* Time */
#sb-time {
  font-size:13px; font-weight:600; letter-spacing:0.02em;
  color:rgba(255,255,255,0.92);
}

/* Punch-hole camera */
.punch-hole {
  width:11px; height:11px; border-radius:50%;
  background:#000;
  box-shadow:0 0 0 1px rgba(255,255,255,0.06);
}

/* 5G label */
.sb-5g {
  font-size:10px; font-weight:700; letter-spacing:0.05em;
  color:rgba(255,255,255,0.85);
  margin-right:-2px;
}

/* Signal / WiFi icons */
.sb-icon {
  width:16px; height:12px;
  color:rgba(255,255,255,0.85);
  flex-shrink:0;
}

/* Battery */
.sb-battery {
  position:relative;
  width:24px; height:12px;
  border:1.5px solid rgba(255,255,255,0.7);
  border-radius:3px;
  display:flex; align-items:center;
  padding:1.5px;
}
.sb-battery-fill {
  width:72%;  /* ~72% battery */
  height:100%;
  background:rgba(255,255,255,0.85);
  border-radius:1.5px;
}
.sb-battery-tip {
  position:absolute; right:-5px; top:50%;
  transform:translateY(-50%);
  width:3px; height:6px;
  background:rgba(255,255,255,0.5);
  border-radius:0 2px 2px 0;
}

/* ──────── SCREENS ──────── */
.screen {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  pointer-events:none;
}
/* 未激活的屏必须整体惰性：子元素自带的 pointer-events:all 不得越过屏级开关。
   （曾因 onboard 的 .ob-phase.on 常驻 + z-index:150，一块透明层吃掉全 App 的真实点击） */
.screen:not(.active),
.screen:not(.active) * { pointer-events:none !important; }

/* Tab screens: home / mine / others fade in/out */
#screen-home,
#screen-mine,
#screen-others,
#screen-done,
#screen-detail,
#screen-vow,
#screen-login,
#screen-wxauth,
#screen-letter,
#screen-onboard {
  opacity:0;
  transition:opacity 0.28s ease;
}
#screen-home.active,
#screen-mine.active,
#screen-others.active,
#screen-done.active,
#screen-detail.active,
#screen-vow.active,
#screen-login.active,
#screen-wxauth.active,
#screen-letter.active,
#screen-onboard.active {
  opacity:1;
  pointer-events:all;
}

/* Compose / Habit-pick / Plan slide up from bottom (action flow) */
#screen-compose,
#screen-habit-pick,
#screen-plan {
  opacity:1;
  transform:translateY(100%);
  transition:transform 0.42s cubic-bezier(0.32,0.72,0,1);
  background:var(--dark);
}
#screen-compose.active,
#screen-habit-pick.active,
#screen-plan.active {
  transform:translateY(0);
  pointer-events:all;
}

/* ──────── ONBOARD ──────── */
#screen-onboard {
  background:var(--black);
  z-index:150;            /* covers status bar shadow space; sits above tabs */
  transition:opacity 0.6s ease;
}
.ob-phase {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:0 44px;
  opacity:0; pointer-events:none;
  transition:opacity 0.7s ease;
}
.ob-phase.on { opacity:1; pointer-events:all; }

.ob-quote {
  font-size:17px; font-weight:300;
  line-height:2.1; letter-spacing:0.06em;
  color:rgba(255,255,255,0.7);
  text-align:center;
  min-height:4.2em;
  margin-bottom:64px;
}
.ob-title {
  font-size:34px; font-weight:700;
  letter-spacing:0.42em; text-indent:0.42em;
  color:var(--white);
  opacity:0; transition:opacity 1.2s ease;
  margin-bottom:10px;
}
.ob-sub {
  font-size:12px; letter-spacing:0.3em; text-indent:0.3em;
  color:rgba(255,255,255,0.3);
  opacity:0; transition:opacity 1.2s ease;
}
.ob-tap {
  position:absolute; bottom:60px; left:0; right:0;
  text-align:center;
  font-size:10px; letter-spacing:0.14em;
  color:rgba(255,255,255,0.2); text-transform:uppercase;
  opacity:0; transition:opacity 0.8s ease;
}

.ob-q {
  font-size:15px; letter-spacing:0.2em;
  color:rgba(255,255,255,0.45);
  margin-bottom:48px;
}
.ob-gender-row { display:flex; gap:20px; }
.ob-gender {
  width:120px; height:140px;
  background:none;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:16px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:16px;
  cursor:pointer;
  color:rgba(255,255,255,0.75);
  transition:border-color 0.2s, background 0.2s, transform 0.15s;
}
.ob-gender:active {
  border-color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.05);
  transform:scale(0.97);
}
.ob-gender svg {
  width:34px; height:34px;
  stroke:currentColor; fill:none;
  stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round;
}
.ob-gender span { font-size:15px; letter-spacing:0.1em; }
.ob-gender-hint {
  margin-top:40px;
  font-size:11px; letter-spacing:0.06em;
  color:rgba(255,255,255,0.22);
}

/* Log slides up from bottom */
#screen-log {
  opacity:1;
  transform:translateY(100%);
  transition:transform 0.48s cubic-bezier(0.32,0.72,0,1);
}
#screen-log.active {
  transform:translateY(0);
  pointer-events:all;
}

/* ──────── BOTTOM NAV ──────── */
.nav {
  height:calc(80px + var(--safe-bottom));
  flex-shrink:0;
  display:flex;
  align-items:flex-start;
  padding-top:10px;
  padding-bottom:var(--safe-bottom);
  border-top:1px solid var(--line);
  background:var(--dark);
}
.nav-btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  color:var(--g2);
  transition:color 0.2s;
  padding:0;
}
.nav-btn.active { color:var(--white); }
.nav-btn svg {
  width:20px; height:20px;
  stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.nav-btn span { font-size:10px; letter-spacing:0.08em; text-transform:uppercase; }

/* Center (打卡) button — slightly larger circle */
.nav-btn-center { margin-top:-6px; }
.nav-center {
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
}
.nav-btn-center.active .nav-center {
  border-color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.06);
}
.nav-center svg { width:17px; height:17px; }

/* ──────── HOME ──────── */
#screen-home .body {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  display:flex;
  flex-direction:column;
  padding:0 20px;
}
#screen-home .body::-webkit-scrollbar { display:none; }

.home-top {
  padding-top:calc(var(--safe-top) + 8px);
  display:flex;
  align-items:center;
  gap:0;
  margin-bottom:28px;
}
.stat-block {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.stat-block:last-child { align-items:flex-end; }
.stat-num {
  font-size:52px;
  font-weight:700;
  line-height:1;
  letter-spacing:-2px;
  color:var(--white);
}
.stat-label {
  font-size:11px;
  color:var(--g1);
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.stat-divider {
  width:1px;
  height:36px;
  background:var(--g2);
  flex-shrink:0;
  margin:0 20px;
}

/* break note — quiet factual line when streak is broken */
#break-note {
  margin:-16px 0 22px;
  font-size:12px;
  letter-spacing:0.08em;
  color:var(--g1);
}

@keyframes streakPop {
  0%   { transform:scale(1); }
  45%  { transform:scale(1.14); }
  100% { transform:scale(1); }
}
.streak-pop { animation:streakPop 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* Test mode banner */
#test-banner {
  margin-bottom:14px;
  padding:7px 12px;
  border:1px dashed rgba(255,255,255,0.25);
  border-radius:8px;
  font-size:11px; letter-spacing:0.08em;
  color:rgba(255,255,255,0.45);
  text-align:center;
}

/* Calendar header */
.cal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cal-month  { font-size:13px; color:var(--g1); letter-spacing:0.08em; text-transform:uppercase; }
.cal-nav { display:flex; gap:4px; }
.cal-nav-btn {
  width:30px; height:30px;
  background:none; border:none; cursor:pointer;
  color:var(--g1); padding:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  transition:color 0.15s, background 0.15s;
}
.cal-nav-btn:active { background:var(--surf); }
.cal-nav-btn.disabled { color:var(--g3); pointer-events:none; }
.cal-nav-btn svg {
  width:16px; height:16px;
  stroke:currentColor; fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.cal-weekdays {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:3px;
  margin-bottom:5px;
}
.cal-wd { text-align:center; font-size:10px; color:var(--g2); letter-spacing:0.06em; padding:4px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }

/* ── Calendar cell ── */
.cal-cell {
  aspect-ratio:1;
  border-radius:6px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.cal-cell.empty,
.cal-cell.future { cursor:default; }

/* image layer — always present, starts invisible */
.cell-bg {
  position:absolute; inset:0; border-radius:6px;
  background-size:cover; background-position:center center;
  opacity:0;
  transition:opacity 0.5s ease;
}
/* dark gradient over image */
.cell-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 65%);
  opacity:0;
  transition:opacity 0.5s ease;
}

/* center number (before reveal) */
.cal-num-c {
  position:relative; z-index:2;
  font-size:13px; font-weight:400;
  color:rgba(255,255,255,0.5);
  transition:opacity 0.4s ease, transform 0.4s ease;
  pointer-events:none;
}
/* corner number (after reveal) */
.cal-num-k {
  position:absolute; bottom:3px; right:5px; z-index:4;
  font-size:9px; color:rgba(255,255,255,0.7);
  opacity:0;
  transition:opacity 0.35s ease;
  pointer-events:none;
}

/* 自定义习惯无图 —— 格子用文字填充，参与同一套揭开动画 */
.cal-cell.cell-text .cell-bg { background-color:var(--surf); }
.cell-word {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:2px;
  font-size:9px; letter-spacing:0.06em;
  color:rgba(255,255,255,0.85);
  text-align:center;
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}

/* revealed state triggers transitions */
.cal-cell.revealed .cell-bg      { opacity:1; }
.cal-cell.revealed .cell-overlay { opacity:1; }
.cal-cell.revealed .cal-num-c    { opacity:0; transform:scale(0.55); }
.cal-cell.revealed .cal-num-k    { opacity:1; }
.cal-cell.revealed .cell-word    { opacity:1; }

/* today ring */
.cal-cell.today-ring::after {
  content:''; position:absolute; inset:0;
  border:1.5px solid rgba(255,255,255,0.7);
  border-radius:6px; z-index:5; pointer-events:none;
}
/* today, not yet checked in — slow breathing border, a quiet question */
@keyframes todayBreath {
  0%, 100% { border-color:rgba(255,255,255,0.18); }
  50%      { border-color:rgba(255,255,255,0.55); }
}
.cal-cell.today-pending {
  border:1px solid rgba(255,255,255,0.28);
  animation:todayBreath 3.2s ease-in-out infinite;
}
.cal-cell.today-pending .cal-num-c { color:rgba(255,255,255,0.9); font-weight:500; }
/* missed */
.cal-cell.missed .cal-num-c  { color:rgba(255,255,255,0.34); }
/* future */
.cal-cell.future .cal-num-c  { color:rgba(255,255,255,0.16); }

/* flash on today checkin */
@keyframes cellFlash {
  0%   { opacity:0; transform:scale(0.55); }
  55%  { transform:scale(1.1); }
  100% { opacity:1; transform:scale(1); }
}
.cell-flash-anim { animation:cellFlash 0.5s cubic-bezier(0.34,1.2,0.64,1) forwards; }

/* tooltip */
.cal-tooltip {
  position:absolute; bottom:calc(100% + 6px); left:50%;
  transform:translateX(-50%);
  background:var(--surf); border:1px solid var(--line); border-radius:6px;
  padding:5px 10px; font-size:11px; color:var(--white);
  white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity 0.15s; z-index:10;
}
.cal-cell.show-tip .cal-tooltip { opacity:1; }

/* log button area */
.log-area { margin-top:24px; padding-bottom:16px; }
.btn-log {
  width:100%; height:52px;
  background:var(--white); color:var(--black);
  border:none; border-radius:10px;
  font-size:14px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; transition:opacity 0.15s;
}
.btn-log:active { opacity:0.8; }
.btn-done {
  width:100%; height:52px;
  background:none; color:rgba(255,255,255,0.4);
  border:1px solid var(--g3); border-radius:10px;
  font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  cursor:pointer; transition:border-color 0.15s, color 0.15s;
}
.btn-done:active { border-color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.6); }

/* ──────── LOG SCREEN ──────── */
#screen-log { background:var(--dark); }
#screen-log .log-head { padding:calc(var(--safe-top) + 14px) 24px 20px; flex-shrink:0; }
.back-row { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.back-btn {
  background:none; border:none; cursor:pointer;
  color:var(--g1); display:flex; padding:0;
}
.back-btn svg {
  width:22px; height:22px;
  stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.log-screen-title { font-size:11px; letter-spacing:0.14em; color:var(--g2); text-transform:uppercase; }
.log-date-hint    { font-size:24px; font-weight:600; letter-spacing:-0.5px; }

#log-scroll {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}
#log-scroll::-webkit-scrollbar { display:none; }

.cat-head {
  font-size:10px; letter-spacing:0.16em;
  color:var(--g2); text-transform:uppercase;
  padding:18px 24px 6px;
}
.act-row {
  display:flex; align-items:center; gap:14px;
  padding:11px 24px;
  border-bottom:1px solid var(--line);
  cursor:pointer; transition:background 0.12s;
}
.act-row:active { background:var(--surf); }
.act-thumb {
  width:40px; height:40px; flex-shrink:0;
  border-radius:7px;
  background-size:cover; background-position:center top;
  background-color:var(--g3);
}
/* 自定义习惯无图 —— 缩略块只放名字的第一个字 */
.act-thumb-txt {
  display:flex; align-items:center; justify-content:center;
  background:var(--surf);
  border:1px solid var(--line);
  font-size:16px; color:var(--g1);
}
.act-name    { flex:1; font-size:16px; color:var(--white); }
.act-chevron { color:var(--g2); font-size:16px; line-height:1; }
.log-spacer  { height:40px; }
.log-empty   { padding:40px 24px; text-align:center; font-size:13px; color:var(--g2); }

/* search box */
.log-search-wrap {
  position:relative;
  margin-top:18px;
}
.log-search-icon {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  stroke:var(--g2); fill:none;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  pointer-events:none;
}
.log-search {
  width:100%; height:42px;
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 14px 0 40px;
  font-size:14px; color:var(--white);
  font-family:var(--font);
  outline:none;
  transition:border-color 0.15s;
}
.log-search::placeholder { color:var(--g2); }
.log-search:focus { border-color:rgba(255,255,255,0.3); }

/* ──────── 记录浮层（选择与记录融合在打卡页，不再整页跳转） ──────── */
.log-sheet-dim {
  position:absolute; inset:0; z-index:40;
  background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
}
.log-sheet-dim.open { opacity:1; pointer-events:auto; }
.log-sheet {
  position:absolute; left:0; right:0; bottom:0; z-index:41;
  background:#101010;
  border-top:1px solid var(--line);
  border-radius:18px 18px 0 0;
  padding:22px 24px calc(18px + var(--safe-bottom));
  transform:translateY(105%);
  transition:transform 0.34s cubic-bezier(0.22,1,0.36,1);
}
.log-sheet.open { transform:translateY(0); }
.sheet-act { font-size:20px; font-weight:600; letter-spacing:-0.3px; margin-bottom:12px; }
.sheet-text {
  width:100%; min-height:56px; resize:none;
  background:none; border:none; outline:none; padding:0;
  font-size:15px; line-height:1.6; color:var(--white);
  font-family:var(--font);
}
.sheet-text::placeholder { color:var(--g2); }
.sheet-actions { display:flex; align-items:center; gap:12px; margin-top:12px; }
.sheet-photo-add {
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 16px; flex-shrink:0;
  background:var(--surf); border:1px solid var(--line); border-radius:11px;
  font-size:13px; color:var(--g1); font-family:var(--font); cursor:pointer;
}
.sheet-photo-add svg { width:16px; height:16px; stroke:var(--g1); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.sheet-done {
  flex:1; height:46px;
  background:var(--white); color:var(--black);
  border:none; border-radius:11px;
  font-size:15px; font-weight:600; font-family:var(--font); cursor:pointer;
}
.sheet-done:active { opacity:0.85; }

/* ──────── iOS 添加到主屏提示（一次性，轻触即散） ──────── */
#a2hs-tip {
  position:absolute; left:16px; right:16px;
  bottom:calc(92px + var(--safe-bottom));
  z-index:60;
  background:#101010;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 18px;
  opacity:0; transform:translateY(8px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  cursor:pointer;
}
#a2hs-tip.show { opacity:1; transform:translateY(0); }
.a2hs-line { font-size:14px; color:var(--white); margin-bottom:6px; }
.a2hs-sub  { font-size:12px; line-height:1.6; color:var(--g1); }

/* 当天补记（详情页）：安静的入口，展开后复用浮层的输入样式 */
.detail-edit-open {
  margin-top:16px;
  height:32px; padding:0 16px;
  background:none; border:1px solid rgba(255,255,255,0.18); border-radius:999px;
  font-size:12px; color:var(--g1); font-family:var(--font); cursor:pointer;
}
.detail-edit-open:active { border-color:rgba(255,255,255,0.4); color:#ccc; }
#detail-edit-box { margin-top:14px; }
#detail-edit-box .sheet-text { min-height:44px; }

/* ──────── DONE SCREEN ──────── */
#screen-done { cursor:pointer; background:var(--black); }

.done-img-wrap {
  position:absolute; inset:0;
  opacity:0; transition:opacity 0.9s ease;
  background:var(--black);
}
.done-img-wrap img {
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
/* blurred backdrop — only used for user photos */
.done-blur {
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:blur(30px) brightness(0.45);
  transform:scale(1.2);
  opacity:0;
}
/* user photo: show the WHOLE photo (contain) over a blurred fill of itself */
.done-img-wrap.is-photo img  { object-fit:contain; object-position:center; }
.done-img-wrap.is-photo .done-blur { opacity:1; }
.done-veil {
  position:absolute; inset:0;
  opacity:0; transition:opacity 0.6s ease;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.05)  0%,
    rgba(0,0,0,0)     25%,
    rgba(0,0,0,0.3)   50%,
    rgba(0,0,0,0.82)  72%,
    rgba(0,0,0,0.97) 100%
  );
}
.done-body {
  position:absolute; bottom:0; left:0; right:0;
  padding:72px 32px calc(68px + var(--safe-bottom));
  /* guaranteed dark backing so text stays legible over any photo */
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.5) 32%,
    rgba(0,0,0,0.9) 100%);
}
.done-label {
  font-size:11px; letter-spacing:0.18em;
  color:rgba(255,255,255,0.4); text-transform:uppercase;
  margin-bottom:4px;
  opacity:0; transform:translateY(10px);
  transition:opacity 0.45s ease, transform 0.45s ease;
}
.done-num {
  font-size:88px; font-weight:700;
  line-height:0.9; letter-spacing:-4px;
  color:var(--white);
  opacity:0; transform:translateY(12px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.done-unit {
  font-size:30px; font-weight:300;
  color:rgba(255,255,255,0.55);
  margin-bottom:28px;
  opacity:0; transition:opacity 0.45s ease;
}
.done-quote {
  font-size:15px; font-weight:300; line-height:1.8; letter-spacing:0.04em;
  color:rgba(255,255,255,0.75);
  border-left:2px solid rgba(255,255,255,0.2);
  padding-left:14px;
  opacity:0; transition:opacity 0.6s ease;
  min-height:1.8em;
}
/* 某个"每周"习惯本周打满次数时的小小肯定——比 done-quote 更轻，不抢主名言的分量 */
.done-weekly {
  font-size:13px; font-weight:300; line-height:1.7; letter-spacing:0.03em;
  color:rgba(255,255,255,0.55);
  margin-top:12px;
  opacity:0; transition:opacity 0.6s ease;
}
.done-tap {
  position:absolute; bottom:calc(20px + var(--safe-bottom)); left:0; right:0;
  text-align:center;
  font-size:10px; letter-spacing:0.14em;
  color:rgba(255,255,255,0.2); text-transform:uppercase;
  opacity:0; transition:opacity 0.5s ease;
}

/* ──────── DETAIL SCREEN (history day) ──────── */
#screen-detail { cursor:pointer; background:var(--black); }
/* reuse done image + veil, but always visible (no cinematic animation) */
#screen-detail .done-img-wrap,
#screen-detail .done-veil,
#screen-detail .done-tap { opacity:1; }
.detail-date {
  font-size:12px; letter-spacing:0.12em;
  color:rgba(255,255,255,0.5);
  margin-bottom:10px;
}
.detail-sport {
  font-size:42px; font-weight:700; letter-spacing:-1px;
  line-height:1; color:var(--white);
  margin-bottom:12px;
}
.detail-day {
  font-size:14px; letter-spacing:0.04em;
  color:rgba(255,255,255,0.6);
}
.detail-note {
  margin-top:16px;
  font-size:15px; font-weight:300; line-height:1.75; letter-spacing:0.02em;
  color:rgba(255,255,255,0.82);
  border-left:2px solid rgba(255,255,255,0.25);
  padding-left:14px;
  max-height:30vh; overflow-y:auto; scrollbar-width:none;
}
.detail-note::-webkit-scrollbar { display:none; }

/* ──────── ENTRY SCREENS (note / compose) ──────── */
.entry-head {
  display:flex; align-items:center; gap:12px;
  padding:calc(var(--safe-top) + 14px) 20px 16px; flex-shrink:0;
  border-bottom:1px solid var(--line);
}
.entry-title { font-size:15px; font-weight:600; letter-spacing:0.02em; }
.entry-body {
  flex:1; overflow-y:auto; scrollbar-width:none;
  padding:20px; display:flex; flex-direction:column;
}
.entry-body::-webkit-scrollbar { display:none; }
.entry-text {
  width:100%; min-height:120px; resize:none;
  background:none; border:none; outline:none;
  color:var(--white); font-family:var(--font);
  font-size:16px; line-height:1.7; letter-spacing:0.02em;
}
.entry-text::placeholder { color:var(--g2); }
.entry-photo-prev {
  position:relative; margin-top:8px;
  width:140px; height:140px; border-radius:12px;
  background-size:cover; background-position:center;
  background-color:var(--surf);
}
.entry-photo-x {
  position:absolute; top:6px; right:6px;
  width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,0.6); color:#fff; border:none;
  font-size:18px; line-height:1; cursor:pointer;
}
.entry-photo-add {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; align-self:flex-start;
  background:none; border:1px solid var(--g3); border-radius:10px;
  padding:10px 16px; color:var(--g1); cursor:pointer;
  font-size:14px; font-family:var(--font);
}
.entry-photo-add:active { background:var(--surf); }
.entry-photo-add svg {
  width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.entry-done {
  flex-shrink:0; margin:0 20px calc(20px + env(safe-area-inset-bottom));
  height:52px; background:var(--white); color:var(--black);
  border:none; border-radius:10px;
  font-size:14px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  cursor:pointer; transition:opacity 0.15s;
}
.entry-done:active { opacity:0.8; }

/* ──────── COMPOSE ENTRY (别人的 顶部入口) ──────── */
.compose-entry {
  display:flex; align-items:center; gap:14px;
  padding:16px 0; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.compose-hint { flex:1; font-size:14px; color:var(--g1); }
.compose-pen {
  width:18px; height:18px; stroke:var(--g1); fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* ──────── MOMENT CARD (朋友圈) ──────── */
.moment-card {
  padding:18px 0; border-bottom:1px solid var(--line);
}
.moment-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.moment-meta { display:flex; flex-direction:column; gap:2px; }
.moment-name { font-size:14px; color:var(--white); }
.moment-sub  { font-size:11px; color:var(--g1); letter-spacing:0.04em; }
.moment-text {
  font-size:15px; line-height:1.7; letter-spacing:0.01em;
  color:rgba(255,255,255,0.88);
  white-space:pre-wrap; word-break:break-word;
  margin-bottom:12px;
}
.moment-photo {
  width:100%; max-height:300px; border-radius:12px;
  object-fit:cover; display:block; margin-bottom:12px;
}
.moment-foot { display:flex; justify-content:flex-end; }

/* ──────── BOTTOM SHEET (today actions) ──────── */
.sheet-mask {
  position:absolute; inset:0; z-index:300;
  background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none;
  transition:opacity 0.25s ease;
}
.sheet-mask.show { opacity:1; pointer-events:all; }
.sheet {
  position:absolute; left:0; right:0; bottom:0; z-index:301;
  background:var(--surf);
  border-top-left-radius:18px; border-top-right-radius:18px;
  padding:0 16px 18px;
  transform:translateY(101%);
  transition:transform 0.34s cubic-bezier(0.32,0.72,0,1);
}
.sheet.show { transform:translateY(0); }
.sheet-title {
  text-align:center; font-size:12px; color:var(--g1);
  letter-spacing:0.06em; padding:16px 0 4px;
}
.sheet-btn {
  width:100%; height:54px;
  background:none; border:none; border-top:1px solid var(--line);
  color:var(--white); font-size:16px; font-family:var(--font);
  cursor:pointer; transition:background 0.12s;
}
.sheet-btn:active { background:rgba(255,255,255,0.05); }
.sheet-cancel { color:var(--g1); border-top:none; margin-top:8px; }

/* ──────── 我的 (MINE) ──────── */
#screen-mine  { background:var(--dark); }
#screen-others{ background:var(--dark); }

#screen-mine .body,
#screen-others .body {
  flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  padding:0 22px;
}
#screen-mine .body::-webkit-scrollbar,
#screen-others .body::-webkit-scrollbar { display:none; }

.mine-head {
  padding-top:calc(var(--safe-top) + 16px); padding-bottom:24px;
  font-size:26px; font-weight:700; letter-spacing:-0.5px;
}

/* 3 stat cards in a row */
.mine-stats-row {
  display:flex; gap:10px; margin-bottom:32px;
}
.mine-stat-card {
  flex:1; background:var(--surf);
  border-radius:12px; padding:14px 12px;
  display:flex; flex-direction:column; gap:6px;
}
.mine-stat-num {
  font-size:32px; font-weight:700; line-height:1; letter-spacing:-1px;
}
.mine-stat-lbl {
  font-size:10px; color:var(--g1); letter-spacing:0.08em; text-transform:uppercase;
}

/* Section title */
.mine-section-title {
  font-size:10px; letter-spacing:0.16em;
  color:var(--g2); text-transform:uppercase;
  margin-bottom:12px;
}

/* Top activities list */
.mine-acts-list { margin-bottom:28px; }
.mine-act-row {
  display:flex; align-items:center;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.mine-act-name { flex:1; font-size:15px; }
.mine-act-bar-wrap {
  width:80px; height:3px;
  background:var(--g3); border-radius:2px; margin-right:12px;
}
.mine-act-bar {
  height:100%; border-radius:2px;
  background:rgba(255,255,255,0.5);
}
.mine-act-count { font-size:12px; color:var(--g1); min-width:24px; text-align:right; }

/* Milestone wall */
.mine-milestones { margin-bottom:28px; }
.mine-ms-row {
  display:flex; align-items:baseline; gap:14px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
}
.mine-ms-day {
  font-size:18px; font-weight:700; letter-spacing:-0.5px;
  min-width:44px; text-align:right;
  color:var(--white);
}
.mine-ms-day .ms-unit { font-size:10px; font-weight:400; color:var(--g1); margin-left:2px; }
.mine-ms-quote {
  flex:1; font-size:12px; line-height:1.7;
  color:var(--g1); letter-spacing:0.02em;
}
/* next milestone — dimmed, aspirational */
.mine-ms-row.next .mine-ms-day   { color:var(--g2); }
.mine-ms-row.next .mine-ms-quote { color:var(--g2); }
.mine-ms-empty {
  font-size:13px; color:var(--g2); padding:8px 0;
}

/* Month summary */
.mine-month-text {
  font-size:14px; line-height:1.8; color:var(--g1); letter-spacing:0.02em;
  margin-bottom:28px;
}

/* Settings */
.mine-setting-row {
  display:flex; align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.mine-setting-row:active { background:var(--surf); }
.mine-setting-name  { flex:1; font-size:15px; color:var(--white); }
.mine-setting-value { font-size:13px; color:var(--g1); }
.mine-spacer { height:32px; flex-shrink:0; }

/* ──────── 别人的 banner ──────── */
#screen-others { flex-direction:column; }

#others-banner-wrap {
  flex-shrink:0;
  padding:calc(var(--safe-top) + 14px) 22px 16px;
  border-bottom:1px solid var(--line);
  background:var(--dark);
}
#others-banner {
  font-size:14px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:0.03em;
  color:rgba(255,255,255,0.55);
  /* subtle left accent line */
  border-left:2px solid rgba(255,255,255,0.15);
  padding-left:12px;
}

.others-body {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  padding:0 22px;
}
.others-body::-webkit-scrollbar { display:none; }

/* ──────── 别人的 (OTHERS) ──────── */
.others-feed {
  display:flex; flex-direction:column; gap:1px;
  padding-bottom:16px;
}
.other-card {
  display:flex; align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  gap:14px;
}
.other-avatar {
  width:38px; height:38px; border-radius:50%;
  background:var(--surf);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; color:var(--g1);
  flex-shrink:0;
}
.other-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.other-sport { font-size:14px; color:var(--white); }
.other-streak { font-size:11px; color:var(--g1); letter-spacing:0.04em; }
.other-like-btn {
  display:flex; flex-direction:column; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer; padding:4px 8px;
  color:var(--g2); transition:color 0.2s;
  flex-shrink:0;
}
.other-like-btn.liked { color:rgba(255,255,255,0.7); }
.other-like-btn svg {
  width:18px; height:18px;
  stroke:currentColor; fill:none;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.other-like-btn.liked svg { fill:currentColor; }
.other-like-count { font-size:10px; letter-spacing:0.04em; }

/* heart pop on like */
@keyframes heartPop {
  0%   { transform:scale(1); }
  35%  { transform:scale(1.45); }
  60%  { transform:scale(0.92); }
  100% { transform:scale(1); }
}
.other-like-btn.popping svg { animation:heartPop 0.42s cubic-bezier(0.34,1.4,0.64,1); }

/* banner soft fade on refresh */
#others-banner { transition:opacity 0.4s ease; }

/* ──────── 我的计划 列表 ──────── */
.mine-habits { margin-bottom:28px; }
.habit-row {
  display:flex; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.habit-info { flex:1; display:flex; flex-direction:column; gap:3px; }
.habit-name { font-size:16px; color:var(--white); }
.habit-sub  { font-size:12px; color:var(--g1); letter-spacing:0.03em; }
.habit-chevron { color:var(--g2); font-size:18px; line-height:1; }
.habit-add {
  display:flex; align-items:center; gap:10px;
  padding:15px 0; cursor:pointer; color:var(--g1);
  font-size:15px;
}
.habit-add-plus {
  width:24px; height:24px; border-radius:50%;
  border:1px solid var(--g2); display:flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1; color:var(--g1);
}

/* ──────── HABIT PICK ──────── */
#hp-scroll { flex:1; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
#hp-scroll::-webkit-scrollbar { display:none; }
.hp-custom-thumb {
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:var(--g1); background:var(--surf) !important;
}

/* ──────── PLAN FORM ──────── */
.plan-name {
  font-size:30px; font-weight:700; letter-spacing:-0.5px;
  margin:6px 0 28px;
}
.plan-sec-label {
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--g2); margin-bottom:12px;
}
.plan-toggle-row { display:flex; gap:10px; margin-bottom:14px; }
.plan-toggle {
  flex:1; height:50px;
  background:none; border:1px solid var(--g3); border-radius:12px;
  color:var(--g1); font-size:15px; font-family:var(--font);
  cursor:pointer; transition:all 0.15s;
}
.plan-toggle.on {
  border-color:rgba(255,255,255,0.7);
  background:rgba(255,255,255,0.06);
  color:var(--white);
}
/* week dots */
.plan-week-dots {
  display:flex; align-items:center; gap:10px;
  margin:2px 0 28px; padding:4px 2px;
}
.wk-dot {
  width:20px; height:20px; border-radius:50%;
  border:1px solid var(--g2); cursor:pointer;
  transition:all 0.15s;
}
.wk-dot.on { background:var(--white); border-color:var(--white); }
.wk-cap { margin-left:8px; font-size:13px; color:var(--g1); }
/* unit chips */
.plan-units { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.unit-chip {
  padding:8px 16px; border-radius:20px;
  background:none; border:1px solid var(--g3);
  color:var(--g1); font-size:14px; font-family:var(--font);
  cursor:pointer; transition:all 0.15s;
}
.unit-chip.on { border-color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.06); color:var(--white); }
/* target stepper */
.plan-target {
  display:flex; align-items:center; justify-content:center; gap:24px;
  margin-top:6px;
}
.step-btn {
  width:46px; height:46px; border-radius:50%;
  background:none; border:1px solid var(--g2);
  color:var(--white); font-size:24px; line-height:1;
  cursor:pointer; transition:background 0.12s;
}
.step-btn:active { background:var(--surf); }
.plan-target-val { font-size:22px; font-weight:600; min-width:90px; text-align:center; }
/* delete */
.plan-delete {
  flex-shrink:0; margin:0 20px calc(20px + var(--safe-bottom));
  height:48px; background:none; color:rgba(255,90,90,0.7);
  border:none; font-size:14px; font-family:var(--font); cursor:pointer;
}
.plan-delete:active { color:rgba(255,90,90,1); }

/* ──────── 登录 (LOGIN) ──────── */
#screen-login {
  background:var(--black);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.login-brand { text-align:center; margin-top:-40px; }
.login-foot {
  position:absolute; left:0; right:0;
  bottom:calc(56px + var(--safe-bottom));
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.wx-login-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:240px; height:50px;
  background:none; border:1px solid rgba(255,255,255,0.25); border-radius:25px;
  color:var(--white); font-size:15px; font-family:var(--font); letter-spacing:0.04em;
  cursor:pointer; transition:background 0.15s, border-color 0.15s;
}
.wx-login-btn:active { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.5); }
.wx-glyph { width:20px; height:20px; color:#3ad06a; }   /* wechat green, only here */
.login-agree { font-size:11px; color:var(--g2); letter-spacing:0.03em; }
.login-agree u { color:var(--g1); text-decoration:none; border-bottom:1px solid var(--g3); }

/* ──────── 微信授权（模拟系统弹层，浅色） ──────── */
#screen-wxauth {
  background:rgba(0,0,0,0.55);
  display:flex; align-items:flex-end; justify-content:center;
}
.wx-sheet {
  width:100%;
  background:#ededed; color:#111;
  border-top-left-radius:14px; border-top-right-radius:14px;
  padding:24px 24px calc(20px + var(--safe-bottom));
  display:flex; flex-direction:column; align-items:center;
}
.wx-sheet-top { display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.wx-sheet-logo { width:22px; height:22px; }
.wx-sheet-title { font-size:15px; font-weight:600; color:#222; }
.wx-sheet-app { text-align:center; margin-bottom:24px; }
.wx-app-icon {
  width:56px; height:56px; border-radius:14px; margin:0 auto 12px;
  background:#0a0a0a; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; letter-spacing:1px;
}
.wx-app-name { font-size:17px; font-weight:600; color:#111; margin-bottom:18px; }
.wx-app-desc { font-size:13px; color:#888; margin-bottom:6px; }
.wx-app-perm { font-size:13px; color:#444; }
.wx-allow {
  width:100%; height:46px; border:none; border-radius:8px;
  background:#07c160; color:#fff; font-size:16px; font-family:var(--font);
  cursor:pointer; margin-bottom:10px;
}
.wx-allow:active { background:#06ad56; }
.wx-deny {
  width:100%; height:46px; border:none; border-radius:8px;
  background:#f7f7f7; color:#333; font-size:16px; font-family:var(--font);
  cursor:pointer;
}
.wx-deny:active { background:#e9e9e9; }

/* ──────── 首封信 (LETTER) ──────── */
#screen-letter { background:var(--black); }

/* closed envelope stage */
.letter-env-stage {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  perspective:900px;
}
.env {
  position:relative; width:240px; height:150px;
  border:1.5px solid rgba(255,255,255,0.4); border-radius:8px;
  background:#0b0b0b; transform-style:preserve-3d;
  transition:opacity 0.5s ease 0.5s, transform 0.25s ease;
}
.letter-env-stage:active .env:not(.open) { transform:scale(0.97); }
.env-flap {
  position:absolute; top:-1px; left:-1px; right:-1px; height:78px;
  background:#161616;
  border:1.5px solid rgba(255,255,255,0.4); border-bottom:none;
  border-radius:8px 8px 0 0;
  clip-path:polygon(0 0, 100% 0, 50% 96%);
  transform-origin:top center;
  transition:transform 0.65s cubic-bezier(0.22,1,0.36,1) 0.15s, opacity 0.4s ease 0.5s;
  backface-visibility:hidden;
}
.env-seal {
  position:absolute; top:60px; left:50%; transform:translate(-50%,-50%);
  width:15px; height:15px; border-radius:50%;
  background:rgba(255,255,255,0.8);
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.env.open .env-flap { transform:rotateX(-165deg); opacity:0; }
.env.open .env-seal { opacity:0; transform:translate(-50%,-50%) scale(1.6); }
.env.open { opacity:0; }
.letter-open-hint {
  position:absolute; bottom:calc(60px + var(--safe-bottom)); left:0; right:0;
  text-align:center; font-size:12px; letter-spacing:0.14em;
  color:rgba(255,255,255,0.32);
}

/* letter page (scrollable) */
.letter-page {
  position:absolute; inset:0;
  opacity:0; transform:translateY(24px);
  transition:opacity 0.8s ease, transform 0.8s ease;
  pointer-events:none;
}
.letter-page.show { opacity:1; transform:translateY(0); pointer-events:all; }
.letter-scroll {
  height:100%; overflow-y:auto; scrollbar-width:none;
  padding:calc(var(--safe-top) + 40px) 30px calc(40px + var(--safe-bottom));
}
.letter-scroll::-webkit-scrollbar { display:none; }
.letter-content { max-width:340px; margin:0 auto; }
.letter-p {
  font-size:15px; line-height:2; letter-spacing:0.02em;
  color:rgba(236,232,224,0.86);   /* warm off-white, "ink on paper" */
  margin-bottom:20px;
}
.letter-p-first {
  font-size:17px; color:#fff; margin-bottom:28px; letter-spacing:0.03em;
}
.letter-sign {
  margin-top:8px; font-size:15px; line-height:1.9;
  color:rgba(236,232,224,0.7);
}
.letter-start {
  display:block; margin:40px auto 8px; width:200px; height:50px;
  background:var(--white); color:var(--black); border:none; border-radius:25px;
  font-size:15px; font-weight:600; letter-spacing:0.1em; font-family:var(--font);
  cursor:pointer;
}
.letter-start:active { opacity:0.85; }

/* ──────── VOW ──────── */
#screen-vow {
  background:var(--black);
  display:flex; align-items:center; justify-content:center;
  padding:0 48px; cursor:pointer;
}
.vow-line {
  font-size:19px; font-weight:300; line-height:2; letter-spacing:0.06em;
  color:rgba(255,255,255,0.85); text-align:center;
  min-height:2em;
}

/* ════════════════════════════════════════════════
   DESKTOP PREVIEW (≥500px) — phone mockup wrapper.
   Real phones are narrower than 500px → they use the
   mobile-first fullscreen layout above.
   ════════════════════════════════════════════════ */
@media (min-width:500px) {
  :root { --safe-top:44px; --safe-bottom:0px; }
  #frame { background:#0d0d0d; overflow-y:auto; align-items:flex-start; padding:20px 0; }
  #phone-shell {
    width:auto; height:auto;
    margin:0 auto;
    padding:13px;
    background:linear-gradient(160deg, #2c2c2e 0%, #1c1c1e 40%, #252527 100%);
    border-radius:56px;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,0.08),
      inset 0 1px 0   rgba(255,255,255,0.14),
      0 50px 140px rgba(0,0,0,0.9),
      0 0 0 1px rgba(0,0,0,0.6);
    flex-shrink:0;
  }
  #app {
    width:400px; height:890px;
    border-radius:44px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);
  }
  #status-bar { display:flex; }
  .btn-vol-up, .btn-vol-down {
    display:block; position:absolute; left:-4px;
    width:4px; border-radius:3px 0 0 3px;
    background:linear-gradient(to right, #2a2a2c, #3a3a3c);
    box-shadow:-1px 0 2px rgba(0,0,0,0.6);
  }
  .btn-vol-up   { top:128px; height:44px; }
  .btn-vol-down { top:184px; height:44px; }
  .btn-power {
    display:block; position:absolute; right:-4px; top:160px;
    width:4px; height:68px; border-radius:0 3px 3px 0;
    background:linear-gradient(to left, #2a2a2c, #3a3a3c);
    box-shadow:1px 0 2px rgba(0,0,0,0.6);
  }
}