:root {
  --font-sans: "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --color-background-secondary: #f6f7fb;
  --color-text-secondary: #757b86;
  --color-text-primary: #1a1a1a;
  --color-mint: #1d9e75;
  --color-mint-deep: #0f6e56;
  --color-mint-soft: #e1f5ee;
  --color-amber: #ef9f27;
  --color-amber-soft: #faeeda;
  --color-red: #e24b4a;
  --color-red-soft: #fcebeb;
  --color-line: #f0f0f0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

#app-root {
  display: flex;
  flex: 1;
  min-height: 0;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-stage {
  min-height: 100vh;
  padding: 2rem 1rem;
  display: grid;
  place-items: center;
}

.phone {
  width: min(100%, 390px);
  border-radius: 32px;
  border: 6px solid #1a1a1a;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(23, 31, 54, 0.18);
}

.app-phone {
  min-height: 790px;
}

.notch {
  width: 80px;
  height: 22px;
  background: #1a1a1a;
  border-radius: 0 0 14px 14px;
  margin: 0 auto;
}

.screen {
  background: #fff;
  min-height: 780px;
  display: flex;
  flex-direction: column;
}

.sb {
  background: #f7f7f7;
  padding: 6px 14px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sb-time {
  font-size: 10px;
  font-weight: 600;
  color: #1a1a1a;
}

.sb-icons {
  display: flex;
  gap: 4px;
  align-items: center;
}

.bar {
  width: 3px;
  border-radius: 1px;
  background: #1a1a1a;
}

.s-pad {
  padding: 16px 14px;
}

.s-head {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.s-sub {
  font-size: 10px;
  color: #888;
  margin-bottom: 14px;
}

.logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding-top: 4px;
}

.logo-lockup {
  display: flex;
  align-items: center;
  gap: 6px;
}

.logo-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #1d9e75;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-dot svg {
  width: 11px;
  height: 11px;
}

.logo-name {
  font-size: 14px;
  font-weight: 500;
  color: #1d9e75;
}

.txt-area {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px;
  font-size: 11px;
  color: #1a1a1a;
  min-height: 92px;
  background: #fafafa;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.txt-area:focus {
  border-color: #cfd7d3;
}

.txt-hint {
  font-size: 10px;
  color: #aaa;
  margin-top: 4px;
}

.field-caption {
  font-size: 9px;
  color: #aaa;
  margin: 10px 0 4px;
}

.ctx-row {
  display: flex;
  gap: 6px;
  margin: 12px 0;
}

.ctx-chip {
  appearance: none;
  flex: 1;
  border: 1.5px solid #e0e0e0;
  border-radius: 10px;
  padding: 6px 4px;
  text-align: center;
  background: #fff;
}

.ctx-chip.on {
  border-color: #1d9e75;
  background: #e1f5ee;
}

.ctx-chip svg {
  width: 13px;
  height: 13px;
  display: block;
  margin: 0 auto 2px;
}

.ctx-chip span {
  font-size: 9px;
  color: #888;
  display: block;
}

.ctx-chip.on span {
  color: #0f6e56;
}

.cta,
.onboard-btn,
.gate-btn-primary {
  width: 100%;
  background: #1d9e75;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 11px;
  font-size: 12px;
  font-weight: 500;
}

.cta[disabled] {
  opacity: 0.72;
  cursor: wait;
}

.disc {
  font-size: 8.5px;
  color: #bbb;
  text-align: center;
  margin-top: 8px;
  line-height: 1.4;
}

.auth-note {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.45;
  color: #888;
  text-align: center;
}

.reminder-prompt {
  border: 1px solid #d7edf2;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #f5fdff, #edf8fb);
}

.reminder-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2b7a85;
  background: #dcf3f7;
}

.reminder-title {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #21444a;
}

.reminder-body {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.55;
  color: #486269;
}

.reminder-actions,
.followup-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.reminder-button,
.followup-chip,
.followup-clear {
  appearance: none;
  border-radius: 12px;
  border: 1px solid #d6e0e3;
  background: #fff;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 600;
  color: #234147;
}

.reminder-button-worse {
  border-color: #f1c9c9;
  color: #a14a4a;
}

.followup-clear {
  width: 100%;
  margin-top: 8px;
}

.google-slot {
  width: 100%;
}

.error-note {
  margin-top: 8px;
  border-radius: 10px;
  padding: 9px 10px;
  font-size: 10px;
  line-height: 1.45;
  background: #fcebeb;
  color: #a32d2d;
}

