/* Variables & Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { 
  --bg: #F7F5F1; --card: #FFF; --main: #1A1A1A; --sub: #999; 
  --input-bg: #F0EFEB; --active-bg: #1A1A1A; --active-text: #FFF; 
  --green: #34C759; --orange: #FF9500; --red: #FF3B30; --gold: #C9A96E; 
  --border: #EEE; 
}
body.dark { 
  --bg: #121212; --card: #1E1E1E; --main: #EAEAEA; --sub: #888; 
  --input-bg: #2C2C2C; --active-bg: #F0F0F0; --active-text: #121212; 
  --border: #333; 
}
body.dark .card, body.dark .mic-btn, body.dark .theme-btn, body.dark .breath-card, 
body.dark .cloud-card, body.dark .chip, body.dark .streak-card, body.dark .field { 
  background: var(--card); 
}
body.dark .theme-btn { border-color: #444; }
body.dark .tab { color: #666; } body.dark .tab.active { color: var(--main); }

html, body { 
  width:100%; height:100%; overflow:hidden; 
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif; 
  background:var(--bg); color:var(--main); transition:background .4s,color .4s; 
}

/* Layout */
.slider { 
  display:flex; width:100%; height:100%; overflow-x:scroll; 
  scroll-snap-type:x mandatory; scroll-behavior:smooth; 
  -webkit-overflow-scrolling:touch; scrollbar-width:none; 
}
.slider::-webkit-scrollbar { display:none; }
.page { 
  flex:0 0 100%; width:100vw; height:100%; overflow-y:auto; 
  -webkit-overflow-scrolling:touch; scroll-snap-align:start; scroll-snap-stop:always; 
  padding:24px 16px 100px; box-sizing:border-box; 
}

/* Animations */
@keyframes fadeIn { 
  from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} 
}
.wizard-step { display:none; animation:fadeIn .4s cubic-bezier(.22,1,.36,1) both; }
.wizard-step.active { display:block; }

/* Components */
.card { 
  background:var(--card); border-radius:24px; padding:24px; margin-bottom:20px; 
  box-shadow:0 4px 20px rgba(0,0,0,.04); 
}
.q { font-size:20px; font-weight:600; color:var(--main); margin-bottom:20px; line-height:1.5; }
.field { 
  width:100%; min-height:120px; padding:16px; padding-right:50px; 
  background:var(--input-bg); border:none; border-radius:16px; 
  color:var(--main); font-size:16px; line-height:1.6; outline:none; resize:none; 
  transition:box-shadow .2s; position:relative; z-index:1; 
}
.field:focus { box-shadow:0 0 0 4px rgba(201,169,110,.15); }

/* Buttons */
.mic-btn { 
  position:absolute; right:16px; bottom:16px; width:36px; height:36px; 
  border-radius:50%; background:var(--card); border:1px solid var(--border); 
  display:flex; align-items:center; justify-content:center; cursor:pointer; 
  z-index:10; font-size:18px; 
}
.mic-btn.recording { 
  background:var(--red); color:#fff; border:none; animation:pulse-rec 1.5s infinite; 
}

@keyframes pulse { 
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,.7)} 
  70%{transform:scale(1.1);box-shadow:0 0 0 10px rgba(255,59,48,0)} 
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,0)} 
}
@keyframes pulse-rec { 
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,.7)} 
  50%{transform:scale(1.2);box-shadow:0 0 0 15px rgba(255,59,48,0)} 
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,0)} 
}

/* Navigation */
.nav-btns { display:flex; gap:12px; margin-top:30px; }
.btn-next { 
  flex:2; height:52px; background:var(--active-bg); color:var(--active-text); 
  border:none; border-radius:26px; font-size:16px; font-weight:600; cursor:pointer; 
}
.btn-prev { 
  flex:1; height:52px; background:transparent; color:var(--sub); 
  border:1px solid var(--border); border-radius:26px; font-size:16px; cursor:pointer; 
}

