@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");._btn_1ana9_1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: var(--m3-font-sans);
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--m3-shape-pill);
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  white-space: nowrap;
  user-select: none;
}

._btn_1ana9_1:disabled {
  cursor: not-allowed;
  background: rgba(28, 29, 25, 0.12);
  color: rgba(28, 29, 25, 0.38);
  box-shadow: none;
  border-color: transparent;
}

._sm_1ana9_25 { height: 32px; padding: 0 14px; font-size: 12.5px; }
._md_1ana9_26 { height: 40px; padding: 0 18px; font-size: 14px; }
._lg_1ana9_27 { height: 48px; padding: 0 22px; font-size: 15px; }

._filled_1ana9_29  { background: var(--m3-primary); color: var(--m3-on-primary); }
._filled_1ana9_29:hover:not(:disabled)  { box-shadow: var(--m3-elev-2); }
._filled_1ana9_29:active:not(:disabled) { transform: translateY(1px); }

._tonal_1ana9_33  { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
._tonal_1ana9_33:hover:not(:disabled) { background: var(--m3-surface-c-high); }

._outlined_1ana9_36 { background: transparent; color: var(--m3-on-surface); border: 1px solid var(--m3-outline); }
._outlined_1ana9_36:hover:not(:disabled) { background: var(--m3-surface-c-high); }

._text_1ana9_39 { background: transparent; color: var(--m3-primary); padding-left: 12px; padding-right: 12px; }
._text_1ana9_39:hover:not(:disabled) { background: var(--m3-primary-container); color: var(--m3-on-primary-container); }

._danger_1ana9_42 { background: var(--m3-error-container); color: var(--m3-on-error-container); }
._danger_1ana9_42:hover:not(:disabled) { box-shadow: var(--m3-elev-2); }

._full_1ana9_45 { width: 100%; }

._leading_1ana9_47,
._trailing_1ana9_48 { display: inline-flex; align-items: center; }
._btn_1gct5_1 {
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--m3-on-surface-variant);
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}

._btn_1gct5_1:hover { background: var(--m3-surface-c-high); color: var(--m3-on-surface); }
._btn_1gct5_1:disabled { cursor: not-allowed; opacity: 0.4; }

._sm_1gct5_16 { width: 32px; height: 32px; }
._md_1gct5_17 { width: 40px; height: 40px; }
._lg_1gct5_18 { width: 48px; height: 48px; }

._tonal_1gct5_20 { background: var(--m3-surface-c-high); color: var(--m3-on-surface); }
._primary_1gct5_21 { background: var(--m3-primary); color: var(--m3-on-primary); }
._primary_1gct5_21:hover { background: var(--m3-primary); color: var(--m3-on-primary); opacity: 0.92; }

._selected_1gct5_24 {
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
}
._wrap_bzhre_1 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

._field_bzhre_7 {
  position: relative;
  background: var(--m3-surface-c-lowest);
  border-radius: var(--m3-shape-sm);
  border: 1.5px solid var(--m3-outline-variant);
  transition: border-color 0.15s, box-shadow 0.15s;
}

._field_bzhre_7:focus-within {
  border-color: var(--m3-primary);
  box-shadow: 0 0 0 3px rgba(232, 96, 60, 0.12);
}

._field_bzhre_7._error_bzhre_20 {
  border-color: var(--m3-error);
}

._field_bzhre_7._error_bzhre_20:focus-within {
  border-color: var(--m3-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

._field_bzhre_7._multiline_bzhre_29 {
  border-radius: var(--m3-shape-lg);
  min-height: 60px;
  padding-bottom: 4px;
}

._label_bzhre_35 {
  position: absolute;
  left: 18px;
  top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
}

._input_bzhre_47 {
  width: 100%;
  height: 44px;
  padding: 16px 18px 4px;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: var(--m3-font-sans);
  font-size: 15px;
  color: var(--m3-on-surface);
  caret-color: var(--m3-primary);
}

._input_bzhre_47::placeholder { color: var(--m3-on-surface-variant); opacity: 0.6; }

._input_bzhre_47:-webkit-autofill,
._input_bzhre_47:-webkit-autofill:hover,
._input_bzhre_47:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--m3-surface-c-lowest) inset;
  -webkit-text-fill-color: var(--m3-on-surface);
  caret-color: var(--m3-primary);
  transition: background-color 5000s ease-in-out 0s;
}

._input_bzhre_47._withTrailing_bzhre_72 { padding-right: 52px; }

._field_bzhre_7._multiline_bzhre_29 ._input_bzhre_47 {
  height: auto;
  min-height: 60px;
  resize: vertical;
  line-height: 1.5;
}

._trailing_bzhre_81 {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--m3-on-surface-variant);
}

._helper_bzhre_92 {
  padding: 0 18px;
  font-size: 12px;
  color: var(--m3-on-surface-variant);
  line-height: 1.4;
}

._helper_bzhre_92._error_bzhre_20 { color: var(--m3-error); }

._counter_bzhre_101 {
  font-family: var(--m3-font-mono);
  font-size: 10.5px;
  color: var(--m3-on-surface-variant);
  text-align: right;
  letter-spacing: 0.02em;
  margin-top: 2px;
  padding: 0 4px;
}
._row_7vxx5_1 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  line-height: 1.45;
}

._row_7vxx5_1._disabled_7vxx5_12 { cursor: not-allowed; opacity: 0.5; }

._box_7vxx5_14 {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 2px solid var(--m3-outline);
  background: var(--m3-surface-c-lowest);
  color: var(--m3-on-primary);
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: inherit;
  transition: background 0.12s, border-color 0.12s;
}

._box_7vxx5_14[data-state="checked"] {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
}

._box_7vxx5_14:focus-visible {
  outline: 3px solid var(--m3-primary-container);
  outline-offset: 2px;
}

._indicator_7vxx5_40 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m3-on-primary);
}

._label_7vxx5_47 { flex: 1; }
._label_7vxx5_47 a { color: var(--m3-primary); font-weight: 500; text-decoration: none; }
._label_7vxx5_47 a:hover { text-decoration: underline; }

