/* ===================================================================
   减肥日记系统 (Diet Checkin App)
   =================================================================== */

/* 顶部导航 */
.qc-header {
  background: linear-gradient(135deg, #9b72cf 0%, #c39dff 50%, #f48fb1 100%);
  padding: 16px 20px;
  padding-top: calc(var(--safe-top) + 16px);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 4px 20px rgba(155,114,207,0.3);
}
.qc-header-inner {
  max-width: 800px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.qc-header h1 {
  color: #fff; font-size: 18px; font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.qc-header-sub {
  color: rgba(255,255,255,0.8); font-size: 12px; margin-top: 2px;
}
.qc-logout-btn {
  background: rgba(255,255,255,0.2); color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  padding: 6px 16px; border-radius: 20px;
  font-size: 12px; cursor: pointer;
  backdrop-filter: blur(10px);
  transition: background 0.2s;
  -webkit-appearance: none;
}
.qc-logout-btn:active { background: rgba(255,255,255,0.35); }

/* 容器 */
.qc-container {
  max-width: 800px; margin: 0 auto;
  padding: 0 16px 30px;
}

/* 体重曲线卡片 */
.qc-weight-chart-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  margin-top: 16px; margin-bottom: 16px; position: relative; z-index: 1;
  box-shadow: 0 2px 10px rgba(155,114,207,0.06);
}
.qc-weight-chart-wrap {
  position: relative; width: 100%;
}
.qc-weight-chart-wrap canvas {
  width: 100%; height: auto; display: block;
}

/* 连续打卡 */
.qc-streak-bar {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; margin-bottom: 16px; font-size: 14px;
  box-shadow: 0 2px 10px rgba(155,114,207,0.06);
  position: relative; z-index: 1;
}
.qc-streak-bar .fire { font-size: 20px; }
.qc-streak-bar .num { font-size: 20px; font-weight: 800; color: #f48fb1; }

/* 日历区域复用 tax-app.css 中的 .calendar-section 等样式 */
/* 这里仅补充减肥日记特有的微调 */
.qc-calendar-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 16px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(155,114,207,0.06);
  position: relative; z-index: 1;
}

/* 打卡表单卡片 */
.qc-checkin-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 16px; margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(155,114,207,0.06);
  position: relative; z-index: 1;
}
.qc-checkin-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #9b72cf, #f48fb1);
}
.qc-checkin-card h3 {
  font-size: 16px; margin-bottom: 16px; font-weight: 700;
}

/* 表单组 */
.qc-form-group {
  margin-bottom: 14px;
}
.qc-form-group label {
  display: block; font-size: 13px; color: var(--muted); font-weight: 500;
  margin-bottom: 6px;
}
.qc-form-group input,
.qc-form-group textarea {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  padding: 11px 14px; font-size: 15px; outline: none; font-family: inherit;
  -webkit-appearance: none; width: 100%; box-sizing: border-box;
}
.qc-form-group input:focus,
.qc-form-group textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(155,114,207,0.1);
}

/* 日期时间行 */
.qc-date-time-row {
  display: flex; align-items: center; gap: 8px;
}
.qc-date-time-row input[type="text"] {
  flex: 1; min-width: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  padding: 11px 14px; font-size: 15px; outline: none;
  font-family: inherit; -webkit-appearance: none;
  text-align: center;
}
.qc-date-time-row input[type="text"]:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(155,114,207,0.1);
}
.qc-time-icon-btn {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 10px; border: 1px dashed var(--border);
  background: var(--bg); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.2s;
  -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
}
.qc-time-icon-btn:active {
  background: var(--lavender); border-color: var(--accent); color: var(--accent);
}
.qc-time-icon-btn.has-time {
  border-style: solid; border-color: rgba(155,114,207,0.3);
  background: rgba(155,114,207,0.06); color: var(--accent);
}
.qc-time-display-tag {
  flex-shrink: 0;
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: rgba(155,114,207,0.08);
  padding: 6px 10px; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}

