/* 小氣簿 Petty Book MVP 1.0 — Stylesheet */
:root {
  --color-orange: #fa5b01;
  --color-orange-deep: #d44d00;
  --color-orange-soft: #fff0e6;
  --color-on-orange: #0a0a0a;
  --color-paper: #ffffff;
  --color-plate: #f3f2ef;
  --color-body: #e2e1dd;
  --color-groove: #cdccc7;
  --color-steel: #8a8a8c;
  --color-slate: #5c5d60;
  --color-ink: #0a0a0a;
  --color-green: #15803d;
  --color-green-soft: #dcfce7;
  --radius-card: 16px;
  --radius-pill: 999px;
  --shadow-brutal: 4px 4px 0px #0a0a0a;
  --shadow-brutal-sm: 2px 2px 0px #0a0a0a;
  --font-sans: "Inter", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: var(--color-plate);
  color: var(--color-ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* --- Top Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 242, 239, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--color-ink);
}

.header-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-badge {
  background: var(--color-orange);
  color: var(--color-ink);
  font-weight: 900;
  font-size: 1.15rem;
  padding: 0.35rem 0.75rem;
  border: 2px solid var(--color-ink);
  border-radius: 10px;
  box-shadow: var(--shadow-brutal-sm);
  letter-spacing: 0.03em;
}

.brand-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-slate);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.nav-tab, .sound-btn {
  appearance: none;
  border: 2px solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform 0.12s, background-color 0.12s, box-shadow 0.12s;
  box-shadow: var(--shadow-brutal-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-tab:hover, .sound-btn:hover {
  transform: translate(-1px, -1px);
}

.nav-tab.is-active {
  background: var(--color-ink);
  color: var(--color-paper);
}

.sound-btn[aria-pressed="true"] {
  background: var(--color-orange);
  color: var(--color-ink);
}

.count-pill {
  background: var(--color-orange);
  color: var(--color-ink);
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
}

/* --- Main Layout (Single Centered Flow) --- */
.app-shell {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

/* --- Hero Stage & Doll (Inside Step 3) --- */
.stage-card {
  background: var(--color-plate);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-card);
  padding: 1.5rem 1rem 1.25rem;
  display: grid;
  place-items: center;
  row-gap: 0.9rem;
  position: relative;
  width: 100%;
}

.stage-kicker {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--color-orange-soft);
  border: 1.5px solid var(--color-ink);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
}

.hero-stage {
  min-width: 0;
  place-items: center;
  display: grid;
  row-gap: 0.85rem;
  width: 100%;
  position: relative;
}

.hero-portrait {
  z-index: 1;
  width: min(100%, 20rem);
}

.hero-portrait.is-handled {
  z-index: 41;
}

/* --- .plush from rameerez.com --- */
.plush {
  --frame-x: 0.5;
  --frame-y: 0.57;
  --frame-r: 0.43;
  --frame-top: calc(var(--frame-y) - var(--frame-r));
  --frame-left: calc(var(--frame-x) - var(--frame-r));
  --frame-right: calc(1 - var(--frame-x) - var(--frame-r));
  position: relative;
  aspect-ratio: 1;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.plush[data-frame="square"] {
  --frame-y: 0.5;
  --frame-r: 0.42;
  --frame-top: 0.36;
}

.plush-frame {
  position: absolute;
  left: calc(var(--frame-left) * 100%);
  top: calc(var(--frame-top) * 100%);
  width: calc(var(--frame-r) * 200%);
  height: calc(var(--frame-r) * 200%);
  border-radius: 50%;
  background: var(--color-orange, #fa5b01);
}

.plush[data-frame="square"] .plush-frame {
  height: auto;
  bottom: 0;
  border-radius: 0;
}

.plush[data-frame="none"] .plush-frame {
  display: none;
}

.plush[data-frame="circle"] > :is(img, .plush-hit) {
  clip-path: inset(
    0 calc(var(--frame-right) * 100%) calc((1 - var(--frame-y) - var(--frame-r)) * 100%) calc(var(--frame-left) * 100%)
    round 0 0 calc(var(--frame-r) * 100%) calc(var(--frame-r) * 100%)
  );
}

.plush[data-frame="square"] > :is(img, .plush-hit) {
  clip-path: inset(0 calc(var(--frame-right) * 100%) 0 calc(var(--frame-left) * 100%));
}

.plush > img,
.plush-hit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.plush > img {
  z-index: 2;
}

.plush-hit {
  z-index: 3;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  color: inherit;
  font: inherit;
  touch-action: none;
  outline: 0;
}

.plush.is-stretched > .plush-hit {
  clip-path: none;
}

.plush:has(.plush-hit:focus-visible) .plush-frame,
.plush[data-frame="none"]:has(.plush-hit:focus-visible) {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  box-shadow: 0 0 0 9px #fff;
}

.plush canvas {
  position: absolute;
  z-index: 2;
  left: calc(var(--plush-pad, 0.3) * -100%);
  top: calc(var(--plush-pad, 0.3) * -100%);
  width: calc(100% + var(--plush-pad, 0.3) * 200%);
  height: calc(100% + var(--plush-pad, 0.3) * 200%);
  pointer-events: none;
}

.plush.is-live > img {
  visibility: hidden;
}

.stage-hud {
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  border: 1.5px solid var(--color-ink);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-ink);
}

.stage-hud-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-orange);
  display: inline-block;
}