input[type="checkbox"]._native_7vxx5_51 {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
._root_91k8e_1 {
  width: 52px;
  height: 32px;
  border-radius: var(--m3-shape-pill);
  cursor: pointer;
  flex-shrink: 0;
  background: var(--m3-surface-c-highest);
  border: 2px solid var(--m3-outline);
  position: relative;
  transition: background 0.18s, border-color 0.18s;
}

._root_91k8e_1[data-state='checked'] {
  background: var(--m3-primary);
  border-color: var(--m3-primary);
}

._thumb_91k8e_18 {
  display: block;
  width: 16px;
  height: 16px;
  background: var(--m3-outline);
  border-radius: 50%;
  transition: transform 0.18s, width 0.18s, height 0.18s, background 0.18s;
  transform: translate(2px, 0);
}

._root_91k8e_1[data-state='checked'] ._thumb_91k8e_18 {
  width: 24px;
  height: 24px;
  background: var(--m3-on-primary);
  transform: translate(20px, -4px);
}

._root_91k8e_1:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
._chip_1a0mh_1 {
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--m3-shape-xs);
  background: transparent;
  border: 1px solid var(--m3-outline-variant);
  color: var(--m3-on-surface);
  font: inherit;
  font-family: var(--m3-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, padding 0.12s;
  white-space: nowrap;
}

._chip_1a0mh_1:hover { background: var(--m3-surface-c-high); }
._chip_1a0mh_1:disabled { opacity: 0.5; cursor: not-allowed; }

._chip_1a0mh_1._selected_1a0mh_23 {
  background: var(--m3-secondary-container);
  border-color: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  font-weight: 600;
  padding-left: 10px;
}

._chip_1a0mh_1._selected_1a0mh_23 ._check_1a0mh_31 {
  display: inline-flex;
  align-items: center;
}

._check_1a0mh_31 { display: none; }

._num_1a0mh_38 {
  font-family: var(--m3-font-mono);
  font-size: 11px;
  color: var(--m3-on-surface-variant);
  margin-left: 2px;
}
._chip_1a0mh_1._selected_1a0mh_23 ._num_1a0mh_38 {
  color: var(--m3-on-secondary-container);
  opacity: 0.8;
}
._av_tgd3o_1 {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-family: var(--m3-font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  position: relative;
  flex-shrink: 0;
  user-select: none;
  overflow: hidden;
}

._av_tgd3o_1 img { width: 100%; height: 100%; object-fit: cover; }

._sm_tgd3o_17 { width: 32px; height: 32px; font-size: 12px; }
._md_tgd3o_18 { width: 44px; height: 44px; font-size: 16px; }
._lg_tgd3o_19 { width: 64px; height: 64px; font-size: 22px; }
._xl_tgd3o_20 { width: 96px; height: 96px; font-size: 36px; }

/* gradient palettes */
._g1_tgd3o_23 { background: linear-gradient(140deg, #FFB07A, #D55D33); }
._g2_tgd3o_24 { background: linear-gradient(140deg, #75A0FF, #3056F5); }
._g3_tgd3o_25 { background: linear-gradient(140deg, #7BC987, #3F6B47); }
._g4_tgd3o_26 { background: linear-gradient(140deg, #C089FF, #7740CB); }
._g5_tgd3o_27 { background: linear-gradient(140deg, #5BD9E8, #1F8995); }
._g6_tgd3o_28 { background: linear-gradient(140deg, #FFC95E, #C9870B); }
._g7_tgd3o_29 { background: linear-gradient(140deg, #FF8FCC, #C73682); }

._dot_tgd3o_31 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 30%;
  min-width: 10px;
  min-height: 10px;
  max-width: 14px;
  max-height: 14px;
  border-radius: 50%;
  background: var(--m3-signal);
  border: 2.5px solid var(--m3-surface);
}
._bar_gknzi_1 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
  padding: 8px 16px;
  background: transparent;
  flex-shrink: 0;
}

._title_gknzi_11 {
  font-family: var(--m3-font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--m3-on-surface);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._step_gknzi_24 {
  margin-left: auto;
  font-family: var(--m3-font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  padding: 5px 11px;
  border-radius: var(--m3-shape-pill);
  letter-spacing: 0.04em;
}

._actions_gknzi_36 { display: flex; align-items: center; gap: 2px; margin-left: auto; }

._progress_gknzi_38 {
  height: 3px;
  background: var(--m3-surface-c-high);
  margin: 0 24px;
  border-radius: var(--m3-shape-pill);
  overflow: hidden;
}
._progressFill_gknzi_45 {
  height: 100%;
  background: var(--m3-primary);
  border-radius: var(--m3-shape-pill);
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
._shell_14wip_1 {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--m3-surface);
  color: var(--m3-on-surface);
  font-family: var(--m3-font-sans);
  display: flex;
  justify-content: center;
}

._frame_14wip_11 {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
}

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

._display_14wip_27 {
  font-family: var(--m3-font-serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding: 8px 24px 0;
  color: var(--m3-on-surface);
}

._subtitle_14wip_37 {
  margin-top: 8px;
  padding: 0 24px;
  color: var(--m3-on-surface-variant);
  font-size: 14.5px;
  line-height: 1.55;
}

._fields_14wip_45 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 20px 0;
}

._actions_14wip_52 {
  padding: 8px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._textLink_14wip_59 {
  text-align: center;
  padding: 14px 24px 8px;
  font-size: 13.5px;
  color: var(--m3-on-surface-variant);
}

._textLink_14wip_59 a {
  color: var(--m3-primary);
  font-weight: 600;
  text-decoration: none;
}
._textLink_14wip_59 a:hover { text-decoration: underline; }

@media (min-width: 720px) {
  ._shell_14wip_1 {
    align-items: center;
    background: linear-gradient(135deg, var(--m3-surface) 0%, var(--m3-surface-c-low) 100%);
  }
  ._frame_14wip_11 {
    max-width: 440px;
    background: var(--m3-surface);
    border-radius: var(--m3-shape-xl);
    box-shadow: var(--m3-elev-3);
    margin: 32px;
    padding-bottom: 16px;
    overflow: hidden;
  }
}
._row_11ydc_1 {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: 24px 24px 8px;
}

._cell_11ydc_8 {
  width: 44px;
  height: 56px;
  border-radius: 14px;
  background: var(--m3-surface-c);
  border: 0;
  outline: 0;
  display: grid;
  place-items: center;
  font-family: var(--m3-font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--m3-on-surface);
  text-align: center;
  transition: background 0.12s, box-shadow 0.12s;
  caret-color: var(--m3-primary);
}

._cell_11ydc_8._filled_11ydc_26 {
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}

._cell_11ydc_8:focus,
._cell_11ydc_8._active_11ydc_32 {
  background: var(--m3-surface-c-high);
  box-shadow: inset 0 0 0 2px var(--m3-primary);
}

._error_11ydc_37 ._cell_11ydc_8 { box-shadow: inset 0 0 0 2px var(--m3-error); }
._tile_18d9z_1 {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--m3-shape-md);
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  transition: background 0.12s;
  width: 100%;
}

._tile_18d9z_1:hover { background: var(--m3-surface-c-high); }
._tile_18d9z_1:disabled { cursor: not-allowed; opacity: 0.5; }
._tile_18d9z_1._tonal_18d9z_20 { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
._tile_18d9z_1._tonal_18d9z_20:hover { background: var(--m3-secondary-container); opacity: 0.92; }

._leading_18d9z_23 {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
._leadingCircle_18d9z_33 { border-radius: 50%; }
._leadingMute_18d9z_34 { background: var(--m3-surface-c-high); color: var(--m3-on-surface); }

._text_18d9z_36 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
._title_18d9z_42 {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._subtitle_18d9z_50 {
  font-size: 12.5px;
  color: var(--m3-on-surface-variant);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._tile_18d9z_1._tonal_18d9z_20 ._subtitle_18d9z_50 { color: var(--m3-on-secondary-container); opacity: 0.75; }

._trailing_18d9z_60 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--m3-on-surface-variant);
  flex-shrink: 0;
}
._root_1w6vu_1 {
  display: inline-flex;
  gap: 1px;
  padding: 3px;
  background: var(--m3-surface-c);
  border-radius: var(--m3-shape-pill);
}

._root_1w6vu_1._fullWidth_1w6vu_9 { width: 100%; }

._seg_1w6vu_11 {
  flex: 1;
  padding: 7px 14px;
  border-radius: var(--m3-shape-pill);
  border: 0;
  background: transparent;
  color: var(--m3-on-surface-variant);
  font-family: var(--m3-font-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, font-weight 0.15s;
}

._seg_1w6vu_11._active_1w6vu_25 {
  background: var(--m3-primary);
  color: var(--m3-on-primary);
  font-weight: 600;
}

._seg_1w6vu_11:disabled { opacity: 0.5; cursor: not-allowed; }
._card_h6a7x_1 {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--m3-shape-md);
  font-size: 13px;
  line-height: 1.5;
  font-family: var(--m3-font-sans);
}

._card_h6a7x_1 ._ic_h6a7x_12 {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

._card_h6a7x_1 ._body_h6a7x_21 {
  flex: 1;
  min-width: 0;
}
._card_h6a7x_1 ._body_h6a7x_21 b { font-weight: 700; display: block; margin-bottom: 2px; }
._card_h6a7x_1 ._body_h6a7x_21 small { display: block; font-size: 12.5px; opacity: 0.85; }

._card_h6a7x_1 ._actions_h6a7x_28 {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

/* tones */
._warn_h6a7x_35 {
  background: #FFF3E0;
  color: #7A3E00;
  border: 1px solid #FFD3A0;
}
._warn_h6a7x_35 ._ic_h6a7x_12 { background: var(--m3-warn); color: #fff; }

._info_h6a7x_42 {
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
}
._info_h6a7x_42 ._ic_h6a7x_12 { background: var(--m3-tertiary); color: #fff; }

._success_h6a7x_48 {
  background: #E5F5EC;
  color: #00501F;
  border: 1px solid #B8E0C2;
}
._success_h6a7x_48 ._ic_h6a7x_12 { background: var(--m3-signal); color: #fff; }

._error_h6a7x_55 {
  background: var(--m3-error-container);
  color: var(--m3-on-error-container);
}
._error_h6a7x_55 ._ic_h6a7x_12 { background: var(--m3-error); color: #fff; }

._muted_h6a7x_61 {
  background: var(--m3-surface-c);
  color: var(--m3-on-surface-variant);
}
._muted_h6a7x_61 ._ic_h6a7x_12 { background: var(--m3-surface-c-high); color: var(--m3-on-surface); }
._overlay_1ddye_1 {
  position: fixed;
  inset: 0;
  background: rgba(11, 15, 8, 0.45);
  backdrop-filter: blur(2px);
  z-index: 1000;
  animation: _overlayIn_1ddye_1 0.15s ease-out;
}

@keyframes _overlayIn_1ddye_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

._content_1ddye_15 {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  max-width: 540px;
  margin: 0 auto;
  background: var(--m3-surface-c-lowest);
  border-radius: var(--m3-shape-xl) var(--m3-shape-xl) var(--m3-shape-md) var(--m3-shape-md);
  box-shadow: var(--m3-elev-3);
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 16px);
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  outline: 0;
}

._handle_1ddye_32 {
  width: 36px;
  height: 4px;
  border-radius: var(--m3-shape-pill);
  background: var(--m3-outline-variant);
  margin: 0 auto 14px;
}

._header_1ddye_40 {
  padding: 0 24px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

._icon_1ddye_49 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}
._icon_1ddye_49._warn_1ddye_58 { background: #FFF3E0; color: var(--m3-warn); }
._icon_1ddye_49._danger_1ddye_59 { background: var(--m3-error-container); color: var(--m3-error); }

._title_1ddye_61 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
._body_1ddye_66 {
  font-size: 13px;
  color: var(--m3-on-surface-variant);
  line-height: 1.5;
  max-width: 320px;
}

._actions_1ddye_73 {
  padding: 14px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
/* Peer dialog row — replaces the legacy ConversationItem.
 * One row inside the inbox dialog list.  Layout = avatar │ text │ meta. */

._row_eiox3_4 {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--kin-space-3);
  align-items: center;
  padding: var(--kin-space-3) var(--kin-space-4);
  border-radius: var(--kin-radius-xl);
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  font-family: var(--kin-font-body);
  color: var(--kin-color-text-primary);
  transition: background var(--kin-duration-fast) var(--kin-ease-out);
  position: relative;
}

._row_eiox3_4:hover { background: var(--kin-color-primary-subtle); }
._row_eiox3_4:focus-visible {
  outline: 2px solid var(--kin-color-border-focus);
  outline-offset: -2px;
}

._row_eiox3_4._selected_eiox3_28 {
  background: var(--kin-blush);
  color: var(--kin-color-text-on-blush);
}
._row_eiox3_4._selected_eiox3_28 ._name_eiox3_32 { color: var(--kin-color-text-on-blush); }
._row_eiox3_4._selected_eiox3_28 ._preview_eiox3_33 { color: var(--kin-color-text-on-blush); opacity: .82; }
._row_eiox3_4._selected_eiox3_28 ._time_eiox3_34 { color: var(--kin-color-text-on-blush); opacity: .7; }

/* avatar — peach gradient with optional image src */
._avatar_eiox3_37 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kin-peach);
  color: var(--kin-night);
  display: grid;
  place-items: center;
  font-family: var(--kin-font-body);
  font-weight: var(--kin-weight-medium);
  font-size: var(--kin-text-md);
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}
._avatar_eiox3_37 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
._avatar_eiox3_37._tone-coral_eiox3_58 { background: var(--kin-coral); color: var(--kin-cream); }
._avatar_eiox3_37._tone-night_eiox3_59 { background: var(--kin-night); color: var(--kin-cream); }
._avatar_eiox3_37._tone-blush_eiox3_60 { background: var(--kin-blush); color: var(--kin-color-text-on-blush); }

._dot_eiox3_62 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kin-color-status-online);
  border: 2px solid var(--kin-color-surface);
}

/* text column */
._text_eiox3_74 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
._title-line_eiox3_80 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
._name_eiox3_32 {
  font-size: var(--kin-text-md);
  font-weight: var(--kin-weight-medium);
  letter-spacing: var(--kin-tracking-tight);
  color: var(--kin-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._lock_eiox3_95 {
  font-size: 11px;
  color: var(--kin-color-text-tertiary);
  flex-shrink: 0;
  line-height: 1;
}

._preview_eiox3_33 {
  font-size: var(--kin-text-sm);
  color: var(--kin-color-text-secondary);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
._preview_eiox3_33 ._you_eiox3_110 {
  color: var(--kin-color-text-tertiary);
  font-weight: var(--kin-weight-medium);
}
._preview_eiox3_33 ._draft_eiox3_114 {
  color: var(--kin-color-error);
  font-weight: var(--kin-weight-medium);
  margin-right: 4px;
}
._preview_eiox3_33._typing_eiox3_119 {
  color: var(--kin-color-primary);
  font-style: italic;
  font-weight: var(--kin-weight-medium);
}

/* meta column */
._meta_eiox3_126 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
._time_eiox3_34 {
  font-family: var(--kin-font-mono);
  font-size: var(--kin-text-xs);
  color: var(--kin-color-text-tertiary);
  letter-spacing: 0.02em;
}
._badge_eiox3_139 {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--kin-radius-pill);
  background: var(--kin-color-primary);
  color: var(--kin-color-text-on-primary);
  font-family: var(--kin-font-mono);
  font-size: var(--kin-text-xs);
  font-weight: var(--kin-weight-medium);
  text-align: center;
  line-height: 1.4;
}
._badge_eiox3_139._silent_eiox3_151 {
  background: var(--kin-color-text-tertiary);
}
._checks_eiox3_154 {
  font-family: var(--kin-font-mono);
  font-size: var(--kin-text-sm);
  color: var(--kin-color-text-tertiary);
  line-height: 1;
}
._checks_eiox3_154._read_eiox3_160 { color: var(--kin-color-primary); }

/* skeleton (loading) */
._skel_eiox3_163 {
  background: linear-gradient(
    90deg,
    rgba(24, 14, 9, 0.04) 0%,
    rgba(24, 14, 9, 0.10) 50%,
    rgba(24, 14, 9, 0.04) 100%
  );
  background-size: 200% 100%;
  animation: _shimmer_eiox3_1 1.4s infinite linear;
  border-radius: var(--kin-radius-md);
}
@keyframes _shimmer_eiox3_1 {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
/* Bottom nav bar for phones — only visible <=720px. Replaces the
 * NavRail (which is hidden on mobile because it would eat too much
 * vertical space). 5 slots, fixed to the bottom of the viewport,
 * respects safe-area-inset. */

._bar_do52v_6 {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  height: calc(64px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--kin-color-border);
  font-family: var(--kin-font-body);
}

@media (max-width: 720px) {
  ._bar_do52v_6 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}

._item_do52v_26 {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--kin-color-text-tertiary);
  gap: 2px;
  padding: 6px 4px 4px;
  transition: color var(--kin-duration-fast) var(--kin-ease-out);
}
._item_do52v_26:active { transform: scale(0.96); }
._item_do52v_26._active_do52v_38 { color: var(--kin-color-primary); }

._label_do52v_40 {
  font-size: 10px;
  font-weight: var(--kin-weight-medium);
  letter-spacing: 0.02em;
}
/* Peer-styled left navigation rail. Replaces the legacy Sidebar on
 * desktop layouts. 84px wide, full-height, cream surface with coral
 * accents. Active item gets a primary-subtle pill background. */

._rail_bxh2l_5 {
  width: 84px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--kin-color-surface);
  border-right: 1px solid var(--kin-color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--kin-space-5) 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

._brand_bxh2l_22 {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--kin-color-primary);
  color: var(--kin-color-text-on-primary);
  display: grid;
  place-items: center;
  font-family: var(--kin-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -1px;
  margin-bottom: var(--kin-space-6);
  box-shadow: var(--kin-shadow-md);
  user-select: none;
}

._items_bxh2l_40 {
  display: flex;
  flex-direction: column;
  gap: var(--kin-space-2);
  align-items: center;
}

._item_bxh2l_40 {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--kin-color-text-secondary);
  transition: background var(--kin-duration-fast) var(--kin-ease-out),
              color var(--kin-duration-fast) var(--kin-ease-out);
  position: relative;
}

._item_bxh2l_40:hover {
  background: var(--kin-color-primary-subtle);
  color: var(--kin-color-primary);
}

._item_bxh2l_40._active_bxh2l_67 {
  background: var(--kin-color-primary-subtle);
  color: var(--kin-color-primary);
}

._item_bxh2l_40 ._badge_bxh2l_72 {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--kin-color-primary);
  color: var(--kin-color-text-on-primary);
  font-family: var(--kin-font-mono);
  font-size: 10px;
  font-weight: var(--kin-weight-medium);
  border-radius: var(--kin-radius-pill);
  padding: 1px 6px;
  line-height: 1.2;
  border: 2px solid var(--kin-color-surface);
}

._spacer_bxh2l_87 { flex: 1; }

._status_bxh2l_89 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: var(--kin-space-3);
  width: 60px;
  border-top: 1px solid var(--kin-color-border);
  margin-top: var(--kin-space-3);
}
._statusDot_bxh2l_99 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kin-color-status-online);
  box-shadow: 0 0 0 4px rgba(42, 125, 79, 0.18);
  animation: _rail-pulse_bxh2l_1 2.4s ease-in-out infinite;
}
._statusText_bxh2l_107 {
  font-family: var(--kin-font-mono);
  font-size: 10px;
  color: var(--kin-color-text-tertiary);
  letter-spacing: var(--kin-tracking-wide);
}
@keyframes _rail-pulse_bxh2l_1 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(42, 125, 79, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(42, 125, 79, 0); }
}

._me_bxh2l_118 {
  margin-top: var(--kin-space-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kin-peach);
  color: var(--kin-night);
  display: grid;
  place-items: center;
  font-family: var(--kin-font-body);
  font-weight: var(--kin-weight-medium);
  font-size: var(--kin-text-md);
  cursor: pointer;
  border: 0;
  position: relative;
  overflow: hidden;
}
._me_bxh2l_118 img { width: 100%; height: 100%; object-fit: cover; }
._me_bxh2l_118::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--kin-color-status-online);
  border: 2px solid var(--kin-color-surface);
}
._wrap_1bzl1_1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--kin-space-12) var(--kin-space-6);
  text-align: center;
  background: var(--kin-color-bg);
  font-family: var(--kin-font-body);
  color: var(--kin-color-text-primary);
}

._icon_1bzl1_14 {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  background: var(--kin-color-primary-subtle);
  color: var(--kin-color-primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--kin-space-6);
}

._title_1bzl1_25 {
  font-family: var(--kin-font-display);
  font-weight: var(--kin-weight-regular);
  font-size: 32px;
  line-height: var(--kin-leading-tight);
  letter-spacing: var(--kin-tracking-tight);
  margin: 0 0 var(--kin-space-3);
  max-width: 420px;
}
._title_1bzl1_25 em { font-style: italic; color: var(--kin-color-primary); }

._subtitle_1bzl1_36 {
  font-size: var(--kin-text-md);
  color: var(--kin-color-text-secondary);
  line-height: var(--kin-leading-relaxed);
  margin: 0 0 var(--kin-space-6);
  max-width: 380px;
}

._actions_1bzl1_44 { display: flex; gap: var(--kin-space-3); flex-wrap: wrap; justify-content: center; }

._cta_1bzl1_46 {
  height: 48px;
  padding: 0 var(--kin-space-6);
  border-radius: var(--kin-radius-pill);
  border: 0;
  background: var(--kin-color-primary);
  color: var(--kin-color-text-on-primary);
  font-family: var(--kin-font-body);
  font-size: var(--kin-text-md);
  font-weight: var(--kin-weight-medium);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--kin-space-2);
  transition: background var(--kin-duration-fast) var(--kin-ease-out);
}
._cta_1bzl1_46:hover { background: var(--kin-color-primary-hover); }

._ghost_1bzl1_64 {
  height: 48px;
  padding: 0 var(--kin-space-6);
  border-radius: var(--kin-radius-pill);
  background: transparent;
  border: 1px solid var(--kin-color-border-strong);
  color: var(--kin-color-text-secondary);
  font-family: var(--kin-font-body);
  font-size: var(--kin-text-md);
  cursor: pointer;
  transition: background var(--kin-duration-fast) var(--kin-ease-out);
}
._ghost_1bzl1_64:hover { background: var(--kin-color-primary-subtle); color: var(--kin-color-primary); border-color: var(--kin-color-primary); }
._shell_nukia_1 {
  display: grid;
  grid-template-columns: 84px 380px 1fr;
  grid-template-rows: 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--kin-color-bg);
  font-family: var(--kin-font-body);
  color: var(--kin-color-text-primary);
}

._middle_nukia_13 {
  background: var(--kin-color-surface);
  border-right: 1px solid var(--kin-color-border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

._middleHead_nukia_22 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kin-space-3);
  padding: var(--kin-space-6) var(--kin-space-5) var(--kin-space-2);
}
._middleHeadTitle_nukia_29 {
  font-family: var(--kin-font-display);
  font-size: var(--kin-text-3xl);
  font-weight: var(--kin-weight-regular);
  letter-spacing: var(--kin-tracking-tight);
  line-height: var(--kin-leading-tight);
  color: var(--kin-color-text-primary);
  margin: 0;
}

._filters_nukia_39 {
  display: flex;
  gap: var(--kin-space-2);
  padding: 0 var(--kin-space-5) var(--kin-space-3);
  overflow-x: auto;
  scrollbar-width: none;
}
._filters_nukia_39::-webkit-scrollbar { display: none; }

._filterChip_nukia_48 {
  flex-shrink: 0;
  height: 32px;
  padding: 0 var(--kin-space-4);
  border-radius: var(--kin-radius-pill);
  border: 1.5px solid var(--kin-color-border);
  background: transparent;
  color: var(--kin-color-text-secondary);
  font-family: var(--kin-font-body);
  font-size: var(--kin-text-sm);
  font-weight: var(--kin-weight-medium);
  cursor: pointer;
  transition: background var(--kin-duration-fast) var(--kin-ease-out),
              color var(--kin-duration-fast) var(--kin-ease-out),
              border-color var(--kin-duration-fast) var(--kin-ease-out);
}
._filterChip_nukia_48:hover {
  background: var(--kin-color-primary-subtle);
  color: var(--kin-color-primary);
  border-color: var(--kin-color-primary-subtle);
}
._filterChipActive_nukia_69 {
  background: var(--kin-color-primary);
  color: var(--kin-color-text-on-primary);
  border-color: var(--kin-color-primary);
}
._filterChipActive_nukia_69:hover {
  background: var(--kin-color-primary-hover);
  border-color: var(--kin-color-primary-hover);
  color: var(--kin-color-text-on-primary);
}
._middleHeadFab_nukia_79 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: var(--kin-color-primary);
  color: var(--kin-color-text-on-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--kin-duration-fast) var(--kin-ease-out),
              transform var(--kin-duration-instant) var(--kin-ease-default);
  box-shadow: var(--kin-shadow-sm);
}
._middleHeadFab_nukia_79:hover { background: var(--kin-color-primary-hover); }
._middleHeadFab_nukia_79:active { transform: scale(0.97); }

._list_nukia_97 {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--kin-space-2) var(--kin-space-12);
}

._right_nukia_104 {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--kin-color-bg);
}

@media (max-width: 1024px) {
  ._shell_nukia_1 {
    grid-template-columns: 84px 320px 1fr;
  }
}

._mobileBack_nukia_118 {
  display: none;
}

@media (max-width: 720px) {
  /* On phones we show one column at a time:
   *  · default               → dialog list (with NavRail tucked in)
   *  · a chat is selected    → message feed full-bleed, with a small
   *                            back button in the top-left to return.
   *
   * The grid collapses to 1 col / 1 row and we toggle visibility via
   * the mobileSelected modifier on the shell. */
  ._shell_nukia_1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }

  /* hide the rail on phone — it eats too much room. Replaced by an
   * implicit drawer that the InboxPage doesn't yet build, so for now
   * the rail just disappears and you reach Settings via the FAB menu. */
  ._shell_nukia_1 > aside { display: none; }

  ._middle_nukia_13,
  ._right_nukia_104 { display: none; grid-column: 1; grid-row: 1; }

  ._shell_nukia_1:not(._mobileSelected_nukia_143) ._middle_nukia_13 { display: flex; }
  ._shell_nukia_1._mobileSelected_nukia_143 ._right_nukia_104 { display: flex; }

  ._mobileBack_nukia_118 {
    display: grid;
    place-items: center;
    position: absolute;
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--kin-shadow-sm);
    color: var(--kin-color-text-primary);
    cursor: pointer;
    z-index: 5;
    backdrop-filter: blur(6px);
  }

  ._middleHead_nukia_22 {
    padding: var(--kin-space-5) var(--kin-space-4) var(--kin-space-2);
  }
  ._middleHeadTitle_nukia_29 { font-size: var(--kin-text-2xl); }
  ._filters_nukia_39 { padding: 0 var(--kin-space-4) var(--kin-space-3); }

  /* Reserve room for the floating MobileNavBar (64px + safe-area). */
  ._list_nukia_97 {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}
/* Shared visual atoms for onboarding pages.
 * Page-local components compose these — kept here so we don't duplicate
 * the same illustration/key-card patterns across 7 screens.
 */

/* central illustration in primary-container circle */
._illust_1ausl_7 {
  margin: 18px auto 6px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  display: grid;
  place-items: center;
  position: relative;
}
._illust_1ausl_7::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: var(--m3-primary-container);
  opacity: 0.4;
  z-index: -1;
}
._illust_1ausl_7::after {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: var(--m3-primary-container);
  opacity: 0.2;
  z-index: -1;
}
._illust_1ausl_7 svg { width: 64px; height: 64px; }

._illustTertiary_1ausl_38 { background: var(--m3-tertiary-container); color: var(--m3-on-tertiary-container); }
._illustTertiary_1ausl_38::before, ._illustTertiary_1ausl_38::after { background: var(--m3-tertiary-container); }

._illustSecondary_1ausl_41 { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }
._illustSecondary_1ausl_41::before, ._illustSecondary_1ausl_41::after { background: var(--m3-secondary-container); }

._center_1ausl_44 {
  text-align: center;
  padding: 0 28px;
}

/* key fingerprint card (Stage 5, also reused in Stage 18) */
._keyCard_1ausl_50 {
  margin: 18px 20px 0;
  padding: 16px;
  border-radius: var(--m3-shape-md);
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
}
._keyCardLab_1ausl_57 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
}
._keyFp_1ausl_65 {
  font-family: var(--m3-font-mono);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0.05em;
}
._keyFp_1ausl_65 b { font-weight: 700; }

/* backup phrase grid (Stage 6) */
._phraseGrid_1ausl_74 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 20px 8px;
}
._phrase_1ausl_74 {
  background: var(--m3-surface-c);
  border-radius: var(--m3-shape-sm);
  padding: 9px 8px 9px 28px;
  font-size: 13px;
  color: var(--m3-on-surface);
  font-weight: 500;
  position: relative;
  line-height: 1.2;
}
._phrase_1ausl_74::before {
  content: attr(data-n);
  position: absolute;
  left: 8px;
  top: 9px;
  font-family: var(--m3-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--m3-on-surface-variant);
  letter-spacing: 0.02em;
}

/* warning callout (Stage 6) */
._warnCard_1ausl_103 {
  margin: 14px 20px 6px;
  padding: 14px 16px;
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
  border-radius: var(--m3-shape-md);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  gap: 10px;
}
._warnCard_1ausl_103 svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* avatar uploader (Stage 4) */
._avatarUpload_1ausl_122 {
  margin: 10px auto 6px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(140deg, #A6CFA7, #3F6B47);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.03em;
  position: relative;
  cursor: pointer;
  box-shadow: var(--m3-elev-2);
  font-family: var(--m3-font-sans);
}
._avatarCam_1ausl_139 {
  position: absolute;
  bottom: 0;
  right: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--m3-primary);
  color: #fff;
  display: grid;
  place-items: center;
  border: 3px solid var(--m3-surface);
}

/* splash logo + features (Stage 1) */
._splashWrap_1ausl_154 {
  height: 100%;
  min-height: calc(100dvh - env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 60px 28px 28px;
  text-align: center;
  background:
    radial-gradient(120% 60% at 50% 10%, rgba(232, 96, 60, 0.18), transparent 60%),
    radial-gradient(120% 70% at 50% 100%, rgba(232, 160, 120, 0.12), transparent 60%);
  position: relative;
}
._splashLogo_1ausl_168 {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: var(--m3-primary);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  box-shadow: var(--m3-elev-3);
  margin-top: 30px;
}
._splashTitle_1ausl_182 {
  margin-top: 32px;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-family: var(--m3-font-serif);
  font-variation-settings: 'opsz' 144;
  color: var(--m3-on-surface);
}
._splashLead_1ausl_192 {
  margin-top: 14px;
  font-size: 15px;
  color: var(--m3-on-surface-variant);
  line-height: 1.55;
  max-width: 300px;
}
._splashFeatures_1ausl_199 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
  width: 100%;
}
._splashFeatures_1ausl_199 ._row_1ausl_206 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--m3-surface-c);
  border-radius: var(--m3-shape-md);
  text-align: left;
}
._splashFeatures_1ausl_199 ._ic_1ausl_215 {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
._splashFeatures_1ausl_199 ._tx_1ausl_225 {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--m3-on-surface);
  line-height: 1.35;
}
._splashFeatures_1ausl_199 ._tx_1ausl_225 small {
  display: block;
  font-weight: 400;
  color: var(--m3-on-surface-variant);
  font-size: 12px;
  margin-top: 1px;
}
._splashFooter_1ausl_238 {
  font-family: var(--m3-font-mono);
  font-size: 10.5px;
  color: var(--m3-on-surface-variant);
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
  letter-spacing: 0.04em;
}
._splashFooter_1ausl_238 ._dot_1ausl_249 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m3-signal);
  box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18);
}