/* 运动分组 */
.qc-exercise-group {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.qc-exercise-group.active {
  border-color: rgba(155,114,207,0.3);
  box-shadow: 0 0 0 3px rgba(155,114,207,0.06);
}

/* 总开关行 */
.qc-exercise-header {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qc-exercise-header .qc-exercise-icon {
  font-size: 20px; flex-shrink: 0;
}
.qc-exercise-header .qc-exercise-label {
  font-size: 15px; font-weight: 700; color: var(--text); flex: 1;
}
.qc-exercise-header .qc-exercise-toggle {
  font-size: 12px; color: var(--muted); transition: transform 0.2s;
}
.qc-exercise-header .qc-exercise-toggle.open {
  transform: rotate(180deg);
}

/* 自定义 checkbox */
.qc-checkbox-wrap {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.qc-checkbox-wrap input[type="checkbox"] {
  display: none;
}
.qc-checkbox-box {
  width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid var(--border); background: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.qc-checkbox-wrap input:checked + .qc-checkbox-box {
  background: linear-gradient(135deg, #9b72cf, #c39dff);
  border-color: transparent;
}
.qc-checkbox-wrap input:checked + .qc-checkbox-box::after {
  content: '✓'; color: #fff; font-size: 14px; font-weight: 700;
}

/* 子项目区域 */
.qc-exercise-items {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease, margin-top 0.3s ease, opacity 0.2s ease;
  opacity: 0; margin-top: 0;
}
.qc-exercise-items.open {
  max-height: 300px; opacity: 1; margin-top: 12px;
}

/* 单个子项目 */
.qc-exercise-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 8px; transition: all 0.2s;
}
.qc-exercise-item:last-child { margin-bottom: 0; }
.qc-exercise-item.enabled {
  border-color: rgba(155,114,207,0.25);
  background: rgba(155,114,207,0.02);
}
.qc-exercise-item .qc-item-check {
  flex-shrink: 0;
}
.qc-exercise-item .qc-item-icon {
  font-size: 18px; flex-shrink: 0;
}
.qc-exercise-item .qc-item-label {
  font-size: 14px; font-weight: 600; color: var(--text); flex: 1;
}
.qc-exercise-item .qc-item-input-wrap {
  display: flex; align-items: center; gap: 4px;
}
.qc-exercise-item .qc-item-input {
  width: 60px; text-align: center; padding: 6px 8px;
  font-size: 16px; font-weight: 700; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); outline: none;
  -webkit-appearance: none; font-family: inherit;
  transition: border-color 0.2s;
}
.qc-exercise-item .qc-item-input:focus {
  border-color: var(--accent);
}
.qc-exercise-item .qc-item-input:disabled {
  opacity: 0.3; background: #f0f0f0;
}
.qc-exercise-item .qc-item-unit {
  font-size: 12px; color: var(--muted); font-weight: 600; min-width: 24px;
}

/* 提交按钮 */
.qc-submit-btn {
  width: 100%; padding: 14px; border: none; border-radius: 14px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  background: linear-gradient(135deg, #9b72cf, #c39dff);
  color: #fff; transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(155,114,207,0.25);
  -webkit-appearance: none; margin-top: 16px;
}
.qc-submit-btn:active {
  transform: scale(0.97); box-shadow: 0 2px 8px rgba(155,114,207,0.18);
}

/* 上次打卡提示 */
.qc-last-hint {
  font-size: 12px; color: var(--muted);
  text-align: center; margin-top: 10px;
  padding: 6px 12px; background: rgba(155,114,207,0.04);
  border-radius: 8px;
}
.qc-last-hint span {
  color: var(--accent); font-weight: 600;
}

/* 打卡记录展开动画 */
.qc-records-section .day-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease, opacity 0.25s ease;
  opacity: 0; padding: 0 4px;
}
.qc-records-section .day-body.open {
  max-height: 800px; opacity: 1; padding: 4px 4px 10px;
}
.qc-records-section .dh-arrow {
  transition: transform 0.25s ease;
}
.qc-records-section .dh-arrow.open {
  transform: rotate(180deg);
}

/* 记录区域 */
.qc-records-section {
  position: relative; z-index: 1; margin-bottom: 20px;
}
.qc-records-section h3 {
  font-size: 16px; margin-bottom: 14px; font-weight: 700;
}

/* 空状态 */
.qc-empty-state {
  text-align: center; padding: 40px 16px; color: var(--muted);
}
.qc-empty-state .emoji { font-size: 44px; margin-bottom: 10px; }
.qc-empty-state .msg { font-size: 14px; }

/* 记录中的运动标签 */
.qc-entry-exercises {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.qc-entry-tag {
  font-size: 12px; padding: 3px 10px; border-radius: 8px; font-weight: 600;
}
.qc-entry-tag.tag-aerobic {
  background: rgba(102,187,106,0.1); color: #43a047;
}
.qc-entry-tag.tag-strength {
  background: rgba(255,152,0,0.1); color: #ef6c00;
}

/* 编辑弹窗中的运动输入 */
.qc-edit-exercise-group {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; margin-bottom: 10px;
}
.qc-edit-exercise-title {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px;
}
.qc-edit-row {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.qc-edit-row:last-child { margin-bottom: 0; }
.qc-edit-field {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.qc-edit-field label {
  font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 600;
}
.qc-edit-field input {
  width: 50px; text-align: center; border: none; background: transparent;
  font-size: 15px; font-weight: 700; color: var(--text); outline: none;
  -webkit-appearance: none; font-family: inherit;
}
.qc-edit-field span {
  font-size: 11px; color: var(--muted);
}

/* 操作栏 */
.qc-actions-bar {
  display: flex; gap: 10px; margin-bottom: 16px;
  position: relative; z-index: 1;
}
.qc-actions-bar .btn { flex: 1; text-align: center; justify-content: center; }

/* 云端状态栏 */
.qc-cloud-info-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 12px;
}
.qc-cloud-info-bar .ci-label { color: var(--muted); }
.qc-cloud-info-bar .ci-value { font-weight: 700; color: var(--text); }

/* 云端选择卡片 */
.qc-cloud-choice-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.qc-cloud-choice-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 14px; padding: 16px; cursor: pointer;
  transition: all 0.15s; -webkit-tap-highlight-color: transparent;
}
.qc-cloud-choice-card:active { transform: scale(0.97); background: var(--lavender); }
.qc-cloud-choice-card .cc-icon { font-size: 28px; flex-shrink: 0; }
.qc-cloud-choice-card .cc-text h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.qc-cloud-choice-card .cc-text p { font-size: 12px; color: var(--muted); }
.qc-cloud-choice-card.cloud-card { border-color: rgba(155,114,207,0.3); }
.qc-cloud-choice-card.cloud-card:active { border-color: var(--accent); }

/* 云端导入对比 */
.qc-diff-section { margin-top: 12px; }
.qc-diff-list {
  max-height: 180px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 10px; padding: 8px; background: var(--bg);
  margin-bottom: 10px; font-size: 12px;
}
.qc-diff-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.qc-diff-item:last-child { border-bottom: none; }
.qc-diff-item .di-tag {
  font-size: 10px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; flex-shrink: 0; min-width: 28px; text-align: center;
}
.qc-diff-item .di-tag.tag-add { background: rgba(102,187,106,0.15); color: #43a047; }
.qc-diff-item .di-tag.tag-overwrite { background: rgba(255,183,77,0.15); color: #ef6c00; }
.qc-diff-item .di-tag.tag-same { background: rgba(0,0,0,0.05); color: var(--muted); }
.qc-diff-item .di-date { font-weight: 600; color: var(--text); min-width: 72px; }
.qc-diff-item .di-content { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-diff-summary { font-size: 13px; color: var(--text); font-weight: 600; padding: 8px 0; text-align: center; }
.qc-import-mode-row { display: flex; gap: 10px; margin-bottom: 12px; }
.qc-import-mode-btn {
  flex: 1; padding: 10px; border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--card); font-size: 13px; font-weight: 600; cursor: pointer;
  text-align: center; transition: all 0.15s; -webkit-appearance: none;
}
.qc-import-mode-btn.active { border-color: var(--accent); background: rgba(155,114,207,0.08); color: var(--accent); }
.qc-import-mode-btn:active { transform: scale(0.96); }

/* 移动端适配 */
@media (max-width: 480px) {
  .qc-header h1 { font-size: 15px; }
  .qc-container { padding: 0 12px 24px; }
  .qc-checkin-card { padding: 14px; }
  .qc-exercise-item .qc-item-input { width: 50px; font-size: 14px; }
}

/* 桌面端适配 */
@media (min-width: 768px) {
  .qc-header h1 { font-size: 20px; }
  .qc-header-sub { font-size: 13px; }

  .qc-container { max-width: 720px; }

  /* 卡片 hover 效果 */
  .qc-weight-chart-card { transition: box-shadow 0.2s; }
  .qc-weight-chart-card:hover { box-shadow: 0 4px 16px rgba(155,114,207,0.12); }
  .qc-checkin-card { transition: box-shadow 0.2s; }
  .qc-checkin-card:hover { box-shadow: 0 4px 16px rgba(155,114,207,0.12); }

  /* 打卡表单 — 两列运动布局 */
  .qc-checkin-card { padding: 24px; }
  .qc-exercise-item .qc-item-input { width: 70px; font-size: 17px; }

  /* 云端选择卡片 hover */
  .qc-cloud-choice-card:hover { background: var(--lavender); border-color: var(--accent); }
  .qc-cloud-choice-card.cloud-card:hover { border-color: var(--accent); }
}