:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: linear-gradient(160deg, #e8f8fb 0%, #f5fbfc 55%, #ffffff 100%);
  color: #14353c;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
}

.voice-card {
  width: min(100%, 440px);
  text-align: center;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #c7e8ee;
  border-radius: 26px;
  padding: 28px 22px;
  box-shadow: 0 18px 46px rgba(13, 91, 105, .14);
}

.voice-logo {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #087f95;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
}

h1 { margin: 0 0 10px; font-size: 27px; }
.voice-lead { margin: 0 auto 24px; max-width: 330px; line-height: 1.45; color: #49676d; }
.voice-timer { margin: 0 0 18px; font: 700 38px/1 monospace; color: #087f95; }

.voice-button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 18px;
  padding: 14px 20px;
  background: #087f95;
  color: #fff;
  font: 700 18px/1.2 inherit;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(8, 127, 149, .25);
}

.voice-button[data-recording="true"] { background: #c43f4f; }
.voice-button:disabled { opacity: .58; cursor: wait; }
.voice-status { min-height: 48px; margin: 20px 0 4px; line-height: 1.45; font-weight: 600; }
.voice-status[data-error="true"] { color: #a32030; }
.voice-privacy { margin: 16px 0 0; font-size: 13px; line-height: 1.45; color: #6a7f84; }