/* ============================================
   Golden Wellness Free MVP — style.css
   鱼缸健康生态系统主题
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  --bg: #060e1a;
  --surface: #0c1a2e;
  --surface2: #102040;
  --text: #e2e8f0;
  --text-dim: #94a3b8;
  --accent: #00b4d8;
  --accent2: #22d3ee;
  --fuel: #f59e0b;
  --waste: #84cc16;
  --repair: #a78bfa;
  --order: #38bdf8;
  --border: #1e3a5f;
  --radius: 14px;
}

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

body {
  font-family: 'Noto Sans SC', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── 顶部状态栏 ── */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px 10px;
  background: linear-gradient(180deg, #0c1a2e 0%, #0a1525 100%);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-left { display: flex; align-items: center; gap: 10px; }

.tifan-fish-icon { font-size: 28px; filter: drop-shadow(0 0 6px #00b4d8); }

.app-name { font-size: 16px; font-weight: 700; color: var(--accent2); }
.app-sub { font-size: 11px; color: var(--text-dim); }

.topbar-right { display: flex; align-items: center; gap: 8px; }

.streak-chip {
  display: flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #7c2d12, #c2410c);
  color: #fed7aa; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
}
.streak-chip { display: none; } /* JS 控制显示 */

.settings-btn { background: none; border: none; font-size: 18px; cursor: pointer; opacity: 0.6; }
.settings-btn:hover { opacity: 1; }

/* ── 鱼缸主体 ── */
.tank-container {
  position: relative;
  height: 220px;
  margin: 12px 16px;
  border-radius: 20px 20px 12px 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #012e4a 0%, #014060 40%, #065a70 100%);
  border: 2px solid #1a4a6e;
  box-shadow: 0 8px 32px rgba(0,180,216,0.15), inset 0 -20px 40px rgba(0,0,0,0.3);
  transition: background 1s ease;
}

/* 水面波光 */
.water-surface {
  position: absolute; top: 0; left: 0; right: 0;
  height: 18px; overflow: hidden; opacity: 0.4;
}
.wave {
  position: absolute; width: 200%; height: 100%;
  background: repeating-linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 25%, transparent 50%);
  animation: waveMove 3s linear infinite;
}
.w1 { top: 0; animation-duration: 3s; }
.w2 { top: 6px; animation-duration: 4s; animation-direction: reverse; opacity: 0.5; }
.w3 { top: 12px; animation-duration: 5s; opacity: 0.3; }

@keyframes waveMove {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 气泡 */
.bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute; bottom: -10px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  animation: bubbleRise linear forwards;
}
@keyframes bubbleRise {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  80% { opacity: 0.4; }
  100% { transform: translateY(-220px) scale(0.5); opacity: 0; }
}

/* 水草装饰 */
.tank-decor {
  position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 16px;
}
.plant { font-size: 24px; opacity: 0.6; transform-origin: bottom center; }
.plant-1 { animation: sway 3s ease-in-out infinite; }
.plant-2 { animation: sway 4s ease-in-out infinite 0.5s; }
.plant-3 { font-size: 18px; opacity: 0.4; }
@keyframes sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ── Tifan 金鱼（SVG）── */
.fish-wrapper {
  position: absolute;
  left: 45%; top: 52%;
  transform: translate(-50%, -50%) scaleX(1);
  transition: filter 0.6s ease, opacity 0.4s ease;
  z-index: 10;
}

.goldfish-svg {
  width: 90px; height: 60px;
  overflow: visible;
  animation: fishBob 2.2s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(255,107,53,0.3));
}
@keyframes fishBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(1deg); }
  75% { transform: translateY(1px) rotate(-1deg); }
}

/* 尾鳍摆动 */
.tail-group {
  transform-origin: 82px 40px;
  animation: tailWag 0.55s ease-in-out infinite alternate;
}
@keyframes tailWag {
  0% { transform: rotate(-6deg) scaleY(1); }
  100% { transform: rotate(7deg) scaleY(1.04); }
}

/* 尾鳍各叶独立微动 */
.tail-top { transform-origin: 82px 41px; animation: tailTopWave 0.9s ease-in-out infinite alternate; }
.tail-bottom { transform-origin: 82px 39px; animation: tailBottomWave 1s ease-in-out infinite alternate-reverse; }
.tail-center { transform-origin: 83px 41px; animation: tailCenterWave 0.7s ease-in-out infinite alternate; }
@keyframes tailTopWave {
  0% { transform: rotate(-3deg); }
  100% { transform: rotate(4deg); }
}
@keyframes tailBottomWave {
  0% { transform: rotate(3deg); }
  100% { transform: rotate(-4deg); }
}
@keyframes tailCenterWave {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(1.06); }
}