/* OTP-screen helper meta */
._otpMeta_1ausl_258 {
  text-align: center;
  padding: 8px 24px;
  font-family: var(--m3-font-mono);
  font-size: 12px;
  color: var(--m3-on-surface-variant);
  letter-spacing: 0.02em;
}
._otpMeta_1ausl_258 b { color: var(--m3-primary); font-weight: 600; }

/* Permissions bullets list */
._permList_1ausl_269 {
  padding: 18px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
._permRow_1ausl_275 {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--m3-on-surface);
}
._permRow_1ausl_275 ._ic_1ausl_215 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--m3-primary-container);
  color: var(--m3-on-primary-container);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
._permRow_1ausl_275 small {
  color: var(--m3-on-surface-variant);
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
}

/* Generic info card (used multiple places) */
._infoCard_1ausl_301 {
  margin: 14px 20px 0;
  padding: 14px 16px;
  background: var(--m3-surface-c);
  border-radius: var(--m3-shape-md);
  font-size: 12.5px;
  color: var(--m3-on-surface-variant);
  line-height: 1.5;
}
._infoCard_1ausl_301 b { color: var(--m3-on-surface); font-weight: 600; }

/* Password strength meter (Stage 12) */
._strengthMeter_1ausl_313 {
  padding: 8px 24px 0;
}
._strengthBar_1ausl_316 {
  display: flex;
  gap: 4px;
  height: 4px;
}
._strengthSeg_1ausl_321 {
  flex: 1;
  border-radius: var(--m3-shape-pill);
  background: var(--m3-surface-c-high);
  transition: background 0.15s;
}
._strengthSeg_1ausl_321._on_1ausl_327 { background: var(--m3-signal); }
._strengthSeg_1ausl_321._warn_1ausl_103 { background: var(--m3-warn); }
._strengthSeg_1ausl_321._err_1ausl_329 { background: var(--m3-error); }
._strengthMeta_1ausl_330 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11.5px;
}
._strengthLabel_1ausl_337 {
  font-family: var(--m3-font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._checkRow_1ausl_344 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--m3-on-surface-variant);
  padding: 4px 0;
}
._checkRow_1ausl_344._on_1ausl_327 { color: var(--m3-signal); }
._checkRow_1ausl_344 svg { flex-shrink: 0; }
/* Atoms shared across the 6 settings pages. Kept in one file so we don't
 * fragment the M3 patterns across slices. */