.verdict {
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.verdict-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.verdict-title {
  font-size: 11px;
  font-weight: 500;
}

.verdict-sub {
  font-size: 9px;
  margin-top: 1px;
}

.result-soft-note {
  margin-bottom: 10px;
  font-size: 10px;
  line-height: 1.5;
  color: #4d5c57;
}

.result-pager {
  margin: 10px 0 12px;
}

.result-pager-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(92px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.result-pager-tabs::-webkit-scrollbar {
  display: none;
}

.result-step-tab {
  appearance: none;
  border: 1px solid #d8e7f8;
  border-radius: 14px;
  background: #fff;
  color: #44607f;
  padding: 10px 12px;
  display: grid;
  gap: 6px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  min-height: 62px;
}

.result-step-tab.active {
  border-color: #7baef2;
  box-shadow: 0 0 0 1px rgba(123, 174, 242, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  color: #184d85;
}

.result-step-number {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef5fd;
  color: #3f76b2;
  font-size: 10px;
}

.result-step-tab.active .result-step-number {
  background: #dbeafb;
  color: #0c5ea8;
}

.result-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.result-dot-button {
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: #d5dce8;
  padding: 0;
}

.result-dot-button.active {
  width: 24px;
  background: linear-gradient(90deg, #74aef2, #f2a6c8);
}

.result-pager-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}

.result-nav-button {
  appearance: none;
  border: 1px solid #dbe6f5;
  border-radius: 999px;
  background: #fff;
  color: #35587e;
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 700;
}

.result-nav-button:disabled {
  opacity: 0.45;
}

.result-page-status {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8795;
}

.result-page-card {
  min-height: 0;
}

.narration-card {
  border: 1px solid #dbe8f7;
  border-radius: 16px;
  padding: 13px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #fff6fa 100%);
}

.narration-copy {
  display: grid;
  gap: 6px;
}

.narration-title {
  font-size: 11px;
  font-weight: 800;
  color: #1f4f7f;
}

.narration-body {
  font-size: 9px;
  line-height: 1.6;
  color: #586b7c;
}

.narration-button {
  appearance: none;
  margin-top: 10px;
  border: 1px solid #8cb8ee;
  border-radius: 999px;
  background: #fff;
  color: #18548d;
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
}

.narration-button:disabled {
  opacity: 0.55;
}

.fear-shell {
  border: 1px solid #ece6dc;
  border-radius: 16px;
  padding: 12px;
  background: #fffdfa;
  margin-bottom: 10px;
}

.fear-pill,
.still-here-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fear-pill {
  color: #b14e4e;
  background: #fbe8e8;
}

.fear-quote {
  margin-top: 10px;
  border-radius: 12px;
  padding: 12px;
  background: #f4f1ea;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: #4c4a44;
}

.evidence-banner {
  margin-top: 12px;
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(135deg, #dff5ee, #e8f7f2);
  display: flex;
  align-items: center;
  gap: 10px;
}

.evidence-banner-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: #1d9e75;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.evidence-banner-title {
  font-size: 11px;
  font-weight: 700;
  color: #0e6651;
}

.evidence-banner-sub {
  margin-top: 2px;
  font-size: 9px;
  color: #287965;
}

.calm-v {
  background: #e1f5ee;
}

.calm-v .verdict-icon {
  background: #1d9e75;
}

.calm-v .verdict-title {
  color: #085041;
}

.calm-v .verdict-sub {
  color: #0f6e56;
}

.watch-v {
  background: #faeeda;
}

.watch-v .verdict-icon {
  background: #ef9f27;
}

.watch-v .verdict-title {
  color: #412402;
}

.watch-v .verdict-sub {
  color: #633806;
}

.card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.followup-card {
  border: 1px solid #e3eaec;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fcfdfd;
}

.followup-title {
  font-size: 11px;
  font-weight: 700;
  color: #223b41;
}

.followup-body {
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.55;
  color: #58676b;
}

.evidence-card {
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  border-left: 3px solid transparent;
}

.evidence-mint {
  background: #e0f5ef;
  border-left-color: #15936b;
}

.evidence-lilac {
  background: #e8e5fb;
  border-left-color: #6654c8;
}

.evidence-sky {
  background: #e3effd;
  border-left-color: #2f7de1;
}

.evidence-sand {
  background: #f6ecd4;
  border-left-color: #d28a1f;
}

.evidence-kicker {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(20, 37, 54, 0.75);
}

.evidence-title {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #18382f;
}

.evidence-body {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.65;
  color: #23443c;
}

.timeline-list {
  margin-top: 12px;
}

.timeline-row {
  display: flex;
  gap: 10px;
  position: relative;
  padding-bottom: 12px;
}

.timeline-row:last-child {
  padding-bottom: 0;
}

.timeline-row::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: rgba(25, 117, 96, 0.3);
}

.timeline-row:last-child::after {
  display: none;
}

.timeline-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #229b76;
  background: #f8fffd;
  flex-shrink: 0;
  margin-top: 3px;
}

.timeline-dot-current {
  background: #15936b;
}

.timeline-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(20, 37, 54, 0.62);
}

