:root {
  --bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --card-bg: rgba(255,255,255,0.92);
  --primary: #667eea;
  --text: #2d3436;
  --text-light: #636e72;
  --expense: #ff6b6b;
  --income: #2ecc71;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(0,0,0,0.10);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--text);
  overflow-x: hidden;
  user-select: none;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 12px 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 全局按钮触控优化 */
button, .cat-btn, .nav-btn, .nav-btn-sm, .stats-sub-btn,
.action-btn, .budget-btn, .record-btn, .np-key,
.wallpaper-thumb, .catchup-btn, .wp-size-btn {
  touch-action: manipulation;
}
.app-header { text-align:center; margin-bottom:12px; padding:12px 0; }
.app-title { font-size:22px; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,0.2); }
.header-subtitle { font-size:12px; color:rgba(255,255,255,0.7); margin-top:2px; }

.month-nav { display:flex; justify-content:center; align-items:center; gap:16px; margin-bottom:12px; }
.nav-btn { background:rgba(255,255,255,0.15); border:none; color:#fff; width:42px; height:42px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.nav-btn:active { background:rgba(255,255,255,0.3); transform:scale(0.92); }
.month-text { color:#fff; font-size:17px; font-weight:600; min-width:130px; text-align:center; }

.overview-card { background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius); padding:16px 12px; display:flex; justify-content:space-around; box-shadow:var(--shadow); margin-bottom:12px; transition:background 0.4s ease; }
.overview-item { text-align:center; flex:1; }
.overview-label { font-size:11px; color:var(--text-light); display:block; margin-bottom:2px; }
.overview-amount { font-size:18px; font-weight:700; }
.overview-amount.expense { color:var(--expense); }
.overview-amount.income { color:var(--income); }
.overview-stats { font-size:16px; font-weight:700; color:var(--primary); }

.tab-bar { display:flex; background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow); transition:background 0.4s ease; }
.tab-btn { flex:1; padding:12px 4px; background:transparent; border:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; }
.tab-btn:active { background:rgba(0,0,0,0.05); }
.tab-btn.active { background:var(--primary); color:#fff; }
.tab-btn.active:active { opacity:0.9; }
.tab-btn.active .tab-label { color:#fff; }
.tab-icon { font-size:22px; }
.tab-label { font-size:11px; color:var(--text-light); font-weight:500; }
.tab-content { display:none; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); }
.tab-content.active { display:block; animation:fadeIn 0.25s ease; }

/* 记一笔卡片 */
.quick-record-card { background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius); padding:24px 16px 20px; box-shadow:var(--shadow); text-align:center; transition:background 0.4s ease; }

