:root {
  color-scheme: dark;
  --bg: #050513;
  --bg-deep: #02020a;
  --panel: rgba(11, 13, 35, 0.82);
  --panel-soft: rgba(20, 24, 58, 0.64);
  --panel-bright: rgba(255, 255, 255, 0.08);
  --text: #f7fbff;
  --muted: #b7c0dc;
  --muted-2: #7f8bb0;
  --line: rgba(255, 255, 255, 0.14);
  --cyan: #64e8ff;
  --blue: #7aa7ff;
  --pink: #ff4fb8;
  --magenta: #b74dff;
  --danger: #ff6b8b;
  --ok: #65f2c8;
  --shadow: 0 26px 86px rgba(0, 0, 0, 0.5);
  --radius: 28px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg-deep);
}

body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 12%, rgba(80, 214, 255, 0.28), transparent 28rem),
    radial-gradient(circle at 82% 7%, rgba(255, 70, 188, 0.25), transparent 24rem),
    radial-gradient(circle at 70% 82%, rgba(98, 79, 255, 0.22), transparent 30rem),
    linear-gradient(160deg, #050514 0%, #090921 48%, #02020a 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.24;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.48) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(101,232,255,0.28) 0 1px, transparent 1.4px);
  background-size: 86px 86px, 132px 132px;
  background-position: 0 0, 24px 54px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
}

.ambient {
  position: fixed;
  inset: -20vh -10vw auto -10vw;
  height: 58vh;
  pointer-events: none;
  filter: blur(32px);
  background:
    radial-gradient(circle at 25% 40%, rgba(83, 229, 255, 0.22), transparent 20rem),
    radial-gradient(circle at 66% 28%, rgba(255, 75, 184, 0.22), transparent 22rem);
}

button, input, textarea, select {
  font: inherit;
}

button {
  border: 0;
  border-radius: 999px;
  padding: 0.88rem 1.18rem;
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  color: #050513;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(255, 79, 184, 0.18), 0 10px 24px rgba(100, 232, 255, 0.14);
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

button:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}

button:active {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

button.secondary {
  background: rgba(255, 255, 255, 0.07);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

button.small {
  padding: 0.58rem 0.86rem;
  font-size: 0.92rem;
}

button.danger, .danger {
  color: #ffd8e2;
  border-color: rgba(255, 107, 139, 0.35);
}

.app-shell {
  position: relative;
  width: min(1120px, calc(100vw - 24px));
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 0 max(34px, env(safe-area-inset-bottom));
  display: grid;
  gap: 16px;
}

.card {
  background: linear-gradient(145deg, rgba(17, 18, 48, 0.86), rgba(9, 10, 28, 0.78));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(22px);
}

.hero-card {
  padding: clamp(22px, 4vw, 36px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  position: relative;
}

.hero-card::after {
  content: "";
  position: absolute;
  right: -8rem;
  top: -10rem;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 79, 184, 0.28), transparent 60%);
  pointer-events: none;
}

.brand-row {
  display: flex;
  gap: 20px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.brand-mark {
  width: clamp(70px, 10vw, 98px);
  height: clamp(70px, 10vw, 98px);
  filter: drop-shadow(0 0 22px rgba(100, 232, 255, 0.3)) drop-shadow(0 0 24px rgba(255, 79, 184, 0.24));
  flex: 0 0 auto;
}

.hero-card h1 {
  margin: 0;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff, #dffbff 34%, #ffd2ee 70%, #fff);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 34px rgba(255, 255, 255, 0.08);
}

.hero-copy {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.16rem);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.grid {
  display: grid;
  gap: 16px;
}

.two-col {
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, 0.94fr);
}

.section-head, .coach-header, .settings-actions, .coach-actions, .quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--cyan);
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 820;
  text-transform: uppercase;
}

h2, h3 {
  margin: 0;
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.35rem, 4vw, 2.05rem);
}

h3 {
  font-size: 1.16rem;
}

.subtle, .hint {
  color: var(--muted);
  line-height: 1.55;
}

.hint {
  margin: 0;
  font-size: 0.93rem;
}

.local-badge, .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(100, 232, 255, 0.28);
  background: rgba(100, 232, 255, 0.08);
  color: #dcfbff;
  padding: 0.48rem 0.78rem;
  font-size: 0.86rem;
  font-weight: 720;
}

.status-pill.bad {
  border-color: rgba(255, 107, 139, 0.42);
  background: rgba(255, 107, 139, 0.12);
  color: #ffe0e8;
}

.status-pill.ok {
  border-color: rgba(101, 242, 200, 0.42);
  background: rgba(101, 242, 200, 0.1);
  color: #d9fff5;
}

.checkin, .settings, .protocol, .safety {
  padding: 22px;
}

.chip-field {
  border: 0;
  padding: 0;
  margin: 20px 0 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-field legend {
  width: 100%;
  color: var(--muted-2);
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 730;
}

.chip {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 0.62rem 0.82rem;
}

.chip.active {
  color: #05101b;
  border-color: transparent;
  background: linear-gradient(135deg, rgba(100, 232, 255, 1), rgba(255, 79, 184, 0.96));
  box-shadow: 0 0 26px rgba(255, 79, 184, 0.16);
}

.range-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  margin: 8px 0 8px;
}

.range-label strong {
  color: var(--text);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--pink);
}

.field-grid, .settings-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-grid {
  margin: 18px 0;
}

label {
  color: var(--muted);
  display: grid;
  gap: 7px;
  font-size: 0.93rem;
  font-weight: 650;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  padding: 0.92rem 1rem;
  outline: none;
}

input:focus, textarea:focus, select:focus {
  border-color: rgba(100, 232, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(100, 232, 255, 0.1);
}

textarea {
  resize: vertical;
  min-height: 72px;
}

.check-row {
  display: flex;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.check-row input {
  width: auto;
  accent-color: var(--pink);
}

.section-toggle {
  width: 100%;
  border-radius: 22px;
  padding: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

.section-toggle strong {
  display: block;
  font-size: 1.34rem;
}

.chevron {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.settings-panel {
  margin-top: 18px;
}

.settings-panel.collapsed {
  display: none;
}

.settings-panel .settings-actions, .settings-panel .hint {
  grid-column: 1 / -1;
}

.coach {
  padding: 22px;
}

.messages {
  min-height: 260px;
  max-height: min(58vh, 620px);
  overflow: auto;
  margin: 18px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

.message {
  width: min(82%, 760px);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 13px 15px;
  background: rgba(255,255,255,0.055);
  white-space: pre-wrap;
  line-height: 1.52;
}

.message.user {
  align-self: flex-end;
  background: linear-gradient(145deg, rgba(100, 232, 255, 0.14), rgba(122, 167, 255, 0.11));
}

.message.assistant {
  align-self: flex-start;
  background: linear-gradient(145deg, rgba(255, 79, 184, 0.13), rgba(183, 77, 255, 0.1));
}

.message.system {
  align-self: center;
  width: min(94%, 840px);
  background: rgba(255, 107, 139, 0.1);
  border-color: rgba(255, 107, 139, 0.26);
}

.message .meta {
  display: block;
  margin-bottom: 6px;
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.message.user .meta {
  color: #ffd7ed;
}

.exercise-panel {
  border: 1px solid rgba(100, 232, 255, 0.22);
  background: linear-gradient(145deg, rgba(100, 232, 255, 0.08), rgba(255, 79, 184, 0.08));
  border-radius: 24px;
  padding: 16px;
  margin-bottom: 16px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 0.75fr) 1.25fr;
}

.exercise-panel ol {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--muted);
  line-height: 1.5;
}

.quick-actions {
  justify-content: flex-start;
  margin: 8px 0 16px;
}

.record-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.22);
  padding: 14px;
}

.record-button {
  min-width: 210px;
  min-height: 60px;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.record-ring {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #071222;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.7), 0 0 0 0 rgba(255, 79, 184, 0.4);
}

.record-button.recording .record-ring {
  background: var(--danger);
  box-shadow: 0 0 0 8px rgba(255, 107, 139, 0.12), 0 0 22px rgba(255, 107, 139, 0.55);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.16); }
}

.text-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}

.text-form button {
  min-height: 54px;
}

audio {
  width: 100%;
  margin-top: 14px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0;
}