.timeline-text {
  margin-top: 3px;
  font-size: 10px;
  line-height: 1.55;
  color: #1f3f36;
}

.timeline-row-current .timeline-text {
  color: #0e7a5a;
  font-weight: 600;
}

.card-contrast {
  border-color: #d9e4ff;
  background: #fbfdff;
}

.card-watch {
  border-color: #fac775;
}

.card-label {
  font-size: 9px;
  font-weight: 500;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.card-label-watch {
  color: #854f0b;
}

.card-body {
  font-size: 10px;
  color: #1a1a1a;
  line-height: 1.5;
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.compare-box {
  border-radius: 12px;
  padding: 10px;
}

.compare-box-fear {
  background: rgba(255, 235, 231, 0.75);
}

.compare-box-real {
  background: rgba(223, 245, 238, 0.85);
}

.compare-title {
  font-size: 9px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #34495e;
}

.compare-point {
  font-size: 9px;
  line-height: 1.5;
  color: #334;
  margin-bottom: 5px;
}

.compare-point:last-child {
  margin-bottom: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.stat-tile {
  border-radius: 12px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #2f7de1;
  line-height: 1.1;
}

.stat-label {
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.45;
  color: #4b5872;
}

.evidence-sources {
  margin-top: 10px;
  font-size: 8px;
  color: #60708e;
}

.evidence-sources a {
  color: #2f7de1;
  text-decoration: none;
}

.anxiety-log {
  margin-top: 12px;
  border-radius: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.58);
}

.anxiety-log-header {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(20, 37, 54, 0.64);
  margin-bottom: 6px;
}

.anxiety-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(40, 67, 62, 0.12);
}

.anxiety-log-row:last-child {
  border-bottom: 0;
}

.anxiety-log-title {
  font-size: 10px;
  color: #243634;
}

.anxiety-log-outcome {
  font-size: 9px;
  color: #15936b;
  text-align: right;
  font-weight: 600;
}

.anxiety-log-empty {
  font-size: 9px;
  line-height: 1.5;
  color: #5d665f;
}

.thought-footnote {
  margin-top: 10px;
  font-size: 9px;
  line-height: 1.55;
  color: #735a19;
}

.bottom-line-card {
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #dcf6ee, #edf9f5);
}

.bottom-line-title {
  font-size: 12px;
  font-weight: 800;
  color: #0c6150;
}

.bottom-line-body {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.7;
  color: #1c4f44;
  font-style: italic;
}

.bottom-line-note {
  margin-top: 8px;
  font-size: 9px;
  color: #236453;
}

.still-here-card {
  border: 1px solid #e6e8ea;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
}

.still-here-pill {
  color: #3f8d78;
  background: #dff3ee;
}

.still-here-body,
.still-here-note {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.7;
  color: #2f363d;
}

.still-here-steps {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.still-step {
  border-radius: 12px;
  padding: 10px 12px;
  background: #f8f5ef;
  font-size: 10px;
  line-height: 1.5;
  color: #48433c;
}

.resource-list {
  display: grid;
  gap: 8px;
}

.resource-link {
  display: block;
  border: 1px solid #f1f3f7;
  border-radius: 10px;
  padding: 9px 10px;
  text-decoration: none;
  background: #fff;
}

.resource-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.resource-title {
  font-size: 10px;
  font-weight: 600;
  color: #1a1a1a;
}

.resource-source {
  font-size: 8px;
  color: #0f6e56;
  background: #e1f5ee;
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}

.resource-note {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.45;
  color: #666;
}

@media (max-width: 640px) {
  .result-pager-tabs {
    grid-auto-columns: minmax(84px, 1fr);
  }

  .result-step-tab {
    min-height: 56px;
    padding: 9px 10px;
  }

  .result-pager-footer {
    margin-top: 10px;
  }
}

.step-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 5px;
}

.step-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1d9e75;
  flex-shrink: 0;
  margin-top: 4px;
}