._profileCard_157p3_4 {
  margin: 6px 16px 18px;
  padding: 18px;
  border-radius: var(--m3-shape-md);
  background: var(--m3-secondary-container);
  display: flex;
  align-items: center;
  gap: 14px;
}
._profileCardName_157p3_13 {
  font-size: 17px;
  font-weight: 600;
  color: var(--m3-on-secondary-container);
  letter-spacing: -0.01em;
}
._profileCardHandle_157p3_19 {
  font-family: var(--m3-font-mono);
  font-size: 11.5px;
  color: var(--m3-on-secondary-container);
  opacity: 0.75;
  margin-top: 2px;
}

._sectionLabel_157p3_27 {
  font-family: var(--m3-font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--m3-on-surface-variant);
  padding: 14px 24px 6px;
}

._warnBadge_157p3_37 {
  font-family: var(--m3-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--m3-warn);
  background: #FFF3E0;
  padding: 2px 7px;
  border-radius: var(--m3-shape-pill);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._activeBadge_157p3_49 {
  font-family: var(--m3-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--m3-signal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

._toggleRow_157p3_58 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--m3-outline-variant);
  font-size: 14px;
  color: var(--m3-on-surface);
}
._toggleRow_157p3_58:first-child { border-top: 0; }
._toggleRow_157p3_58 ._desc_157p3_69 {
  font-size: 12px;
  color: var(--m3-on-surface-variant);
  margin-top: 2px;
  font-weight: 400;
}

._versionFoot_157p3_76 {
  text-align: center;
  font-family: var(--m3-font-mono);
  font-size: 10.5px;
  color: var(--m3-on-surface-variant);
  padding: 14px 24px 0;
  letter-spacing: 0.02em;
}

/* C-04 group identity row */
._groupIdent_157p3_86 {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px 6px;
}
._groupAvatar_157p3_92 {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--m3-surface-c-high);
  display: grid;
  place-items: center;
  color: var(--m3-on-surface-variant);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
}
._groupAvatarBadge_157p3_105 {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--m3-primary);
  color: #fff;
  display: grid;
  place-items: center;
  border: 3px solid var(--m3-surface);
}
._groupNameInput_157p3_118 {
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-family: var(--m3-font-sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--m3-on-surface);
  letter-spacing: -0.015em;
  width: 100%;
  padding: 6px 0 0;
  caret-color: var(--m3-primary);
}
._groupNameInput_157p3_118::placeholder { color: var(--m3-on-surface-variant); }
._groupE2EPill_157p3_133 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 9px;
  background: var(--m3-tertiary-container);
  color: var(--m3-on-tertiary-container);
  border-radius: var(--m3-shape-pill);
  font-size: 11px;
  font-weight: 600;
}

