.wbcv2-shell {
  --wbc-bg: linear-gradient(180deg, #fbfffd 0%, #f3fbf8 48%, #eef7ff 100%);
  --wbc-card: rgba(255,255,255,0.86);
  --wbc-text: #16332b;
  --wbc-muted: #5e7b72;
  --wbc-border: rgba(20,80,58,0.08);
  --wbc-shadow: 0 14px 40px rgba(75, 131, 115, 0.10);
  max-width: 100%;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wbcv2-app * { box-sizing: border-box; }
.wbcv2-app {
  background: var(--wbc-bg);
  color: var(--wbc-text);
  border: 1px solid var(--wbc-border);
  border-radius: 28px;
  box-shadow: var(--wbc-shadow);
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  min-height: min(760px, 92vh);
  height: min(760px, 92vh);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  position: relative;
}
.wbcv2-app::before,
.wbcv2-app::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(28px);
  opacity: 0.5;
  pointer-events: none;
}
.wbcv2-app::before {
  width: 170px; height: 170px; background: var(--wbc-accent-soft);
  top: -30px; right: -40px;
}
.wbcv2-app::after {
  width: 220px; height: 220px; background: rgba(208, 234, 255, .65);
  bottom: 50px; left: -70px;
}
.wbcv2-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 16px 10px;
  position: relative; z-index: 2;
}
.wbcv2-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.wbcv2-logo { width:40px; height:40px; object-fit:cover; border-radius:14px; }
.wbcv2-eyebrow { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color: var(--wbc-muted); }
.wbcv2-brand h2 { margin:2px 0 0; font-size:20px; line-height:1.1; }
.wbcv2-icon-btn {
  border:none; background:rgba(255,255,255,.72); color: var(--wbc-text);
  width:42px; height:42px; border-radius:14px; cursor:pointer; box-shadow: var(--wbc-shadow);
}
.wbcv2-viewport {
  position: relative; min-height:0; padding: 0 14px 10px; z-index:1;
}
.wbcv2-screen {
  display:none; height:100%;
}
.wbcv2-screen.active {
  display:flex; flex-direction:column; gap:12px; min-height:0;
}
.wbcv2-card {
  background: var(--wbc-card);
  backdrop-filter: blur(12px);
  border:1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  padding: 14px;
  box-shadow: var(--wbc-shadow);
}
.wbcv2-hero { display:grid; gap:12px; grid-template-columns: 1.05fr .95fr; align-items:center; min-height: 180px; }
.wbcv2-hero-copy h3 { margin:0 0 6px; font-size:22px; line-height:1.1; }
.wbcv2-hero-copy p { margin:0; color: var(--wbc-muted); font-size:13px; line-height:1.5; }
.wbcv2-mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wbcv2-stat { background: rgba(255,255,255,.7); border-radius:18px; padding:10px; text-align:center; }
.wbcv2-stat strong { display:block; font-size:17px; }
.wbcv2-stat span { font-size:11px; color: var(--wbc-muted); }
.wbcv2-step-wrap { display:grid; gap:10px; }
.wbcv2-steps { display:flex; gap:8px; }
.wbcv2-step {
  flex:1; height:8px; border-radius:999px; background: rgba(115,160,145,.16); overflow:hidden;
}
.wbcv2-step.active::before, .wbcv2-step.done::before {
  content:""; display:block; width:100%; height:100%; background: linear-gradient(90deg,var(--wbc-accent), #b4e7d8);
}
.wbcv2-question { font-size:18px; font-weight:700; margin:0; }
.wbcv2-chip-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.wbcv2-chip, .wbcv2-pill, .wbcv2-action, .wbcv2-ghost, .wbcv2-tech-btn {
  border:none; cursor:pointer; transition:.18s ease; font:inherit;
}
.wbcv2-chip {
  padding:11px 12px; border-radius:18px; background: rgba(255,255,255,.78); color: var(--wbc-text); text-align:left;
  min-height:48px;
}
.wbcv2-chip.active { background: var(--wbc-accent-soft); outline: 2px solid rgba(116,205,182,.35); }
.wbcv2-chip small { display:block; color: var(--wbc-muted); font-size:11px; margin-top:2px; }
.wbcv2-pills { display:flex; gap:8px; flex-wrap:wrap; }
.wbcv2-pill { padding:10px 12px; border-radius:999px; background: rgba(255,255,255,.8); }
.wbcv2-pill.active { background: var(--wbc-accent); color: white; }
.wbcv2-recommend {
  display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px; border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(245,255,251,.9));
}
.wbcv2-recommend h4 { margin:0 0 4px; font-size:17px; }
.wbcv2-recommend p { margin:0; color: var(--wbc-muted); font-size:12px; }
.wbcv2-action {
  background: linear-gradient(135deg,var(--wbc-accent), #9ee4cf);
  color:white; padding: 12px 16px; border-radius:18px; font-weight:700; white-space:nowrap;
  box-shadow: 0 12px 24px rgba(116,205,182,.28);
}
.wbcv2-ghost {
  background: rgba(255,255,255,.75); color: var(--wbc-text); padding: 12px 14px; border-radius:16px;
}
.wbcv2-row { display:flex; gap:8px; }
.wbcv2-row > * { flex:1; }
.wbcv2-coach-layout {
  display:grid; gap:12px; grid-template-rows:auto auto 1fr auto;
  min-height:0; height:100%;
}
.wbcv2-title-row { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.wbcv2-title-row h3 { margin:0 0 4px; font-size:20px; }
.wbcv2-title-row p { margin:0; color:var(--wbc-muted); font-size:13px; }
.wbcv2-breath-stage { text-align:center; font-size:14px; color: var(--wbc-muted); font-weight:600; }
.wbcv2-orb-wrap {
  min-height: 250px; display:grid; place-items:center; position: relative; overflow:hidden;
}
.wbcv2-asmr {
  --breath-duration: 4s;
  width: 172px; height: 172px; position: relative; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eefef8 22%, #c8f1e4 48%, #93dcc7 78%, #7bcdb8 100%);
  box-shadow: inset 0 12px 28px rgba(255,255,255,.85), 0 18px 45px rgba(116,205,182,.35);
  transform: scale(.96) translateY(0px);
  animation: orbReady 6s ease-in-out infinite;
  will-change: transform, box-shadow, filter;
}
.wbcv2-asmr[data-breath-mode="inhale"] {
  animation: orbInhale var(--breath-duration) ease-in-out forwards;
}
.wbcv2-asmr[data-breath-mode="hold"] {
  animation: orbHold var(--breath-duration) ease-in-out infinite;
}
.wbcv2-asmr[data-breath-mode="exhale"] {
  animation: orbExhale var(--breath-duration) ease-in-out forwards;
}
.wbcv2-asmr[data-breath-mode="ready"] {
  animation: orbReady 6s ease-in-out infinite;
}
.wbcv2-asmr::before,
.wbcv2-asmr::after {
  content:""; position:absolute; inset:-16px; border-radius:50%;
  border:1px solid rgba(116,205,182,.28); animation: wbcPulse 5s ease-in-out infinite;
}
.wbcv2-asmr::after { inset:-32px; animation-delay:1.2s; opacity:.7; }

@keyframes orbReady {
  0%, 100% { transform: scale(.96) translateY(0px); box-shadow: inset 0 12px 28px rgba(255,255,255,.85), 0 18px 45px rgba(116,205,182,.22); }
  50% { transform: scale(1.01) translateY(-3px); box-shadow: inset 0 12px 28px rgba(255,255,255,.9), 0 24px 52px rgba(116,205,182,.30); }
}
@keyframes orbInhale {
  0% { transform: scale(.92) translateY(8px); box-shadow: inset 0 12px 28px rgba(255,255,255,.82), 0 14px 34px rgba(116,205,182,.18); filter: saturate(.96); }
  100% { transform: scale(1.12) translateY(-6px); box-shadow: inset 0 18px 36px rgba(255,255,255,.95), 0 28px 64px rgba(116,205,182,.42); filter: saturate(1.06); }
}
@keyframes orbHold {
  0%, 100% { transform: scale(1.08) translateY(-4px); box-shadow: inset 0 18px 36px rgba(255,255,255,.95), 0 28px 64px rgba(116,205,182,.42); }
  50% { transform: scale(1.1) translateY(-5px); box-shadow: inset 0 18px 36px rgba(255,255,255,.98), 0 30px 68px rgba(116,205,182,.46); }
}
@keyframes orbExhale {
  0% { transform: scale(1.08) translateY(-5px); box-shadow: inset 0 18px 36px rgba(255,255,255,.95), 0 28px 64px rgba(116,205,182,.42); filter: saturate(1.03); }
  100% { transform: scale(.88) translateY(10px); box-shadow: inset 0 8px 22px rgba(255,255,255,.8), 0 10px 24px rgba(116,205,182,.14); filter: saturate(.95); }
}

@keyframes wbcPulse {
  0%, 100% { transform: scale(.88); opacity:.28; }
  50% { transform: scale(1.15); opacity:.8; }
}
.wbcv2-glow, .wbcv2-glow2, .wbcv2-glow3 {
  position:absolute; border-radius:50%; filter: blur(18px); opacity:.55;
}
.wbcv2-glow { width:70px; height:70px; background:#fff; top:18%; left:22%; }
.wbcv2-glow2 { width:64px; height:64px; background:rgba(211,241,255,.75); bottom:18%; right:18%; }
.wbcv2-glow3 { width:90px; height:90px; background:rgba(255,255,255,.45); top:36%; right:26%; }
.wbcv2-bubbles span {
  position:absolute; display:block; width:10px; height:10px; background:rgba(255,255,255,.65); border-radius:50%;
  animation: bubbleFloat 9s linear infinite;
}
.wbcv2-bubbles span:nth-child(1){left:18%; bottom:5%; animation-delay:0s;}
.wbcv2-bubbles span:nth-child(2){left:38%; bottom:-2%; width:6px;height:6px; animation-delay:2s;}
.wbcv2-bubbles span:nth-child(3){left:60%; bottom:0%; width:8px;height:8px; animation-delay:4s;}
.wbcv2-bubbles span:nth-child(4){left:74%; bottom:6%; width:12px;height:12px; animation-delay:1.5s;}
.wbcv2-bubbles span:nth-child(5){left:50%; bottom:2%; width:5px;height:5px; animation-delay:5s;}
@keyframes bubbleFloat {
  0% { transform: translateY(0) scale(.8); opacity:0; }
  12% { opacity:.7; }
  100% { transform: translateY(-230px) scale(1.25); opacity:0; }
}
.wbcv2-progress { height:10px; border-radius:999px; background: rgba(105,148,134,.14); overflow:hidden; }
.wbcv2-progress > span { display:block; height:100%; width:0%; background: linear-gradient(90deg,var(--wbc-accent), #b7ebdc); }
.wbcv2-timers { display:flex; justify-content:space-between; color:var(--wbc-muted); font-size:12px; }
.wbcv2-controls { display:flex; gap:8px; }
.wbcv2-controls button { flex:1; min-height:48px; }
.wbcv2-tech-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wbcv2-tech-btn {
  background: rgba(255,255,255,.78); border-radius: 18px; padding: 10px; text-align:left; min-height: 86px;
}
.wbcv2-tech-btn strong { display:block; font-size:14px; margin-bottom:4px; }
.wbcv2-tech-btn span { display:block; font-size:11px; color:var(--wbc-muted); }
.wbcv2-section-title { margin:0 0 8px; font-size:16px; }
.wbcv2-stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.wbcv2-bigstat { text-align:center; padding:16px; }
.wbcv2-bigstat strong { display:block; font-size:26px; line-height:1; margin-bottom:4px; }
.wbcv2-bigstat span { color:var(--wbc-muted); font-size:12px; }
.wbcv2-history { display:grid; gap:8px; }
.wbcv2-history-item { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background: rgba(255,255,255,.72); }
.wbcv2-history-item strong { display:block; font-size:13px; }
.wbcv2-history-item span { font-size:11px; color:var(--wbc-muted); }
.wbcv2-muted { color:var(--wbc-muted); font-size:12px; }
.wbcv2-bottomnav {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px 14px 14px;
  background: linear-gradient(180deg, rgba(248,255,252,.1), rgba(248,255,252,.94));
  backdrop-filter: blur(10px);
  position: sticky; bottom: 0; z-index: 5;
}
.wbcv2-bottomnav button {
  border:none; background: rgba(255,255,255,.78); color:var(--wbc-muted); border-radius:16px; min-height:46px; font-weight:700; cursor:pointer;
}
.wbcv2-bottomnav button.active { background: var(--wbc-accent-soft); color: var(--wbc-text); }
.wbcv2-scrollhint { overflow:auto; min-height:0; padding-right:2px; }
.wbcv2-scrollhint::-webkit-scrollbar { width:0; height:0; }
.wbcv2-toast {
  position:absolute; left:50%; bottom:84px; transform:translateX(-50%);
  background:rgba(22,51,43,.88); color:white; padding:10px 14px; border-radius:999px; font-size:12px; z-index:20;
}
@media (max-width: 380px) {
  .wbcv2-app { border-radius: 22px; }
  .wbcv2-hero { grid-template-columns: 1fr; }
  .wbcv2-chip-grid, .wbcv2-tech-grid { grid-template-columns:1fr 1fr; }
  .wbcv2-orb-wrap { min-height:220px; }
  .wbcv2-asmr { width:150px; height:150px; }
}