.metrics div {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.metrics dt {
  color: var(--muted-2);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 800;
}

.metrics dd {
  margin: 6px 0 0;
  color: var(--text);
  font-weight: 780;
}

.safety {
  color: var(--muted);
  line-height: 1.55;
}

.safety p {
  margin: 0 0 10px;
}

.safety p:last-child {
  margin-bottom: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 880px) {
  .two-col, .exercise-panel {
    grid-template-columns: 1fr;
  }

  .hero-card, .brand-row {
    flex-direction: column;
  }

  .hero-actions {
    align-items: flex-start;
  }

  .field-grid, .settings-panel, .metrics {
    grid-template-columns: 1fr;
  }

  .record-panel, .text-form {
    grid-template-columns: 1fr;
  }

  .record-button {
    width: 100%;
  }

  .message {
    width: 96%;
  }
}


/* Resonara visual upgrade -------------------------------------------------- */
:root { --emotion-a: #64e8ff; --emotion-b: #ff4fb8; --emotion-c: #b74dff; --intensity-level: 60%; --orb-scale: 1.072; --breath-scale: 1; --record-level: 0; }
.ambient-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -2; pointer-events: none; opacity: 0.86; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.34; background: linear-gradient(115deg, transparent 0 24%, rgba(100,232,255,.12) 24.3% 24.8%, transparent 25.2% 52%, rgba(255,79,184,.10) 52.3% 52.8%, transparent 53.2%), repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 72px); mask-image: radial-gradient(circle at 50% 22%, #000 0%, rgba(0,0,0,.8) 42%, transparent 88%); animation: scanDrift 18s linear infinite; }
@keyframes scanDrift { from { transform: translate3d(-1.5rem,0,0); } to { transform: translate3d(1.5rem,0,0); } }
.card { position: relative; isolation: isolate; }
.card::before { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--radius) - 1px); pointer-events: none; opacity: .5; background: linear-gradient(120deg, rgba(255,255,255,.12), transparent 22%, transparent 72%, rgba(255,255,255,.07)); mask-image: linear-gradient(#000, transparent 66%); z-index: -1; }
.hero-card { align-items: stretch; min-height: 410px; gap: clamp(18px,3vw,34px); }
.brand-block { position: relative; z-index: 2; min-width: min(100%,580px); flex: 1.1 1 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.hero-card h1 { position: relative; width: max-content; max-width: 100%; animation: titleGlow 4.8s ease-in-out infinite; }
.hero-card h1::after { content:""; position:absolute; left:.06em; right:.06em; bottom:-.08em; height:.09em; border-radius:999px; background:linear-gradient(90deg,var(--emotion-a),transparent,var(--emotion-b)); filter:blur(.5px) drop-shadow(0 0 12px var(--emotion-a)); opacity:.7; }
@keyframes titleGlow { 0%,100% { filter: drop-shadow(0 0 10px rgba(100,232,255,.1)); } 50% { filter: drop-shadow(0 0 28px rgba(255,79,184,.18)); } }
.hero-visual { position: relative; z-index: 1; flex: .95 1 420px; min-height: 340px; border: 1px solid rgba(255,255,255,.16); border-radius: 34px; overflow: hidden; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--emotion-a) 34%, transparent), transparent 12rem), radial-gradient(circle at 28% 22%, rgba(255,255,255,.12), transparent 9rem), rgba(0,0,0,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 -40px 80px rgba(0,0,0,.18), 0 22px 70px rgba(0,0,0,.28); }
.hero-visual::before, .hero-visual::after { content:""; position:absolute; inset:12%; border-radius:50%; border:1px solid rgba(255,255,255,.12); box-shadow:0 0 54px color-mix(in srgb, var(--emotion-a) 24%, transparent); pointer-events:none; animation: orbitTilt 10s linear infinite; }
.hero-visual::after { inset: 22% 8%; transform: rotate(62deg); animation-duration: 14s; animation-direction: reverse; border-color: color-mix(in srgb, var(--emotion-b) 34%, transparent); }
@keyframes orbitTilt { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.05); } to { transform: rotate(360deg) scale(1); } }
#resonanceCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-orb { position:absolute; left:50%; top:50%; width:clamp(172px,22vw,248px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; display:grid; place-items:center; text-align:center; padding:28px; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,.2) 12%, transparent 30%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--emotion-a) 44%, transparent), color-mix(in srgb, var(--emotion-b) 24%, transparent) 52%, rgba(5,5,19,.76) 74%); border:1px solid rgba(255,255,255,.24); box-shadow:0 0 42px color-mix(in srgb, var(--emotion-a) 38%, transparent), 0 0 92px color-mix(in srgb, var(--emotion-b) 28%, transparent), inset 0 0 46px rgba(255,255,255,.13); animation: orbBreath 7s ease-in-out infinite; }
@keyframes orbBreath { 0%,100% { scale:1; filter:saturate(1); } 50% { scale:var(--orb-scale); filter:saturate(1.18); } }
.hero-orb > * { grid-column: 1; grid-row: 1; }
.orb-kicker { align-self:start; margin-top:26px; color:rgba(255,255,255,.72); font-size:.68rem; text-transform:uppercase; letter-spacing:.16em; font-weight:840; }
.hero-orb strong { font-size:clamp(1.35rem,3vw,2rem); line-height:1; text-shadow:0 2px 18px rgba(0,0,0,.42); }
.hero-orb span:last-child { align-self:end; margin-bottom:28px; color:rgba(255,255,255,.78); font-weight:740; }
.hero-legend { position:absolute; left:18px; right:18px; bottom:16px; display:flex; gap:9px; justify-content:center; flex-wrap:wrap; }
.hero-legend span, .insight-strip span { display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:.48rem .72rem; color:rgba(255,255,255,.78); background:rgba(0,0,0,.28); backdrop-filter:blur(12px); font-size:.78rem; font-weight:760; }
.hero-legend i { width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--emotion-a),var(--emotion-b)); box-shadow:0 0 14px var(--emotion-a); }
.checkin { overflow: hidden; }
.checkin-cockpit { display:grid; grid-template-columns:minmax(170px,.9fr) minmax(170px,1.1fr); gap:12px; margin:18px 0 8px; }
.intensity-dial, .body-map, .data-flow, .voice-card, .breath-card, .session-arc { border:1px solid rgba(255,255,255,.13); border-radius:24px; background:linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.08); }
.intensity-dial { min-height:174px; display:grid; place-items:center; position:relative; overflow:hidden; }
.intensity-dial::before { content:""; position:absolute; inset:24%; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--emotion-a) 34%, transparent), transparent 68%); filter:blur(12px); }
.intensity-dial svg { position:absolute; inset:12px; width:calc(100% - 24px); height:calc(100% - 24px); transform:rotate(-90deg); }
.dial-track, .dial-arc { fill:transparent; stroke-width:10; }
.dial-track { stroke:rgba(255,255,255,.1); }
.dial-arc { stroke:url(#dialGradient); stroke-linecap:round; stroke-dasharray:365; stroke-dashoffset:146; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--emotion-a) 52%, transparent)); transition:stroke-dashoffset 420ms cubic-bezier(.2,.8,.2,1); }
.intensity-dial div { position:relative; z-index:1; display:grid; text-align:center; }
.intensity-dial strong { font-size:2.05rem; line-height:1; }
.intensity-dial span { color:var(--muted); font-weight:750; }
.body-map { min-height:174px; display:grid; grid-template-columns:.8fr 1fr; align-items:center; padding:14px; overflow:hidden; }
.body-silhouette { position:relative; width:92px; height:146px; margin:auto; border-radius:50px 50px 42px 42px; background: radial-gradient(circle at 50% 13%, rgba(255,255,255,.15) 0 18%, transparent 19%), linear-gradient(180deg, rgba(100,232,255,.15), rgba(255,79,184,.12)); border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 26px rgba(255,255,255,.08), 0 0 36px color-mix(in srgb, var(--emotion-b) 18%, transparent); }
.body-silhouette::before, .body-silhouette::after { content:""; position:absolute; top:42px; width:28px; height:72px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); border-radius:999px; }
.body-silhouette::before { left:-20px; transform:rotate(12deg); } .body-silhouette::after { right:-20px; transform:rotate(-12deg); }
.body-node { position:absolute; width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.28); }
.body-node.active { background:var(--emotion-a); box-shadow:0 0 0 10px color-mix(in srgb, var(--emotion-a) 12%, transparent), 0 0 28px var(--emotion-a), 0 0 42px var(--emotion-b); animation:nodePulse 1.6s ease-in-out infinite; }
@keyframes nodePulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.32); } }
.body-node.head { left:50%; top:18%; transform:translate(-50%,-50%); } .body-node.throat { left:50%; top:35%; transform:translate(-50%,-50%); } .body-node.chest { left:50%; top:50%; transform:translate(-50%,-50%); } .body-node.belly { left:50%; top:68%; transform:translate(-50%,-50%); } .body-node.shoulders.left { left:18%; top:43%; transform:translate(-50%,-50%); } .body-node.shoulders.right { left:82%; top:43%; transform:translate(-50%,-50%); }
.body-map p { margin:0; display:grid; gap:5px; } .body-map strong { font-size:1.32rem; } .body-map span { color:var(--muted); font-size:.86rem; font-weight:740; }
input[type="range"] { height:18px; accent-color:var(--emotion-b); background:linear-gradient(90deg,var(--emotion-a),var(--emotion-b) var(--intensity-level),rgba(255,255,255,.09) var(--intensity-level)); border-radius:999px; padding:0; border:1px solid rgba(255,255,255,.08); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:5px solid var(--emotion-b); box-shadow:0 0 22px var(--emotion-b); }
input[type="range"]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:5px solid var(--emotion-b); box-shadow:0 0 22px var(--emotion-b); }
.data-flow { margin-top:18px; padding:14px; display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:center; }
.data-flow div { min-height:78px; border-radius:18px; background:rgba(0,0,0,.22); display:grid; align-content:center; gap:5px; padding:12px; }
.data-flow span { color:var(--muted-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; font-weight:850; } .data-flow strong { color:var(--text); font-size:.95rem; }
.data-flow i { width:22px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--emotion-a),var(--emotion-b)); box-shadow:0 0 14px var(--emotion-a); position:relative; }
.data-flow i::after { content:""; position:absolute; right:-2px; top:50%; width:7px; height:7px; border-right:2px solid var(--emotion-b); border-top:2px solid var(--emotion-b); transform:translateY(-50%) rotate(45deg); }
.session-stage { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr); gap:14px; margin:18px 0 8px; }
.voice-card, .breath-card { padding:14px; overflow:hidden; } .voice-card { min-height:206px; }
.voice-card-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:8px; } .voice-card-head strong { color:var(--text); }
#voiceCanvas { width:100%; height:132px; display:block; border-radius:18px; background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--emotion-a) 15%, transparent), transparent 70%), rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.08); }
.visual-mode { margin:9px 0 0; color:var(--muted); font-size:.86rem; line-height:1.45; }
.breath-card { display:grid; grid-template-columns:104px minmax(0,1fr); align-items:center; gap:16px; }
.breath-orb { width:98px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background: radial-gradient(circle at 36% 26%, rgba(255,255,255,.95), transparent 16%), radial-gradient(circle, color-mix(in srgb, var(--emotion-a) 46%, transparent), color-mix(in srgb, var(--emotion-b) 28%, transparent) 56%, rgba(255,255,255,.05) 72%); box-shadow:0 0 36px color-mix(in srgb, var(--emotion-a) 30%, transparent), inset 0 0 24px rgba(255,255,255,.16); transform:scale(var(--breath-scale)); transition:transform 420ms ease, filter 420ms ease; }
.breath-orb span { width:42%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.32); box-shadow:inset 0 0 20px rgba(255,255,255,.18); }
body[data-breath="inhale"] .breath-orb { filter:saturate(1.2) brightness(1.05); } body[data-breath="exhale"] .breath-orb { filter:saturate(.96) brightness(.98); }
.record-panel { position:relative; overflow:hidden; }
.record-panel::after { content:""; position:absolute; inset:auto 14px 0; height:3px; border-radius:999px; background:linear-gradient(90deg,var(--emotion-a),var(--emotion-b)); transform-origin:left center; transform:scaleX(calc(.18 + var(--record-level) * .82)); box-shadow:0 0 18px var(--emotion-a); opacity:.72; }
.record-button.recording { background:linear-gradient(135deg,var(--emotion-b),var(--danger)); color:#fff; }
.messages { position:relative; padding:2px; }
.message { position:relative; overflow:hidden; animation:messageIn 260ms ease both; }
.message::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 0 35%, rgba(255,255,255,.08), transparent 65% 100%); transform:translateX(-110%); animation:shimmerOnce 900ms ease 140ms both; pointer-events:none; }
@keyframes messageIn { from { transform:translateY(8px); opacity:0; } to { transform:translateY(0); opacity:1; } } @keyframes shimmerOnce { to { transform:translateX(110%); } }
.session-arc { padding:14px; margin:18px 0 12px; } .session-arc > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; } .session-arc strong { color:var(--text); font-size:.94rem; }
#timelineCanvas { width:100%; height:142px; display:block; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), rgba(0,0,0,.2); }
.insight-strip { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.safety { overflow:hidden; } .safety-glow { height:138px; border-radius:24px; margin-bottom:16px; background: radial-gradient(circle at 50% 44%, rgba(101,242,200,.36), transparent 24%), radial-gradient(circle at 32% 45%, rgba(100,232,255,.24), transparent 22%), radial-gradient(circle at 68% 45%, rgba(255,79,184,.22), transparent 22%), linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); position:relative; }
.safety-glow::before, .safety-glow::after { content:""; position:absolute; left:50%; top:50%; width:72px; height:72px; border-radius:50%; border:1px solid rgba(255,255,255,.22); transform:translate(-50%,-50%); box-shadow:0 0 28px rgba(101,242,200,.18); } .safety-glow::after { width:118px; height:48px; transform:translate(-50%,-50%) rotate(-22deg); }
body[data-state="recording"] .hero-visual, body[data-state="recording"] .voice-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 0 0 1px color-mix(in srgb, var(--emotion-b) 36%, transparent), 0 24px 80px color-mix(in srgb, var(--emotion-b) 18%, transparent); }
body[data-state="busy"] .hero-orb { animation-duration:2.2s; }
@media (max-width: 980px) { .hero-card, .brand-block { flex-direction:column; } .hero-visual { width:100%; min-height:320px; } .session-stage, .checkin-cockpit { grid-template-columns:1fr; } .body-map { grid-template-columns:110px minmax(0,1fr); } }
@media (max-width: 560px) { .hero-orb { width:170px; } .hero-legend { justify-content:flex-start; } .data-flow { grid-template-columns:1fr; } .data-flow i { width:2px; height:22px; margin:0 auto; } .data-flow i::after { right:50%; top:auto; bottom:-2px; transform:translateX(50%) rotate(135deg); } .breath-card { grid-template-columns:1fr; text-align:center; } .breath-orb { margin:0 auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }


[hidden] { display: none !important; }

body[data-consent="pending"] {
  overflow: hidden;
}

body[data-consent="pending"] .app-shell {
  filter: blur(8px) saturate(0.72);
  transform: scale(0.985);
  pointer-events: none;
  user-select: none;
}

.trust-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  overflow: auto;
  background:
    radial-gradient(circle at 20% 10%, rgba(100, 232, 255, 0.18), transparent 26rem),
    radial-gradient(circle at 80% 4%, rgba(255, 79, 184, 0.17), transparent 24rem),
    rgba(2, 2, 10, 0.78);
  backdrop-filter: blur(18px);
}

.trust-aurora {
  position: fixed;
  inset: auto -10vw -22vh -10vw;
  height: 44vh;
  pointer-events: none;
  filter: blur(30px);
  background:
    radial-gradient(circle at 30% 50%, rgba(100, 232, 255, 0.24), transparent 22rem),
    radial-gradient(circle at 60% 50%, rgba(255, 79, 184, 0.22), transparent 24rem),
    radial-gradient(circle at 48% 10%, rgba(101, 242, 200, 0.15), transparent 18rem);
  animation: trustAurora 8s ease-in-out infinite alternate;
}

@keyframes trustAurora {
  from { transform: translate3d(-2%, 0, 0) scale(1); opacity: 0.78; }
  to { transform: translate3d(2%, -3%, 0) scale(1.05); opacity: 1; }
}

.trust-card {
  width: min(1060px, 100%);
  padding: clamp(18px, 3vw, 30px);
  position: relative;
  overflow: hidden;
}

.trust-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(100,232,255,.28), transparent 22%, rgba(255,79,184,.2) 72%, transparent);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
}

.trust-hero-block {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 4px 0 22px;
}

.trust-brand-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.trust-mark {
  width: clamp(58px, 8vw, 78px);
  height: clamp(58px, 8vw, 78px);
  filter: drop-shadow(0 0 18px rgba(100,232,255,.38)) drop-shadow(0 0 22px rgba(255,79,184,.24));
}

.trust-hero-block h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.7rem);
  line-height: 0.96;
  letter-spacing: -0.045em;
  background: linear-gradient(90deg, #fff, #dffbff 44%, #ffd2ee 78%, #fff);
  -webkit-background-clip: text;
  color: transparent;
}

.trust-intro {
  max-width: 800px;
  margin: 0;
  color: var(--muted);
  line-height: 1.62;
  font-size: clamp(1rem, 2vw, 1.16rem);
}

