*{margin:0;padding:0;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:#e9e9ee;
  color:#1c1c1e;
  display:flex;
  justify-content:center;
}
/* ========== App 外壳：桌面端居中显示手机宽度 ========== */
.app-shell{
  width:100%;
  max-width:430px;
  min-height:100vh;
  background:#f2f2f7;
  box-shadow:0 0 40px rgba(0,0,0,.12);
  position:relative;
}

/* ========== App 顶部导航栏（大标题风格） ========== */
.app-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(242,242,247,.92);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  padding:calc(env(safe-area-inset-top,0px) + 18px) 20px 10px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.app-header .app-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.5px;
}
.app-header .app-subtitle{
  font-size:13px;
  color:#8e8e93;
  margin-top:2px;
}

/* ========== 主内容区 ========== */
.app-body{padding:14px 14px 40px;}

/* 顶部统计卡片：App 风格分组卡片 */
.stat-card{
  background:#ffffff;
  border-radius:20px;
  padding:20px 16px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  margin-bottom:14px;
}
.stat-row{display:flex;gap:12px;align-items:flex-start}
.stat-item{flex:1;text-align:center;padding:8px 2px;}
.stat-item:active{transform:scale(.97);}
.stat-item{transition:transform .12s;}
.stat-label{font-size:14px;color:#8e8e93;margin-bottom:6px;font-weight:500}
.stat-label-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:14px;
  color:#8e8e93;
  margin-bottom:6px;
  font-weight:500;
}
.stat-value{font-size:26px;font-weight:800;color:#007aff;letter-spacing:-.3px}
.stat-value-row{display:flex;align-items:center;justify-content:center;gap:6px;}
.eye-icon{
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  color:#8e8e93;
  transition:opacity .12s, transform .12s;
  display:inline-flex;
  align-items:center;
}
.eye-icon:active{opacity:.6;transform:scale(.9);}
.eye-icon svg{display:block;}

.price-set-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.06);
  flex-wrap:wrap;
}
.price-text{font-size:15px;color:#3a3a3c;font-weight:500}
.price-btn{
  padding:9px 18px;
  background:#007aff;
  color:#fff;border:none;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  box-shadow:0 4px 12px rgba(0,122,255,.28);
  transition:transform .12s, box-shadow .12s;
  cursor:pointer;
}
.price-btn:active{transform:scale(.95);box-shadow:0 2px 6px rgba(0,122,255,.28);}

/* ========== 日历分区卡片 ========== */
.calendar-card{
  background:#ffffff;
  border-radius:20px;
  padding:14px 10px 12px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.calendar-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  margin:2px 0 12px;
}
.calendar-nav button{
  border:none;
  background:#f2f2f7;
  width:36px;height:36px;
  border-radius:50%;
  font-size:17px;
  cursor:pointer;
  font-weight:700;
  color:#007aff;
  transition:transform .12s, background .12s;
}
.calendar-nav button:active{transform:scale(.88);background:#e3e3e8;}
#monthTitle{
  font-size:18px;
  font-weight:700;
  min-width:130px;
  text-align:center;
}
.calendar-week{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  margin-bottom:8px;
  color:#8e8e93;
  font-size:13px;
  font-weight:600;
}
.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 2px}
.day-item{
  min-height:56px;
  background:transparent;
  border-radius:12px;
  text-align:center;
  padding:5px 1px 4px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  font-size:15px;
  transition:transform .12s, background .12s;
}
.day-top{display:flex;align-items:center;justify-content:center;gap:2px}
.day-side{font-size:9px;font-weight:700;line-height:1;width:10px;color:#8e8e93}
.day-side.tag-work{color:#ff9500}
.day-side.tag-rest{color:#ff6b6b}
.day-num{font-size:15px;line-height:1.15}
.day-tag{writing-mode:vertical-rl;font-size:9px;letter-spacing:1px;line-height:1;color:#8e8e93;max-height:46px;overflow:hidden}
.day-tag.tag-festival{color:#ff3b30;font-weight:700}
.day-tag.tag-term{color:#bf5af2}
.day-tag.tag-work{color:#ff9500;font-weight:700}
.day-tag.tag-rest{color:#ff6b6b;font-weight:700}
.day-item .hour{font-size:11px;color:#8e8e93;margin-top:3px;line-height:1}
.day-item:active{transform:scale(.92);background:#e9e9ee;}
.day-item.active{background:#e3f0ff}
.day-item.active .day-num{color:#007aff;font-weight:700}
.day-item.active .hour{font-size:12px;color:#007aff}
.day-item.selected{border:2px solid #007aff}
.day-item.today{
  background:#007aff !important;
  border:2px solid #007aff !important;
  box-shadow:0 4px 12px rgba(0,122,255,.35);
}
.day-item.today .day-num{color:#ffffff !important;font-weight:700 !important}
.day-item.today .hour{color:#ffffff !important;opacity:.95 !important}
.day-item.today .day-tag{color:#ffffff !important;opacity:.95 !important}
.day-item.today .day-side{color:#ffffff !important;opacity:.95 !important}
.day-empty{background:transparent}

/*弹窗内工时数字醒目加粗加大*/
.modal-hour-value{
    font-weight:800;
    font-size:20px;
    color:#007aff;
}

/* 深夜模式切换：App 风格开关行 */
.dark-toggle-wrap{
  margin:14px 14px 0;
}
#darkToggleBtn{
  width:100%;
  border:none;
  background:#ffffff;
  color:#3a3a3c;
  border-radius:16px;
  padding:13px 16px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:transform .12s;
}
#darkToggleBtn:active{transform:scale(.97);}

/*备份导入导出按钮区域*/
.backup-btn-wrap{
  margin:12px 14px 0;
  display:flex;
  gap:10px;
}
.backup-btn{
  flex:1;
  width:100%;
  border:none;
  background:#ffffff;
  color:#3a3a3c;
  border-radius:16px;
  padding:13px 10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  transition:transform .12s;
}
.backup-btn:active{transform:scale(.97);}
#importFileInput{
  display:none;
}

.version-tip{
  font-size:12px;
  color:#aeaeb2;
  text-align:center;
  padding:16px 4px 4px;
}
.copyright-tip{
  text-align:center;
  font-size:12px;
  color:#aeaeb2;
  padding:2px 4px calc(env(safe-area-inset-bottom,0px) + 14px);
}

/* ========== 弹窗（App 风格） ========== */
.modal{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.45);
  display:none;
  z-index:99;
}
.modal.show{display:block;}

/* 底部弹窗 */
.bottom-modal .modal-dialog{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  max-width:430px;
  background:#ffffff;
  border-radius:24px 24px 0 0;
  max-height:82vh;
  display:flex;
  flex-direction:column;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
}
.bottom-modal .modal-scroll-body{
  padding:20px 20px 8px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.bottom-modal .modal-footer{padding:12px 20px 16px}

/* 拖拽小横条 */
.modal-grabber{
  width:40px;height:5px;border-radius:3px;
  background:#d1d1d6;
  margin:0 auto 12px;
}

/* 中部弹窗：改为底部弹出，跟随手机输入法顶端 */
.center-modal .modal-dialog{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:430px;
  background:#ffffff;
  border-radius:24px 24px 0 0;
  padding:22px 20px calc(env(safe-area-inset-bottom,0px) + 12px);
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  transition:bottom .15s ease-out;
}

.modal-title{font-size:19px;margin-bottom:8px;font-weight:700}
.tip-text{color:#8e8e93;font-size:13px;margin-bottom:16px}

/* 工时键盘 */
.keyboard{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:16px 0}
.key-btn{
  padding:13px 2px;
  border:none;
  border-radius:14px;
  background:#f2f2f7;
  font-size:19px;
  color:#3a3a3c;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s, background .1s;
}
.key-btn:active{transform:scale(.92);}
.key-btn.selected{background:#007aff;color:#fff;box-shadow:0 4px 12px rgba(0,122,255,.3);}

.input-line{margin:14px 0}
.input-line label{display:block;margin-bottom:6px;color:#636366;font-size:14px;font-weight:500}
.input-line input,
.input-line textarea{
  width:100%;
  padding:13px 14px;
  border:none;
  background:#f2f2f7;
  border-radius:14px;
  font-size:16px;
  outline:none;
}
.input-line input:focus,
.input-line textarea:focus{background:#e9e9ee;}

.btns-row{display:flex;gap:12px}
.btns-row button{
  flex:1;
  padding:14px;
  border-radius:14px;
  border:none;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  transition:transform .12s, opacity .12s;
}
.btns-row button:active{transform:scale(.96);opacity:.85;}
.btn-cancel{background:#f2f2f7;color:#007aff}
.btn-save{background:#007aff;color:#fff;box-shadow:0 4px 14px rgba(0,122,255,.3)}

/* 工时统计区块点击 */
.clickable-stat {
  cursor: pointer;
  border-radius: 14px;
  padding: 8px 2px;
  transition: background .15s, transform .12s;
}
.clickable-stat:active {
  background: #eaf3ff;
  transform:scale(.97);
}

/* ========== 页面切换 ========== */
.page-wrap{min-height:100vh;background:#f2f2f7}
.view-calendar{display:block}
.view-list{
  display:none;
  min-height:100vh;
  padding:0 14px;
}
.page-hidden{display:none !important}

/* 明细页面 */
.back-bar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(242,242,247,.92);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 12px 12px;
  gap:16px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
#listMonthTitle{
  font-size:18px;
  font-weight:700;
  color:#1c1c1e;
  min-width:150px;
  text-align:center;
}
.list-summary{
  background:#ffffff;
  padding:18px 16px;
  margin:12px 0;
  border-radius:18px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:17px;
  font-weight:600;
}
.list-summary .sum-value{color:#007aff;font-weight:800}
.list-scroll-wrap{
  height: calc(100vh - 200px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:30px;
}
.record-item{
  background:#fff;
  padding:16px 14px;
  border-bottom:1px solid #f2f2f7;
  display:flex;
  justify-content:space-between;
  border-radius:0;
}
.record-item:first-child{border-radius:18px 18px 0 0}
.record-item:last-child{border-radius:0 0 18px 18px;border-bottom:none}
.record-left{font-size:17px;font-weight:600}
.record-right{text-align:right}
.record-right .row1{font-size:17px;font-weight:600}
.record-right .money-text{color:#007aff;}
.record-right .row2{font-size:14px;color:#8e8e93;margin-top:5px}

.empty-tip{text-align:center;padding:60px 0;color:#aeaeb2;font-size:16px}

/* 明细翻页圆形按钮 */
.list-nav-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:#007aff;
  color:#ffffff;
  font-size:19px;
  font-weight:700;
  border:none;
  box-shadow:0 4px 12px rgba(0,122,255,.3);
  cursor:pointer;
  transition:transform .12s;
}
.list-nav-btn:active{transform:scale(.88);}

.readonly-note-input{
  width:100%;
  background:#f2f2f7;
  border-radius:14px;
  border:none;
  padding:13px 14px;
  font-size:15px;
  color:#3a3a3c;
  cursor:pointer;
}

/* ======================== 深夜暗色模式（修复文字颜色） ======================== */
body.dark-mode{background:#0a0a0f;color:#f2f2f7}
body.dark-mode .app-shell{background:#0a0a0f}
body.dark-mode .app-header{
  background:rgba(10,10,15,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.dark-mode .app-header .app-title{color:#f2f2f7;}
body.dark-mode .app-header .app-subtitle{color:#98989f}
body.dark-mode .page-wrap{background:#0a0a0f}
body.dark-mode .calendar-card,
body.dark-mode .stat-card{
  background:#1c1c22;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
body.dark-mode .stat-label{color:#98989f}
body.dark-mode .stat-value{color:#0a84ff}
body.dark-mode .eye-icon{color:#98989f;}
body.dark-mode .day-item:active{background:#2c2c34}
body.dark-mode .day-item{background:#1c1c22}
body.dark-mode .day-item .day-num{color:#f2f2f7;}
body.dark-mode .day-item.active{background:#12263d}
body.dark-mode .day-item.active .day-num{color:#5ea9ff}
body.dark-mode .day-item.active .hour{color:#5ea9ff}
body.dark-mode .day-item .hour{color:#98989f}
body.dark-mode .day-tag{color:#98989f}
body.dark-mode .day-tag.tag-festival{color:#ff6b6b}
body.dark-mode .day-tag.tag-term{color:#da8fff}
body.dark-mode .day-tag.tag-work{color:#ffb340}
body.dark-mode .day-tag.tag-rest{color:#ff7b72}
body.dark-mode .day-side.tag-work{color:#ffb340}
body.dark-mode .day-side.tag-rest{color:#ff7b72}
body.dark-mode .day-side{color:#98989f}
body.dark-mode .day-item.today .day-tag{color:#ffffff !important;opacity:.95}
body.dark-mode .day-item.selected{border:2px solid #5ea9ff}
body.dark-mode .calendar-week{color:#98989f}
body.dark-mode .calendar-nav button{background:#2c2c34;color:#5ea9ff}
body.dark-mode .calendar-nav button:active{background:#3a3a44}
body.dark-mode #monthTitle{color:#f2f2f7}
body.dark-mode .price-text{color:#d1d1d6}
body.dark-mode .price-btn{background:#0a84ff;box-shadow:0 4px 12px rgba(10,132,255,.3)}
body.dark-mode #darkToggleBtn{background:#1c1c22;color:#f2f2f7;box-shadow:0 4px 16px rgba(0,0,0,.4)}
body.dark-mode .backup-btn{background:#1c1c22;color:#f2f2f7;box-shadow:0 4px 16px rgba(0,0,0,.4)}
body.dark-mode .version-tip,
body.dark-mode .copyright-tip{color:#636366}
body.dark-mode .modal{background:rgba(0,0,0,.7)}
body.dark-mode .bottom-modal .modal-dialog{background:#1c1c22}
body.dark-mode .center-modal .modal-dialog{background:#1c1c22;box-shadow:0 16px 44px rgba(0,0,0,.5)}
body.dark-mode .modal-title{color:#f2f2f7;}
body.dark-mode .modal-grabber{background:#3a3a44}
body.dark-mode .key-btn{background:#2c2c34;color:#f2f2f7}
body.dark-mode .key-btn.selected{background:#0a84ff;color:#fff;box-shadow:0 4px 12px rgba(10,132,255,.3)}
body.dark-mode .input-line label{color:#d1d1d6;}
body.dark-mode .input-line input,
body.dark-mode .input-line textarea{background:#2c2c34;color:#f2f2f7}
body.dark-mode .input-line input:focus,
body.dark-mode .input-line textarea:focus{background:#3a3a44}
body.dark-mode .btn-cancel{background:#2c2c34;color:#0a84ff}
body.dark-mode .price-set-row{border-top:1px solid rgba(255,255,255,.08)}
body.dark-mode .back-bar{
  background:rgba(10,10,15,.9);
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.dark-mode #listMonthTitle{color:#f2f2f7}
body.dark-mode .list-summary{background:#1c1c22;color:#f2f2f7}
body.dark-mode .list-summary .sum-value{color:#0a84ff}
body.dark-mode .record-item{background:#1c1c22;border-bottom:1px solid #2c2c34}
body.dark-mode .record-left{color:#f2f2f7;}
body.dark-mode .record-right .row1{color:#f2f2f7;}
body.dark-mode .record-right .money-text{color:#0a84ff;}
body.dark-mode .record-right .row2{color:#98989f}
body.dark-mode .empty-tip{color:#636366}
body.dark-mode .tip-text{color:#98989f}
body.dark-mode .clickable-stat:active{background:#12263d}
body.dark-mode .list-nav-btn{background:#0a84ff;box-shadow:0 4px 12px rgba(10,132,255,.3)}
body.dark-mode .calendar-card{background:#1c1c22}
body.dark-mode .readonly-note-input{
  background:#2c2c34;
  color:#f2f2f7;
}
body.dark-mode .modal-hour-value{
    color:#0a84ff;
}