:root{
  --bg:#F3F5FA;
  --card:#FFFFFF;
  --primary:#5B7CFF;
  --grad:linear-gradient(135deg,#6A7BFF 0%,#5BC0FF 100%);
  --ok:#2FBF71;
  --ok-bg:#E7F9EF;
  --warn:#FF9F1C;
  --warn-bg:#FFF4E0;
  --danger:#FF5A5F;
  --text:#20263A;
  --text-2:#8A93A6;
  --line:#EDF0F6;
  --shadow:0 6px 20px rgba(31,45,100,.08);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit}
input{font-family:inherit}
ul{list-style:none}

.app{max-width:520px;margin:0 auto;min-height:100%;position:relative}

/* ---------- 头部 ---------- */
.app-header{
  background:var(--grad);
  color:#fff;
  padding:calc(22px + env(safe-area-inset-top,0px)) 20px 96px;
  border-radius:0 0 28px 28px;
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.date-label{font-size:13px;opacity:.9}
.greeting{font-size:24px;font-weight:700;margin-top:4px;letter-spacing:.5px}
.chip-btn{
  padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.2);
  border:1px solid rgba(255,255,255,.35);color:#fff;font-size:13px;font-weight:600;
  flex:none;
}
.chip-btn.active{background:#fff;color:var(--primary)}
.progress-card{
  margin-top:18px;border-radius:18px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  padding:14px 16px;
  backdrop-filter:blur(4px);
}
.progress-top{display:flex;align-items:center;justify-content:space-between}
.progress-title{font-size:13px;opacity:.92}
.progress-text{font-size:17px;font-weight:700}
.progress-track{height:10px;border-radius:99px;background:rgba(255,255,255,.28);margin-top:10px;overflow:hidden}
.progress-fill{height:100%;width:0;border-radius:99px;background:#fff;transition:width .45s ease}
.progress-hint{font-size:12px;opacity:.92;margin-top:8px}

/* ---------- 主体 ---------- */
.main{
  padding:0 16px calc(120px + env(safe-area-inset-bottom,0px));
  margin-top:-58px;
  position:relative;z-index:5;
}
.habit-list{padding-top:4px}
.habit-card{
  background:var(--card);border-radius:16px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;
  padding:13px 14px;margin-bottom:12px;
  transition:transform .15s;
  animation:cardIn .25s ease;
}
.habit-card:active{transform:scale(.98)}
.habit-emoji{
  width:44px;height:44px;border-radius:50%;background:#F1F3F9;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.habit-card.checked .habit-emoji{background:var(--ok-bg)}
.habit-info{flex:1;min-width:0}
.habit-name{font-size:17px;font-weight:600}
.habit-meta{font-size:12px;color:var(--text-2);margin-top:2px}
.check-btn{
  width:46px;height:46px;border-radius:50%;flex:none;
  border:2.5px solid #D9DEEA;
  display:flex;align-items:center;justify-content:center;
  color:transparent;font-size:22px;font-weight:700;
  transition:all .18s ease;
}
.habit-card.checked .check-btn{
  background:var(--ok);border-color:var(--ok);color:#fff;
  animation:pop .3s ease;
}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes cardIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes banIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

/* 编辑模式 */
.edit-controls{display:none;gap:4px;align-items:center;flex:none}
.habit-card.editing .edit-controls{display:flex}
.habit-card.editing .check-btn{display:none}
.ctrl-btn{
  width:34px;height:34px;border-radius:10px;background:#F1F3F9;color:var(--text-2);
  font-size:15px;display:flex;align-items:center;justify-content:center;
}
.ctrl-btn.del{color:var(--danger)}
.ctrl-btn:active{transform:scale(.92)}

/* 空状态 */
.empty-state{text-align:center;padding:70px 20px 40px;color:var(--text-2)}
.empty-emoji{font-size:54px;margin-bottom:14px}
.empty-title{font-size:18px;color:var(--text);font-weight:700;margin-bottom:6px}
.empty-sub{font-size:13px}

/* 悬浮添加按钮 */
.fab{
  position:fixed;right:20px;bottom:calc(84px + env(safe-area-inset-bottom,0px));
  width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;
  font-size:28px;line-height:1;font-weight:300;
  box-shadow:0 8px 20px rgba(91,124,255,.42);
  z-index:40;transition:transform .15s;
}
.fab:active{transform:scale(.9)}

/* ---------- 底部标签栏 ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));
  z-index:50;
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:var(--text-2);padding:6px 0;border-radius:12px;
}
.tab-ico{font-size:20px;line-height:1}
.tab.active{color:var(--primary);font-weight:600;background:rgba(91,124,255,.09)}

/* ---------- 卡片通用 ---------- */
.card{background:var(--card);border-radius:var(--radius,18px);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.card-title{font-size:15px;margin-bottom:12px}
.hint{font-size:12.5px;color:var(--text-2);margin-top:10px;line-height:1.75}
.btn{
  flex:1;padding:11px 14px;border-radius:12px;font-size:15px;font-weight:600;text-align:center;
  background:#F1F3F9;color:var(--text);transition:transform .1s;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad);color:#fff}
.btn.danger{background:#FFEDEE;color:var(--danger)}
.btn.ghost{background:#F1F3F9;color:var(--text-2)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-row{display:flex;gap:10px;margin-top:14px}

/* 日历 */
.month-nav{display:flex;align-items:center;justify-content:space-between}
.nav-btn{width:34px;height:34px;border-radius:10px;background:#F1F3F9;font-size:20px;color:var(--text);display:flex;align-items:center;justify-content:center}
.nav-btn:active{transform:scale(.92)}
.month-label{font-size:16px;font-weight:700}
.week-row{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:var(--text-2);margin:12px 0 6px}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day-cell{
  position:relative;aspect-ratio:1/1;border-radius:12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:14px;background:#F7F8FC;transition:transform .1s;
}
.day-cell:active{transform:scale(.94)}
.day-cell .day-num{font-weight:600;line-height:1.2}
.day-cell .day-mini{font-size:9.5px;color:var(--text-2);line-height:1.3}
.day-cell.done{background:var(--ok-bg)}
.day-cell.done .day-num{color:var(--ok)}
.day-cell.done .day-mini{color:var(--ok)}
.day-cell.partial{background:var(--warn-bg)}
.day-cell.partial .day-num{color:var(--warn)}
.day-cell.partial .day-mini{color:var(--warn)}
.day-cell.future{opacity:.4}
.day-cell.empty{background:transparent;cursor:default}
.day-cell.today{box-shadow:inset 0 0 0 2px var(--primary)}
.day-cell.selected{background:var(--primary)}
.day-cell.selected .day-num{color:#fff}
.day-cell.selected .day-mini{color:rgba(255,255,255,.9)}
.day-cell.selected.done{background:var(--primary)}
.day-cell.selected.partial{background:var(--primary)}

/* 当天明细 */
.day-detail-title{font-size:15px;font-weight:700;margin-bottom:6px}
.detail-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.detail-item:last-child{border-bottom:none}
.detail-emoji{font-size:18px}
.detail-name{flex:1;min-width:0}
.detail-item .st{color:var(--ok);font-weight:700}
.detail-item .sf{color:#D3D8E4}

/* 坚持统计 */
.streak-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.streak-item:last-child{border-bottom:none}
.streak-emoji{width:38px;height:38px;border-radius:50%;background:#F1F3F9;flex:none;display:flex;align-items:center;justify-content:center;font-size:19px}
.streak-name{flex:1;font-size:15px;font-weight:600;min-width:0}
.streak-nums{font-size:12.5px;color:var(--text-2);text-align:right;line-height:1.7;flex:none}
.streak-nums b{color:var(--warn)}

/* 设置 */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line)}
.setting-row:last-child{border-bottom:none}
.setting-label{font-size:15px}
.time-input{border:1.5px solid var(--line);border-radius:10px;padding:6px 10px;font-size:15px;outline:none}
.time-input:focus{border-color:var(--primary)}
.switch{position:relative;display:inline-block;width:48px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:#D9DEEA;border-radius:99px;transition:.2s}
.slider::before{content:"";position:absolute;width:22px;height:22px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + .slider{background:var(--ok)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.about-card p.hint{margin-top:6px}

/* 弹层 */
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.modal-mask{position:absolute;inset:0;background:rgba(18,24,52,.45)}
.modal-sheet{
  position:relative;width:100%;max-width:520px;
  background:#fff;border-radius:24px 24px 0 0;
  padding:22px 20px calc(26px + env(safe-area-inset-bottom,0px));
  animation:sheetUp .25s ease;
}
.modal-title{font-size:18px;margin-bottom:14px}
.text-input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:16px;outline:none;transition:border-color .2s}
.text-input:focus{border-color:var(--primary)}
.emoji-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin:14px 0;max-height:180px;overflow-y:auto}
.emoji-item{font-size:22px;padding:8px 0;border-radius:12px;text-align:center;background:#F7F8FC;transition:transform .1s}
.emoji-item.active{background:rgba(91,124,255,.14);box-shadow:inset 0 0 0 2px var(--primary);transform:scale(1.05)}

/* 提醒横幅 */
.remind-banner{
  position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:12px;right:12px;max-width:520px;margin:0 auto;
  z-index:150;border-radius:16px;
  background:linear-gradient(135deg,#FFB020,#FF7A59);color:#fff;
  padding:13px 14px;display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 24px rgba(255,122,89,.4);
  animation:banIn .3s ease;
}
.remind-text{flex:1;font-size:14px;font-weight:600;line-height:1.5}
.remind-close{background:rgba(255,255,255,.28);padding:6px 12px;border-radius:99px;font-size:13px;color:#fff;flex:none}

/* 轻提示 */
.toast{
  position:fixed;top:calc(16px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);
  background:rgba(32,38,58,.92);color:#fff;padding:10px 18px;border-radius:99px;
  font-size:14px;z-index:200;white-space:nowrap;
  animation:toastIn .25s ease;
}

@media (min-width:560px){
  .fab{right:calc(50% - 240px)}
}

/* 确认弹层 */
.confirm-sheet{text-align:center}
.confirm-text{font-size:15px;color:var(--text-2);line-height:1.7;padding:4px 8px 8px}

/* ---------- 更接近原生 App 的触控体验 ---------- */
body{
  -webkit-user-select:none;
  user-select:none;
  overscroll-behavior-y:none;
}
input, textarea{
  -webkit-user-select:text;
  user-select:text;
}
button, .habit-card, .day-cell, .emoji-item, .fab, .tab, .nav-btn, .ctrl-btn, .check-btn{
  touch-action:manipulation;
}

/* 打卡频率选择 */
.freq-row{display:flex;align-items:center;justify-content:space-between;margin:2px 0 14px}
.freq-label{font-size:15px}
.freq-select{border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font-size:15px;outline:none;background:#fff;color:var(--text)}
.freq-select:focus{border-color:var(--primary)}

/* 未到打卡日 */
.habit-card.notdue{opacity:.62}
.check-btn.disabled,.check-btn:disabled{border-style:dashed;border-color:#D9DEEA;color:#D3D8E4;cursor:not-allowed}
.detail-item .sf.dim{color:#C4CAD8}