.trust-cta-pulse {
  position: absolute;
  right: clamp(0px, 4vw, 40px);
  top: 18px;
  width: 118px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255,255,255,.15), rgba(100,232,255,.06) 42%, transparent 68%);
  box-shadow: 0 0 58px rgba(100,232,255,.18), inset 0 0 24px rgba(255,255,255,.1);
}

.trust-cta-pulse span {
  grid-area: 1 / 1;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24);
  animation: trustPulse 3.4s ease-in-out infinite;
}

.trust-cta-pulse span:nth-child(2) { width: 68%; animation-delay: .45s; }
.trust-cta-pulse span:nth-child(3) { width: 92%; animation-delay: .9s; }

@keyframes trustPulse {
  0%, 100% { transform: scale(.86); opacity: .34; }
  50% { transform: scale(1.08); opacity: .9; }
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.trust-panel {
  min-height: 245px;
  padding: 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.trust-panel h2 {
  margin: 10px 0 9px;
  font-size: 1.2rem;
}

.trust-panel p, .trust-panel li {
  color: var(--muted);
  line-height: 1.5;
  font-size: .94rem;
}

.trust-panel ul {
  padding-left: 1.1rem;
  margin: 10px 0 0;
}

.trust-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #06101c;
  background: linear-gradient(135deg, var(--cyan), var(--pink));
  font-weight: 900;
  font-size: .78rem;
  box-shadow: 0 0 26px rgba(100,232,255,.18);
}

.science-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.science-pills span, .insight-strip span {
  border: 1px solid rgba(100,232,255,.2);
  border-radius: 999px;
  padding: .42rem .58rem;
  color: #dffbff;
  background: rgba(100,232,255,.07);
  font-size: .78rem;
  font-weight: 760;
}

.emergency-line {
  color: #ffe2ea !important;
  border-left: 3px solid var(--danger);
  padding-left: 10px;
}

.trust-consent {
  margin-top: 14px;
  border: 1px solid rgba(101,242,200,.22);
  background: rgba(101,242,200,.055);
  border-radius: 24px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.consent-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--text);
  font-weight: 650;
  line-height: 1.42;
}

.consent-row input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--ok);
}

.trust-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.secondary-link {
  color: #ffe1eb;
  text-decoration: none;
  border: 1px solid rgba(255,107,139,.35);
  background: rgba(255,107,139,.1);
  border-radius: 999px;
  padding: .84rem 1rem;
  font-weight: 800;
}

.trust-smallprint {
  margin: 0;
  color: var(--muted-2);
  font-size: .82rem;
  line-height: 1.45;
}

.ai-pill {
  border-color: rgba(101,242,200,.34);
  background: rgba(101,242,200,.08);
  color: #ddfff6;
}

.science-trust-strip {
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.science-head { margin-bottom: 14px; }

.science-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.science-card {
  position: relative;
  overflow: hidden;
  min-height: 126px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--emotion-a) 16%, transparent), transparent 10rem),
    rgba(0,0,0,.18);
}

.science-card::after {
  content: "";
  position: absolute;
  right: -36px;
  bottom: -54px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--emotion-b) 28%, transparent);
  box-shadow: 0 0 34px color-mix(in srgb, var(--emotion-a) 14%, transparent);
}

.science-card strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 1.02rem;
}

.science-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.safety h2 { margin: 0 0 12px; }
.safety button { margin-top: 10px; }

@media (max-width: 980px) {
  .trust-grid, .science-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-cta-pulse { opacity: .42; }
}

@media (max-width: 660px) {
  .trust-grid, .science-card-grid { grid-template-columns: 1fr; }
  .trust-panel { min-height: 0; }
  .trust-brand-row { align-items: flex-start; }
  .trust-cta-pulse { display: none; }
  .trust-actions { align-items: stretch; }
  .trust-actions > * { width: 100%; text-align: center; }
}


/* Official Resonara brand layer
   Based on the public Resonara landing page tokens: dark background, violet/teal gradient,
   translucent cards and compact rounded controls. */
:root {
  --bg: #0b0c10;
  --bg2: #0f1220;
  --bg-deep: #05060a;
  --panel: rgba(255, 255, 255, 0.06);
  --panel-soft: rgba(255, 255, 255, 0.045);
  --panel-bright: rgba(255, 255, 255, 0.085);
  --card: rgba(255, 255, 255, 0.06);
  --card2: rgba(255, 255, 255, 0.085);
  --text: #f3f6ff;
  --muted: rgba(243, 246, 255, 0.72);
  --muted-2: rgba(243, 246, 255, 0.52);
  --line: rgba(243, 246, 255, 0.12);
  --accent: #7c5cff;
  --accent2: #2dd4bf;
  --cyan: #2dd4bf;
  --blue: #7c5cff;
  --magenta: #7c5cff;
  --pink: #f255b6;
  --ok: #2dd4bf;
  --danger: #ff6b8b;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.40);
  --radius: 16px;
}

body {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,.25), transparent 50%),
    radial-gradient(900px 500px at 80% 20%, rgba(45,212,191,.18), transparent 55%),
    radial-gradient(760px 460px at 78% 76%, rgba(242,85,182,.11), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

body::before {
  opacity: 0.16;
  background-image:
    radial-gradient(circle, rgba(243,246,255,.34) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(45,212,191,.20) 0 1px, transparent 1.4px);
}

.ambient {
  background:
    radial-gradient(circle at 25% 40%, rgba(124,92,255,0.22), transparent 20rem),
    radial-gradient(circle at 66% 28%, rgba(45,212,191,0.20), transparent 22rem),
    radial-gradient(circle at 80% 72%, rgba(242,85,182,0.13), transparent 18rem);
}

button,
.btn-like {
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(45,212,191,.92));
  color: #05060a;
  box-shadow: var(--shadow);
}

button.secondary {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: none;
}

.card,
.science-trust-strip,
.trust-card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.hero-card {
  border-radius: 26px;
  background:
    radial-gradient(circle at 78% 18%, rgba(45,212,191,.13), transparent 22rem),
    radial-gradient(circle at 12% 0%, rgba(124,92,255,.18), transparent 22rem),
    rgba(255,255,255,.055);
}

.hero-card::after {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.18), transparent 62%);
}

.brand-row,
.trust-brand-row {
  align-items: center;
}

.official-resonara-logo {
  object-fit: contain;
  border-radius: 26px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  box-shadow: var(--shadow), 0 0 42px rgba(45,212,191,.12), 0 0 46px rgba(124,92,255,.12);
}

.brand-mark.official-resonara-logo {
  width: clamp(142px, 18vw, 218px);
  height: auto;
  padding: 0;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

.trust-mark.official-resonara-logo {
  width: clamp(118px, 17vw, 176px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

.hero-card h1,
.trust-hero-block h1 {
  letter-spacing: -0.035em;
  background: linear-gradient(90deg, #ffffff, #f3f6ff 36%, #bffbf4 58%, #e7ddff 82%, #ffffff);
  -webkit-background-clip: text;
  color: transparent;
}

.eyebrow {
  color: var(--muted);
  font-weight: 700;
}

.local-badge,
.status-pill,
.hero-legend span,
.insight-strip span {
  border-color: var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
}

.ai-pill {
  border-color: rgba(45,212,191,.35);
  background: rgba(45,212,191,.10);
  color: #ddfff8;
}

.hero-visual {
  border-radius: 26px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--emotion-a) 26%, transparent), transparent 12rem),
    radial-gradient(circle at 28% 22%, rgba(124,92,255,.13), transparent 9rem),
    rgba(255,255,255,.03);
}

.official-logo-card {
  position: absolute;
  top: 18px;
  right: 18px;
  width: min(168px, 38vw);
  aspect-ratio: 256 / 210;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
  z-index: 2;
}

.official-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.04) contrast(1.02);
}

.hero-orb {
  z-index: 3;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.95), rgba(255,255,255,.18) 12%, transparent 30%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--emotion-a) 42%, transparent), color-mix(in srgb, var(--emotion-b) 26%, transparent) 52%, rgba(11,12,16,.82) 74%);
}

.trust-gate {
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(124,92,255,.24), transparent 50%),
    radial-gradient(900px 500px at 80% 20%, rgba(45,212,191,.16), transparent 55%),
    rgba(11, 12, 16, 0.82);
}

.trust-aurora {
  background:
    radial-gradient(circle at 30% 50%, rgba(124,92,255,0.22), transparent 22rem),
    radial-gradient(circle at 60% 50%, rgba(45,212,191,0.22), transparent 24rem),
    radial-gradient(circle at 72% 12%, rgba(242,85,182,0.14), transparent 18rem);
}

.trust-panel,
.science-card,
.intensity-dial,
.body-map,
.data-flow,
.voice-card,
.breath-card,
.session-arc {
  border-radius: 16px;
  background: var(--card2);
  border-color: var(--line);
}

.trust-icon,
.step-num {
  background: rgba(124,92,255,.20);
  border-color: rgba(124,92,255,.35);
}

.secondary-link {
  color: #ffdde9;
}

@media (max-width: 680px) {
  .brand-mark.official-resonara-logo {
    width: min(170px, 56vw);
  }
  .trust-mark.official-resonara-logo {
    width: min(156px, 52vw);
  }
  .official-logo-card {
    top: 12px;
    right: 12px;
    width: 122px;
    opacity: .86;
  }
}

