.home-choice-dialog {
  width: min(560px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  margin: auto;
  padding: 0;
  overflow: hidden;

  color: #493f36;

  background:
    radial-gradient(
      circle at top right,
      rgba(213, 187, 225, 0.26),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(194, 214, 188, 0.28),
      transparent 38%
    ),
    linear-gradient(
      155deg,
      #fffaf2 0%,
      #f5ede3 100%
    );

  border:
    1px solid
    rgba(105, 85, 69, 0.2);

  border-radius: 28px;

  box-shadow:
    0 28px 70px
      rgba(55, 43, 34, 0.24),
    0 8px 22px
      rgba(55, 43, 34, 0.1),
    inset 0 1px 0
      rgba(255, 255, 255, 0.82);
}

.home-choice-dialog::backdrop {
  background:
    rgba(44, 36, 31, 0.46);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}

.home-choice-dialog[open] {
  animation:
    home-choice-appear
    210ms ease-out;
}

.home-choice-dialog > h2 {
  margin:
    0;
  padding:
    25px 26px 4px;

  color:
    #493f36;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(1.4rem, 3vw, 1.8rem);

  font-weight:
    600;

  line-height:
    1.2;
}

.home-choice-dialog > h2::before {
  content:
    "✦";

  display:
    inline-grid;
  place-items:
    center;

  width:
    34px;
  height:
    34px;

  margin-right:
    10px;

  color:
    #775c82;

  background:
    rgba(216, 196, 226, 0.48);

  border:
    1px solid
    rgba(119, 92, 130, 0.15);

  border-radius:
    50%;

  font-size:
    15px;

  vertical-align:
    -2px;
}

.home-choice-dialog > p {
  margin:
    0;
  padding:
    0 26px 18px;

  color:
    #87786d;

  font-size:
    0.95rem;

  line-height:
    1.55;
}

.home-choice-list {
  display:
    grid;
  gap:
    10px;

  max-height:
    50vh;

  padding:
    4px 20px 8px;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;
}

.home-choice-button {
  display:
    grid;

  grid-template-columns:
    26px 42px minmax(0, 1fr);

  align-items:
    center;

  gap:
    12px;

  width:
    100%;

  min-height:
    58px;

  padding:
    10px 13px;

  color:
    #4d4239;

  text-align:
    left;

  background:
    rgba(255, 255, 255, 0.6);

  border:
    1px solid
    rgba(105, 85, 69, 0.13);

  border-radius:
    17px;

  font:
    inherit;

  cursor:
    pointer;

  transition:
    transform 150ms ease,
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.home-choice-button:hover,
.home-choice-button:focus-visible {
  background:
    rgba(255, 252, 247, 0.96);

  border-color:
    rgba(119, 92, 130, 0.2);

  box-shadow:
    0 7px 18px
      rgba(69, 54, 43, 0.09);

  transform:
    translateY(-1px);
}

.home-choice-button.is-selected {
  background:
    linear-gradient(
      135deg,
      rgba(224, 207, 231, 0.72),
      rgba(220, 232, 214, 0.72)
    );

  border-color:
    rgba(109, 86, 121, 0.2);

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.78),
    0 5px 14px
      rgba(75, 58, 86, 0.08);
}

.home-choice-check {
  display:
    grid;
  place-items:
    center;

  width:
    24px;
  height:
    24px;

  color:
    #5f4968;

  background:
    rgba(255, 255, 255, 0.74);

  border:
    1px solid
    rgba(105, 85, 69, 0.16);

  border-radius:
    50%;

  font-size:
    0.8rem;

  font-weight:
    800;
}

.home-choice-button.is-selected
.home-choice-check {
  background:
    #f7f0fa;

  border-color:
    rgba(105, 78, 117, 0.24);
}

.home-choice-emoji {
  display:
    grid;
  place-items:
    center;

  width:
    42px;
  height:
    42px;

  background:
    rgba(236, 228, 218, 0.66);

  border-radius:
    13px;

  font-size:
    20px;
}

.home-choice-button
span:last-child {
  font-weight:
    700;

  line-height:
    1.35;
}

.home-choice-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    10px;

  padding:
    16px 20px 20px;

  background:
    rgba(255, 250, 242, 0.64);

  border-top:
    1px solid
    rgba(105, 85, 69, 0.11);
}