/* Theme Selection */
.theme-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.theme-btn { 
  padding:16px; border-radius:16px; background:var(--input-bg); 
  border:1px solid transparent; text-align:center; cursor:pointer; 
  transition:all .2s cubic-bezier(.22,1,.36,1); 
}
.theme-btn .icon { 
  font-size:24px; display:block; margin-bottom:6px; transition:transform .3s ease; 
}
.theme-btn:active { transform:scale(.95); } 
.theme-btn:active .icon { transform:scale(1.2) rotate(10deg); }
.theme-btn .label { 
  font-size:14px; color:var(--main); font-weight:500; 
}
.theme-btn.active { 
  background:var(--gold); border-color:var(--gold); transform:scale(1.02); 
  box-shadow:0 4px 16px rgba(201,169,110,.3); 
}
.theme-btn.active .label { color:#1A1A1A; }
.theme-label { 
  font-size:12px; color:var(--gold); font-weight:500; margin-bottom:8px; text-align:center; 
}

/* Tabs */
.tab-bar { 
  position:fixed; bottom:0; left:0; right:0; height:60px; background:var(--card); 
  border-top:1px solid var(--border); display:flex; align-items:center; 
  justify-content:space-around; padding-bottom:8px; z-index:50; 
}
.tab { 
  display:flex; flex-direction:column; align-items:center; justify-content:center; 
  color:#B0B0B0; font-size:10px; width:80px; cursor:pointer; 
} 
.tab.active { color:var(--main); font-weight:500; } 
.tab-icon { font-size:20px; margin-bottom:2px; }

/* Forms */
.choice { display:flex; gap:12px; flex-wrap:wrap; }
.chip { 
  flex:1; min-width:60px; text-align:center; padding:12px; 
  background:var(--input-bg); border-radius:16px; font-size:14px; 
  color:var(--sub); cursor:pointer; transition:all .2s; 
} 
.chip input { display:none; } 
.chip:has(input:checked), .chip.active { 
  background:var(--active-bg); color:var(--active-text); 
}

/* Search */
.search-bar { 
  width:100%; padding:12px; background:var(--input-bg); border:none; 
  border-radius:14px; color:var(--main); font-size:14px; margin-bottom:20px; 
}

/* Timeline */
.timeline-item { 
  background:var(--card); border-radius:16px; padding:16px; margin-bottom:12px; 
  box-shadow:0 2px 8px rgba(0,0,0,.02); position:relative; transition:transform .15s; 
} 
.timeline-item:active { transform:scale(.98); }
.date-label { 
  font-size:11px; color:var(--sub); margin-bottom:8px; display:flex; justify-content:space-between; 
}
.entry-q1 { font-size:15px; font-weight:600; margin-bottom:4px; } 
.entry-q2 { font-size:13px; color:#777; margin-bottom:8px; } 
.entry-q4 { font-size:12px; color:var(--gold); margin-bottom:8px; font-weight:500; }

/* Stats */
.stat-row { display:flex; gap:12px; margin-bottom:16px; }
.stat-card { 
  flex:1; background:var(--card); padding:16px; border-radius:20px; text-align:center; 
}
.stat-num { 
  font-size:24px; font-weight:700; color:var(--main); display:block; 
} 
.stat-label { 
  font-size:12px; color:var(--sub); margin-top:4px; display:block; 
}

/* Charts */
.chart-container { 
  height:100px; display:flex; align-items:flex-end; justify-content:space-between; 
  margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed #E5E5E5; 
}
.chart-bar { 
  width:8%; background:#E5E5E5; border-radius:4px; transition:height .5s; 
} 
.chart-bar.active { background:var(--green); } 
.chart-bar.mixed { background:var(--orange); } 
.chart-bar.low { background:var(--red); }

.bar-container { 
  display:flex; height:8px; border-radius:4px; overflow:hidden; 
  background:#F0EFEB; margin-bottom:12px; 
}
.bar-seg { height:100%; transition:width .5s; } 
.bar-green { background:var(--green); } 
.bar-gold { background:var(--gold); } 
.bar-orange { background:var(--orange); }

/* Buttons */
.btn-share { 
  margin-top:12px; width:100%; height:44px; background:var(--card); 
  border:1px solid var(--border); color:var(--main); border-radius:14px; 
  font-size:14px; font-weight:600; cursor:pointer; 
}
.btn-secondary { 
  width:100%; height:38px; line-height:38px; background:var(--input-bg); 
  color:var(--sub); border-radius:12px; border:none; font-size:13px; 
  font-weight:500; cursor:pointer; margin-top:6px; 
}

/* Share Modal */
.share-modal-bg { 
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:200; 
  flex-direction:column; align-items:center; justify-content:center; padding:20px; 
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); 
} 
.share-modal-bg.active { display:flex; }
.share-preview { 
  max-width:100%; max-height:80vh; border-radius:20px; 
  box-shadow:0 10px 40px rgba(0,0,0,.5); 
}
.share-close { 
  margin-top:24px; padding:12px 32px; background:rgba(255,255,255,.1); 
  border:1px solid rgba(255,255,255,.2); border-radius:30px; color:#FFF; cursor:pointer; 
}

/* Quote */
.quote-footer { text-align:center; margin-top:30px; padding:10px 0; }
.quote-footer-text { 
  font-family:'Noto Serif SC',serif; font-size:13px; color:var(--sub); 
  line-height:1.5; font-style:italic; 
}

/* Toast */
#toast { 
  position:fixed; top:20%; left:50%; transform:translate(-50%,-50%) scale(.9); 
  background:rgba(0,0,0,.75); color:#FFF; padding:14px 20px; 
  border-radius:14px; font-size:15px; opacity:0; transition:all .3s; 
  pointer-events:none; z-index:100; 
} 
#toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }

/* Streak */
.streak-card { 
  display:flex; align-items:center; gap:12px; 
  background:linear-gradient(135deg,#FFF8E1,#FFECB3); border-radius:16px; 
  padding:16px 20px; margin-bottom:16px; 
}
body.dark .streak-card { 
  background:linear-gradient(135deg,#2C2416,#1E1C18); 
}
.streak-fire { font-size:32px; } 
.streak-num { font-size:28px; font-weight:700; color:#FF9500; } 
.streak-text { font-size:13px; color:#888; }

/* Breathing */
.breath-card { 
  background:var(--card); border-radius:24px; padding:24px 20px 18px; text-align:center; 
}
.breath-circle { 
  width:80px; height:80px; border-radius:50%; border:2px solid var(--gold); 
  animation:breathe 5.5s ease-in-out infinite; 
}
@keyframes breathe { 
  0%{transform:scale(.8);opacity:.3} 
  50%{transform:scale(1.2);opacity:.8;box-shadow:0 0 20px var(--gold)} 
  100%{transform:scale(.8);opacity:.3} 
}
.breath-text { 
  margin-top:30px; color:var(--sub); font-size:16px; letter-spacing:4px; 
}

/* Header */
.header { text-align:center; margin-bottom:40px; padding-top:20px; }
.brand-title { 
  font-size:24px; font-weight:700; color:var(--main); display:block; 
} 
.brand-sub { 
  font-size:14px; color:var(--sub); margin-top:8px; 
}

/* Input */
.input-wrapper { position:relative; }

/* Insight */
.insight-card { 
  background:linear-gradient(135deg,#F7F5F1,#F0EFEB); border:1px solid #E5E5E0; 
  border-radius:16px; padding:20px; margin-top:20px; text-align:center; 
}
.insight-text { 
  font-family:'Noto Serif SC',serif; font-size:16px; color:#555; line-height:1.6; 
  margin-bottom:16px; white-space:pre-line; 
}