/* Customer-ready mobile and splash layer ---------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  text-align: center;
  background:
    radial-gradient(900px 500px at 50% 22%, rgba(124, 92, 255, .24), transparent 56%),
    radial-gradient(720px 420px at 50% 70%, rgba(45, 212, 191, .18), transparent 58%),
    linear-gradient(180deg, #0b0c10, #0f1220 68%, #05060a);
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
}

.splash-screen--hidden {
  opacity: 0;
  transform: scale(1.025);
  filter: blur(8px);
  pointer-events: none;
}

.splash-halo {
  position: absolute;
  width: min(72vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.11), transparent 30%),
    conic-gradient(from 120deg, rgba(45,212,191,.0), rgba(45,212,191,.38), rgba(124,92,255,.42), rgba(242,85,182,.24), rgba(45,212,191,.0));
  filter: blur(2px);
  opacity: .78;
  animation: splashSpin 7s linear infinite;
}

.splash-logo {
  position: relative;
  z-index: 1;
  width: min(54vw, 210px);
  height: auto;
  border-radius: 28px;
  box-shadow: 0 30px 80px rgba(0,0,0,.46), 0 0 56px rgba(45,212,191,.16), 0 0 60px rgba(124,92,255,.18);
}

.splash-screen p {
  position: relative;
  z-index: 1;
  margin: 4px 0 0;
  color: var(--text);
  font-size: clamp(2.1rem, 12vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.04em;
  font-weight: 860;
}

.splash-screen span {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-weight: 650;
}

@keyframes splashSpin {
  to { transform: rotate(360deg); }
}

.message .content {
  display: block;
  overflow-wrap: anywhere;
  word-break: normal;
}

.message {
  max-width: 100%;
}

button,
input,
textarea,
select {
  max-width: 100%;
}

@media (max-width: 760px) {
  :root {
    --radius: 20px;
  }

  html {
    font-size: 15.5px;
  }

  body::after {
    opacity: .22;
  }

  .app-shell {
    width: min(100vw - 16px, 1120px);
    padding: max(10px, env(safe-area-inset-top)) 0 max(22px, env(safe-area-inset-bottom));
    gap: 12px;
  }

  .card,
  .science-trust-strip,
  .trust-card {
    border-radius: 22px;
  }

  .hero-card,
  .checkin,
  .settings,
  .coach,
  .protocol,
  .safety,
  .science-trust-strip {
    padding: 16px;
  }

  .hero-card {
    min-height: 0;
    gap: 16px;
  }

  .brand-block {
    min-width: 0;
    gap: 18px;
  }

  .brand-row,
  .trust-brand-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .brand-mark.official-resonara-logo {
    width: min(150px, 48vw);
    border-radius: 20px;
  }

  .hero-card h1 {
    width: auto;
    max-width: 100%;
    font-size: clamp(2.6rem, 16vw, 4.35rem);
    line-height: .94;
    letter-spacing: -.06em;
    overflow-wrap: anywhere;
  }

  .hero-copy,
  .trust-intro,
  .science-card p,
  .subtle,
  .hint {
    font-size: .98rem;
    line-height: 1.55;
  }

  .hero-actions,
  .coach-actions,
  .settings-actions,
  .quick-actions {
    width: 100%;
    align-items: stretch;
  }

  .hero-actions {
    flex-direction: row;
  }

  .hero-actions button,
  .settings-actions button,
  .text-form button,
  #suggestExercise {
    width: 100%;
  }

  .status-pill,
  .local-badge {
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .hero-actions .status-pill {
    flex: 1 1 calc(50% - 6px);
  }

  .hero-visual {
    width: 100%;
    min-height: 286px;
    border-radius: 22px;
    flex: 1 1 auto;
  }

  .official-logo-card {
    width: 104px;
    top: 10px;
    right: 10px;
    opacity: .72;
    border-radius: 16px;
  }

  .hero-orb {
    width: min(188px, 58vw);
    padding: 22px;
  }

  .orb-kicker {
    margin-top: 20px;
  }

  .hero-orb span:last-child {
    margin-bottom: 22px;
  }

  .hero-legend {
    left: 10px;
    right: 10px;
    bottom: 10px;
    justify-content: flex-start;
  }

  .hero-legend span,
  .insight-strip span,
  .science-pills span {
    font-size: .74rem;
    line-height: 1.2;
  }

  .two-col,
  .lower-grid,
  .science-card-grid,
  .trust-grid,
  .field-grid,
  .settings-panel,
  .metrics,
  .session-stage,
  .exercise-panel,
  .record-panel,
  .text-form,
  .checkin-cockpit {
    grid-template-columns: 1fr;
  }

  .science-card,
  .trust-panel {
    min-height: 0;
  }

  .section-head,
  .coach-header {
    align-items: flex-start;
  }

  .chip-field {
    gap: 8px;
  }

  .chip,
  .quick-actions button {
    flex: 1 1 calc(50% - 8px);
    min-height: 44px;
    padding-inline: .72rem;
  }

  .range-label {
    margin-top: 14px;
  }

  input,
  textarea,
  select {
    min-height: 48px;
    border-radius: 16px;
    font-size: 16px;
  }

  textarea {
    min-height: 96px;
  }

  .body-map {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .data-flow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .data-flow i {
    width: 2px;
    height: 22px;
    margin: 0 auto;
  }

  .data-flow i::after {
    right: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(50%) rotate(135deg);
  }

  .messages {
    min-height: 0;
    max-height: none;
    overflow: visible;
    margin: 14px 0;
    gap: 10px;
  }

  .message,
  .message.system,
  .message.user,
  .message.assistant {
    width: 100%;
    border-radius: 18px;
    padding: 12px 13px;
    line-height: 1.5;
    overflow: hidden;
  }

  .message .meta {
    font-size: .69rem;
    letter-spacing: .10em;
  }

  .record-button {
    width: 100%;
    min-width: 0;
  }

  .voice-card,
  .breath-card,
  .session-arc {
    border-radius: 18px;
  }

  #voiceCanvas,
  #timelineCanvas {
    height: 118px;
  }

  .breath-card {
    text-align: center;
  }

  .breath-orb {
    margin: 0 auto;
  }

  .trust-gate {
    place-items: start center;
    padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
  }

  .trust-card {
    padding: 14px;
  }

  .trust-mark.official-resonara-logo {
    width: min(145px, 50vw);
    border-radius: 20px;
  }

  .trust-hero-block h1 {
    font-size: clamp(2.05rem, 12vw, 3.4rem);
    line-height: 1;
    letter-spacing: -.055em;
  }

  .trust-cta-pulse {
    display: none;
  }

  .trust-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .trust-panel p,
  .trust-panel li,
  .consent-row {
    font-size: .94rem;
  }

  .consent-row {
    align-items: start;
  }

  .trust-actions > * {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .secondary-link,
  button {
    min-height: 46px;
  }
}

@media (max-width: 390px) {
  .app-shell {
    width: min(100vw - 12px, 1120px);
  }

  .hero-card,
  .checkin,
  .settings,
  .coach,
  .protocol,
  .safety,
  .science-trust-strip,
  .trust-card {
    padding: 13px;
  }

  .hero-card h1 {
    font-size: clamp(2.35rem, 15vw, 3.6rem);
  }

  .chip,
  .quick-actions button {
    flex-basis: 100%;
  }

  .hero-visual {
    min-height: 258px;
  }

  .hero-orb {
    width: min(168px, 60vw);
  }
}

/* End-customer refinement: stable Resonara logo and natural voice entry ---- */
.brand-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(142px, 18vw, 218px);
  max-width: min(52vw, 218px);
  aspect-ratio: 256 / 210;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow), 0 0 42px rgba(45,212,191,.12), 0 0 46px rgba(124,92,255,.12);
  overflow: hidden;
  text-decoration: none;
}

#brandHome > img,
.brand-home > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  aspect-ratio: auto !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

.splash-logo,
.trust-mark.official-resonara-logo,
.official-logo-card img,
.official-resonara-logo {
  object-fit: contain !important;
}

.official-logo-card {
  padding: 10px;
}

.official-logo-card img {
  width: 100%;
  height: 100%;
  border-radius: 14px;
}

.voice-setup {
  overflow: hidden;
}

.voice-toggle {
  gap: 14px;
}

.voice-toggle small {
  display: block;
  max-width: 32rem;
  margin-top: 7px;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 560;
  letter-spacing: 0;
  text-transform: none;
}

.voice-intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 16px 0 14px;
  padding: 14px;
  border: 1px solid rgba(45,212,191,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(45,212,191,.09), rgba(124,92,255,.07));
}

.voice-intro p,
.voice-settings-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 560;
}

.voice-dot {
  width: 14px;
  height: 14px;
  margin-top: .22rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 8px rgba(45,212,191,.08), 0 0 26px rgba(45,212,191,.24);
}

.voice-settings-copy {
  grid-column: 1 / -1;
  padding: 2px 2px 4px;
}

.voice-settings input[type="hidden"] {
  display: none;
}

.voice-settings .check-row {
  min-height: 52px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}

.voice-settings .hint {
  padding-top: 2px;
}

.record-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(45,212,191,.10), transparent 18rem),
    rgba(255,255,255,.035);
}

.record-button {
  font-size: 1rem;
}

.record-button .record-ring {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 7px rgba(45,212,191,.10), 0 0 22px rgba(45,212,191,.28);
}

@media (max-width: 760px) {
  .brand-home {
    width: min(150px, 48vw);
    max-width: 48vw;
    border-radius: 20px;
  }

  .brand-row {
    align-items: flex-start;
  }

  .voice-intro,
  .voice-settings .check-row {
    border-radius: 16px;
  }

  .voice-toggle small {
    font-size: .94rem;
  }
}

@media (max-width: 390px) {
  .brand-home {
    width: min(136px, 54vw);
    max-width: 54vw;
  }
}

/* Customer-ready guided flow and safe message layout ---------------------- */
.guided-start {
  padding: clamp(16px, 3vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1.15fr) auto;
  align-items: center;
  gap: 18px;
  overflow: visible;
}

.guided-copy p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.guided-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.guided-steps li,
.coach-step {
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  padding: 12px;
  min-width: 0;
}

.guided-steps span,
.coach-step span {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #05060a;
  background: linear-gradient(135deg, var(--accent2, #2dd4bf), var(--accent, #7c5cff));
  font-weight: 900;
  margin-bottom: 8px;
}

.guided-steps strong,
.coach-step strong {
  display: block;
  color: var(--text);
  line-height: 1.2;
}

.guided-steps small,
.coach-step small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
  margin-top: 4px;
}

.guided-start button {
  min-width: 220px;
  white-space: normal;
}

.coach-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 14px;
}

.coach-step {
  position: relative;
  overflow: visible;
}

.coach-step.is-current {
  border-color: rgba(45,212,191,.44);
  background: linear-gradient(145deg, rgba(45,212,191,.12), rgba(124,92,255,.08));
  box-shadow: 0 0 0 1px rgba(45,212,191,.08), 0 18px 42px rgba(0,0,0,.22);
}

.coach-step.is-done {
  opacity: .82;
}

.coach-step.is-done span {
  background: rgba(101,242,200,.18);
  color: #dffdf5;
  border: 1px solid rgba(101,242,200,.28);
}

.coach-step.is-done span::after {
  content: "✓";
  font-size: .86rem;
}

.coach-step.is-done span {
  font-size: 0;
}

.exercise-progress {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin: 10px 0 0;
  padding: .42rem .68rem;
  border-radius: 999px;
  border: 1px solid rgba(45,212,191,.26);
  background: rgba(45,212,191,.08);
  color: #ddfff8;
  font-size: .84rem;
  font-weight: 780;
}

.exercise-panel,
.exercise-panel ol,
.exercise-panel li {
  overflow: visible !important;
}

.exercise-panel li {
  padding: .5rem .65rem;
  border-radius: 12px;
  margin-bottom: .25rem;
  transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
}

.exercise-panel li.is-active {
  color: var(--text);
  background: linear-gradient(135deg, rgba(45,212,191,.14), rgba(124,92,255,.12));
  border: 1px solid rgba(45,212,191,.22);
}

.exercise-panel li.is-done {
  color: rgba(247,251,255,.72);
  text-decoration: line-through;
  text-decoration-color: rgba(101,242,200,.45);
}

.coach,
.messages,
.message,
.message .content,
.record-panel,
.text-form {
  min-height: 0;
}

.coach {
  overflow: visible !important;
}

.messages {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: stretch;
  padding: 0;
  gap: 14px;
}

.message,
.message.system,
.message.user,
.message.assistant {
  width: min(100%, 820px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: block;
  padding: 16px 17px;
  line-height: 1.62;
  color: #f8fbff;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  background-clip: padding-box;
}

.message.user {
  width: min(96%, 720px) !important;
}

.message .content {
  display: block;
  white-space: pre-line;
  overflow: visible !important;
  line-height: inherit;
}

.message .meta {
  line-height: 1.25;
  margin-bottom: 8px;
}

.message.assistant {
  background: linear-gradient(145deg, rgba(124,92,255,.18), rgba(45,212,191,.08));
  border-color: rgba(255,255,255,.18);
}

.message.system {
  background: linear-gradient(145deg, rgba(255,107,139,.14), rgba(124,92,255,.08));
}

.trust-consent {
  border-color: rgba(45,212,191,.38);
  background: linear-gradient(145deg, rgba(45,212,191,.10), rgba(124,92,255,.06));
}

.consent-row {
  min-height: auto;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.09);
}

.consent-row input:checked + span {
  color: #f2fffc;
}

@media (max-width: 980px) {
  .guided-start {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .guided-start button {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .guided-start {
    padding: 15px;
    gap: 14px;
  }

  .guided-steps,
  .coach-guide {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .guided-steps li,
  .coach-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    padding: 11px;
  }

  .guided-steps span,
  .coach-step span {
    grid-row: 1 / 3;
    margin-bottom: 0;
  }

  .guided-steps small,
  .coach-step small {
    margin-top: 2px;
  }

  .coach-guide {
    margin: 12px 0;
  }

  .messages {
    margin: 14px 0 16px;
  }

  .message,
  .message.system,
  .message.user,
  .message.assistant {
    width: 100% !important;
    padding: 14px 14px 15px;
    border-radius: 18px;
    line-height: 1.6;
    font-size: 1rem;
  }

  .message .meta {
    font-size: .68rem;
    letter-spacing: .09em;
  }

  .exercise-panel {
    padding: 14px;
    border-radius: 18px;
  }

  .exercise-panel ol {
    padding-left: 0;
    list-style-position: inside;
  }

  .exercise-panel li {
    padding: .62rem .7rem;
  }

  .trust-card {
    max-height: none;
    overflow: visible;
  }

  body[data-consent="pending"] {
    overflow: hidden;
  }

  .trust-gate {
    align-items: start;
    -webkit-overflow-scrolling: touch;
  }
}

/* Customer guidance and readable conversation layer ------------------------ */
.guided-start {
  padding: 22px;
  display: grid;
  gap: 16px;
  overflow: visible;
}

.guided-copy p:not(.eyebrow) {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.guided-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.guided-steps li {
  min-width: 0;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
  display: grid;
  gap: 6px;
}

.guided-steps span,
.coach-step span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: #f3f6ff;
  background: rgba(124,92,255,.20);
  border: 1px solid rgba(124,92,255,.35);
  font-weight: 900;
}

.guided-steps strong,
.coach-step strong {
  color: var(--text);
}

.guided-steps small,
.coach-step small {
  color: var(--muted);
  line-height: 1.35;
}

#guidedStart {
  width: fit-content;
  min-width: 220px;
}

.coach-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 14px;
}

.coach-step {
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  display: grid;
  gap: 6px;
  opacity: .72;
}

.coach-step.is-current {
  opacity: 1;
  border-color: rgba(45,212,191,.42);
  background: linear-gradient(135deg, rgba(45,212,191,.11), rgba(124,92,255,.08));
  box-shadow: 0 0 24px rgba(45,212,191,.08);
}

.coach-step.is-done {
  opacity: .92;
  border-color: rgba(45,212,191,.22);
}

.coach-step.is-done span {
  background: rgba(45,212,191,.18);
  border-color: rgba(45,212,191,.32);
}