/* 工具栏：日期 + 分类折叠按钮 */
.record-toolbar { display:flex; gap:8px; margin-bottom:20px; justify-content:center; }
.record-toolbar .catchup-row { margin-bottom:0; }
.quick-cat-toggle {
  display:flex; align-items:center; gap:5px;
  background:#f0f2f5; border:none; border-radius:14px;
  padding:0 16px; font-size:15px; font-weight:600;
  cursor:pointer; transition:background 0.2s;
  min-height:52px; white-space:nowrap; flex-shrink:0;
}
.quick-cat-toggle:active { background:#e4e6eb; transform:scale(0.96); }
.quick-cat-toggle .arrow {
  font-size:14px; color:var(--text-light);
  transition:transform 0.3s ease;
}
.quick-cat-toggle.open .arrow { transform:rotate(180deg); }
.quick-cat-toggle.open { background:#eef1ff; color:var(--primary); }

/* 分类折叠面板 */
.quick-cat-wrap {
  overflow:hidden;
  transition:max-height 0.35s ease, opacity 0.3s ease, margin 0.3s ease;
  max-height:0; opacity:0; margin-bottom:0;
}
.quick-cat-wrap.open {
  max-height:800px; opacity:1; margin-bottom:20px;
}
.quick-cat-wrap .category-row { margin-bottom:0; }
.quick-cat-wrap .cat-mgr-list { margin-top:12px; padding-top:12px; border-top:1px solid #eee; }
.cat-mgr-toggle-btn {
  display:block; width:100%; margin-top:10px; padding:10px;
  background:none; border:1px dashed #ccc; border-radius:10px;
  font-size:13px; color:var(--text-light); cursor:pointer;
  transition:all 0.15s;
}
.cat-mgr-toggle-btn:active { background:#f0f2f5; border-color:#999; }

/* 补记按钮 */
.catchup-row { position:relative; display:flex; justify-content:center; }
.catchup-btn { display:flex; align-items:center; gap:8px; background:#f0f2f5; border:none; border-radius:14px; padding:14px 28px; font-size:17px; font-weight:600; cursor:pointer; transition:background 0.2s; min-height:52px; }
.catchup-btn:active { background:#e4e6eb; transform:scale(0.96); }
.catchup-arrow { font-size:14px; color:var(--text-light); }
.catchup-menu { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#fff; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,0.15); overflow:hidden; z-index:100; min-width:180px; }
.catchup-option { display:block; width:100%; padding:14px 20px; border:none; background:#fff; font-size:15px; cursor:pointer; text-align:left; }
.catchup-option:active { background:#f0f2f5; }
.catchup-option + .catchup-option { border-top:1px solid #eee; }

.category-row { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:20px; }
.cat-btn { padding:12px 4px; border:2px solid #e0e0e0; border-radius:12px; background:#f8f9fa; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s; }
.cat-btn:active { transform:scale(0.94); }
.cat-btn.active { border-color:var(--primary); background:#eef1ff; color:var(--primary); font-weight:600; }

.big-record-btn { width:100%; padding:22px 16px; font-size:22px; font-weight:700; background:linear-gradient(135deg, #667eea, #764ba2); color:#fff; border:none; border-radius:16px; cursor:pointer; box-shadow:0 8px 28px rgba(102,126,234,0.4); transition:transform 0.15s, box-shadow 0.2s; min-height:64px; margin-top:4px; }
.big-record-btn:active { transform:scale(0.95); box-shadow:0 4px 12px rgba(102,126,234,0.3); }
.quick-hint { font-size:12px; color:var(--text-light); margin-top:12px; }

/* 记录列表 */
.records-list { background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius); padding:12px 16px; box-shadow:var(--shadow); transition:background 0.4s ease; }
.record-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #eee; }
.record-item:last-child { border-bottom:none; }
.record-left { flex:1; min-width:0; }
.record-cat { font-size:14px; font-weight:600; }
.record-date { font-size:11px; color:var(--text-light); }
.record-right { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.record-amount { font-size:16px; font-weight:700; white-space:nowrap; }
.record-amount.expense { color:var(--expense); }
.record-amount.income { color:var(--income); }
.record-btn { background:none; border:none; font-size:16px; cursor:pointer; padding:4px; border-radius:8px; }
.record-btn:active { background:rgba(0,0,0,0.05); }
.record-btn.edit { color:var(--primary); }
.record-btn.delete { color:var(--expense); }

/* 编辑面板 */
.edit-panel { width:100%; max-width:480px; background:#fff; border-radius:20px 20px 0 0; padding:20px 16px 30px; box-shadow:0 -8px 30px rgba(0,0,0,0.15); animation:slideUp 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.edit-body { margin-top:10px; }
.edit-field { margin-bottom:16px; }
.edit-field label { display:block; font-size:13px; font-weight:600; color:var(--text-light); margin-bottom:6px; }
.edit-input { width:100%; padding:12px 14px; border:2px solid #e0e0e0; border-radius:12px; font-size:20px; font-weight:600; text-align:center; outline:none; transition:border-color 0.2s; }
.edit-input:focus { border-color:var(--primary); }
.edit-cats { display:flex; flex-wrap:wrap; gap:8px; }
.edit-cats .cat-btn { padding:10px 14px; border:2px solid #e0e0e0; border-radius:12px; background:#f8f9fa; font-size:14px; font-weight:500; cursor:pointer; transition:all 0.2s; }
.edit-cats .cat-btn:active { transform:scale(0.94); }
.edit-cats .cat-btn.active { border-color:var(--primary); background:#eef1ff; color:var(--primary); font-weight:600; }
.edit-actions { display:flex; gap:12px; margin-top:20px; }
.edit-btn { flex:1; padding:14px; border:none; border-radius:14px; font-size:16px; font-weight:600; cursor:pointer; transition:transform 0.15s; }
.edit-btn:active { transform:scale(0.95); }
.edit-btn-cancel { background:#f0f2f5; color:var(--text); }
.edit-btn-save { background:linear-gradient(135deg, #667eea, #764ba2); color:#fff; }

/* 统计 */
.stats-card { background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); transition:background 0.4s ease; }

/* 统计子标签 — 大触控区域 */
.stats-sub-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.stats-sub-btn {
  flex: 1;
  padding: 12px 0;
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  background: #f8f9fa;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.stats-sub-btn:active {
  transform: scale(0.95);
  background: #eef1ff;
}
.stats-sub-btn.active {
  border-color: var(--primary);
  background: #eef1ff;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(102,126,234,0.2);
}

/* 日/年统计条目 — 移动端易读 */
.stats-day-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.stats-day-item:last-child { border-bottom: none; }
.stats-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.stats-day-label {
  font-size: 14px;
  font-weight: 600;
}
.stats-day-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.stats-day-bar-label {
  font-size: 11px;
  color: var(--text-light);
  min-width: 28px;
  flex-shrink: 0;
}
.stats-day-bar-wrap {
  flex: 1;
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}
.stats-day-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s;
}
.stats-day-amount {
  font-size: 13px;
  font-weight: 700;
  min-width: 78px;
  text-align: right;
  flex-shrink: 0;
}

/* 年统计月份条目 */
.stats-month-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}
.stats-month-item:last-child { border-bottom: none; }
.stats-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.stats-month-label {
  font-size: 14px;
  font-weight: 600;
}

/* 年导航按钮 — 大触控 */
.nav-btn-sm {
  background: var(--primary);
  border: none;
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, opacity 0.15s;
}
.nav-btn-sm:active {
  transform: scale(0.9);
  opacity: 0.8;
}
.stats-item { display:flex; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.stats-item:last-child { border-bottom:none; }
.stats-icon { font-size:20px; min-width:28px; }
.stats-name { font-size:14px; font-weight:500; white-space:nowrap; }
.stats-bar-wrap { flex:1; height:10px; background:#eee; border-radius:5px; overflow:hidden; margin:0 4px; }
.stats-bar { height:100%; border-radius:5px; transition:width 0.5s; }
.stats-info { min-width:64px; text-align:right; font-size:12px; color:var(--text-light); flex-shrink:0; }
.stats-percent { font-weight:600; color:var(--text); }

/* 统计分类展开明细 */
.stats-cat-detail {
  display: none;
  padding: 6px 0 10px 36px;
  font-size: 13px;
}
.stats-cat-detail.open {
  display: block;
}
.stats-detail-row {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e8e8e8;
  gap: 8px;
}
.stats-detail-row:last-child {
  border-bottom: none;
}
.stats-detail-date {
  font-size: 11px;
  color: var(--text-light);
  min-width: 44px;
  flex-shrink: 0;
  background: #f0f0f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}
.stats-detail-amount {
  font-weight: 700;
  font-size: 14px;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
}
.stats-detail-note {
  font-size: 12px;
  color: var(--text-light);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}
.stats-detail-note:empty {
  display: none;
}
.stats-cat-detail .stats-detail-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.stats-day-detail {
  margin-top: 4px;
}

/* 设置 */
.settings-card { background:var(--card-bg); backdrop-filter:blur(20px); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); transition:background 0.4s ease; }
.settings-card h3 { font-size:15px; margin-bottom:10px; }
.budget-row { display:flex; gap:8px; margin-bottom:12px; }
.budget-input { flex:1; padding:10px; border:2px solid #e0e0e0; border-radius:10px; font-size:16px; text-align:center; font-weight:600; outline:none; }
.budget-input:focus { border-color:var(--primary); }
.budget-btn, .action-btn { padding:12px 20px; background:var(--primary); color:#fff; border:none; border-radius:12px; font-size:14px; font-weight:600; cursor:pointer; min-height:44px; }
.budget-btn:active, .action-btn:active { transform:scale(0.94); }
.settings-card hr { margin:16px 0; border:none; border-top:1px solid #eee; }

/* 设置页中的输入框（登录/注册） */
.settings-input {
  width:100%; padding:12px 14px;
  border:2px solid #e0e0e0; border-radius:10px;
  font-size:16px; outline:none; transition:border-color 0.2s;
  background:#fafafa; box-sizing:border-box;
  margin-bottom:10px;
}
.settings-input:focus { border-color:var(--primary); background:#fff; }
.settings-error {
  background:#fff0f0; color:#e74c3c; font-size:13px;
  padding:8px 12px; border-radius:8px; margin-bottom:10px;
}
.sync-userinfo {
  padding:10px 12px; background:#f0f2f5; border-radius:10px;
  margin-bottom:12px; font-size:14px;
}

/* ===== 壁纸 ===== */
.wallpaper-bg {
  position:fixed; top:0; left:0; right:0; bottom:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 0.8s ease, transform 0.8s ease;
  transform:scale(1.05);
}
body.wp-active .wallpaper-bg {
  transform:scale(1);
}

/* 折叠区 */
.collapsible-section {
  margin-bottom:4px;
  border-radius:12px;
  transition:background 0.2s;
}
.collapsible-header {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:14px 16px; margin:0 -16px;
  background:none; border:none; border-radius:12px;
  font-size:15px; font-weight:600; cursor:pointer; color:var(--text);
  text-align:left; transition:background 0.2s, color 0.2s;
}
.collapsible-header:hover { background:rgba(0,0,0,0.03); }
.collapsible-header:active { background:rgba(0,0,0,0.06); }
.collapsible-header .ri { font-size:18px; vertical-align:-3px; margin-right:4px; }
.collapsible-arrow {
  font-size:16px; color:var(--text-light);
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.collapsible-arrow.open { transform:rotate(180deg); }
.collapsible-body {
  overflow:hidden;
  transition:max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease, transform 0.35s ease;
  max-height:0; opacity:0;
  transform:translateY(-8px);
}
.collapsible-body.open {
  max-height:900px; opacity:1;
  transform:translateY(0);
}

/* 壁纸工具栏 */
.wp-toolbar {
  display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
}
.wp-gallery-btn {
  display:flex; align-items:center; gap:4px;
  background:var(--primary); color:#fff; border:none; border-radius:8px;
  padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer;
  transition:transform 0.2s, box-shadow 0.2s;
}
.wp-gallery-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(91,95,255,0.35);
}
.wp-gallery-btn:active { transform:scale(0.92); box-shadow:none; }
.wp-gallery-btn .ri { font-size:14px; }
body.wp-active {
  --card-alpha: 0.30;
}
body.wp-active #app .app-header .app-title,
body.wp-active .month-text,
body.wp-active .nav-btn {
  text-shadow:0 2px 12px rgba(0,0,0,0.5);
}
body.wp-active .overview-card,
body.wp-active .tab-bar,
body.wp-active .quick-record-card,
body.wp-active .records-list,
body.wp-active .stats-card,
body.wp-active .settings-card {
  background:rgba(255,255,255,var(--card-alpha, 0.88));
  backdrop-filter:blur(var(--card-blur, 12px));
}

/* 壁纸缩略图网格 */
.wallpaper-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-bottom:4px;
}
.wallpaper-thumb {
  aspect-ratio:16/10;
  border-radius:10px;
  background-size:cover;
  background-position:center;
  border:3px solid transparent;
  cursor:pointer;
  transition:border-color 0.25s, transform 0.2s, box-shadow 0.2s;
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.wallpaper-thumb::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(0,0,0,0);
  transition:background 0.25s;
  border-radius:7px;
}
.wallpaper-thumb:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
}
.wallpaper-thumb:hover::after { background:rgba(0,0,0,0.04); }
.wallpaper-thumb:active { transform:scale(0.94); box-shadow:none; }
.wallpaper-thumb.active { border-color:var(--primary); }
.wallpaper-thumb .check {
  position:absolute; top:6px; right:6px;
  background:var(--primary); color:#fff;
  width:22px; height:22px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  font-size:12px;
  box-shadow:0 2px 6px rgba(91,95,255,0.4);
  animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.wallpaper-thumb.active .check { display:flex; }
.wallpaper-thumb .wp-del {
  position:absolute; bottom:6px; right:6px;
  background:rgba(220,53,69,0.85); color:#fff;
  width:24px; height:24px; border-radius:50%; border:none;
  display:none; align-items:center; justify-content:center;
  font-size:11px; cursor:pointer; z-index:2;
  transition:background 0.2s, transform 0.15s;
  box-shadow:0 2px 6px rgba(220,53,69,0.3);
}
.wallpaper-thumb .wp-del:hover { background:#dc3545; transform:scale(1.15); }
.wallpaper-thumb:hover .wp-del,
.wallpaper-thumb:active .wp-del,
.wallpaper-thumb .wp-del.show { display:flex; }

@keyframes popIn {
  0% { transform:scale(0); opacity:0; }
  100% { transform:scale(1); opacity:1; }
}

/* 滑块（透明度/模糊） */
.wp-slider {
  -webkit-appearance:none; width:100%; height:5px;
  border-radius:3px; background:linear-gradient(90deg, #e0e0e0, #d0d0d8); outline:none;
  transition:background 0.2s;
}
.wp-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--primary);
  cursor:pointer; box-shadow:0 2px 8px rgba(91,95,255,0.35);
  transition:transform 0.2s, box-shadow 0.2s;
}
.wp-slider::-webkit-slider-thumb:hover {
  transform:scale(1.15);
  box-shadow:0 3px 12px rgba(91,95,255,0.5);
}
.wp-slider:active::-webkit-slider-thumb {
  transform:scale(1.2);
}
.wp-size-btn.active {
  background:var(--primary) !important;
  color:#fff;
}

/* 数字键盘 & 弹窗遮罩 */
.numpad-overlay {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:9999; align-items:flex-end; justify-content:center;
  animation:fadeIn 0.2s ease;
}
.numpad { width:100%; max-width:480px; background:#fff; border-radius:20px 20px 0 0; padding:20px 16px 30px; box-shadow:0 -8px 30px rgba(0,0,0,0.15); animation:slideUp 0.25s cubic-bezier(0.34,1.56,0.64,1); }
.numpad-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.numpad-header span { font-size:15px; font-weight:600; }
.numpad-close { background:none; border:none; font-size:20px; color:var(--text-light); cursor:pointer; padding:2px 6px; }
.numpad-display { background:#f0f2f5; border-radius:12px; padding:12px 16px; text-align:right; font-size:34px; font-weight:700; color:var(--text); margin-bottom:12px; min-height:54px; letter-spacing:2px; }
.numpad-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.np-key { padding:16px 0; border:none; border-radius:12px; background:#f0f2f5; font-size:24px; font-weight:500; cursor:pointer; color:var(--text); min-height:52px; display:flex; align-items:center; justify-content:center; }
.np-key:active { transform:scale(0.9); background:#dde0e5; }
.np-key-back { background:#ffeaa7; font-size:22px; }
.np-key-back:active { background:#fdcb6e; }
.np-key-clear { background:#fab1a0; color:#d63031; }
.np-key-clear:active { background:#e17055; color:#fff; }
.np-key-zero { grid-column:span 2; }
.np-key-confirm { background:linear-gradient(135deg, #667eea, #764ba2); color:#fff; font-size:28px; }
.np-key-confirm:active { transform:scale(0.9); opacity:0.9; }

/* 备注输入行 */
.numpad-note-row {
  display:flex; align-items:center; gap:6px;
  background:#f8f9fa; border-radius:10px;
  padding:10px 14px; margin-bottom:12px;
  cursor:text; min-height:40px;
  border:1.5px solid transparent;
  transition:border-color 0.2s, background 0.2s;
}
.numpad-note-row.active {
  border-color:var(--primary);
  background:#eef1ff;
}
.numpad-note-icon { font-size:14px; color:var(--text-light); flex-shrink:0; }
.numpad-note-placeholder { font-size:14px; color:#b0b0b8; }
.numpad-note-text { font-size:14px; color:var(--text); flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.numpad-note-cursor {
  display:none; width:2px; height:18px;
  background:var(--primary); animation:blink 1s step-end infinite;
}
.numpad-note-row.active .numpad-note-cursor { display:inline-block; }
@keyframes blink { 50% { opacity:0; } }

/* 文字输入模式（原生输入法） */
.numpad-text-mode {
  padding:20px 0 10px;
}
.numpad-text-input-wrap {
  background:#f0f2f5; border-radius:12px;
  padding:4px 16px; margin-bottom:12px;
}
.numpad-text-input {
  width:100%; border:none; background:transparent;
  font-size:20px; padding:12px 0; outline:none;
  color:var(--text); font-family:inherit;
}
.numpad-text-input::placeholder { color:#b0b0b8; }
.numpad-text-actions {
  display:grid; grid-template-columns:1fr 2fr; gap:8px;
}
.np-key-note-done { background:linear-gradient(135deg, #667eea, #764ba2); color:#fff; font-size:16px; padding:14px 0; border:none; border-radius:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:4px; }
.np-key-note-done:active { transform:scale(0.96); opacity:0.9; }

#toast { position:fixed; bottom:24%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,0.82); color:#fff; padding:10px 24px; border-radius:14px; font-size:14px; z-index:10001; transition:opacity 0.3s; pointer-events:none; backdrop-filter:blur(10px); white-space:nowrap; }

/* ===== 登录/注册界面 ===== */
.auth-screen {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  padding:20px;
}
.auth-box {
  background:var(--card-bg);
  backdrop-filter:blur(20px);
  border-radius:24px;
  padding:40px 28px 32px;
  width:100%;
  max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
  text-align:center;
}
.auth-logo { font-size:56px; margin-bottom:8px; }
.auth-title { font-size:26px; font-weight:800; color:var(--text); margin-bottom:2px; }
.auth-subtitle { font-size:13px; color:var(--text-light); margin-bottom:28px; }
.auth-field { margin-bottom:14px; }
.auth-input {
  width:100%; padding:14px 16px;
  border:2px solid #e8e8e8; border-radius:12px;
  font-size:16px; outline:none; transition:border-color 0.2s;
  background:#fafafa; box-sizing:border-box;
}
.auth-input:focus { border-color:var(--primary); background:#fff; }
.auth-error {
  background:#fff0f0; color:#e74c3c; font-size:13px;
  padding:8px 12px; border-radius:8px; margin-bottom:12px;
}
.auth-btn {
  width:100%; padding:16px;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff; border:none; border-radius:14px;
  font-size:18px; font-weight:700; cursor:pointer;
  box-shadow:0 6px 20px rgba(102,126,234,0.35);
  transition:transform 0.15s;
  margin-top:4px;
}
.auth-btn:active { transform:scale(0.96); }
.auth-link { margin-top:18px; font-size:14px; color:var(--text-light); }
.auth-link a { color:var(--primary); text-decoration:none; font-weight:600; }
.auth-link a:active { opacity:0.7; }
.auth-loading { opacity:0.6; pointer-events:none; }

/* 离线提示条 */
.offline-bar {
  position:fixed; top:0; left:0; right:0; z-index:9998;
  background:#f39c12; color:#fff; text-align:center;
  padding:8px 12px; font-size:13px; font-weight:500;
  animation:slideDown 0.3s ease;
}

/* 更新提示条 */
.update-bar {
  position:fixed; top:0; left:0; right:0; z-index:9997;
  background:linear-gradient(135deg,#667eea,#764ba2);
  color:#fff; display:flex; align-items:center; justify-content:center;
  gap:12px; padding:10px 16px; font-size:14px; font-weight:500;
  animation:slideDown 0.3s ease;
  box-shadow:0 2px 12px rgba(102,126,234,0.3);
}
.update-bar-btn {
  background:#fff; color:#667eea; border:none;
  border-radius:8px; padding:6px 16px; font-size:13px;
  font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform 0.15s;
}
.update-bar-btn:active { transform:scale(0.92); }
@keyframes slideDown { from{transform:translateY(-100%)} to{transform:translateY(0)} }

/* 未登录提示条 */
.login-warn-bar {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:#e17055; color:#fff; text-align:center;
  padding:8px 12px; font-size:13px; font-weight:500;
  animation:slideDown 0.3s ease;
}
.login-warn-bar a {
  color:#fff; text-decoration:underline; font-weight:600;
}

/* APK 下载推送弹窗 */
.apk-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fadeIn 0.25s ease;
}
.apk-modal {
  background:#fff; border-radius:20px 20px 0 0;
  width:100%; max-width:420px;
  padding:32px 28px calc(28px + env(safe-area-inset-bottom,0px));
  text-align:center;
  animation:slideUp 0.35s ease;
  position:relative;
  box-shadow:0 -8px 40px rgba(0,0,0,0.15);
}
.apk-modal-close {
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  border:none; background:#f0f0f5; color:#999;
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.apk-modal-close:active { background:#e0e0e8; color:#666; transform:scale(0.92); }
.apk-modal-icon {
  width:64px; height:64px; border-radius:18px;
  background:linear-gradient(135deg,#00b894,#00cec9);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:32px; color:#fff;
  box-shadow:0 8px 24px rgba(0,184,148,0.3);
}
.apk-modal-title {
  font-size:20px; font-weight:700; color:var(--text);
  margin-bottom:4px;
}
.apk-modal-subtitle {
  font-size:13px; color:var(--text-light);
  margin-bottom:20px;
}
.apk-modal-changelog {
  background:#f8f9fc; border-radius:12px;
  padding:16px 18px; margin-bottom:16px;
  text-align:left;
}
.apk-log-item {
  font-size:14px; color:var(--text);
  padding:6px 0; display:flex; align-items:center; gap:10px;
  line-height:1.5;
}
.apk-log-item .ri {
  font-size:18px; color:#00b894; flex-shrink:0;
}
.apk-modal-info {
  font-size:12px; color:var(--text-light);
  margin-bottom:20px;
}
.apk-modal-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#00b894,#00cec9);
  color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; text-decoration:none;
  transition:transform 0.15s, box-shadow 0.2s;
  box-shadow:0 4px 16px rgba(0,184,148,0.35);
}
.apk-modal-btn:active { transform:scale(0.97); box-shadow:0 2px 8px rgba(0,184,148,0.25); }
.apk-modal-btn .ri { font-size:20px; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ===== Remix Icon 全局样式 ===== */
.tab-icon .ri,
.cat-btn .ri,
.stats-sub-btn .ri {
  font-size: 18px;
  vertical-align: -3px;
  margin-right: 2px;
}
.tab-icon .ri { margin-right: 0; font-size: 22px; vertical-align: -4px; }
.big-record-btn .ri { font-size: 22px; vertical-align: -3px; margin-right: 6px; }
.catchup-btn .ri { font-size: 18px; vertical-align: -2px; margin-right: 4px; }
.overview-card .ri { font-size: 14px; vertical-align: -2px; }
.settings-card h3 .ri { font-size: 18px; vertical-align: -3px; margin-right: 4px; }
.action-btn .ri { font-size: 15px; vertical-align: -2px; margin-right: 3px; }
.record-btn .ri { font-size: 16px; vertical-align: -2px; }
.numpad-close .ri { font-size: 18px; }
.sync-userinfo .ri { font-size: 16px; vertical-align: -2px; margin-right: 4px; }
.offline-bar .ri { font-size: 14px; vertical-align: -2px; margin-right: 4px; }
.toast-icon .ri { font-size: 14px; vertical-align: -2px; margin-right: 4px; }
.stats-sub-btn .ri { font-size: 15px; vertical-align: -2px; }
.app-title .ri { font-size: 22px; vertical-align: -3px; margin-right: 4px; }
.wp-size-btn .ri { font-size: 14px; vertical-align: -2px; margin-right: 3px; }
.wp-mode-btn { flex:1; background:#f0f0f5; color:var(--text); font-size:12px; padding:8px 4px; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.2s; }
.wp-mode-btn.active { background:var(--primary); color:#fff; }
.wp-mode-btn .ri { font-size:14px; vertical-align:-2px; margin-right:2px; }
.cat-mgr-btn .ri { font-size: 16px; vertical-align: -2px; }
.cat-mgr-icon .ri { font-size: 20px; vertical-align: -3px; }
.cat-editor-panel .ri { font-size: 18px; vertical-align: -2px; }

/* ===== 分类管理 ===== */
.cat-mgr-list { margin-bottom: 4px; }
.cat-mgr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}
.cat-mgr-item:last-child { border-bottom: none; }
.cat-mgr-icon { font-size: 20px; min-width: 28px; display: flex; align-items: center; }
.cat-mgr-name { flex: 1; font-size: 14px; font-weight: 500; }
.cat-mgr-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cat-mgr-btn {
  background: none;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}
.cat-mgr-btn:active { transform: scale(0.9); }
.cat-mgr-btn.edit { color: var(--primary); }
.cat-mgr-btn.edit:active { background: #eef1ff; }
.cat-mgr-btn.delete { color: var(--expense); }
.cat-mgr-btn.delete:active { background: #fff0f0; }

/* ===== 图标选择器 ===== */
.icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px 0;
}
.icon-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  background: #f8f9fa;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.icon-picker-item:active { transform: scale(0.92); }
.icon-picker-item.active {
  border-color: var(--primary);
  background: #eef1ff;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(102,126,234,0.2);
}

/* ===== 分类编辑器弹窗 ===== */
.cat-editor-panel {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 20px 16px 30px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.15);
  animation: slideUp 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.cat-editor-body { margin-top: 10px; }

/* ===== 壁纸画廊 ===== */
.gallery-panel {
  width: 100%;
  max-width: 500px;
  height: 82vh;
  max-height: 620px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  display: flex;
  flex-direction: column;
  animation: gallerySlideUp 0.35s cubic-bezier(0.2,0.9,0.3,1);
  box-shadow:0 -8px 40px rgba(0,0,0,0.18);
}
@keyframes gallerySlideUp {
  from { transform:translateY(30px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}
.gallery-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px;
  overflow: hidden;
}
.gallery-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-shrink: 0;
  padding:0 2px;
}
.gallery-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 8px;
  background: #f0f0f5;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.25s;
}
.gallery-tab:hover { background:#e5e5ea; }
.gallery-tab.active {
  background: var(--primary);
  color: #fff;
}
.gallery-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-content: start;
  justify-items: center;
  -webkit-overflow-scrolling: touch;
  padding:2px;
}
.gallery-grid .gallery-item {
  max-width: 100%;
  width:100%;
}
.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  border: 2.5px solid transparent;
  transition: border-color 0.25s, transform 0.2s, box-shadow 0.25s;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.gallery-item:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
}
.gallery-item:active { transform:scale(0.96); box-shadow:none; }
.gallery-item.active {
  border-color: var(--primary);
  box-shadow:0 0 0 1px rgba(91,95,255,0.15), 0 4px 16px rgba(91,95,255,0.2);
}
.gallery-item.active .gallery-check {
  display: flex;
}
.gallery-thumb {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: #e8e8f0;
  transition:transform 0.35s ease;
}
.gallery-item:hover .gallery-thumb {
  transform:scale(1.08);
}
.gallery-check {
  display: none;
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow:0 2px 8px rgba(91,95,255,0.4);
  animation:popIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.gallery-uploader {
  position:absolute; bottom:6px; left:6px;
  background:rgba(0,0,0,0.55); color:#fff;
  font-size:10px; padding:2px 7px; border-radius:5px;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  max-width:calc(100% - 12px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gallery-local-badge {
  position: absolute;
  bottom: 6px; left: 6px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.gallery-actions {
  display: flex;
  gap: 8px;
  padding-top: 12px;
  flex-shrink: 0;
}
.gallery-actions .action-btn {
  transition:transform 0.2s, box-shadow 0.2s;
}
.gallery-actions .action-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.gallery-actions .action-btn:active { transform:scale(0.96); }
.gallery-mode-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.gallery-mode-btn {
  flex: 1;
  padding: 7px 0;
  border: none;
  border-radius: 8px;
  background: #f0f0f5;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.25s;
}
.gallery-mode-btn:hover { background:#e5e5ea; }
.gallery-mode-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow:0 2px 8px rgba(91,95,255,0.3);
}
.gallery-mode-btn .ri { font-size: 13px; vertical-align: -2px; margin-right: 2px; }
/* ===== 上传预览弹窗 ===== */
.upload-preview-panel {
  width:100%; max-width:480px;
  background:#fff; border-radius:24px 24px 0 0;
  display:flex; flex-direction:column;
  animation:gallerySlideUp 0.35s cubic-bezier(0.2,0.9,0.3,1);
  box-shadow:0 -8px 40px rgba(0,0,0,0.18);
}
.preview-body {
  flex:1; padding:0 20px 16px; text-align:center;
  overflow-y:auto;
}
.preview-image-wrap {
  width:100%; aspect-ratio:16/10;
  border-radius:12px; overflow:hidden;
  background:#f0f0f5; margin-bottom:12px;
}
.preview-image {
  width:100%; height:100%; object-fit:contain;
}
.preview-name {
  font-size:14px; font-weight:600; color:var(--text);
  margin-bottom:4px; word-break:break-all;
}
.preview-size {
  font-size:12px; color:var(--text-light); margin-bottom:8px;
}
.preview-note {
  width:100%; padding:8px 10px; border:1px solid #e0e0e8;
  border-radius:8px; font-size:13px; resize:none; outline:none;
  background:#fafafa; transition:border-color .2s; box-sizing:border-box;
  margin-bottom:8px; font-family:inherit;
}
.preview-note:focus {
  border-color:var(--primary); background:#fff;
}
.preview-progress-wrap {
  display:none; align-items:center; gap:10px;
  padding:8px 0;
}
.preview-progress-bar {
  flex:1; height:6px; border-radius:3px;
  background:#f0f0f5; overflow:hidden;
}
.preview-progress-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg, #00b894, #00cec9);
  border-radius:3px;
  transition:width 0.25s ease;
}
.preview-progress-text {
  font-size:12px; font-weight:700; color:var(--primary);
  min-width:36px; text-align:right;
}
.preview-actions {
  display:flex; gap:8px; padding:4px 20px 20px;
}

/* 密码强度指示器 */
.pwd-strength-wrap {
  display:flex; align-items:center; gap:8px;
  margin-top:-6px; margin-bottom:4px;
}
.pwd-strength-bar {
  flex:1; height:4px; border-radius:2px;
  background:#f0f0f5; overflow:hidden;
}
.pwd-strength-fill {
  height:100%; width:0%; border-radius:2px;
  transition:width 0.3s ease, background 0.3s ease;
}
.pwd-strength-text {
  font-size:11px; font-weight:600; min-width:32px; text-align:right;
}

/* rimix spin */
.ri-spin { animation:ri-spin 1s linear infinite; }
@keyframes ri-spin { from {transform:rotate(0)} to {transform:rotate(360deg)} }

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  font-size: 14px;
  color: var(--text-light);
}
.upload-item { cursor: default; }
.upload-status {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing:0.3px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.upload-status.status-wait { background: rgba(255,243,205,0.9); color: #856404; }
.upload-status.status-ok { background: rgba(212,237,218,0.9); color: #155724; }
.upload-status.status-no { background: rgba(248,215,218,0.9); color: #721c24; }
.upload-user-note {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(0,0,0,0.55));
  color:#fff; font-size:10px; padding:14px 6px 5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.upload-review-note {
  position:absolute; bottom:20px; left:0; right:0;
  background:rgba(0,0,0,0.5); color:#fff;
  font-size:10px; padding:2px 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.upload-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: #fff;
  font-size: 10px;
  padding: 12px 8px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== 手机端适配 ===== */
@media (max-width: 480px) {
  .gallery-panel {
    height: 90vh;
    max-height: none;
    border-radius: 18px 18px 0 0;
  }
  .gallery-body {
    padding: 0 14px 14px;
  }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .gallery-item {
    border-radius: 10px;
    border-width: 2px;
  }
  .gallery-tab {
    font-size: 12px;
    padding: 7px 0;
  }
  .gallery-mode-btn {
    font-size: 11px;
    padding: 6px 0;
  }
  .gallery-check {
    width: 20px; height: 20px;
    font-size: 10px;
    top: 4px; right: 4px;
  }
  .gallery-uploader,
  .gallery-local-badge {
    font-size: 9px;
    padding: 1px 5px;
    bottom: 4px; left: 4px;
  }
  .gallery-actions {
    flex-wrap: wrap;
  }
  .gallery-actions .action-btn {
    font-size: 12px;
    padding: 9px 6px;
  }
  .gallery-empty {
    padding: 24px 0;
    font-size: 13px;
  }

  /* 上传预览弹窗 */
  .upload-preview-panel {
    border-radius: 18px 18px 0 0;
  }
  .preview-body {
    padding: 0 14px 12px;
  }
  .preview-image-wrap {
    border-radius: 10px;
  }
  .preview-actions {
    padding: 4px 14px 16px;
  }
  .preview-actions .action-btn {
    font-size: 13px;
    padding: 10px 0;
  }

  /* 壁纸设置中的缩略图网格 */
  .wallpaper-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .wallpaper-thumb {
    border-width: 2px;
  }

  /* 模式按钮 */
  .wp-mode-btn {
    font-size: 11px;
    padding: 7px 4px;
  }
}

@media (max-width: 360px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .gallery-tab {
    font-size: 11px;
    padding: 6px 0;
  }
  .gallery-mode-bar {
    gap: 4px;
  }
  .gallery-mode-btn {
    font-size: 10px;
    padding: 5px 0;
  }
  .gallery-body {
    padding: 0 10px 10px;
  }
  .wallpaper-grid {
    gap: 5px;
  }
}