._memberChips_157p3_146 {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0;
}
._memberChip_157p3_146 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--m3-secondary-container);
  color: var(--m3-on-secondary-container);
  border-radius: var(--m3-shape-pill);
  font-family: var(--m3-font-sans);
  font-size: 13px;
  font-weight: 500;
  border: 0;
  cursor: pointer;
}
._memberChipAvatar_157p3_166 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(140deg, #FFB07A, #D55D33);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 600;
}

/* C-05 QR card */
._qrCard_157p3_179 {
  margin: 0 20px;
  padding: 22px;
  background: var(--m3-surface-c-lowest);
  border-radius: var(--m3-shape-lg);
  box-shadow: var(--m3-elev-1);
}
._qrCardHead_157p3_186 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
._qrCardName_157p3_192 {
  font-size: 14px;
  font-weight: 600;
}
._qrCardHandle_157p3_196 {
  font-family: var(--m3-font-mono);
  font-size: 10.5px;
  color: var(--m3-on-surface-variant);
}
._qrCardSnippet_157p3_201 {
  font-family: var(--m3-font-mono);
  font-size: 11px;
  color: var(--m3-on-surface-variant);
  text-align: center;
  line-height: 1.7;
  letter-spacing: 0.04em;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--m3-surface-c);
  border-radius: var(--m3-shape-sm);
}
._qrCardSnippet_157p3_201 b { color: var(--m3-primary); font-weight: 700; }