.coach-guide-note {
  margin: 16px 0 12px;
  padding: 14px 15px;
  border: 1px solid rgba(45,212,191,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(45,212,191,.08), rgba(124,92,255,.06));
  color: var(--muted);
  line-height: 1.55;
}

.exercise-progress {
  margin: 10px 0 0;
  color: #ddfff8;
  font-weight: 760;
}

.exercise-panel li {
  padding: 8px 10px;
  border-radius: 12px;
}

.exercise-panel li.is-active {
  color: var(--text);
  background: rgba(45,212,191,.10);
  outline: 1px solid rgba(45,212,191,.20);
}

.exercise-panel li.is-done {
  color: rgba(243,246,255,.50);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.coach,
.messages,
.message,
.message .content,
.exercise-panel,
.record-panel {
  overflow: visible !important;
}

.messages {
  min-height: 0;
  max-height: none;
  padding: 0;
  margin: 14px 0;
  gap: 12px;
  scroll-behavior: auto;
}

.message,
.message.system,
.message.user,
.message.assistant {
  width: min(100%, 760px);
  max-width: 100%;
  padding: 16px 17px;
  border-radius: 20px;
  line-height: 1.62;
  white-space: normal;
  color: var(--text);
  overflow: visible !important;
}

.message::before {
  display: none;
}

.message .meta {
  margin-bottom: 8px;
  line-height: 1.2;
  overflow: visible;
}

.message .content {
  display: block;
  white-space: pre-line;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.message.assistant {
  border-color: rgba(45,212,191,.22);
  background: linear-gradient(145deg, rgba(45,212,191,.105), rgba(124,92,255,.095));
}

.message.user {
  border-color: rgba(124,92,255,.25);
  background: linear-gradient(145deg, rgba(124,92,255,.14), rgba(45,212,191,.075));
}

.message.system {
  border-color: rgba(255,107,139,.32);
  background: rgba(255,107,139,.11);
}

.consent-head {
  display: grid;
  gap: 4px;
  padding: 2px 2px 4px;
}

.consent-head strong {
  color: var(--text);
  font-size: 1.05rem;
}

.consent-head span {
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .guided-start {
    padding: 16px;
  }

  .guided-steps,
  .coach-guide {
    grid-template-columns: 1fr;
  }

  #guidedStart {
    width: 100%;
    min-width: 0;
  }

  .coach-guide-note {
    font-size: .96rem;
    border-radius: 16px;
  }

  .message,
  .message.system,
  .message.user,
  .message.assistant {
    width: 100%;
    padding: 14px 14px;
    border-radius: 18px;
    line-height: 1.58;
  }

  .message .meta {
    font-size: .70rem;
    letter-spacing: .08em;
  }
}


/* Mobile wow layer: clearer, more premium, less technical ------------------ */
:root {
  --wow-glow: 0 0 38px rgba(45,212,191,.22), 0 0 78px rgba(124,92,255,.20), 0 22px 70px rgba(0,0,0,.42);
  --readable-card: rgba(9, 11, 24, .86);
  --readable-card-strong: rgba(12, 14, 32, .94);
}

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(124,92,255,.33), transparent 60%),
    radial-gradient(740px 520px at 100% 14%, rgba(45,212,191,.20), transparent 62%),
    radial-gradient(620px 460px at 0% 82%, rgba(242,85,182,.16), transparent 62%),
    linear-gradient(180deg, #060711 0%, #0b0c10 42%, #101322 100%);
}

body::before {
  opacity: .20;
  background-size: 54px 54px, 88px 88px;
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.88) 46%, transparent 92%);
}

.card,
.science-trust-strip,
.trust-card {
  background:
    linear-gradient(150deg, rgba(255,255,255,.085), rgba(255,255,255,.035)),
    rgba(8,10,24,.76);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--wow-glow);
}

.hero-card {
  min-height: clamp(460px, 62vh, 720px);
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 78% 18%, rgba(45,212,191,.19), transparent 24rem),
    radial-gradient(circle at 14% 10%, rgba(124,92,255,.24), transparent 24rem),
    linear-gradient(150deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
}

.hero-card::before {
  opacity: .78;
  background:
    linear-gradient(110deg, rgba(255,255,255,.22), transparent 19%, transparent 66%, rgba(45,212,191,.16)),
    linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}

.hero-card h1 {
  text-shadow: 0 18px 48px rgba(0,0,0,.38);
}

.hero-copy {
  color: rgba(243,246,255,.80);
  font-weight: 540;
}

.hero-actions button,
#guidedStart,
#suggestExercise,
.text-form button,
.trust-actions button {
  position: relative;
  overflow: hidden;
}

.hero-actions button::after,
#guidedStart::after,
#suggestExercise::after,
.text-form button::after,
.trust-actions button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-115%);
  animation: ctaSheen 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaSheen {
  0%, 62% { transform: translateX(-115%); }
  82%, 100% { transform: translateX(115%); }
}

.hero-visual {
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -60px 110px rgba(0,0,0,.25),
    0 0 0 1px rgba(45,212,191,.12),
    0 28px 90px rgba(0,0,0,.46);
}

.hero-visual::before {
  opacity: .86;
  background: conic-gradient(from 180deg, rgba(45,212,191,.00), rgba(45,212,191,.34), rgba(124,92,255,.32), rgba(242,85,182,.22), rgba(45,212,191,.00));
  border-color: rgba(255,255,255,.18);
  filter: blur(.1px);
}

.hero-visual::after {
  opacity: .72;
}

.hero-luminous-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 26%, rgba(255,255,255,.08) 26.4% 26.8%, transparent 27.2% 41%, rgba(45,212,191,.10) 41.4% 41.8%, transparent 42.2%),
    linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 100%);
  background-size: 100% 100%, 42px 42px, 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.62) 52%, transparent 84%);
  opacity: .92;
}

.hero-luminous-grid span {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 0 30px rgba(45,212,191,.14), inset 0 0 36px rgba(124,92,255,.08);
  animation: mobileRing 8s ease-in-out infinite;
}

.hero-luminous-grid span:nth-child(2) {
  inset: 29% 11%;
  transform: rotate(58deg);
  border-color: rgba(45,212,191,.22);
  animation-duration: 10.5s;
}

.hero-luminous-grid span:nth-child(3) {
  inset: 10% 25%;
  transform: rotate(-36deg);
  border-color: rgba(242,85,182,.20);
  animation-duration: 12s;
}

@keyframes mobileRing {
  0%, 100% { transform: rotate(0deg) scale(1); opacity: .72; }
  50% { transform: rotate(180deg) scale(1.06); opacity: 1; }
}

.mobile-hero-badge {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 4;
  display: grid;
  gap: 2px;
  min-width: 168px;
  padding: 13px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(6,8,18,.68);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.36), 0 0 28px rgba(45,212,191,.11);
}

.mobile-hero-badge span {
  color: rgba(243,246,255,.64);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .66rem;
  font-weight: 840;
}

.mobile-hero-badge strong {
  color: #fff;
  font-size: .98rem;
  line-height: 1.12;
}

.mobile-hero-badge small {
  color: rgba(221,255,248,.82);
  font-weight: 680;
}

.official-logo-card {
  z-index: 5;
  background: rgba(6,8,18,.72);
  backdrop-filter: blur(18px);
}

.hero-orb {
  z-index: 6;
  border-color: rgba(255,255,255,.34);
  box-shadow:
    0 0 54px color-mix(in srgb, var(--emotion-a) 42%, transparent),
    0 0 104px color-mix(in srgb, var(--emotion-b) 28%, transparent),
    inset 0 0 52px rgba(255,255,255,.16),
    0 26px 72px rgba(0,0,0,.42);
}

.guided-start {
  background:
    radial-gradient(circle at 12% 18%, rgba(45,212,191,.14), transparent 20rem),
    radial-gradient(circle at 88% 60%, rgba(124,92,255,.17), transparent 20rem),
    var(--readable-card);
}

.guided-steps li,
.coach-step,
.science-card,
.trust-panel,
.intensity-dial,
.body-map,
.voice-card,
.breath-card,
.session-arc,
.data-flow div {
  background: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
  border-color: rgba(255,255,255,.15);
}

.guided-steps li {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 38px rgba(0,0,0,.22);
}

.guided-steps li:nth-child(1) { background-image: radial-gradient(circle at 88% 18%, rgba(45,212,191,.18), transparent 6rem), linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); }
.guided-steps li:nth-child(2) { background-image: radial-gradient(circle at 88% 18%, rgba(124,92,255,.20), transparent 6rem), linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); }
.guided-steps li:nth-child(3) { background-image: radial-gradient(circle at 88% 18%, rgba(242,85,182,.16), transparent 6rem), linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); }

.checkin {
  position: relative;
  background:
    radial-gradient(circle at 86% 8%, rgba(45,212,191,.14), transparent 18rem),
    var(--readable-card);
}

.mobile-checkin-glow {
  position: absolute;
  inset: auto -14% -120px -14%;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  filter: blur(20px);
  opacity: .74;
}

.mobile-checkin-glow span {
  position: absolute;
  inset: auto;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(45,212,191,.18);
}

.mobile-checkin-glow span:nth-child(1) { left: 10%; bottom: 12px; }
.mobile-checkin-glow span:nth-child(2) { left: 36%; bottom: 48px; background: rgba(124,92,255,.22); }
.mobile-checkin-glow span:nth-child(3) { right: 4%; bottom: 0; background: rgba(242,85,182,.16); }

.message,
.message.system,
.message.user,
.message.assistant,
.exercise-panel,
.record-panel,
.voice-intro,
.coach-guide-note,
.trust-consent,
.consent-row {
  background-color: var(--readable-card-strong) !important;
  color: #f7fbff !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.08);
}

.message.assistant {
  background:
    linear-gradient(145deg, rgba(45,212,191,.13), rgba(124,92,255,.13)),
    var(--readable-card-strong) !important;
}

.message.user {
  background:
    linear-gradient(145deg, rgba(124,92,255,.18), rgba(45,212,191,.08)),
    var(--readable-card-strong) !important;
}

.message .content,
.exercise-panel,
.exercise-panel li,
.coach-guide-note,
.record-panel .hint,
.voice-intro p {
  color: rgba(247,251,255,.88) !important;
}

.message .meta {
  color: #bffbf4 !important;
}

.exercise-panel {
  background:
    radial-gradient(circle at 12% 6%, rgba(45,212,191,.18), transparent 16rem),
    radial-gradient(circle at 92% 40%, rgba(124,92,255,.14), transparent 18rem),
    var(--readable-card-strong) !important;
}

.exercise-panel li.is-active {
  background: linear-gradient(135deg, rgba(45,212,191,.18), rgba(124,92,255,.16)) !important;
  border: 1px solid rgba(45,212,191,.36);
  box-shadow: 0 12px 30px rgba(45,212,191,.08);
}

.record-button {
  min-height: 64px;
  font-weight: 850;
  letter-spacing: -.01em;
}

.text-form textarea {
  background: rgba(5,7,18,.72);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.mobile-action-dock {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 40;
  display: none;
  gap: 10px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 24px;
  background: rgba(8,10,24,.76);
  backdrop-filter: blur(22px);
  box-shadow: 0 24px 80px rgba(0,0,0,.50), 0 0 0 1px rgba(45,212,191,.08), inset 0 1px 0 rgba(255,255,255,.10);
}

.mobile-action-dock button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 56px;
  padding: 9px 10px;
  display: grid;
  gap: 1px;
  place-items: center;
  border-radius: 18px;
  line-height: 1.05;
}

.mobile-action-dock button span {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-weight: 840;
  opacity: .76;
}

.mobile-action-dock button strong {
  font-size: 1.03rem;
}

.mobile-action-dock .dock-secondary {
  color: #f7fbff;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: none;
}

body[data-consent="pending"] .mobile-action-dock {
  display: none !important;
}