/* 胸鳍摆动 */
.pect-left { transform-origin: 48px 52px; animation: pectLeftWave 1.4s ease-in-out infinite alternate; }
.pect-right { transform-origin: 48px 28px; animation: pectRightWave 1.4s ease-in-out infinite alternate-reverse; }
@keyframes pectLeftWave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(12deg) translateY(2px); }
}
@keyframes pectRightWave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-12deg) translateY(-2px); }
}

/* 腹鳍 */
.pelvic-fin { transform-origin: 56px 60px; animation: pelvicWave 1.8s ease-in-out infinite alternate; }
@keyframes pelvicWave {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(8deg); }
}

/* 背鳍 */
.dorsal-fin { transform-origin: 59px 22px; animation: dorsalWave 2s ease-in-out infinite alternate; }
@keyframes dorsalWave {
  0% { transform: rotate(0deg) scaleY(1); }
  100% { transform: rotate(2deg) scaleY(1.06); }
}

/* 眼睛眨眼 */
.eye-group { transform-origin: 24px 37px; animation: blink 4s ease-in-out infinite; }
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.15); }
}

/* 鳃呼吸 */
.gill { animation: gillPulse 2.5s ease-in-out infinite; }
@keyframes gillPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.38; }
}

/* 鱼吐气泡 */
.fish-bubble {
  position: absolute; top: -6px; left: 30%;
  font-size: 8px; opacity: 0; pointer-events: none;
  animation: fishBubble 3.5s ease-out infinite;
}
@keyframes fishBubble {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(8px, -28px) scale(1.3); }
}

/* 水质指示器 */
.water-quality {
  position: absolute; top: 10px; right: 12px;
  background: rgba(6, 14, 26, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,180,216,0.2);
  border-radius: 12px;
  padding: 8px 12px;
  min-width: 80px;
  text-align: center;
}
.wq-label { font-size: 10px; color: var(--text-dim); margin-bottom: 2px; }
.wq-score { font-size: 20px; font-weight: 700; color: var(--accent2); line-height: 1; }
.wq-bar-wrap {
  height: 4px; background: rgba(255,255,255,0.1);
  border-radius: 2px; margin: 4px 0;
  overflow: hidden;
}
.wq-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #06b6d4, #22d3ee);
  border-radius: 2px;
  transition: width 0.8s ease, background 0.8s ease;
}
.wq-status { font-size: 10px; color: var(--accent); }

/* 鱼缸时间线 */
.tank-timeline {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.tank-timeline::before {
  content: '🌅';
}
.tank-timeline::after {
  content: '🌙';
}

/* ── Tifan 提示条 ── */
.tifan-tip-bar {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0 16px 12px;
  padding: 10px 14px;
  background: rgba(0,180,216,0.08);
  border: 1px solid rgba(0,180,216,0.15);
  border-radius: 12px;
  font-size: 13px; color: var(--text);
  line-height: 1.5;
}
.tifan-tip-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.tifan-tip-text { flex: 1; }

/* ── 四系统迷你卡片 ── */
.systems-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 16px 12px;
}

.sys-card-mini {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
}
.sys-card-mini:active { transform: scale(0.97); }
.sys-card-mini:hover { border-color: var(--accent); }