._scanFrame_157p3_215 {
  margin: 6px 20px;
  height: 280px;
  border-radius: var(--m3-shape-lg);
  background: linear-gradient(135deg, #1A1C18, #2A2D26);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
._scanCorners_157p3_225 {
  position: absolute;
  inset: 28px;
  pointer-events: none;
}
._scanCorners_157p3_225::before,
._scanCorners_157p3_225::after {
  content: '';
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2.5px solid var(--m3-primary-container);
  border-radius: 4px;
}
._scanCorners_157p3_225::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
._scanCorners_157p3_225::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}
._scanLine_157p3_251 {
  position: absolute;
  left: 28px;
  right: 28px;
  height: 2px;
  background: var(--m3-primary-container);
  box-shadow: 0 0 12px rgba(194, 235, 196, 0.7);
  animation: _scanSweep_157p3_1 2.4s ease-in-out infinite;
}
@keyframes _scanSweep_157p3_1 {
  0%, 100% { top: 28px; }
  50%      { top: calc(100% - 30px); }
}
._scanHint_157p3_264 {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--m3-primary-fixed-dim);
  font-family: var(--m3-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* member contact row */
._contactRow_157p3_277 {
  display: grid;
  grid-template-columns: 44px 1fr 24px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: var(--m3-shape-md);
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  width: 100%;
  transition: background 0.12s;
}
._contactRow_157p3_277:hover { background: var(--m3-surface-c-high); }
._contactRow_157p3_277._selected_157p3_294 { background: var(--m3-secondary-container); color: var(--m3-on-secondary-container); }

._contactRow_157p3_277 ._ttl_157p3_296 {
  font-size: 14.5px;
  font-weight: 600;
}
._contactRow_157p3_277 ._sub_157p3_300 {
  font-family: var(--m3-font-mono);
  font-size: 11px;
  color: var(--m3-on-surface-variant);
  margin-top: 1px;
}
._contactRow_157p3_277._selected_157p3_294 ._sub_157p3_300 { color: var(--m3-on-secondary-container); opacity: 0.7; }

._checkCircle_157p3_308 {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--m3-outline-variant);
}
._checkCircleOn_157p3_314 {
  background: var(--m3-primary);
  color: #fff;
  display: grid;
  place-items: center;
  border-color: var(--m3-primary);
}
/* ============================================================
   KIN — Design Tokens
   Version: 1.0.0
   Generated: 2026-04-30
   Usage: import this file before any component styles
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — Base palette
  ---------------------------------------------------------- */
  --kin-night:  #180E09;
  --kin-coral:  #E8603C;
  --kin-peach:  #F4956F;
  --kin-blush:  #FDD5C5;
  --kin-cream:  #FDF7F5;

  /* ----------------------------------------------------------
     COLOR — Semantic aliases
  ---------------------------------------------------------- */

  /* Brand */
  --kin-color-primary:          var(--kin-coral);
  --kin-color-primary-hover:    #D4532F;
  --kin-color-primary-active:   #BF4726;
  --kin-color-primary-disabled: var(--kin-blush);
  --kin-color-primary-subtle:   #FFF0EB;

  /* Backgrounds */
  --kin-color-bg:               var(--kin-cream);
  --kin-color-surface:          #FFFFFF;
  --kin-color-surface-raised:   #FFFFFF;
  --kin-color-surface-overlay:  rgba(24, 14, 9, 0.48);

  /* Text */
  --kin-color-text-primary:     var(--kin-night);
  --kin-color-text-secondary:   #7A5040;
  --kin-color-text-tertiary:    #B07A65;
  --kin-color-text-on-primary:  var(--kin-cream);
  --kin-color-text-on-blush:    #6B3020;
  --kin-color-text-link:        var(--kin-coral);

  /* Borders */
  --kin-color-border:           rgba(24, 14, 9, 0.12);
  --kin-color-border-strong:    rgba(24, 14, 9, 0.24);
  --kin-color-border-focus:     var(--kin-coral);

  /* Feedback */
  --kin-color-success:          #2A7D4F;
  --kin-color-success-subtle:   #E6F5EE;
  --kin-color-error:            #C0392B;
  --kin-color-error-subtle:     #FDECEA;
  --kin-color-warning:          #B7600A;
  --kin-color-warning-subtle:   #FEF3E2;

  /* Chat bubbles */
  --kin-color-bubble-received-bg:   var(--kin-blush);
  --kin-color-bubble-received-text: var(--kin-night);
  --kin-color-bubble-sent-bg:       var(--kin-coral);
  --kin-color-bubble-sent-text:     var(--kin-cream);

  /* Status */
  --kin-color-status-online:    #2A7D4F;
  --kin-color-status-offline:   #B07A65;
  --kin-color-status-p2p:       var(--kin-coral);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */

  /* Families */
  --kin-font-display: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Helvetica, Arial, sans-serif;
  --kin-font-body:    var(--kin-font-display);
  --kin-font-mono:    'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* Sizes */
  --kin-text-xs:   11px;
  --kin-text-sm:   13px;
  --kin-text-md:   15px;
  --kin-text-lg:   17px;
  --kin-text-xl:   22px;
  --kin-text-2xl:  26px;
  --kin-text-3xl:  32px;

  /* Weights */
  --kin-weight-regular: 400;
  --kin-weight-medium:  500;

  /* Line heights */
  --kin-leading-tight:   1.2;
  --kin-leading-snug:    1.4;
  --kin-leading-normal:  1.5;
  --kin-leading-relaxed: 1.7;

  /* Letter spacing */
  --kin-tracking-tight:  -0.3px;
  --kin-tracking-normal:  0px;
  --kin-tracking-wide:    0.3px;
  --kin-tracking-wider:   1.5px;  /* wordmark */

  /* ----------------------------------------------------------
     SPACING — 4px base grid
  ---------------------------------------------------------- */
  --kin-space-1:  4px;
  --kin-space-2:  8px;
  --kin-space-3:  12px;
  --kin-space-4:  16px;
  --kin-space-5:  20px;
  --kin-space-6:  24px;
  --kin-space-8:  32px;
  --kin-space-10: 40px;
  --kin-space-12: 48px;
  --kin-space-16: 64px;

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --kin-radius-xs:     4px;
  --kin-radius-sm:     6px;
  --kin-radius-md:     8px;
  --kin-radius-lg:     12px;
  --kin-radius-xl:     16px;
  --kin-radius-2xl:    20px;
  --kin-radius-pill:   50px;
  --kin-radius-circle: 50%;
  --kin-radius-icon-lg: 16px;  /* 64px app icon */
  --kin-radius-icon-md: 11px;  /* 44px app icon */
  --kin-radius-icon-sm:  7px;  /* 30px app icon */

  /* Bubble radius (sent / received differ on one corner) */
  --kin-radius-bubble: 14px;
  --kin-radius-bubble-tail: 3px;

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --kin-shadow-sm: 0 1px 3px rgba(24, 14, 9, 0.08);
  --kin-shadow-md: 0 2px 8px rgba(24, 14, 9, 0.12);
  --kin-shadow-lg: 0 8px 24px rgba(24, 14, 9, 0.14);

  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */
  --kin-z-base:    0;
  --kin-z-raised:  10;
  --kin-z-dropdown: 100;
  --kin-z-overlay: 200;
  --kin-z-modal:   300;
  --kin-z-toast:   400;

  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --kin-duration-instant: 80ms;
  --kin-duration-fast:    120ms;
  --kin-duration-normal:  200ms;
  --kin-duration-slow:    320ms;
  --kin-duration-enter:   240ms;
  --kin-duration-exit:    160ms;

  --kin-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --kin-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --kin-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --kin-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ----------------------------------------------------------
     COMPONENT — Button
  ---------------------------------------------------------- */
  --kin-btn-height-sm:  32px;
  --kin-btn-height-md:  40px;
  --kin-btn-height-lg:  48px;
  --kin-btn-padding-x-sm: var(--kin-space-3);
  --kin-btn-padding-x-md: var(--kin-space-5);
  --kin-btn-padding-x-lg: var(--kin-space-6);
  --kin-btn-font-sm:  var(--kin-text-sm);
  --kin-btn-font-md:  var(--kin-text-md);
  --kin-btn-font-lg:  var(--kin-text-lg);
  --kin-btn-radius:   var(--kin-radius-pill);

  /* ----------------------------------------------------------
     COMPONENT — Avatar
  ---------------------------------------------------------- */
  --kin-avatar-size-sm: 28px;
  --kin-avatar-size-md: 38px;
  --kin-avatar-size-lg: 52px;
  --kin-avatar-size-xl: 72px;
  --kin-avatar-font-sm: var(--kin-text-xs);
  --kin-avatar-font-md: var(--kin-text-sm);
  --kin-avatar-font-lg: var(--kin-text-md);
  --kin-avatar-font-xl: var(--kin-text-xl);

  /* ----------------------------------------------------------
     COMPONENT — Input
  ---------------------------------------------------------- */
  --kin-input-height:     44px;
  --kin-input-padding-x:  var(--kin-space-4);
  --kin-input-radius:     var(--kin-radius-pill);
  --kin-input-bg:         var(--kin-color-surface);
  --kin-input-border:     var(--kin-color-border);
  --kin-input-font:       var(--kin-text-md);

  /* ----------------------------------------------------------
     COMPONENT — Chat header
  ---------------------------------------------------------- */
  --kin-header-height:    60px;
  --kin-header-bg:        var(--kin-color-surface);
  --kin-header-padding-x: var(--kin-space-4);

  /* ----------------------------------------------------------
     COMPONENT — Message bubble
  ---------------------------------------------------------- */
  --kin-bubble-max-width:    72%;
  --kin-bubble-padding-x:    var(--kin-space-4);
  --kin-bubble-padding-y:    var(--kin-space-3);
  --kin-bubble-font:         var(--kin-text-md);
  --kin-bubble-meta-font:    var(--kin-text-xs);
  --kin-bubble-gap:          var(--kin-space-1);    /* between bubbles same sender */
  --kin-bubble-group-gap:    var(--kin-space-4);    /* between sender groups */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --kin-chat-max-width:   480px;
  --kin-sidebar-width:    320px;
  --kin-bottom-bar-height: 72px;
  --kin-safe-area-bottom: env(safe-area-inset-bottom, 0px);

}