.splash-rings {
  position: absolute;
  width: min(82vw, 500px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.splash-rings span {
  grid-area: 1 / 1;
  width: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 40px rgba(45,212,191,.13), inset 0 0 32px rgba(124,92,255,.10);
  animation: splashWave 2.8s ease-in-out infinite;
}

.splash-rings span:nth-child(2) { width: 72%; animation-delay: .32s; border-color: rgba(45,212,191,.24); }
.splash-rings span:nth-child(3) { width: 94%; animation-delay: .64s; border-color: rgba(124,92,255,.22); }

.splash-progress {
  position: relative;
  z-index: 1;
  width: min(220px, 52vw);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.splash-progress i {
  display: block;
  width: 44%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2dd4bf, #7c5cff, #f255b6);
  box-shadow: 0 0 18px rgba(45,212,191,.35);
  animation: splashLoad 1.35s ease-in-out infinite;
}

@keyframes splashWave {
  0%, 100% { transform: scale(.92); opacity: .30; }
  50% { transform: scale(1.08); opacity: .92; }
}

@keyframes splashLoad {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(520px 260px at 50% -8%, rgba(124,92,255,.38), transparent 62%),
      radial-gradient(420px 380px at 100% 12%, rgba(45,212,191,.22), transparent 64%),
      radial-gradient(360px 360px at -16% 76%, rgba(242,85,182,.18), transparent 66%),
      linear-gradient(180deg, #060711 0%, #090a16 38%, #101322 100%);
  }

  .app-shell {
    width: min(100vw - 14px, 1120px);
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }

  .mobile-action-dock {
    display: flex;
  }

  .splash-logo {
    width: min(58vw, 230px);
    border-radius: 34px;
  }

  .splash-screen p {
    font-size: clamp(2.6rem, 17vw, 5rem);
  }

  .splash-screen span {
    max-width: 16rem;
    line-height: 1.35;
  }

  .hero-card {
    min-height: calc(100svh - 18px);
    padding: 16px;
    gap: 14px;
    overflow: hidden;
    border-radius: 28px;
  }

  .brand-row {
    align-items: center;
    text-align: center;
  }

  .brand-home {
    width: min(46vw, 174px);
    max-width: 46vw;
    border-radius: 24px;
    margin-inline: auto;
    box-shadow: 0 22px 60px rgba(0,0,0,.42), 0 0 44px rgba(45,212,191,.17), 0 0 60px rgba(124,92,255,.18);
  }

  .hero-card h1 {
    margin-inline: auto;
    text-align: center;
    font-size: clamp(3rem, 18vw, 5.4rem);
    letter-spacing: -.075em;
  }

  .hero-card h1::after {
    left: 16%;
    right: 16%;
  }

  .hero-copy {
    margin: 12px auto 0;
    max-width: 31rem;
    text-align: center;
    font-size: 1.02rem;
    line-height: 1.5;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .hero-actions button {
    grid-column: 1 / -1;
    min-height: 58px;
    font-size: 1.02rem;
    border-radius: 20px;
  }

  .hero-actions #installButton[hidden] {
    display: none !important;
  }

  .hero-actions #installButton:not([hidden]) {
    grid-column: 1 / -1;
  }

  .status-pill {
    min-height: 42px;
    padding: .52rem .72rem;
  }

  .hero-visual {
    min-height: 0;
    aspect-ratio: 1 / .86;
    width: 100%;
    border-radius: 26px;
    margin-top: 0;
  }

  .official-logo-card {
    width: min(33vw, 124px);
    top: 10px;
    right: 10px;
    padding: 7px;
    opacity: .90;
  }

  .mobile-hero-badge {
    top: 10px;
    left: 10px;
    min-width: 136px;
    padding: 10px 11px;
    border-radius: 17px;
  }

  .mobile-hero-badge strong {
    font-size: .88rem;
  }

  .mobile-hero-badge small {
    font-size: .74rem;
  }

  .hero-orb {
    width: min(52vw, 205px);
  }

  .hero-orb strong {
    font-size: clamp(1.32rem, 7vw, 2rem);
  }

  .orb-kicker,
  .hero-orb span:last-child {
    font-size: .69rem;
  }

  .hero-legend {
    display: none;
  }

  .guided-start,
  .science-trust-strip,
  .checkin,
  .settings,
  .coach,
  .protocol,
  .safety {
    padding: 16px;
    border-radius: 26px;
  }

  .guided-start {
    gap: 14px;
  }

  .guided-copy {
    text-align: center;
  }

  .guided-copy .eyebrow,
  .section-head .eyebrow,
  .coach-header .eyebrow {
    letter-spacing: .13em;
  }

  .guided-steps {
    display: grid;
    gap: 10px;
  }

  .guided-steps li,
  .coach-step {
    min-height: 74px;
    border-radius: 20px;
    background: rgba(11,13,30,.82);
  }

  .guided-steps span,
  .coach-step span {
    width: 38px;
    height: 38px;
    box-shadow: 0 0 24px rgba(45,212,191,.16);
  }

  #guidedStart,
  #suggestExercise {
    min-height: 58px;
    border-radius: 20px;
    font-size: 1.03rem;
  }

  .checkin-cockpit {
    gap: 10px;
  }

  .intensity-dial {
    min-height: 204px;
    border-radius: 22px;
  }

  .body-map {
    min-height: 174px;
    border-radius: 22px;
  }

  .chip-field {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chip-field legend {
    grid-column: 1 / -1;
  }

  .chip {
    min-height: 52px;
    border-radius: 18px;
    white-space: normal;
  }

  .field-grid label,
  .settings-panel label {
    font-size: .96rem;
  }

  .section-toggle strong {
    font-size: 1.5rem;
  }

  .voice-intro {
    padding: 14px;
    border-radius: 20px;
  }

  .session-stage {
    gap: 12px;
  }

  .voice-card,
  .breath-card {
    border-radius: 22px;
  }

  #voiceCanvas,
  #timelineCanvas {
    height: 132px;
  }

  .coach-guide {
    display: flex;
    overflow-x: auto !important;
    padding: 2px 2px 8px;
    margin-inline: -2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .coach-guide::-webkit-scrollbar {
    display: none;
  }

  .coach-step {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }

  .coach-step.is-current {
    transform: translateY(-1px);
  }

  .coach-guide-note {
    border-radius: 20px;
    line-height: 1.55;
  }

  .messages {
    gap: 13px;
  }

  .message,
  .message.system,
  .message.user,
  .message.assistant {
    padding: 15px 15px 16px;
    border-radius: 22px;
    line-height: 1.62;
    font-size: 1.01rem;
    background-color: rgba(10,12,30,.94) !important;
  }

  .message.user {
    margin-left: auto;
    width: min(94%, 720px) !important;
  }

  .message.assistant {
    width: 100% !important;
  }

  .exercise-panel {
    padding: 16px;
    border-radius: 24px;
    gap: 14px;
  }

  .exercise-panel ol {
    display: grid;
    gap: 8px;
  }

  .exercise-panel li {
    padding: 12px 13px;
    border-radius: 16px;
    background: rgba(255,255,255,.045);
  }

  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .quick-actions button {
    min-height: 50px;
    border-radius: 17px;
  }

  .record-panel {
    padding: 13px;
    border-radius: 24px;
  }

  .record-panel .hint {
    text-align: center;
  }

  .record-button {
    border-radius: 20px;
  }

  .text-form {
    gap: 10px;
  }

  .text-form textarea {
    min-height: 108px;
    border-radius: 20px;
    padding: 1rem;
  }

  .text-form button {
    min-height: 58px;
    border-radius: 20px;
  }

  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .metrics div {
    padding: 10px 8px;
    border-radius: 16px;
    text-align: center;
  }

  .metrics dt {
    font-size: .66rem;
  }

  .metrics dd {
    font-size: .86rem;
  }

  .trust-gate {
    background:
      radial-gradient(520px 260px at 50% -8%, rgba(124,92,255,.32), transparent 62%),
      radial-gradient(420px 340px at 100% 12%, rgba(45,212,191,.20), transparent 64%),
      rgba(6,7,17,.91);
  }

  .trust-card {
    border-radius: 28px;
    background: rgba(8,10,24,.88);
  }

  .trust-brand-row {
    align-items: center;
    text-align: center;
  }

  .trust-mark.official-resonara-logo {
    margin-inline: auto;
    width: min(48vw, 168px);
    border-radius: 24px;
  }

  .trust-hero-block h1,
  .trust-intro {
    text-align: center;
  }

  .trust-grid {
    gap: 10px;
  }

  .trust-panel {
    border-radius: 22px;
    padding: 15px;
  }

  .trust-panel h2 {
    font-size: 1.22rem;
  }

  .consent-row {
    border-radius: 18px;
    padding: 12px;
    line-height: 1.46;
  }

  .trust-actions button,
  .secondary-link {
    min-height: 54px;
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  .app-shell {
    width: min(100vw - 10px, 1120px);
  }

  .hero-card,
  .guided-start,
  .science-trust-strip,
  .checkin,
  .settings,
  .coach,
  .protocol,
  .safety,
  .trust-card {
    padding: 12px;
    border-radius: 24px;
  }

  .brand-home {
    width: min(50vw, 154px);
    max-width: 50vw;
  }

  .hero-card h1 {
    font-size: clamp(2.65rem, 17vw, 4.4rem);
  }

  .hero-copy {
    font-size: .98rem;
  }

  .hero-visual {
    aspect-ratio: 1 / .94;
  }

  .mobile-hero-badge {
    min-width: 118px;
    padding: 9px 10px;
  }

  .official-logo-card {
    width: min(31vw, 108px);
  }

  .hero-orb {
    width: min(55vw, 180px);
  }

  .chip-field,
  .quick-actions {
    grid-template-columns: 1fr;
  }

  .coach-step {
    flex-basis: 86%;
  }

  .mobile-action-dock {
    left: max(6px, env(safe-area-inset-left));
    right: max(6px, env(safe-area-inset-right));
    padding: 7px;
    border-radius: 22px;
  }

  .mobile-action-dock button {
    min-height: 54px;
    border-radius: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-action-dock button,
  .hero-card,
  .hero-visual,
  .message,
  .guided-steps li,
  .coach-step {
    transition: none !important;
  }
}

/* Final readability override: no clipped conversation cards. */
.coach,
.messages,
.message,
.message.system,
.message.user,
.message.assistant,
.message .content,
.exercise-panel,
.exercise-panel ol,
.exercise-panel li {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  contain: none !important;
}

.message .content {
  white-space: pre-line !important;
  overflow-wrap: anywhere !important;
}


/* Zusatzfeature: Nachspüren und Resonanz-Tagebuch ---------------------- */
.reflection-card {
  position: relative;
  margin: 16px 0 14px;
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid color-mix(in srgb, var(--emotion-a) 34%, rgba(255,255,255,.14));
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--emotion-b) 24%, transparent), transparent 14rem),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--emotion-a) 18%, transparent), transparent 13rem),
    rgba(255,255,255,.055);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 20px 60px rgba(0,0,0,.24);
  overflow: hidden !important;
}

.reflection-card::before {
  content: "";
  position: absolute;
  inset: -30% auto auto 45%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--emotion-a) 30%, transparent);
  box-shadow: 0 0 70px color-mix(in srgb, var(--emotion-a) 18%, transparent);
  opacity: .76;
  pointer-events: none;
}

.reflection-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.reflection-head h3 {
  margin: 0 0 8px;
  font-size: clamp(1.35rem, 5vw, 2.1rem);
  letter-spacing: -0.03em;
}

.reflection-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.reflection-orb {
  width: 118px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 4px;
  border-radius: 50%;
  background:
    conic-gradient(from 220deg, color-mix(in srgb, var(--emotion-a) 80%, transparent), color-mix(in srgb, var(--emotion-b) 80%, transparent), rgba(255,255,255,.86), color-mix(in srgb, var(--emotion-a) 80%, transparent));
  box-shadow: 0 0 38px color-mix(in srgb, var(--emotion-a) 22%, transparent), inset 0 0 0 1px rgba(255,255,255,.18);
  color: #05060a;
  font-weight: 900;
}

.reflection-orb span,
.reflection-orb strong {
  position: relative;
  z-index: 1;
  font-size: 1.55rem;
}

.reflection-orb i {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(5,6,10,.55);
}

.reflection-slider-wrap {
  position: relative;
  margin-top: 16px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.reflection-slider-wrap label,
.reflection-note-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 850;
}

.reflection-slider-wrap input[type="range"] {
  width: 100%;
  accent-color: var(--emotion-a);
}

.reflection-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--muted-2);
  font-size: .78rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: .08em;
}

#reflectionNote {
  width: 100%;
  min-height: 78px;
  margin-top: 8px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  padding: 1rem;
  background: rgba(0,0,0,.20);
  color: var(--text);
  outline: none;
}

.reflection-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.reflection-actions button:first-child {
  flex: 1 1 220px;
}

.journal-card {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
    rgba(0,0,0,.15);
}

.journal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.journal-head h3 {
  margin: 0;
  font-size: 1.18rem;
}