.doll-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}

.btn-poke {
  appearance: none;
  border: 1.5px solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-brutal-sm);
  transition: transform 0.1s, background 0.12s;
}

.btn-poke:hover {
  background: var(--color-orange-soft);
  transform: translate(-1px, -1px);
}

.btn-poke:active {
  transform: translate(1px, 1px);
}

.stage-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-slate);
  text-align: center;
  line-height: 1.45;
}

/* --- Dynamic Emotion Visualizer (Step 1) --- */
.emotion-visualizer-box {
  background: var(--color-plate);
  border: 2px solid var(--color-ink);
  border-radius: 20px;
  padding: 1.5rem 1.25rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  transition: min-height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.emotion-visualizer-box.is-level-high {
  background: #fff1f2;
  border-color: #e11d48;
}

.emotion-visualizer-box.is-level-max {
  background: #450a0a;
  border-color: #f43f5e;
  box-shadow: 0 0 25px rgba(244, 63, 94, 0.45);
}

.emotion-visualizer-box.is-level-max[data-theme="難過"] {
  background: #0f172a;
  border-color: #38bdf8;
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.45);
}
.emotion-visualizer-box.is-level-max[data-theme="難過"] .emotion-desc-text {
  color: #bae6fd;
}

.emotion-visualizer-box.is-level-max[data-theme="焦慮"] {
  background: #2e1065;
  border-color: #c084fc;
  box-shadow: 0 0 25px rgba(192, 132, 252, 0.45);
}
.emotion-visualizer-box.is-level-max[data-theme="焦慮"] .emotion-desc-text {
  color: #e9d5ff;
}

.emotion-visualizer-box.is-level-max[data-theme="無奈"] {
  background: #1e293b;
  border-color: #94a3b8;
  box-shadow: 0 0 25px rgba(148, 163, 184, 0.45);
}
.emotion-visualizer-box.is-level-max[data-theme="無奈"] .emotion-desc-text {
  color: #cbd5e1;
}

.emotion-visualizer-box.is-level-max[data-theme="厭煩"] {
  background: #142e12;
  border-color: #84cc16;
  box-shadow: 0 0 25px rgba(132, 204, 22, 0.45);
}
.emotion-visualizer-box.is-level-max[data-theme="厭煩"] .emotion-desc-text {
  color: #d9f99d;
}

.emotion-visualizer-box.is-level-max .emotion-name-badge {
  color: #fff;
}

.emotion-visualizer-box.is-level-max .emotion-desc-text {
  color: #fecdd3;
}

/* Stage that holds the oversized emoji and allows proper expansion */
.emotion-avatar-stage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 140px;
  flex-shrink: 0;
  transition: min-height 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), margin-bottom 0.25s ease;
}

.emotion-emoji-avatar {
  font-size: 5rem;
  line-height: 1;
  display: inline-block;
  transform-origin: center center;
  user-select: none;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
  will-change: transform, filter;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), font-size 0.22s ease;
}

.emotion-emoji-avatar.is-shaking {
  animation: extremeShake 0.12s infinite alternate ease-in-out;
}

@keyframes extremeShake {
  0% { transform: scale(var(--emoji-scale, 1)) translate(-3px, 2px) rotate(-3deg); }
  50% { transform: scale(var(--emoji-scale, 1)) translate(3px, -2px) rotate(3deg); }
  100% { transform: scale(var(--emoji-scale, 1)) translate(-2px, -3px) rotate(-1deg); }
}

.emotion-visual-meta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  z-index: 2;
  flex-shrink: 0;
  margin-top: 0.75rem;
}

.emotion-name-badge {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-ink);
}

.emotion-intensity-tag {
  font-size: 1rem;
  font-weight: 900;
  color: var(--color-orange-deep);
  background: var(--color-orange-soft);
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-ink);
}

.emotion-desc-text {
  font-size: 0.85rem;
  color: var(--color-slate);
  margin: 0;
  font-weight: 600;
  z-index: 2;
}