.home-choice-cancel,
.home-choice-save {
  min-height:
    42px;

  padding:
    9px 16px;

  border-radius:
    999px;

  font:
    inherit;

  font-size:
    0.88rem;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.home-choice-cancel {
  color:
    #67594e;

  background:
    rgba(255, 255, 255, 0.66);

  border:
    1px solid
    rgba(105, 85, 69, 0.15);
}

.home-choice-save {
  color:
    #fffaf4;

  background:
    linear-gradient(
      135deg,
      #735d7d,
      #66785f
    );

  border:
    1px solid
    rgba(83, 67, 91, 0.18);

  box-shadow:
    0 8px 18px
      rgba(76, 60, 84, 0.18);
}

.home-choice-cancel:hover,
.home-choice-cancel:focus-visible,
.home-choice-save:hover,
.home-choice-save:focus-visible {
  transform:
    translateY(-1px);

  box-shadow:
    0 8px 18px
      rgba(69, 54, 43, 0.12);
}

.home-choice-cancel:hover,
.home-choice-cancel:focus-visible {
  background:
    rgba(255, 255, 255, 0.92);
}

.home-choice-save:hover,
.home-choice-save:focus-visible {
  background:
    linear-gradient(
      135deg,
      #7c6686,
      #6f8267
    );
}

@keyframes home-choice-appear {
  from {
    opacity:
      0;

    transform:
      translateY(12px)
      scale(0.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}

@media (
  max-width: 640px
) {
  .home-choice-dialog {
    width:
      calc(100vw - 18px);

    max-height:
      calc(100dvh - 18px);

    border-radius:
      24px;
  }

  .home-choice-dialog > h2 {
    padding:
      20px 18px 4px;
  }

  .home-choice-dialog > p {
    padding:
      0 18px 14px;
  }

  .home-choice-list {
    max-height:
      56vh;

    padding:
      4px 14px 6px;
  }

  .home-choice-button {
    grid-template-columns:
      24px 38px minmax(0, 1fr);

    min-height:
      54px;

    padding:
      9px 11px;
  }

  .home-choice-emoji {
    width:
      38px;
    height:
      38px;
  }

  .home-choice-actions {
    flex-wrap:
      wrap;

    padding:
      14px;
  }

  .home-choice-cancel,
  .home-choice-save {
    flex:
      1 1 auto;
  }
}

@media (
  prefers-reduced-motion:
  reduce
) {
  .home-choice-dialog[open] {
    animation:
      none;
  }

  .home-choice-button,
  .home-choice-cancel,
  .home-choice-save {
    transition:
      none;
  }
}


/* =========================================
   LIQUID GLASS POPUPS — HOME CHOICE DIALOGS
========================================= */
.home-choice-dialog {
  color: #30262d;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 249, 240, 0.92), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(176, 142, 151, 0.18), transparent 32%),
    radial-gradient(circle at 80% 84%, rgba(118, 134, 104, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(255, 248, 241, 0.92), rgba(218, 197, 200, 0.56));
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 22px 50px rgba(26, 14, 18, 0.34),
    0 8px 20px rgba(26, 14, 18, 0.16);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
}

.home-choice-dialog::backdrop {
  background: rgba(25, 15, 17, 0.46);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-choice-dialog > h2 {
  color: #2f202b;
  text-shadow: 0 1px 0 rgba(255, 250, 243, 0.54);
}

.home-choice-dialog > p {
  color: #65575f;
}

.home-choice-button {
  color: #31272e;
  background: linear-gradient(145deg, rgba(255, 252, 247, 0.78), rgba(235, 223, 214, 0.46));
  border: 1px solid rgba(122, 96, 108, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.56);
}

.home-choice-button:hover,
.home-choice-button:focus-visible {
  background: linear-gradient(145deg, rgba(255, 252, 247, 0.94), rgba(240, 230, 222, 0.62));
  border-color: rgba(114, 86, 102, 0.22);
}

.home-choice-button.is-selected {
  background: linear-gradient(135deg, rgba(231, 217, 239, 0.72), rgba(225, 235, 221, 0.66));
  border-color: rgba(106, 81, 95, 0.22);
}

.home-choice-check {
  color: #5d485e;
  background: rgba(255, 255, 255, 0.72);
}

.home-choice-button span:last-child {
  color: #342a31;
}

.home-choice-actions {
  background: rgba(255, 247, 239, 0.54);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.home-choice-cancel {
  color: #4a3b44;
  background: rgba(255, 255, 255, 0.52);
}