.sys-icon-sm { font-size: 20px; flex-shrink: 0; }
.sys-info-sm { flex: 1; min-width: 0; }
.sys-name-sm { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 4px; }
.sys-bar-wrap {
  height: 5px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.sys-bar {
  height: 100%; width: 0%; border-radius: 3px;
  transition: width 0.6s ease;
}
.sys-score-sm { font-size: 14px; font-weight: 700; color: var(--text-dim); flex-shrink: 0; }

/* ── 打卡按钮 ── */
.checkin-btn {
  display: block; width: calc(100% - 32px);
  margin: 0 auto 12px;
  padding: 14px;
  background: linear-gradient(135deg, #006b8a, #00b4d8);
  color: #fff; font-size: 15px; font-weight: 600;
  border: none; border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,180,216,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.checkin-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,180,216,0.4); }
.checkin-btn:active { transform: translateY(0); }
.checkin-btn.saved {
  background: linear-gradient(135deg, #064e3b, #059669);
  box-shadow: 0 4px 16px rgba(5,150,105,0.3);
}

/* ── 历史趋势 ── */
.history-toggle {
  display: flex; justify-content: space-between; align-items: center;
  margin: 0 16px 4px;
  padding: 8px 4px;
  font-size: 13px; color: var(--text-dim);
  cursor: pointer;
}
.history-toggle:hover { color: var(--text); }

.history-panel {
  margin: 0 16px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.history-chart { margin-bottom: 12px; }
.history-empty { text-align: center; color: var(--text-dim); font-size: 13px; padding: 16px 0; }

.h-bars { display: flex; gap: 6px; align-items: flex-end; height: 80px; }
.h-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.h-bar-val { font-size: 10px; color: var(--text-dim); margin-bottom: 2px; }
.h-bar-track { flex: 1; width: 100%; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; display: flex; align-items: flex-end; }
.h-bar-fill { width: 100%; border-radius: 4px 4px 0 0; transition: height 0.6s ease; }
.h-bar-day { font-size: 9px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; }

.h-list-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.h-list-item:last-child { border-bottom: none; }
.h-list-date { font-size: 11px; color: var(--text-dim); width: 50px; flex-shrink: 0; }
.h-list-bars { display: flex; align-items: center; gap: 2px; flex: 1; }
.h-list-score { font-size: 12px; font-weight: 700; width: 38px; text-align: right; flex-shrink: 0; }

/* ── 系统详情 Modal ── */
.sys-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(6,14,26,0.85);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.sys-modal-content {
  background: #0c1a2e;
  border: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 480px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px 16px 24px;
  position: relative;
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.06); border: none;
  color: var(--text-dim); font-size: 16px;
  width: 28px; height: 28px; border-radius: 50%;
  cursor: pointer; line-height: 1;
}
.modal-close:hover { background: rgba(255,255,255,0.12); color: var(--text); }

.sys-modal-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 2px solid rgba(0,180,216,0.15);
}
.sys-modal-icon { font-size: 32px; }
.sys-modal-title { font-size: 18px; font-weight: 700; }
.sys-modal-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.q-list-modal { display: flex; flex-direction: column; gap: 8px; }

.q-item-modal {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.q-item-modal:active { background: rgba(255,255,255,0.07); }
.q-item-modal.checked { background: rgba(0,180,216,0.08); border-color: rgba(0,180,216,0.2); }

.q-check-modal { flex-shrink: 0; margin-top: 1px; }
.q-box-modal {
  display: block; width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 50%; transition: all 0.15s;
}
.q-box-modal.checked {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 8px rgba(0,180,216,0.4);
}
.q-box-modal.checked::after {
  content: '✓'; display: block;
  text-align: center; line-height: 14px;
  font-size: 10px; color: #fff; font-weight: 700;
}

.q-text-modal { font-size: 14px; line-height: 1.5; color: var(--text); }

.sys-modal-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.modal-score { font-size: 16px; font-weight: 700; color: var(--accent2); }
.modal-save-btn {
  padding: 8px 24px;
  background: linear-gradient(135deg, #006b8a, #00b4d8);
  color: #fff; font-size: 14px; font-weight: 600;
  border: none; border-radius: 20px; cursor: pointer;
  font-family: inherit;
}

/* ── 喂鱼动画（从水面投下颗粒）── */
.feed-overlay {
  position: fixed; inset: 0; z-index: 300;
  pointer-events: none;
  display: flex;
  overflow: hidden;
}
.feed-particles {
  position: relative;
  width: 100%; height: 100%;
}
.feed-particle {
  position: absolute;
  border-radius: 50%;
  /* 从水面落入水中：先快速下落，再缓慢飘沉 */
  animation: feedDropFall 2.2s ease-in forwards;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3), inset 0 -1px 2px rgba(0,0,0,0.2);
}
@keyframes feedDropFall {
  0% {
    top: 8%; /* 水面位置 */
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  25% {
    top: 35%; /* 快速穿过上层水体 */
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  60% {
    top: 58%; /* 到达中下层，开始减速 */
    opacity: 0.85;
    transform: scale(0.9) rotate(340deg);
  }
  85% {
    top: 68%; /* 缓慢飘沉到底部附近 */
    opacity: 0.5;
    transform: scale(0.75) rotate(380deg);
  }
  100% {
    top: 75%; /* 沉底消失 */
    opacity: 0;
    transform: scale(0.5) rotate(400deg) translateY(10px);
  }
}

/* ── Footer ── */
.footer {
  text-align: center;
  padding: 16px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  border-top: 1px solid var(--border);
}
.footer-ver { color: #334155; }

/* ── 滚动条美化 ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── 响应式 ── */
@media (min-width: 480px) {
  .tank-container { height: 260px; }
  .systems-panel { grid-template-columns: repeat(4, 1fr); }
}