.tab-bar {
  display: flex;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

.tab {
  appearance: none;
  flex: 1;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  background: #fff;
}

.tab svg {
  width: 16px;
  height: 16px;
}

.tab span {
  font-size: 8px;
  color: #bbb;
}

.tab.active span {
  color: #1d9e75;
}

.log-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.log-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.log-dot.calm {
  background: #1d9e75;
}

.log-dot.watch {
  background: #ef9f27;
}

.log-dot.seek {
  background: #e24b4a;
}

.log-title {
  font-size: 10px;
  color: #1a1a1a;
  flex: 1;
}

.log-date {
  font-size: 9px;
  color: #bbb;
}

.log-outcome {
  font-size: 9px;
  color: #0f6e56;
  background: #e1f5ee;
  padding: 2px 6px;
  border-radius: 6px;
}

.log-outcome.pending {
  color: #633806;
  background: #faeeda;
}

.log-outcome.seek {
  color: #a32d2d;
  background: #fcebeb;
}

.onboard-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 20px;
  text-align: center;
  flex: 1;
}

.big-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e1f5ee;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.big-icon svg {
  width: 28px;
  height: 28px;
}

.onboard-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.onboard-body {
  font-size: 10px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 24px;
}

.dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 24px;
}

.dot-step {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e0e0e0;
}

.dot-step.on {
  background: #1d9e75;
  width: 18px;
}

.onboard-skip {
  font-size: 10px;
  color: #bbb;
  margin-top: 10px;
  text-align: center;
}

.onboard-link {
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: #888;
  font-size: 11px;
}

.legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 10px;
  color: #888;
}

.legal-links a {
  color: #0f6e56;
  text-decoration: none;
}

.user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e1f5ee;
  color: #0f6e56;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
}

.user-badge-ghost {
  background: #f4f5f7;
  color: #999;
}

.gate-screen {
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 16px;
  text-align: center;
}

.gate-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fcebeb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.gate-icon svg {
  width: 28px;
  height: 28px;
}

.gate-title {
  font-size: 14px;
  font-weight: 500;
  color: #791f1f;
  margin-bottom: 8px;
}

.gate-body {
  font-size: 10px;
  color: #a32d2d;
  line-height: 1.6;
  margin-bottom: 20px;
}

.gate-btn-sec {
  width: 100%;
  background: #fff;
  color: #a32d2d;
  border: 1.5px solid #f09595;
  border-radius: 12px;
  padding: 10px;
  font-size: 12px;
}

.calm-score {
  background: #e1f5ee;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  text-align: center;
}

.score-num {
  font-size: 32px;
  font-weight: 500;
  color: #085041;
}

.score-label {
  font-size: 9px;
  color: #0f6e56;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.score-sub {
  font-size: 9px;
  color: #0f6e56;
  margin-top: 3px;
}

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

.profile-card {
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: #fff;
}

.profile-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-avatar-fallback {
  display: grid;
  place-items: center;
  background: #e1f5ee;
  color: #0f6e56;
  font-weight: 700;
}

.profile-name {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}

.profile-email,
.profile-copy {
  margin-top: 2px;
  font-size: 10px;
  color: #888;
  line-height: 1.45;
}

.profile-button {
  width: 100%;
  margin-top: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  background: #fff;
  color: #1a1a1a;
  padding: 10px;
  font-size: 12px;
}

.profile-button-danger {
  border-color: #f3c7c7;
  color: #bf3f3f;
}

.profile-links {
  display: grid;
  gap: 10px;
}

.profile-link-card {
  display: block;
  border: 1px solid #f0f0f0;
  border-radius: 14px;
  padding: 12px;
  text-decoration: none;
  background: #fff;
}

.profile-link-button {
  width: 100%;
  text-align: left;
  border: 1px solid #f0f0f0;
}

.profile-link-title {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
}

.profile-link-copy {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.45;
  color: #888;
}

.meta-line {
  font-size: 10px;
  color: #aaa;
  margin-bottom: 10px;
}