.journal-privacy {
  border: 1px solid rgba(45,212,191,.28);
  border-radius: 999px;
  padding: .36rem .58rem;
  color: #dffcf7;
  background: rgba(45,212,191,.08);
  font-size: .74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.journal-hint,
.journal-empty {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.journal-list {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.journal-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}

.journal-entry-main strong,
.journal-entry-main span,
.journal-entry-main p {
  display: block;
  min-width: 0;
}

.journal-entry-main strong {
  color: var(--text);
  font-size: .95rem;
}

.journal-entry-main span {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: .78rem;
  font-weight: 760;
}

.journal-entry-main p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .86rem;
  overflow-wrap: anywhere;
}

.journal-delta {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background: rgba(255,255,255,.07);
  color: var(--text);
  font-weight: 950;
}

.journal-entry.is-softer .journal-delta {
  background: rgba(45,212,191,.13);
  color: #dcfff8;
  box-shadow: inset 0 0 0 1px rgba(45,212,191,.22);
}

.journal-entry.is-harder .journal-delta {
  background: rgba(255,107,139,.12);
  color: #ffe3ea;
  box-shadow: inset 0 0 0 1px rgba(255,107,139,.24);
}

@media (max-width: 760px) {
  .reflection-card {
    margin: 14px -2px 12px;
    padding: 16px;
    border-radius: 26px;
  }

  .reflection-head {
    grid-template-columns: 1fr;
  }

  .reflection-orb {
    width: min(44vw, 148px);
    margin: 0 auto;
  }

  .reflection-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .reflection-actions button {
    width: 100%;
    min-height: 54px;
    border-radius: 18px;
  }

  .journal-card {
    border-radius: 22px;
    padding: 13px;
  }

  .journal-entry {
    grid-template-columns: minmax(0, 1fr) 44px;
    padding: 11px;
    border-radius: 17px;
  }

  .journal-delta {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
}


/* Usability polish for broad customer base -------------------------------- */
.trust-details {
  margin: 14px 0 0;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  background: rgba(255,255,255,.045);
  overflow: hidden;
}

.trust-details summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 850;
  color: #f7fbff;
  list-style: none;
}

.trust-details summary::-webkit-details-marker { display: none; }
.trust-details summary::after {
  content: "öffnen";
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: rgba(191,251,244,.85);
}
.trust-details[open] summary::after { content: "schließen"; }
.trust-details .trust-grid { padding: 0 12px 12px; }

.trust-short-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 16px 0 0;
}

.trust-short-list div {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 13px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.trust-short-list span {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(45,212,191,.32), rgba(124,92,255,.28));
  color: #fff;
  font-weight: 900;
}

.trust-short-list strong { color: #fff; line-height: 1.12; }
.trust-short-list small { color: rgba(243,246,255,.68); line-height: 1.2; }

.easy-hint {
  margin: 8px 0 0;
  color: rgba(191,251,244,.86);
  font-weight: 650;
  line-height: 1.45;
}

#suggestExercise,
#heroStart,
#guidedStart {
  touch-action: manipulation;
}

.coach-header h2,
#checkinTitle,
#guidedStartTitle {
  text-wrap: balance;
}

.voice-setup {
  align-self: start;
}

.voice-setup .settings-panel.collapsed {
  display: none;
}

.voice-setup .section-toggle {
  min-height: 92px;
}

.voice-setup .section-toggle strong {
  letter-spacing: -.03em;
}

.science-trust-strip {
  margin-top: 0;
}

@media (max-width: 760px) {
  .trust-card {
    padding: 16px !important;
  }

  .trust-short-list {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .trust-short-list div {
    min-height: 64px;
  }

  .trust-details {
    border-radius: 20px;
  }

  .trust-details .trust-grid {
    padding: 0 8px 8px;
  }

  .trust-panel ul {
    padding-left: 1.1rem;
  }

  .trust-consent {
    gap: 10px;
  }

  .consent-head span,
  .trust-smallprint,
  .trust-intro {
    line-height: 1.48;
  }

  .hero-card {
    min-height: auto;
  }

  .hero-visual {
    order: -1;
    margin-bottom: 4px;
  }

  .brand-row {
    gap: 12px;
  }

  .hero-copy {
    font-size: 1rem;
    max-width: 22rem;
  }

  .guided-start {
    text-align: left;
  }

  .guided-copy {
    text-align: left;
  }

  .guided-steps li {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .guided-steps li small {
    font-size: .88rem;
  }

  .science-trust-strip {
    order: 99;
  }

  .checkin .section-head {
    align-items: start;
  }

  .easy-hint {
    font-size: .96rem;
    max-width: 26rem;
  }

  .voice-setup {
    margin-top: -2px;
  }

  .voice-setup .section-toggle {
    min-height: 84px;
  }

  .voice-setup .voice-intro {
    font-size: .95rem;
  }

  .coach-header h2 {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
  }

  .coach-guide-note {
    font-size: .95rem;
  }

  .quick-actions {
    grid-template-columns: 1fr 1fr;
  }

  .quick-actions .next-step-button {
    grid-column: 1 / -1;
    min-height: 58px;
    font-weight: 900;
  }

  .mobile-action-dock button:first-child {
    flex: 1.25 1 0;
  }

  .mobile-action-dock button strong {
    font-size: .98rem;
  }

  .message .content {
    font-size: .99rem;
  }
}

@media (max-width: 390px) {
  .hero-copy,
  .trust-intro,
  .easy-hint {
    font-size: .94rem;
  }

  .trust-actions {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Intuitive customer flow refinements ------------------------------------- */
.trust-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 14px;
}

.trust-summary span {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  color: #eefcff;
  font-size: .86rem;
  font-weight: 780;
  line-height: 1.28;
}

.trust-details {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.035);
  overflow: hidden;
}

.trust-details summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  color: #eafcff;
  font-weight: 850;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.trust-details summary::-webkit-details-marker { display: none; }
.trust-details summary::after {
  content: "Mehr anzeigen";
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trust-details[open] summary::after { content: "Weniger"; }
.trust-details .trust-grid { padding: 0 14px 14px; }

.trust-consent .consent-head strong {
  font-size: clamp(1.18rem, 4vw, 1.55rem);
}

.trust-actions button,
#heroStart,
#guidedStart,
#suggestExercise {
  min-height: 56px;
}

.hero-actions #heroStart,
#guidedStart,
#suggestExercise {
  position: relative;
  isolation: isolate;
}

.hero-actions #heroStart::after,
#guidedStart::after,
#suggestExercise::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(45,212,191,.28), rgba(124,92,255,.20), rgba(242,85,182,.24));
  filter: blur(12px);
  opacity: .6;
  z-index: -1;
}

.voice-setup {
  overflow: visible;
}

.voice-toggle small,
.voice-intro p,
.voice-settings-copy,
.record-panel .hint,
.coach-guide-note,
.trust-smallprint {
  line-height: 1.5;
}

.voice-intro {
  align-items: flex-start;
}

.science-trust-strip {
  scroll-margin-top: 18px;
}

.science-card p {
  line-height: 1.5;
}

.exercise-panel li {
  margin-bottom: 8px;
  border-radius: 14px;
}

.exercise-panel li:last-child { margin-bottom: 0; }

.messages {
  min-height: auto;
}

.mobile-action-dock button strong {
  white-space: nowrap;
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .app-shell {
    width: min(100% - 16px, 420px);
    gap: 12px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .hero-card {
    min-height: auto;
    padding: 18px 16px 16px;
    border-radius: 30px;
  }

  .brand-row {
    gap: 12px;
    align-items: center;
  }

  .brand-home {
    width: 70px;
    min-width: 70px;
  }

  .brand-mark.official-resonara-logo {
    width: 70px;
    height: auto;
    max-height: 58px;
  }

  .hero-card h1 {
    font-size: clamp(2.15rem, 15vw, 3.5rem);
    letter-spacing: .045em;
  }

  .hero-copy {
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.45;
  }

  .hero-actions {
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  .hero-actions .status-pill {
    width: 100%;
    justify-content: center;
  }

  .hero-actions #heroStart {
    width: 100%;
    font-size: 1.03rem;
    border-radius: 18px;
  }

  .hero-visual {
    min-height: 230px;
    border-radius: 24px;
  }

  .hero-legend {
    display: none;
  }

  .guided-start,
  .checkin,
  .coach,
  .settings,
  .science-trust-strip,
  .protocol,
  .safety {
    border-radius: 26px;
  }

  .guided-copy p:not(.eyebrow) {
    font-size: .98rem;
  }

  .guided-steps li,
  .coach-step {
    border-radius: 18px;
  }

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

  .checkin {
    padding: 16px;
  }

  .chip-field {
    gap: 8px;
  }

  .chip {
    min-height: 46px;
    padding: .72rem .9rem;
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .voice-setup {
    padding: 14px;
  }

  .voice-intro,
  .voice-setup .data-flow {
    display: none;
  }

  .voice-toggle {
    padding: 12px;
    border-radius: 20px;
  }

  .voice-toggle strong {
    font-size: 1.02rem;
  }

  .voice-toggle small {
    font-size: .88rem;
  }

  .settings-panel {
    margin-top: 12px;
  }

  .settings-panel label,
  .settings-panel input,
  .settings-panel select {
    width: 100%;
  }

  .session-stage {
    gap: 10px;
  }

  .voice-card {
    min-height: 150px;
  }

  .coach-guide-note {
    padding: 12px;
    border-radius: 18px;
    font-size: .94rem;
  }

  .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quick-actions button,
  .coach-actions button {
    min-height: 46px;
    border-radius: 15px;
  }

  .next-step-button {
    grid-column: 1 / -1;
    min-height: 56px !important;
    background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(124,92,255,.18)) !important;
    border-color: rgba(45,212,191,.28) !important;
  }

  .record-panel {
    grid-template-columns: 1fr;
    padding: 12px;
    border-radius: 22px;
  }

  .record-button {
    width: 100%;
    min-width: 0;
    border-radius: 18px;
  }

  .text-form {
    grid-template-columns: 1fr;
  }

  .text-form textarea {
    min-height: 94px;
  }

  .text-form button {
    width: 100%;
    border-radius: 18px;
  }

  .science-trust-strip {
    padding: 16px;
  }

  .science-head {
    gap: 8px;
  }

  .science-head h2 {
    font-size: 1.22rem;
    line-height: 1.18;
  }

  .science-card-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .science-card {
    padding: 12px;
    border-radius: 16px;
  }

  .science-card p {
    margin-top: 5px;
    font-size: .9rem;
  }

  .trust-gate {
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    align-items: start;
  }

  .trust-card {
    width: min(100%, 420px);
    padding: 14px;
    border-radius: 28px;
  }

  .trust-brand-row {
    gap: 10px;
    align-items: center;
  }

  .trust-mark.official-resonara-logo {
    width: 64px;
    height: auto;
    max-height: 54px;
  }

  .trust-hero-block h1 {
    font-size: clamp(1.35rem, 7vw, 2.1rem);
    line-height: 1.08;
  }

  .trust-intro {
    margin-top: 10px;
    font-size: .98rem;
    line-height: 1.45;
  }

  .trust-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 12px;
  }

  .trust-summary span {
    padding: 9px 10px;
    border-radius: 14px;
    font-size: .79rem;
  }

  .trust-consent {
    padding: 12px;
    border-radius: 20px;
  }

  .consent-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }

  .consent-row span {
    line-height: 1.4;
    font-size: .91rem;
  }

  .trust-actions {
    gap: 8px;
  }

  .trust-actions button {
    border-radius: 18px;
    width: 100%;
  }

  .secondary-link {
    width: 100%;
    text-align: center;
  }

  .trust-smallprint {
    font-size: .76rem;
  }

  .trust-details summary {
    padding: 12px;
    font-size: .92rem;
  }

  .trust-details summary::after {
    font-size: .68rem;
  }

  .trust-details .trust-grid {
    padding: 0 10px 10px;
  }

  .trust-panel h2 {
    font-size: 1rem;
  }

  .trust-panel p,
  .trust-panel li {
    font-size: .86rem;
  }

  .messages {
    gap: 10px;
  }

  .message .content {
    line-height: 1.55;
  }

  .mobile-action-dock {
    width: min(calc(100% - 18px), 420px);
    left: 50%;
    transform: translateX(-50%);
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (max-width: 380px) {
  .trust-summary {
    grid-template-columns: 1fr;
  }

  .brand-home,
  .brand-mark.official-resonara-logo {
    width: 58px;
  }

  .hero-card h1 {
    font-size: 2rem;
  }

  .mobile-action-dock button strong {
    font-size: .92rem;
  }
}

/* Resonara intuitive-flow polish ------------------------------------------------ */
.app-shell {
  padding-bottom: calc(110px + env(safe-area-inset-bottom));
}

.quick-start {
  order: 1;
  padding: clamp(18px, 3vw, 26px);
  overflow: hidden;
}

.main-flow {
  order: 2;
}

.coach {
  order: 3;
}

.science-trust-strip {
  order: 4;
}

.lower-grid {
  order: 5;
}

.quick-start-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.start-option {
  min-height: 148px;
  justify-items: start;
  align-content: start;
  display: grid;
  gap: 8px;
  border-radius: 26px;
  padding: 18px;
  text-align: left;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
    rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}

.start-option span,
.start-option small {
  color: var(--muted);
}

.start-option span {
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.start-option strong {
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.12;
}

.start-option small {
  line-height: 1.42;
  font-size: .9rem;
}

.start-option.primary-start {
  color: #04111a;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.65), transparent 8rem),
    linear-gradient(135deg, var(--emotion-a), var(--emotion-b));
  border-color: transparent;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--emotion-b) 22%, transparent);
}