/* ----------------------------------------------------------
   DARK MODE overrides
---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --kin-color-bg:              #0F0905;
    --kin-color-surface:         #1C1007;
    --kin-color-surface-raised:  #261508;
    --kin-color-text-primary:    #FDF7F5;
    --kin-color-text-secondary:  #C49580;
    --kin-color-text-tertiary:   #8A5C4A;
    --kin-color-border:          rgba(253, 247, 245, 0.10);
    --kin-color-border-strong:   rgba(253, 247, 245, 0.20);
    --kin-color-primary-subtle:  #2A160C;
    --kin-color-bubble-received-bg:   #2A160C;
    --kin-color-bubble-received-text: #FDD5C5;
  }
}

:root[data-theme="dark"] {
  --kin-color-bg:              #0F0905;
  --kin-color-surface:         #1C1007;
  --kin-color-surface-raised:  #261508;
  --kin-color-text-primary:    #FDF7F5;
  --kin-color-text-secondary:  #C49580;
  --kin-color-text-tertiary:   #8A5C4A;
  --kin-color-border:          rgba(253, 247, 245, 0.10);
  --kin-color-border-strong:   rgba(253, 247, 245, 0.20);
  --kin-color-primary-subtle:  #2A160C;
  --kin-color-bubble-received-bg:   #2A160C;
  --kin-color-bubble-received-text: #FDD5C5;
}

/* ----------------------------------------------------------
   REDUCED MOTION
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --kin-duration-instant: 0ms;
    --kin-duration-fast:    0ms;
    --kin-duration-normal:  0ms;
    --kin-duration-slow:    0ms;
    --kin-duration-enter:   0ms;
    --kin-duration-exit:    0ms;
  }
}
/*
 * Peer design tokens mapped to M3 CSS custom properties.
 * Source of truth: docs/design/journey/kin-tokens.css
 * Light by default, dark via prefers-color-scheme.
 */