.screen-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.home-form {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.loading-copy {
  margin-top: 8px;
  font-size: 10px;
  color: #888;
  text-align: center;
}

.link-ghost {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
}

@media (min-width: 900px) {
  .app-stage {
    padding: 1.25rem;
  }

  .phone {
    width: min(100%, 860px);
    border: 1px solid #dbe3f0;
    border-radius: 32px;
    box-shadow: 0 28px 80px rgba(23, 31, 54, 0.12);
  }

  .app-phone {
    min-height: min(860px, calc(100vh - 2.5rem));
  }

  .notch {
    display: none;
  }

  .screen {
    min-height: min(860px, calc(100vh - 2.5rem));
  }

  .sb {
    padding: 10px 18px 8px;
  }

  .sb-time {
    font-size: 12px;
  }

  .bar {
    width: 4px;
  }

  .s-pad {
    padding: 28px 28px 24px;
  }

  .logo-row {
    gap: 10px;
    margin-bottom: 28px;
  }

  .logo-lockup {
    gap: 10px;
  }

  .logo-dot {
    width: 32px;
    height: 32px;
  }

  .logo-dot svg {
    width: 14px;
    height: 14px;
  }

  .logo-name {
    font-size: 18px;
  }

  .s-head {
    font-size: 24px;
    margin-bottom: 4px;
  }

  .s-sub {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .txt-area {
    min-height: 152px;
    padding: 16px;
    font-size: 15px;
    border-radius: 16px;
  }

  .txt-hint,
  .disc,
  .meta-line,
  .loading-copy {
    font-size: 12px;
  }

  .field-caption,
  .auth-note,
  .legal-links,
  .profile-email,
  .profile-copy,
  .profile-link-copy {
    font-size: 12px;
  }

  .ctx-row {
    gap: 10px;
    margin: 16px 0;
  }

  .ctx-chip {
    border-radius: 14px;
    padding: 10px 8px;
  }

  .ctx-chip svg {
    width: 18px;
    height: 18px;
    margin-bottom: 4px;
  }

  .ctx-chip span {
    font-size: 12px;
  }

  .cta,
  .onboard-btn,
  .gate-btn-primary,
  .gate-btn-sec {
    border-radius: 16px;
    padding: 16px;
    font-size: 15px;
  }

  .error-note {
    margin-top: 10px;
    border-radius: 12px;
    padding: 12px;
    font-size: 12px;
  }

  .verdict {
    border-radius: 16px;
    padding: 14px 16px;
    gap: 12px;
    margin-bottom: 14px;
  }

  .verdict-icon {
    width: 36px;
    height: 36px;
  }

  .verdict-title {
    font-size: 15px;
  }

  .verdict-sub {
    font-size: 12px;
  }

  .card {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 12px;
  }

  .card-label,
  .score-label {
    font-size: 11px;
  }

  .card-body,
  .gate-body,
  .onboard-body,
  .log-title {
    font-size: 14px;
    line-height: 1.55;
  }

  .step-row {
    gap: 8px;
    margin-bottom: 8px;
  }

  .step-dot {
    width: 7px;
    height: 7px;
    margin-top: 7px;
  }

  .tab {
    padding: 14px 6px;
    gap: 6px;
  }

  .tab svg {
    width: 20px;
    height: 20px;
  }

  .tab span,
  .log-date,
  .log-outcome,
  .onboard-skip {
    font-size: 11px;
  }

  .log-row {
    gap: 12px;
    padding: 12px 0;
  }

  .log-dot {
    width: 10px;
    height: 10px;
  }

  .log-outcome {
    padding: 4px 8px;
    border-radius: 8px;
  }

  .onboard-center {
    padding: 56px 48px 32px;
  }

  .big-icon,
  .gate-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 20px;
  }

  .big-icon svg,
  .gate-icon svg {
    width: 34px;
    height: 34px;
  }

  .onboard-title,
  .gate-title {
    font-size: 28px;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  .dots {
    margin-bottom: 30px;
  }

  .dot-step {
    width: 9px;
    height: 9px;
  }

  .dot-step.on {
    width: 26px;
  }

  .calm-score {
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 16px;
  }

  .score-num {
    font-size: 46px;
  }

  .score-sub {
    font-size: 12px;
  }

  .user-badge {
    min-height: 32px;
    padding: 0 14px;
    font-size: 12px;
  }

  .profile-card,
  .profile-link-card {
    border-radius: 18px;
    padding: 16px;
  }

  .profile-avatar {
    width: 56px;
    height: 56px;
  }

  .profile-name,
  .profile-link-title {
    font-size: 16px;
  }

  .profile-button {
    border-radius: 14px;
    padding: 14px;
    font-size: 14px;
  }
}

@media (max-width: 520px) {
  .app-stage {
    padding: 0;
  }

  .phone {
    width: 100%;
    border-radius: 0;
    border-width: 0;
    box-shadow: none;
  }

  .app-phone,
  .screen {
    min-height: 100vh;
  }

  .notch {
    display: none;
  }
}