.start-option.primary-start span,
.start-option.primary-start strong,
.start-option.primary-start small {
  color: #04111a;
}

.start-hint {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.fine-tune {
  margin: 12px 0 16px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(0,0,0,.16);
  overflow: hidden;
}

.fine-tune summary {
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--muted);
  font-weight: 800;
}

.fine-tune[open] summary {
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.fine-tune .field-grid {
  margin: 0;
  padding: 14px;
}

#suggestExercise {
  width: 100%;
  min-height: 58px;
  font-size: 1.02rem;
}

.messages {
  min-height: 0;
  max-height: none;
  overflow: visible;
}

.message {
  width: min(100%, 780px);
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
}

.message .content {
  display: block;
  white-space: pre-wrap;
}

.quick-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.next-step-button {
  min-height: 58px;
  color: #04111a;
  background: linear-gradient(135deg, var(--emotion-a), var(--emotion-b));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--emotion-b) 20%, transparent);
}

.quick-exercise-switcher {
  grid-column: 1 / -1;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.045);
}

.quick-exercise-switcher summary {
  cursor: pointer;
  padding: 12px 14px;
  color: var(--muted);
  font-weight: 780;
}

.quick-exercise-switcher div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 12px 12px;
}

.text-form {
  margin-top: 18px;
}

.text-form textarea {
  min-height: 86px;
  font-size: 1rem;
}

.record-panel {
  margin-top: 12px;
  background: rgba(255,255,255,.045);
}

.voice-setup {
  align-self: start;
}

.voice-setup .data-flow {
  opacity: .82;
}

.trust-details {
  margin-top: 14px;
}

.trust-details summary {
  cursor: pointer;
}

@media (max-width: 760px) {
  body::before,
  body::after {
    opacity: .18;
  }

  .app-shell {
    width: min(100vw - 18px, 680px);
    gap: 12px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .hero-card {
    min-height: auto;
    padding: 18px;
    border-radius: 28px;
  }

  .brand-row {
    gap: 10px;
    align-items: flex-start;
  }

  .brand-mark {
    width: 76px;
    height: 76px;
  }

  .hero-card h1 {
    font-size: clamp(2.5rem, 15vw, 4.7rem);
    letter-spacing: .05em;
  }

  .hero-copy {
    margin-top: 10px;
    font-size: 1rem;
    line-height: 1.46;
  }

  .hero-actions {
    width: 100%;
    align-items: stretch;
  }

  .hero-actions button,
  .hero-actions .status-pill {
    justify-content: center;
  }

  .hero-visual {
    min-height: 252px;
    border-radius: 26px;
  }

  .official-logo-card {
    transform: scale(.82);
    transform-origin: top left;
  }

  .quick-start {
    padding: 16px;
    border-radius: 26px;
  }

  .quick-start-options {
    grid-template-columns: 1fr;
  }

  .start-option {
    min-height: auto;
    border-radius: 22px;
    padding: 16px;
  }

  .checkin,
  .settings,
  .coach,
  .protocol,
  .safety {
    padding: 16px;
    border-radius: 26px;
  }

  .easy-hint {
    font-size: .95rem;
  }

  .chip-field {
    gap: 8px;
  }

  .chip {
    flex: 1 1 calc(50% - 8px);
    min-height: 48px;
    padding-inline: .72rem;
  }

  .voice-setup .data-flow {
    display: none;
  }

  .session-stage {
    grid-template-columns: 1fr;
  }

  .coach-guide {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(128px, 1fr);
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }

  .coach-step {
    scroll-snap-align: start;
  }

  .exercise-panel {
    grid-template-columns: 1fr;
    padding: 16px;
    border-radius: 24px;
  }

  .exercise-panel ol {
    padding-left: 1.1rem;
  }

  .exercise-panel li {
    margin-bottom: 10px;
  }

  .quick-actions {
    grid-template-columns: 1fr;
  }

  .quick-actions > button {
    width: 100%;
    min-height: 54px;
  }

  .text-form {
    grid-template-columns: 1fr;
  }

  .text-form button {
    width: 100%;
  }

  .record-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .record-button {
    width: 100%;
  }

  .science-trust-strip {
    margin-top: 2px;
  }

  .science-card-grid {
    grid-template-columns: 1fr;
  }

  .trust-gate {
    align-items: start;
    padding-inline: 10px;
  }

  .trust-card {
    border-radius: 26px;
    padding: 16px;
  }

  .trust-brand-row {
    gap: 12px;
  }

  .trust-mark {
    width: 74px;
    height: 74px;
  }

  .trust-card h1 {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  .trust-summary {
    grid-template-columns: 1fr;
  }

  .trust-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .trust-actions button,
  .trust-actions a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .mobile-action-dock {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    border-radius: 24px;
  }
}

@media (max-width: 390px) {
  .app-shell {
    width: min(100vw - 14px, 680px);
  }

  .hero-card,
  .quick-start,
  .checkin,
  .settings,
  .coach,
  .protocol,
  .safety {
    padding: 14px;
  }

  .hero-card h1 {
    font-size: 2.55rem;
  }

  .status-pill {
    white-space: normal;
  }

  .chip {
    flex-basis: 100%;
  }
}


/* Bonusfeature: Resonanzwege - mobile-first, kundentauglich */
.resonance-paths {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 4vw, 30px);
  background:
    radial-gradient(circle at 18% 0%, rgba(100, 232, 255, 0.18), transparent 18rem),
    radial-gradient(circle at 92% 22%, rgba(255, 79, 184, 0.17), transparent 20rem),
    linear-gradient(145deg, rgba(15, 17, 48, 0.94), rgba(5, 6, 20, 0.80));
}
.resonance-paths::before { content: ""; position: absolute; inset: 1px; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,0.10), transparent 36%, rgba(100,232,255,0.09)); mask-image: linear-gradient(#000, transparent 78%); }
.paths-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.paths-head p:not(.eyebrow) { margin: 10px 0 0; max-width: 760px; color: var(--muted); line-height: 1.55; }
.pathway-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0.54rem 0.82rem; border-radius: 999px; border: 1px solid rgba(100, 232, 255, 0.24); background: rgba(100, 232, 255, 0.08); color: #dffcff; font-size: 0.86rem; font-weight: 820; }
.pathway-carousel { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pathway-card { position: relative; min-width: 0; min-height: 188px; padding: 16px; border-radius: 25px; border: 1px solid rgba(255, 255, 255, 0.14); background: radial-gradient(circle at 20% 18%, rgba(255,255,255,0.12), transparent 5rem), linear-gradient(145deg, rgba(255,255,255,0.085), rgba(255,255,255,0.035)); color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 18px 48px rgba(0,0,0,0.22); text-align: left; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 8px; white-space: normal; transform: translateZ(0); }
.pathway-card::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, rgba(100,232,255,0.15), transparent 64%); opacity: 0.7; pointer-events: none; }
.pathway-card:hover, .pathway-card:focus-visible { transform: translateY(-2px); border-color: rgba(100, 232, 255, 0.40); }
.pathway-card.is-active { background: radial-gradient(circle at 20% 0%, rgba(100, 232, 255, 0.30), transparent 7rem), radial-gradient(circle at 100% 22%, rgba(255, 79, 184, 0.22), transparent 8rem), linear-gradient(145deg, rgba(255,255,255,0.15), rgba(255,255,255,0.055)); border-color: rgba(100, 232, 255, 0.48); box-shadow: 0 0 0 1px rgba(100,232,255,0.08), 0 22px 62px rgba(100,232,255,0.13), inset 0 1px 0 rgba(255,255,255,0.12); }
.pathway-icon { width: 42px; height: 42px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.09); color: #e9fbff; font-size: 1.18rem; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); }
.pathway-card > span:not(.pathway-icon), .pathway-card small, .pathway-card em { color: var(--muted); }
.pathway-card > span:not(.pathway-icon) { font-size: 0.82rem; font-weight: 780; letter-spacing: 0.02em; }
.pathway-card strong { display: block; font-size: 1.08rem; line-height: 1.13; }
.pathway-card small { display: block; max-width: 19ch; line-height: 1.35; font-size: 0.9rem; }
.pathway-card em { display: inline-flex; align-items: center; min-height: 28px; padding: 0.28rem 0.54rem; border-radius: 999px; background: rgba(255,255,255,0.075); border: 1px solid rgba(255,255,255,0.10); font-size: 0.78rem; font-style: normal; font-weight: 800; }
.pathway-preview { position: relative; z-index: 1; margin-top: 14px; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.11); }
.pathway-preview p { margin: 0; color: #dce7ff; line-height: 1.45; font-size: 0.96rem; }
.pathway-mini-orb { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 36% 28%, #fff, rgba(255,255,255,0.08) 22%, transparent 46%), conic-gradient(from 120deg, var(--cyan), var(--magenta), var(--pink), var(--cyan)); box-shadow: 0 0 28px rgba(100,232,255,0.18), 0 0 34px rgba(255,79,184,0.12); animation: pathwayPulse 4.8s ease-in-out infinite; }
.pathway-mini-orb span { width: 34px; height: 34px; border-radius: inherit; background: rgba(5,5,19,0.72); border: 1px solid rgba(255,255,255,0.16); }
@keyframes pathwayPulse { 0%, 100% { transform: scale(0.96); filter: hue-rotate(0deg); } 50% { transform: scale(1.05); filter: hue-rotate(26deg); } }
@media (max-width: 980px) { .pathway-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 12px; margin-inline: -2px; -webkit-overflow-scrolling: touch; } .pathway-card { flex: 0 0 min(78vw, 310px); scroll-snap-align: center; } }
@media (max-width: 760px) { .resonance-paths { padding: 18px; border-radius: 30px; } .paths-head { display: block; } .pathway-badge { margin-top: 12px; } .pathway-carousel { gap: 10px; margin-inline: -18px; padding: 2px 18px 14px; } .pathway-card { flex-basis: 82vw; min-height: 174px; border-radius: 26px; } .pathway-card strong { font-size: 1.14rem; } .pathway-preview { grid-template-columns: 44px minmax(0, 1fr); border-radius: 20px; padding: 11px 12px; } .pathway-mini-orb { width: 44px; height: 44px; } .pathway-mini-orb span { width: 28px; height: 28px; } .mobile-action-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mobile-action-dock button strong { font-size: 0.94rem; } }
@media (max-width: 390px) { .pathway-card { flex-basis: 86vw; min-height: 166px; padding: 14px; } .pathway-preview p { font-size: 0.9rem; } }


/* Smooth-use and update refinements */
html {
  scroll-behavior: smooth;
  scroll-padding-top: max(18px, env(safe-area-inset-top));
  scroll-padding-bottom: max(116px, calc(92px + env(safe-area-inset-bottom)));
}

body[data-consent="accepted"] .app-shell {
  transition: opacity 220ms ease, transform 220ms ease;
}

.pathway-preview {
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

.pathway-start {
  justify-self: end;
  white-space: nowrap;
  padding-inline: 1rem;
  min-height: 44px;
}

.pathway-card {
  -webkit-tap-highlight-color: transparent;
}

.pathway-card.is-active::before {
  content: "ausgewählt";
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
  background: rgba(101, 242, 200, 0.12);
  border: 1px solid rgba(101, 242, 200, 0.24);
  color: #dffcf5;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.03em;
}

.update-notice {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  width: min(680px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 24px;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 20%, rgba(100,232,255,0.18), transparent 11rem),
    linear-gradient(145deg, rgba(13, 16, 43, 0.96), rgba(6, 7, 20, 0.92));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 24px 80px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter: blur(22px);
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}

.update-notice[hidden] {
  display: none;
}

.update-notice.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.update-notice__orb {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, #fff 0 8%, rgba(255,255,255,0.10) 22%, transparent 48%),
    conic-gradient(from 140deg, var(--cyan), var(--magenta), var(--pink), var(--cyan));
  box-shadow: 0 0 28px rgba(100,232,255,0.23), 0 0 36px rgba(255,79,184,0.18);
}

.update-notice strong {
  display: block;
  line-height: 1.15;
}

.update-notice p {
  margin: 0.18rem 0 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 0.92rem;
}

.update-notice__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.update-notice__actions button {
  min-height: 42px;
  padding: 0.68rem 0.88rem;
}

@media (max-width: 760px) {
  html {
    scroll-padding-bottom: max(128px, calc(108px + env(safe-area-inset-bottom)));
  }

  .pathway-preview {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .pathway-start {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    margin-top: 2px;
  }

  .pathway-card.is-active::before {
    top: 11px;
    right: 11px;
  }

  .update-notice {
    bottom: max(94px, calc(78px + env(safe-area-inset-bottom)));
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    border-radius: 24px;
    padding: 12px;
  }

  .update-notice__orb {
    width: 38px;
    height: 38px;
  }

  .update-notice__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    width: 100%;
  }

  .update-notice__actions button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}