:root {
  /* ── primary ── */
  --m3-primary:                 #E8603C;
  --m3-on-primary:              #FDF7F5;
  --m3-primary-container:       #FFF0EB;
  --m3-on-primary-container:    #6B3020;
  --m3-primary-fixed-dim:       #F4956F;

  /* ── secondary ── */
  --m3-secondary:               #7A5040;
  --m3-secondary-container:     #FDD5C5;
  --m3-on-secondary-container:  #6B3020;

  /* ── tertiary ── */
  --m3-tertiary:                #B07A65;
  --m3-tertiary-container:      #FDD5C5;
  --m3-on-tertiary-container:   #6B3020;

  /* ── error ── */
  --m3-error:                   #C0392B;
  --m3-error-container:         #FDECEA;
  --m3-on-error-container:      #7A0000;

  /* ── surface tonal stack (light) ── */
  --m3-surface:                 #FDF7F5;
  --m3-surface-c-lowest:        #FFFFFF;
  --m3-surface-c-low:           #FFFFFF;
  --m3-surface-c:               rgba(24, 14, 9, 0.06);
  --m3-surface-c-high:          rgba(24, 14, 9, 0.09);
  --m3-surface-c-highest:       rgba(24, 14, 9, 0.12);

  --m3-on-surface:              #180E09;
  --m3-on-surface-variant:      #7A5040;
  --m3-outline:                 #6B4030;
  --m3-outline-variant:         rgba(24, 14, 9, 0.18);

  /* ── status ── */
  --m3-signal:                  #2A7D4F;
  --m3-warn:                    #B7600A;

  /* ── elevation ── */
  --m3-elev-1: 0 1px 3px rgba(24, 14, 9, 0.08);
  --m3-elev-2: 0 2px 8px rgba(24, 14, 9, 0.12);
  --m3-elev-3: 0 8px 24px rgba(24, 14, 9, 0.14);
  --m3-elev-fab: 0 10px 24px -10px rgba(232, 96, 60, 0.35),
                 0 3px 6px rgba(24, 14, 9, 0.10);

  /* ── shape ── */
  --m3-shape-xs:   6px;
  --m3-shape-sm:   8px;
  --m3-shape-md:  12px;
  --m3-shape-lg:  16px;
  --m3-shape-xl:  20px;
  --m3-shape-2xl: 32px;
  --m3-shape-pill: 9999px;

  /* ── typography ── */
  --m3-font-sans:  Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Helvetica, Arial, sans-serif;
  --m3-font-serif: var(--m3-font-sans);
  --m3-font-mono:  'SF Mono', 'Fira Code', Consolas, monospace;
}


/* ── dark theme ── */
:root[data-theme="dark"] {
  --m3-surface:           #0F0905;
  --m3-surface-c-lowest:  #1C1007;
  --m3-surface-c-low:     #261508;
  --m3-surface-c:         rgba(253, 247, 245, 0.07);
  --m3-surface-c-high:    rgba(253, 247, 245, 0.11);
  --m3-surface-c-highest: rgba(253, 247, 245, 0.15);

  --m3-on-surface:         #FDF7F5;
  --m3-on-surface-variant: #C49580;
  --m3-outline:            rgba(253, 247, 245, 0.20);
  --m3-outline-variant:    rgba(253, 247, 245, 0.10);

  --m3-primary-container:  #2A160C;

  --m3-elev-1: 0 1px 3px rgba(0, 0, 0, 0.30);
  --m3-elev-2: 0 2px 8px rgba(0, 0, 0, 0.30);
  --m3-elev-3: 0 8px 24px rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --m3-surface:           #0F0905;
    --m3-surface-c-lowest:  #1C1007;
    --m3-surface-c-low:     #261508;
    --m3-surface-c:         rgba(253, 247, 245, 0.07);
    --m3-surface-c-high:    rgba(253, 247, 245, 0.11);
    --m3-surface-c-highest: rgba(253, 247, 245, 0.15);

    --m3-on-surface:         #FDF7F5;
    --m3-on-surface-variant: #C49580;
    --m3-outline:            rgba(253, 247, 245, 0.20);
    --m3-outline-variant:    rgba(253, 247, 245, 0.10);

    --m3-primary-container:  #2A160C;

    --m3-secondary-container: #2A160C;
    --m3-on-secondary-container: #FDD5C5;

    --m3-elev-1: 0 1px 3px rgba(0, 0, 0, 0.30);
    --m3-elev-2: 0 2px 8px rgba(0, 0, 0, 0.30);
    --m3-elev-3: 0 8px 24px rgba(0, 0, 0, 0.40);
  }
}

/* Peer theme marker */
[data-kin] {
  font-family: var(--m3-font-sans);
  color: var(--m3-on-surface);
  background: var(--m3-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

html {
  height: 100%;
  overflow: hidden;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
@font-face {
  font-family: NotoColorEmojiLimited;
  unicode-range: U+1F1E6-1F1FF;
  src: url(https://raw.githack.com/googlefonts/noto-emoji/main/fonts/NotoColorEmoji.ttf);
}
body {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin: 0;
  height: 100dvh;
  overflow: hidden;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
body > div {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
button,
input,
textarea,
select {
  font: inherit;
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}