/* --- Full Screen Explosion Overlay for Level 10 --- */
.nuke-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none !important;
  opacity: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255,69,0,0.85) 0%, rgba(220,20,60,0.92) 50%, rgba(0,0,0,0.95) 100%);
  transition: opacity 0.15s ease-out;
}

.nuke-overlay[data-theme="難過"] {
  background: radial-gradient(circle, rgba(14,165,233,0.88) 0%, rgba(30,58,138,0.95) 50%, rgba(3,7,18,0.98) 100%);
}
.nuke-overlay[data-theme="難過"] .nuke-shockwave {
  border-color: #bae6fd;
  box-shadow: 0 0 60px #0284c7, inset 0 0 60px #0284c7;
}

.nuke-overlay[data-theme="焦慮"] {
  background: radial-gradient(circle, rgba(168,85,247,0.88) 0%, rgba(88,28,135,0.95) 50%, rgba(15,23,42,0.98) 100%);
}
.nuke-overlay[data-theme="焦慮"] .nuke-shockwave {
  border-color: #fef08a;
  box-shadow: 0 0 60px #eab308, inset 0 0 60px #a855f7;
}

.nuke-overlay[data-theme="無奈"] {
  background: radial-gradient(circle, rgba(148,163,184,0.85) 0%, rgba(51,65,85,0.95) 50%, rgba(15,23,42,0.98) 100%);
}
.nuke-overlay[data-theme="無奈"] .nuke-shockwave {
  border-color: #e2e8f0;
  box-shadow: 0 0 60px #94a3b8, inset 0 0 60px #64748b;
}

.nuke-overlay[data-theme="厭煩"] {
  background: radial-gradient(circle, rgba(132,204,22,0.88) 0%, rgba(54,83,20,0.95) 50%, rgba(2,44,34,0.98) 100%);
}
.nuke-overlay[data-theme="厭煩"] .nuke-shockwave {
  border-color: #d9f99d;
  box-shadow: 0 0 60px #84cc16, inset 0 0 60px #65a30d;
}

.nuke-overlay * {
  pointer-events: none !important;
}

.nuke-overlay.is-exploding {
  display: flex;
  opacity: 1;
  pointer-events: none !important;
  animation: screenNukeFlash 0.9s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes screenNukeFlash {
  0% { opacity: 0; transform: scale(0.85); filter: brightness(3); }
  25% { opacity: 1; transform: scale(1.05); filter: brightness(1.5); }
  70% { opacity: 0.9; transform: scale(1); filter: contrast(1.2); }
  100% { opacity: 0; transform: scale(1.1); pointer-events: none; }
}

.nuke-shockwave {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 8px solid #ffedd5;
  box-shadow: 0 0 60px #ff4500, inset 0 0 60px #ff4500;
  animation: shockwaveExpand 0.85s ease-out forwards;
}

@keyframes shockwaveExpand {
  0% { transform: scale(0.2); opacity: 1; }
  100% { transform: scale(8); opacity: 0; }
}

.nuke-text {
  position: relative;
  font-size: clamp(2.5rem, 8vw, 5.5rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px #000, 4px 4px 0px #000, 0 0 40px #ff2200;
  letter-spacing: 0.06em;
  text-align: center;
  animation: nukeTextPop 0.85s cubic-bezier(0.2, 1.4, 0.3, 1) forwards;
}

@keyframes nukeTextPop {
  0% { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  40% { transform: scale(1.2) rotate(4deg); opacity: 1; }
  80% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(1.08); opacity: 0; }
}

/* --- Right Column / Main Form: 6-Step Journey --- */
.journey-panel {
  display: grid;
  gap: 1.25rem;
}

.stepper-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  padding: 0.5rem;
  box-shadow: var(--shadow-brutal-sm);
}

.step-tab {
  appearance: none;
  border: 1.5px solid transparent;
  background: transparent;
  border-radius: 9px;
  padding: 0.45rem 0.25rem;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-slate);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  transition: all 0.15s;
}

.step-tab .step-num {
  font-size: 0.68rem;
  opacity: 0.75;
}

.step-tab.is-active {
  background: var(--color-orange);
  color: var(--color-ink);
  border-color: var(--color-ink);
  box-shadow: var(--shadow-brutal-sm);
}

.step-tab.is-done:not(.is-active) {
  background: var(--color-orange-soft);
  color: var(--color-ink);
}

/* --- Step Cards --- */
.step-card {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-brutal);
  padding: 1.5rem;
  display: none;
  animation: stepFadeIn 0.22s ease-out;
}

.step-card.is-active {
  display: grid;
  gap: 1.25rem;
}

@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.step-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1.5px dashed var(--color-groove);
  padding-bottom: 0.85rem;
}

.step-badge {
  display: inline-block;
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  margin-bottom: 0.35rem;
}

.step-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 900;
}

.step-desc {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--color-slate);
}

/* --- Form & Interactive Elements --- */
.field-group {
  display: grid;
  gap: 0.5rem;
}

.field-label {
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.field-hint {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-slate);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  appearance: none;
  border: 1.5px solid var(--color-ink);
  background: var(--color-plate);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.12s;
}

.chip:hover {
  background: var(--color-orange-soft);
}

.chip.is-selected {
  background: var(--color-orange);
  color: var(--color-ink);
  box-shadow: var(--shadow-brutal-sm);
  transform: translate(-1px, -1px);
}

/* Emoji selection tiles */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  position: relative;
  z-index: 20;
}

.emoji-tile {
  appearance: none;
  border: 2px solid var(--color-ink);
  background: var(--color-plate);
  border-radius: 14px;
  padding: 0.75rem 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s ease;
  font-family: inherit;
}

.emoji-tile .tile-icon {
  font-size: 2rem;
  line-height: 1;
}

.emoji-tile .tile-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-ink);
}

.emoji-tile:hover {
  background: var(--color-orange-soft);
  transform: translateY(-2px);
}

.emoji-tile.is-selected {
  background: var(--color-orange);
  box-shadow: var(--shadow-brutal-sm);
  border-color: var(--color-ink);
}

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.quick-chip {
  appearance: none;
  border: 1px dashed var(--color-steel);
  background: var(--color-plate);
  color: var(--color-slate);
  font-family: inherit;
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.quick-chip:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
  background: var(--color-orange-soft);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .two-col {
    grid-template-columns: 1fr 1fr;
  }
}

.input-text, .input-area {
  width: 100%;
  border: 2px solid var(--color-ink);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--color-paper);
  color: var(--color-ink);
  line-height: 1.5;
}

.input-area {
  min-height: 96px;
  resize: vertical;
}

.input-text:focus, .input-area:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 91, 1, 0.28);
}

/* --- Intensity Slider --- */
.intensity-box {
  background: var(--color-plate);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: grid;
  gap: 0.6rem;
}

.intensity-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.intensity-score {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--color-orange-deep);
}

.range-slider {
  width: 100%;
  accent-color: var(--color-orange);
  height: 8px;
  cursor: pointer;
}

/* --- Calm Down Breathing Circle --- */
.calm-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.calm-box {
  background: var(--color-plate);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 1rem;
}

.breath-circle-wrap {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  position: relative;
}

.breath-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-orange);
  border: 3px solid var(--color-ink);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.95rem;
  transition: transform 1s ease-in-out, background-color 0.6s;
  box-shadow: var(--shadow-brutal-sm);
}

.breath-circle.is-inhale {
  transform: scale(1.52);
  transition-duration: 4s;
  background: #ff8a3d;
}

.breath-circle.is-hold {
  transform: scale(1.52);
  transition-duration: 0.3s;
  background: #fbbf24;
}

.breath-circle.is-exhale {
  transform: scale(0.92);
  transition-duration: 8s;
  background: #86efac;
}

.dbt-list {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 0.55rem;
}

.dbt-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--color-paper);
  border: 1.5px solid var(--color-ink);
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.dbt-item input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-orange);
}

/* --- Before & After Comparison Card --- */
.ba-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  background: var(--color-orange-soft);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  padding: 1.1rem;
  text-align: center;
}

.ba-num {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}

.ba-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-slate);
}

.ba-arrow {
  font-size: 1.5rem;
  font-weight: 900;
}

/* --- Step Footer Navigation --- */
.step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1.5px solid var(--color-body);
}

.btn-primary, .btn-secondary {
  appearance: none;
  border: 2px solid var(--color-ink);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-brutal-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: transform 0.1s, background 0.12s;
}

.btn-primary {
  background: var(--color-orange);
  color: var(--color-ink);
}

.btn-secondary {
  background: var(--color-paper);
  color: var(--color-ink);
}

.btn-primary:hover, .btn-secondary:hover {
  transform: translate(-1px, -1px);
}

/* --- My Growth (Tab 2) --- */
.growth-view {
  display: none;
  gap: 1.5rem;
}

.growth-view.is-active {
  display: grid;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.stat-card {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  padding: 1.15rem;
  box-shadow: var(--shadow-brutal-sm);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--color-orange-deep);
  margin-top: 0.25rem;
}

.history-list {
  display: grid;
  gap: 1rem;
}

.history-item {
  background: var(--color-paper);
  border: 2px solid var(--color-ink);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: var(--shadow-brutal-sm);
  display: grid;
  gap: 0.65rem;
}

.history-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  background: var(--color-ink);
  color: var(--color-paper);
  border: 2px solid var(--color-orange);
  padding: 0.75rem 1.15rem;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.88rem;
  box-shadow: var(--shadow-brutal);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.2s;
}

.toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}