/* Gachi stylesheet: create-steps.css. Shared step components for the create flow (steps 1-3, 6, official cards, custom goals). */
/* Extracted verbatim from index.html. Load order is significant; see styles/README.md. */

/* ------------------------------ */
/* Shared Step Components */
/* ------------------------------ */
.question-form,
.goal-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  margin-top: 16px;
}

.question-form-spread {
  justify-content: space-between;
}

.question-form.step-6-form {
  margin-top: 8px;
}

[data-screen="step-3"].needs-create-flow-bottom-reserve .step-3-form::after,
[data-screen="step-5"].needs-create-flow-bottom-reserve > .question-form::after {
  content: "";
  display: block;
  flex: 0 0 var(--create-flow-bottom-reserve, 0px);
}

.step-6-scroll-area > .step-6-heading {
  margin-top: 0;
  margin-bottom: 0;
}

.summary-heading-copy {
  margin: 6px 0 0;
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.35;
  text-align: center;
}

#official-summary-heading .official-heading-title,
.detail-screen.is-official-detail #detail-title .official-heading-title {
  margin-left: 0.34em;
}

[data-screen="official-summary"] .question-form.step-6-form {
  margin-top: clamp(24px, 4svh, 32px);
}

.step-6-heading.create-top-family .summary-heading-copy {
  margin: 0;
  color: var(--text-main);
  font-size: clamp(1.02rem, 3.8vw, 1.22rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.25;
}

[data-screen="official-summary"] .summary-heading-copy {
  font-size: clamp(0.92rem, 3.4vw, 1.08rem);
}

.admin-official-summary-fields {
  width: min(100%, 520px);
  margin: 16px auto 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.admin-official-summary-fields > *,
.admin-official-summary-fields .message-input-wrap,
.admin-official-summary-fields .admin-official-image-field {
  min-width: 0;
  max-width: 100%;
}

.admin-official-summary-fields input[type="file"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.86rem;
}

.admin-official-summary-fields[hidden] {
  display: none;
}

.admin-official-bottom-fields {
  width: min(100%, 520px);
  margin: 16px auto 0;
  display: grid;
  gap: 10px;
  text-align: left;
}

.admin-official-bottom-fields[hidden] {
  display: none;
}

.admin-official-summary-fields .participant-input {
  padding-right: 14px;
}

.admin-official-summary-fields textarea {
  min-height: 64px;
  max-height: 64px;
}

.admin-official-image-field {
  display: grid;
  gap: 8px;
}

.admin-official-image-preview {
  display: block;
  width: min(180px, 100%);
  max-height: 120px;
  margin: 2px auto 0;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.admin-official-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.admin-official-qr-field {
  display: grid;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(163, 227, 211, 0.12);
}

.admin-official-qr-preview-wrap {
  display: grid;
  place-items: center;
  min-height: 76px;
}

.admin-official-qr-preview-wrap img {
  display: block;
  width: min(220px, 70vw);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
}

.admin-official-link-only-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 10px 12px;
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 600;
}

.admin-official-link-only-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: #6fe0c0;
}

.admin-official-reminder-field {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(163, 227, 211, 0.18);
  border-radius: 14px;
  background: rgba(8, 28, 31, 0.42);
}

.admin-official-reminder-field .admin-official-link-only-row {
  padding: 0;
}

.admin-official-reminder-settings {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(163, 227, 211, 0.12);
}

.admin-official-reminder-settings[hidden] {
  display: none;
}

.admin-official-reminder-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 600;
}

.admin-official-reminder-time input[type="time"] {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid rgba(163, 227, 211, 0.24);
  border-radius: 10px;
  color: var(--text-main);
  background: rgba(4, 20, 22, 0.72);
  font: inherit;
  color-scheme: dark;
}

.step-1-form {
  min-height: calc(100dvh - 216px - var(--safe-top) - var(--safe-bottom) - var(--native-bottom-reserve));
  padding-bottom: calc(92px + var(--safe-bottom) + var(--native-bottom-reserve));
  justify-content: flex-start;
  gap: clamp(18px, 2.3svh, 26px);
  margin-top: clamp(22px, 2.8svh, 32px);
}

.step-2-form {
  margin-top: clamp(22px, 2.8svh, 32px);
}

.step-1-demo-block {
  width: min(100%, 306px);
  transform: scale(0.8);
  transform-origin: top center;
  margin: clamp(2px, 0.8svh, 10px) auto -32px;
  position: relative;
}

.step-1-demo {
  --step-1-demo-cycle: 5.8s;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 138px;
  padding: 18px 48px 33px;
  border-radius: 28% 31% 29% 33% / 22% 26% 30% 25%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.step-1-demo::before {
  content: "";
  position: absolute;
  inset: -10px -14px;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(111, 224, 192, 0.16) 0%, rgba(58, 130, 132, 0.11) 48%, rgba(43, 101, 111, 0.055) 68%, transparent 86%),
    radial-gradient(ellipse at 50% 61%, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 55%, transparent 82%);
  filter: blur(7px);
  pointer-events: none;
}

.step-1-demo-tasks {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.step-1-rules + .step-1-demo-block {
  margin-top: clamp(-4px, -0.4svh, 0px);
}

.step-1-demo-task {
  min-height: 62px;
  aspect-ratio: 1 / 1;
  padding: 7px 6px 6px;
  border-radius: 13px;
  gap: 4px;
  cursor: default;
}

.step-1-demo-task:hover,
.step-1-demo-task:focus-visible {
  transform: none;
  border-color: rgba(163, 227, 211, 0.14);
  box-shadow: var(--button-shadow);
}

.step-1-demo-task-active {
  animation: step1DemoPress var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task .task-card-top {
  flex: 1 1 auto;
  min-height: 0;
}

.step-1-demo-task .task-emoji {
  font-size: 1.4rem;
}

.step-1-demo-task .task-title {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-1-demo-task .task-result-badge {
  top: 5px;
  right: 6px;
  opacity: 0;
  transform: scale(0.8);
}

.step-1-demo-task-active .task-result-badge {
  animation: step1DemoBadgeFirst var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task-active .task-emoji {
  animation: step1DemoEmojiFirst var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task-active .task-title {
  animation: step1DemoTitleFirst var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task-second {
  animation: step1DemoPressSecond var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task-second .task-result-badge {
  animation: step1DemoBadgeSecond var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task-second .task-emoji {
  animation: step1DemoEmojiSecond var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-task-second .task-title {
  animation: step1DemoTitleSecond var(--step-1-demo-cycle) ease-in-out infinite;
}

.step-1-demo-score {
  position: absolute;
  left: 32px;
  top: 19px;
  z-index: 3;
  color: #ffd56f;
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 6px 14px rgba(4, 14, 18, 0.3);
  animation-duration: var(--step-1-demo-cycle);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.step-1-demo-score-first {
  animation-name: step1DemoPlusPointFirst;
}

.step-1-demo-score-second {
  left: 134px;
  animation-name: step1DemoPlusPointSecond;
}

.step-1-demo-hand {
  position: absolute;
  left: 76px;
  bottom: 31px;
  z-index: 2;
  font-size: 1.28rem;
  line-height: 1;
  filter: drop-shadow(0 8px 10px rgba(4, 14, 18, 0.28));
  transform-origin: 54% 72%;
  animation: step1DemoHand var(--step-1-demo-cycle) ease-in-out infinite;
}

@keyframes step1DemoHand {
  0%, 14.9% {
    opacity: 0;
    transform: translate3d(-18px, 18px, 0) rotate(-18deg) scale(0.88);
  }
  24.8%, 31.4% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }
  34.8%, 41.4% {
    opacity: 1;
    transform: translate3d(2px, 3px, 0) rotate(-8deg) scale(0.94);
  }
  51.3% {
    opacity: 1;
    transform: translate3d(2px, 0, 0) rotate(-8deg) scale(0.98);
  }
  57.1%, 64.6% {
    opacity: 1;
    transform: translate3d(88px, 0, 0) rotate(-8deg) scale(0.98);
  }
  67.9%, 74.5% {
    opacity: 1;
    transform: translate3d(90px, 3px, 0) rotate(-8deg) scale(0.94);
  }
  82.8%, 100% {
    opacity: 0;
    transform: translate3d(110px, 18px, 0) rotate(8deg) scale(0.9);
  }
}

@keyframes step1DemoPress {
  0%, 32.3%, 100% {
    transform: translateY(0);
    border-color: var(--border);
    background:
      linear-gradient(180deg, rgba(37, 86, 102, 0.92), rgba(20, 50, 60, 0.96)),
      radial-gradient(circle at top, rgba(111, 224, 192, 0.12), transparent 60%);
    box-shadow: var(--button-shadow);
  }
  36.4%, 99% {
    transform: translateY(2px);
    border-color: rgba(111, 224, 192, 0.46);
    background:
      linear-gradient(180deg, rgba(111, 224, 192, 0.28), rgba(25, 66, 78, 0.96)),
      radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 62%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(4, 14, 18, 0.28);
  }
}

@keyframes step1DemoPressSecond {
  0%, 63.7%, 100% {
    transform: translateY(0);
    border-color: var(--border);
    background:
      linear-gradient(180deg, rgba(37, 86, 102, 0.92), rgba(20, 50, 60, 0.96)),
      radial-gradient(circle at top, rgba(111, 224, 192, 0.12), transparent 60%);
    box-shadow: var(--button-shadow);
  }
  67.9%, 99% {
    transform: translateY(2px);
    border-color: rgba(111, 224, 192, 0.46);
    background:
      linear-gradient(180deg, rgba(111, 224, 192, 0.28), rgba(25, 66, 78, 0.96)),
      radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 62%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(4, 14, 18, 0.28);
  }
}

@keyframes step1DemoCheck {
  0%, 42%, 100% {
    border-color: rgba(111, 224, 192, 0.34);
    background: rgba(13, 39, 47, 0.52);
  }
  48%, 70% {
    border-color: rgba(111, 224, 192, 0.72);
    background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  }
}

@keyframes step1DemoTick {
  0%, 42%, 100% {
    opacity: 0;
    transform: rotate(42deg) scale(0.76);
  }
  48%, 70% {
    opacity: 1;
    transform: rotate(42deg) scale(1);
  }
}

@keyframes step1DemoPlusPointFirst {
  0%, 38.9%, 100% {
    opacity: 0;
    transform: translateY(8px) scale(0.88);
  }
  43% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  54.6% {
    opacity: 0;
    transform: translateY(-12px) scale(1.06);
  }
}

@keyframes step1DemoPlusPointSecond {
  0%, 70.3%, 100% {
    opacity: 0;
    transform: translateY(8px) scale(0.88);
  }
  72.8% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  81.1% {
    opacity: 0;
    transform: translateY(-12px) scale(1.06);
  }
}

@keyframes step1DemoBadgeFirst {
  0%, 34.8%, 100% {
    opacity: 0;
    transform: scale(0.8);
  }
  39.7%, 99% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes step1DemoBadgeSecond {
  0%, 66.2%, 100% {
    opacity: 0;
    transform: scale(0.8);
  }
  71.2%, 99% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes step1DemoEmojiFirst {
  0%, 34.8%, 100% {
    filter: saturate(0.28) brightness(0.68);
    opacity: 0.58;
    transform: scale(1);
  }
  39.7%, 99% {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes step1DemoEmojiSecond {
  0%, 66.2%, 100% {
    filter: saturate(0.28) brightness(0.68);
    opacity: 0.58;
    transform: scale(1);
  }
  71.2%, 99% {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes step1DemoTitleFirst {
  0%, 34.8%, 100% {
    color: rgba(190, 216, 212, 0.52);
  }
  39.7%, 99% {
    color: var(--text-main);
  }
}

@keyframes step1DemoTitleSecond {
  0%, 66.2%, 100% {
    color: rgba(190, 216, 212, 0.52);
  }
  71.2%, 99% {
    color: var(--text-main);
  }
}

@media (prefers-reduced-motion: reduce) {
  .step-1-demo-task-active,
  .step-1-demo-task-second,
  .step-1-demo-score,
  .step-1-demo-hand,
  .step-1-demo-task .task-result-badge,
  .step-1-demo-task-active .task-emoji,
  .step-1-demo-task-active .task-title,
  .step-1-demo-task-second .task-emoji,
  .step-1-demo-task-second .task-title {
    animation: none;
  }

  .goal-category-button.is-selected {
    animation: none;
  }

  .goal-grid[data-active-category] {
    animation: none;
  }

  .step-1-demo-task-active,
  .step-1-demo-task-second {
    transform: translateY(2px);
    border-color: rgba(111, 224, 192, 0.46);
    background:
      linear-gradient(180deg, rgba(111, 224, 192, 0.28), rgba(25, 66, 78, 0.96)),
      radial-gradient(circle at top, rgba(255, 255, 255, 0.12), transparent 62%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px rgba(4, 14, 18, 0.28);
  }

  .step-1-demo-task-active .task-result-badge,
  .step-1-demo-task-second .task-result-badge,
  .step-1-demo-score {
    opacity: 1;
  }

  .step-1-demo-task-active .task-emoji,
  .step-1-demo-task-second .task-emoji {
    filter: none;
    opacity: 1;
    transform: scale(1.03);
  }

  .step-1-demo-task-active .task-title,
  .step-1-demo-task-second .task-title {
    color: var(--text-main);
  }

  .step-1-demo-score {
    transform: translateY(0) scale(1);
  }

  .step-1-demo-hand {
    opacity: 0;
  }
}

.participant-input-wrap {
  position: relative;
  min-width: 0;
}

.participant-label {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.participant-input {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  outline: 0;
  background: var(--field-bg);
  color: var(--text-main);
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0 52px 0 16px;
}

.participant-input::placeholder {
  color: rgba(190, 216, 212, 0.2);
  opacity: 1;
}

.participant-input::-webkit-input-placeholder {
  color: rgba(190, 216, 212, 0.2);
  opacity: 1;
}

.participant-input::-moz-placeholder {
  color: rgba(190, 216, 212, 0.2);
  opacity: 1;
}

.step-1-rule-icon-flag {
  font-size: 1.5rem;
}

.duo-grid,
.duration-grid,
.goal-grid {
  display: grid;
  gap: 12px;
}

.duo-grid,
.duration-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.duration-grid {
  position: relative;
  isolation: isolate;
}

.duration-grid::before {
  content: none;
}

.duo-grid {
  margin-top: 0;
  margin-bottom: 12px;
}

.goal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  position: relative;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius-lg) + 5px);
  background: transparent;
  box-shadow: none;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.goal-grid::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: 42%;
  background:
    radial-gradient(ellipse 58% 42% at 50% 48%, rgba(var(--goal-selected-rgb, 111, 224, 192), 0.16), rgba(var(--goal-selected-rgb, 111, 224, 192), 0.07) 44%, transparent 76%),
    radial-gradient(ellipse 96% 68% at 50% 50%, rgba(var(--goal-selected-rgb, 111, 224, 192), 0.06), transparent 72%);
  filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.goal-grid[data-active-category]::before {
  opacity: 1;
}

.goal-grid > * {
  z-index: 1;
}

.goal-grid[data-active-category] {
  animation: goalGridInnerGlow 5.8s ease-in-out infinite;
  border-color: rgba(111, 224, 192, 0.46);
  background: rgba(111, 224, 192, 0.035);
  box-shadow:
    0 0 0 1px rgba(111, 224, 192, 0.12),
    inset 0 -10px 18px rgba(111, 224, 192, 0.035),
    inset 0 0 0 1px rgba(111, 224, 192, 0.08),
    inset 0 0 14px rgba(111, 224, 192, 0.08);
}

.goal-grid[data-active-category="training"] {
  --goal-selected-rgb: 111, 224, 192;
  border-color: rgba(111, 224, 192, 0.5);
  background: rgba(111, 224, 192, 0.04);
  box-shadow:
    0 0 0 1px rgba(111, 224, 192, 0.14),
    inset 0 -10px 18px rgba(111, 224, 192, 0.04),
    inset 0 0 0 1px rgba(111, 224, 192, 0.1),
    inset 0 0 16px rgba(111, 224, 192, 0.1);
}

.goal-grid[data-active-category="health"] {
  --goal-selected-rgb: 166, 222, 112;
  border-color: rgba(166, 222, 112, 0.46);
  background: rgba(166, 222, 112, 0.04);
  box-shadow:
    0 0 0 1px rgba(166, 222, 112, 0.12),
    inset 0 -10px 18px rgba(166, 222, 112, 0.035),
    inset 0 0 0 1px rgba(166, 222, 112, 0.1),
    inset 0 0 16px rgba(166, 222, 112, 0.1);
}

.goal-grid[data-active-category="focus"] {
  --goal-selected-rgb: 141, 179, 255;
  border-color: rgba(141, 179, 255, 0.48);
  background: rgba(141, 179, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(141, 179, 255, 0.12),
    inset 0 -10px 18px rgba(141, 179, 255, 0.035),
    inset 0 0 0 1px rgba(141, 179, 255, 0.1),
    inset 0 0 16px rgba(141, 179, 255, 0.1);
}

.goal-grid[data-active-category="family"] {
  --goal-selected-rgb: 234, 126, 142;
  border-color: rgba(234, 126, 142, 0.44);
  background: rgba(234, 126, 142, 0.038);
  box-shadow:
    0 0 0 1px rgba(234, 126, 142, 0.11),
    inset 0 -10px 18px rgba(234, 126, 142, 0.034),
    inset 0 0 0 1px rgba(234, 126, 142, 0.09),
    inset 0 0 16px rgba(234, 126, 142, 0.09);
}

.goal-category-tabs {
  display: flex;
  position: relative;
  gap: 5px;
  width: 100%;
  max-width: 292px;
  margin: 6px auto 0;
  align-self: center;
  justify-content: center;
}

.goal-category-button {
  flex: 1 1 0;
  position: relative;
  min-width: 0;
  min-height: 30px;
  padding: 5px 5px;
  border: 1px solid rgba(111, 224, 192, 0.14);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(20, 47, 56, 0.58), rgba(13, 39, 47, 0.34));
  color: rgba(223, 235, 232, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(4, 14, 18, 0.22),
    0 3px 3px rgba(4, 18, 22, 0.22),
    0 7px 9px rgba(4, 18, 22, 0.13);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.goal-category-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(111, 224, 192, 0.34);
  color: rgba(237, 247, 245, 0.9);
  background: linear-gradient(180deg, rgba(27, 61, 70, 0.82), rgba(16, 45, 52, 0.68));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(4, 14, 18, 0.26),
    0 4px 4px rgba(4, 18, 22, 0.24),
    0 9px 11px rgba(4, 18, 22, 0.15);
}

@media (hover: hover) {
  .goal-category-button:hover {
    transform: translateY(-1px);
    border-color: rgba(111, 224, 192, 0.34);
    color: rgba(237, 247, 245, 0.9);
    background: linear-gradient(180deg, rgba(27, 61, 70, 0.82), rgba(16, 45, 52, 0.68));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(4, 14, 18, 0.26),
      0 4px 4px rgba(4, 18, 22, 0.24),
      0 9px 11px rgba(4, 18, 22, 0.15);
  }
}

.goal-category-button.is-selected {
  transform: translateY(2px);
  border-color: rgba(111, 224, 192, 0.56);
  background: linear-gradient(180deg, rgba(82, 160, 146, 0.42), rgba(46, 109, 114, 0.84));
  color: rgba(237, 247, 245, 0.96);
  animation: goalCategoryInnerGlow 5.8s ease-in-out infinite;
  box-shadow:
    inset 0 4px 10px rgba(9, 26, 30, 0.26),
    inset 0 -1px 0 rgba(245, 255, 251, 0.05),
    inset 0 0 0 1px rgba(111, 224, 192, 0.08),
    0 0 0 1px rgba(14, 44, 46, 0.22),
    0 4px 10px rgba(4, 14, 18, 0.14);
}

.goal-category-button.is-selected::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  width: 2px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--goal-selected-rgb, 111, 224, 192), 0.72);
  box-shadow: 0 0 8px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.24);
  transform: translateX(-50%);
  pointer-events: none;
}

.goal-category-button.is-selected[data-goal-category="health"] {
  --goal-selected-rgb: 166, 222, 112;
  border-color: rgba(166, 222, 112, 0.58);
  background: linear-gradient(180deg, rgba(104, 157, 70, 0.46), rgba(61, 108, 65, 0.84));
}

.goal-category-button.is-selected[data-goal-category="focus"] {
  --goal-selected-rgb: 141, 179, 255;
  border-color: rgba(141, 179, 255, 0.58);
  background: linear-gradient(180deg, rgba(80, 104, 167, 0.46), rgba(46, 64, 122, 0.84));
}

.goal-category-button.is-selected[data-goal-category="family"] {
  --goal-selected-rgb: 234, 126, 142;
  border-color: rgba(234, 126, 142, 0.58);
  background: linear-gradient(180deg, rgba(150, 70, 87, 0.44), rgba(98, 48, 64, 0.84));
}

@keyframes goalGridInnerGlow {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.12),
      inset 0 -10px 18px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.035),
      inset 0 0 0 1px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.08),
      inset 0 0 14px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.18),
      inset 0 -10px 18px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.055),
      inset 0 0 0 1px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.14),
      inset 0 0 22px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.16);
  }
}

@keyframes goalCategoryInnerGlow {
  0%, 100% {
    box-shadow:
      inset 0 4px 10px rgba(9, 26, 30, 0.26),
      inset 0 -1px 0 rgba(245, 255, 251, 0.05),
      inset 0 0 0 1px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.08),
      inset 0 0 10px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.12),
      0 0 0 1px rgba(14, 44, 46, 0.22),
      0 4px 10px rgba(4, 14, 18, 0.14);
  }
  50% {
    box-shadow:
      inset 0 5px 12px rgba(9, 26, 30, 0.22),
      inset 0 -1px 0 rgba(245, 255, 251, 0.06),
      inset 0 0 0 1px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.16),
      inset 0 0 16px rgba(var(--goal-selected-rgb, 111, 224, 192), 0.22),
      0 0 0 1px rgba(14, 44, 46, 0.22),
      0 4px 10px rgba(4, 14, 18, 0.14);
  }
}

.choice-panel,
.review-card,
.summary-callout,
.option-input-row,
.goal-chip {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  color: var(--text-main);
  box-shadow: var(--shadow-soft);
}

.choice-panel,
.goal-chip,
.duration-card,
.secondary-link,
.primary-button,
.task-comment-badge,
.dashboard-floater-save,
.stake-add-button,
.stake-close-button,
.stake-remove-button,
.dashboard-floater-close,
.challenge-link {
  cursor: pointer;
  transform: translateY(0);
  box-shadow: var(--button-shadow);
  position: relative;
}

.choice-panel,
.goal-chip {
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.choice-panel {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 18px 14px;
  text-align: center;
}

.mode-card {
  min-height: 110px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: stretch;
  gap: 4px;
  padding: 10px 12px;
}

.mode-card:not(.is-selected) {
  box-shadow:
    var(--button-shadow),
    0 5px 4px rgba(4, 18, 22, 0.18),
    0 11px 14px rgba(4, 18, 22, 0.1);
}

.mode-card:not(.is-selected):hover,
.mode-card:not(.is-selected):focus-visible {
  box-shadow:
    var(--button-shadow-hover),
    0 6px 5px rgba(4, 18, 22, 0.2),
    0 13px 16px rgba(4, 18, 22, 0.11);
}

.mode-card:not(.is-selected):active {
  box-shadow:
    var(--button-shadow-pressed),
    0 3px 3px rgba(4, 18, 22, 0.16),
    0 7px 10px rgba(4, 18, 22, 0.08);
}

.mode-grid {
  margin-top: 0;
  margin-bottom: 0;
  gap: 14px;
}

.mode-card .choice-icon {
  width: 100%;
  align-self: center;
  margin: 0 auto;
  font-size: 2.05rem;
  line-height: 1;
}

.stake-card {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  font-size: calc(0.88rem - 1px);
  line-height: 1.2;
  text-align: center;
}

.stake-card .choice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 1.35rem;
  font-size: 1.3rem;
  line-height: 1;
}

.stake-card .choice-title {
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
}

[data-screen="step-3"] .goal-chip:not(.is-selected),
[data-screen="step-5"] .stake-card:not(.is-selected):not(.is-added) {
  box-shadow:
    var(--button-shadow),
    0 5px 4px rgba(4, 18, 22, 0.18),
    0 11px 14px rgba(4, 18, 22, 0.1);
}

[data-screen="step-3"] .goal-chip:not(.is-selected):hover,
[data-screen="step-3"] .goal-chip:not(.is-selected):focus-visible,
[data-screen="step-5"] .stake-card:not(.is-selected):not(.is-added):hover,
[data-screen="step-5"] .stake-card:not(.is-selected):not(.is-added):focus-visible {
  box-shadow:
    var(--button-shadow-hover),
    0 6px 5px rgba(4, 18, 22, 0.2),
    0 13px 16px rgba(4, 18, 22, 0.11);
}

[data-screen="step-3"] .goal-chip:not(.is-selected):active,
[data-screen="step-5"] .stake-card:not(.is-selected):not(.is-added):active {
  box-shadow:
    var(--button-shadow-pressed),
    0 3px 3px rgba(4, 18, 22, 0.16),
    0 7px 10px rgba(4, 18, 22, 0.08);
}

.choice-panel.is-selected,
.duration-card.is-selected,
.goal-chip.is-selected,
.invite-response-option.is-selected,
.custom-goal-card.is-selected {
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  border-color: rgba(111, 224, 192, 0.5);
  transform: translateY(2px);
  box-shadow:
    inset 0 4px 12px rgba(9, 26, 30, 0.3),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

.choice-panel.is-selected:hover,
.choice-panel.is-selected:focus-visible,
.duration-card.is-selected:hover,
.duration-card.is-selected:focus-visible,
.goal-chip.is-selected:hover,
.goal-chip.is-selected:focus-visible,
.invite-response-option.is-selected:hover,
.invite-response-option.is-selected:focus-visible,
.custom-goal-card.is-selected:hover,
.custom-goal-card.is-selected:focus-within {
  transform: translateY(2px);
  border-color: rgba(111, 224, 192, 0.5);
  box-shadow:
    inset 0 4px 12px rgba(9, 26, 30, 0.3),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

.choice-panel:hover,
.choice-panel:focus-visible,
.goal-chip:hover,
.goal-chip:focus-visible,
.custom-goal-card:hover,
.custom-goal-card:focus-within {
  transform: translateY(1px);
  border-color: rgba(111, 224, 192, 0.4);
  box-shadow: var(--button-shadow-hover);
}

.choice-panel:active,
.goal-chip:active,
.goal-category-button:active,
.duration-card:active,
.secondary-link:active,
.primary-button:active,
.task-comment-badge:active,
.dashboard-floater-save:active,
.stake-add-button:active,
.stake-close-button:active,
.stake-remove-button:active,
.dashboard-floater-close:active,
.challenge-link:active,
.task-card:active {
  transform: translateY(2px);
  box-shadow: var(--button-shadow-pressed);
}

.choice-panel.is-selected:active,
.duration-card.is-selected:active,
.goal-chip.is-selected:active,
.invite-response-option.is-selected:active,
.custom-goal-card.is-selected:active {
  transform: translateY(2px);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  border-color: rgba(111, 224, 192, 0.5);
  box-shadow:
    inset 0 4px 12px rgba(9, 26, 30, 0.3),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

.stake-card.is-added,
.stake-card.is-added:hover,
.stake-card.is-added:focus-visible,
.stake-card.is-added:active {
  transform: translateY(2px);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  border-color: rgba(111, 224, 192, 0.5);
  box-shadow:
    inset 0 4px 12px rgba(9, 26, 30, 0.3),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

.choice-icon {
  font-size: 1.4rem;
}

.choice-icon-lg {
  font-size: 2.7rem;
}

.choice-title {
  font-size: 1rem;
  font-weight: 400;
}

.mode-card .choice-title {
  min-height: 0;
  width: 100%;
  text-align: center;
  font-size: 0.96rem;
  line-height: 1.15;
}

[data-screen="official-challenges"] .mode-card .choice-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.72rem, 3.2vw, 0.96rem);
}

/* Official cards use fixed title/art/meta slots so PNG, emoji and empty artwork behave identically. */
[data-screen="official-challenges"] .mode-card {
  height: 110px;
  min-height: 110px;
  max-height: 110px;
  grid-template-rows: 18px 46px 16px;
  align-content: center;
  gap: 2px;
  overflow: hidden;
  container-type: inline-size;
  padding: 7px 8px;
}

[data-screen="official-challenges"] .official-card-image {
  display: block;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  min-width: 0;
  width: min(100%, 92px);
  height: 46px;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(4, 18, 22, 0.38));
}

[data-screen="official-challenges"] .official-card-emoji {
  display: flex;
  grid-row: 2;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;
  min-width: 0;
  width: min(100%, 92px);
  height: 46px;
  min-height: 46px;
  font-size: 2.1rem;
  line-height: 1;
  margin: 0;
}

[data-screen="official-challenges"] .official-card-meta {
  display: block;
  grid-row: 3;
  align-self: center;
  min-width: 0;
  width: 100%;
  height: 16px;
  color: var(--text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.62rem, 3.2vw, 0.84rem);
  line-height: 16px;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

@supports (font-size: 1cqw) {
  [data-screen="official-challenges"] .official-card-meta {
    font-size: clamp(0.62rem, 3.2vw, 0.84rem);
  }
}

.mode-card .choice-copy {
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.25;
  text-align: center;
  align-self: end;
}

[data-screen="step-1"] .mode-card {
  grid-template-rows: auto auto;
  gap: 0;
}

[data-screen="step-1"] .mode-card .choice-title {
  display: none;
}

[data-screen="step-1"] .mode-card .choice-icon {
  font-size: 2.56rem;
}

[data-screen="step-1"] .mode-card .choice-copy {
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 400;
  line-height: 1.1;
  align-self: center;
  margin-top: -3px;
}

.choice-copy {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.35;
}

.duration-shell {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  min-width: 0;
}

.duration-card {
  min-height: 110px;
  border: 1px solid rgba(111, 224, 192, 0.16);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  color: var(--text-main);
  box-shadow:
    var(--button-shadow),
    0 5px 4px rgba(4, 18, 22, 0.18),
    0 11px 14px rgba(4, 18, 22, 0.1);
  font-size: 1.5rem;
  font-weight: 700;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.duration-card:hover,
.duration-card:focus-visible {
  box-shadow:
    var(--button-shadow-hover),
    0 6px 5px rgba(4, 18, 22, 0.2),
    0 13px 16px rgba(4, 18, 22, 0.11);
}

.duration-card:not(.is-selected):active {
  transform: translateY(2px);
  background: linear-gradient(180deg, rgba(58, 125, 118, 0.38), rgba(33, 82, 95, 0.96));
  border-color: rgba(111, 224, 192, 0.28);
  box-shadow:
    inset 0 4px 12px rgba(5, 14, 18, 0.32),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 2px rgba(11, 33, 40, 0.28),
    0 3px 3px rgba(4, 18, 22, 0.16),
    0 7px 10px rgba(4, 18, 22, 0.08);
}

.duration-card:not(.is-selected):focus,
.duration-card:not(.is-selected):focus-visible {
  outline: none;
  box-shadow: inherit;
}

.duration-card-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}

.custom-duration-label {
  display: block;
  width: 100%;
  text-align: center;
  font: inherit;
  line-height: 1;
}

.custom-duration-input,
.date-input,
.option-input-row input,
.option-input-row textarea,
.custom-goal-card input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--field-border);
  border-radius: var(--field-radius);
  outline: 0;
  background: var(--field-bg);
  color: var(--text-main);
}

.custom-duration-input {
  width: 78%;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0 10px;
}

.date-input,
.option-input-row input,
.option-input-row textarea {
  display: block;
  max-width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 14px;
}

.date-input {
  height: 42px;
  line-height: 42px;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
}

.date-input::-webkit-date-and-time-value {
  display: flex;
  align-items: center;
  min-height: 42px;
  line-height: 42px;
  text-align: left;
}

.date-input::-webkit-datetime-edit {
  display: flex;
  align-items: center;
  min-height: 42px;
}

.date-input::-webkit-calendar-picker-indicator {
  margin-left: auto;
}

.option-input-row textarea {
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
}

.start-date-row {
  width: 100%;
  margin-top: 14px;
  text-align: left;
}

.start-date-row .participant-label {
  margin-bottom: 6px;
}

.start-date-choice-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

.start-date-choice-button {
  min-height: 46px;
  padding: 0 8px;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.start-date-row .participant-input-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.start-date-picker-wrap {
  margin-top: 8px;
}

.period-preview {
  margin: 0;
  padding: 0;
}

.period-preview[hidden] {
  display: none !important;
}

.period-preview-text {
  margin: 6px 0 0;
  color: var(--text-main);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.35;
}

#summary-duration {
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.35;
}

.goal-section + .goal-section {
  margin-top: 8px;
}

.goal-chip {
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  font-size: calc(0.88rem - 1px);
  line-height: 1.2;
  text-align: center;
}

.goal-emoji {
  font-size: 1.3rem;
  line-height: 1;
}

.goal-title,
.stake-card .choice-title {
  transform: translateY(6px);
}

.dashboard-screen .task-card-bottom {
  transform: translateY(10px);
}

.custom-heading-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
  text-align: center;
}

.helper-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
}

.helper-note {
  margin: 12px 0 14px;
}

#official-summary-note {
  text-align: center;
}

#official-summary-note .official-join-context {
  display: block;
  margin-top: 4px;
  color: var(--text-soft);
}

.official-deadline-note {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0.35em;
  max-width: min(100%, 42ch);
  line-height: 1.32;
  color: var(--accent);
}

.official-deadline-line {
  display: inline-block;
}

.floater-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: var(--text-main);
  font-size: 0.95rem;
  font-weight: 600;
}

.floater-checkbox-row input {
  width: 18px;
  height: 18px;
  accent-color: #6fe0c0;
}

#custom-goal-floater .floater-checkbox-row {
  gap: 9px;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.25;
}

#custom-goal-floater .floater-checkbox-row input {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(190, 216, 212, 0.56);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

#custom-goal-floater .floater-checkbox-row input:checked {
  background:
    linear-gradient(135deg, rgba(111, 224, 192, 0.34), rgba(67, 195, 158, 0.28));
  border-color: rgba(111, 224, 192, 0.9);
  box-shadow:
    inset 0 0 0 3px rgba(18, 51, 61, 0.92),
    0 0 0 1px rgba(111, 224, 192, 0.16);
}

#custom-goal-floater .floater-checkbox-row input:checked::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  top: 1px;
  left: 5px;
  border-right: 2px solid rgba(237, 247, 245, 0.96);
  border-bottom: 2px solid rgba(237, 247, 245, 0.96);
  transform: rotate(45deg);
}

#custom-goal-floater .floater-checkbox-row input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(111, 224, 192, 0.1);
}

.terms-checkbox-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 5px auto 0;
  color: rgba(111, 224, 192, 0.62);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.28;
  text-align: center;
}

.terms-checkbox-row input {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin: 1px 0 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(190, 216, 212, 0.5);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.terms-checkbox-row input:checked {
  background: linear-gradient(135deg, rgba(111, 224, 192, 0.34), rgba(67, 195, 158, 0.28));
  border-color: rgba(111, 224, 192, 0.9);
  box-shadow:
    inset 0 0 0 3px rgba(18, 51, 61, 0.92),
    0 0 0 1px rgba(111, 224, 192, 0.14);
}

.terms-checkbox-row input:checked::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 7px;
  top: 1px;
  left: 4px;
  border-right: 2px solid rgba(237, 247, 245, 0.96);
  border-bottom: 2px solid rgba(237, 247, 245, 0.96);
  transform: rotate(45deg);
}

.terms-checkbox-row input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(111, 224, 192, 0.1);
}

.terms-checkbox-row a {
  color: rgba(145, 238, 213, 0.74);
  text-decoration: underline;
  text-decoration-color: rgba(111, 224, 192, 0.42);
  text-underline-offset: 2px;
}

.terms-inline-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: rgba(145, 238, 213, 0.74);
  font: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(111, 224, 192, 0.42);
  text-underline-offset: 2px;
  cursor: pointer;
}

.profile-access-warning-copy {
  color: rgba(255, 154, 154, 0.88);
}

.profile-access-steps {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  color: var(--text-soft);
  font-size: 0.82rem;
  line-height: 1.38;
  text-align: left;
  list-style: none;
}

.profile-access-link-form {
  display: grid;
  gap: 9px;
}

#profile-access-help-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.38;
  text-align: left;
}

#profile-access-help-note.is-error {
  color: #ffb6b6;
}

#profile-access-help-note.is-success {
  color: rgba(145, 238, 213, 0.9);
}

#terms-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.38;
  text-align: left;
}

#terms-list li + li {
  margin-top: 7px;
}

.terms-full-copy {
  display: grid;
  gap: 9px;
  color: var(--text-soft);
  font-size: 0.78rem;
  line-height: 1.38;
  text-align: left;
}

.terms-full-copy h3 {
  margin: 4px 0 -4px;
  color: #f4fffb;
  font-size: 0.82rem;
  line-height: 1.2;
}

.terms-full-copy p {
  margin: 0;
}

.terms-full-copy ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
}

.terms-full-copy code {
  color: #f7d774;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.95em;
}

.terms-helper-note {
  margin: 2px 0 0;
  color: rgba(111, 224, 192, 0.9);
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.terms-helper-note.is-warning {
  color: var(--accent-strong);
}

#display-name-floater .terms-checkbox-row {
  margin-top: 1px;
  gap: 6px;
  line-height: 1.18;
}

#display-name-floater .terms-helper-note {
  margin-top: 0;
  color: #ffb6b6;
}

.helper-note.is-warning {
  color: var(--accent-strong);
  font-weight: 600;
}

.step-note {
  min-height: 20px;
  margin: 8px 0 0;
  text-align: center;
}

#step-1-note {
  margin-top: clamp(98px, 13svh, 122px);
  margin-bottom: 0;
}

.step-1-demo-block:not([hidden]) + #step-1-note {
  margin-top: 2px;
}

#step-1-note.is-negotiation-locked-note {
  margin-top: 8px;
}

.custom-goal-list,
.review-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#step-3-screen .custom-goal-list {
  padding-inline: 8px;
}

.custom-goal-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 33px;
  padding: 0 10px;
  border: 1px dashed rgba(111, 224, 192, 0.18);
  border-radius: var(--radius-md);
  background: rgba(24, 59, 70, 0.26);
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  cursor: default;
}

.custom-goal-card.is-empty {
  border-style: solid;
  border-color: rgba(111, 224, 192, 0.1);
  background: rgba(15, 41, 49, 0.14);
  min-height: 33px;
}

.custom-prefix {
  flex: 0 0 auto;
  font-size: 1rem;
  width: 24px;
  text-align: center;
  color: rgba(190, 216, 212, 0.72);
}

.custom-goal-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}

.custom-goal-title,
.custom-goal-meta {
  margin: 0;
}

.custom-goal-title {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(237, 247, 245, 0.88);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.custom-goal-meta {
  color: rgba(190, 216, 212, 0.72);
  font-size: 0.75rem;
  font-weight: 400;
}

.custom-goal-card.is-empty .custom-prefix {
  color: rgba(190, 216, 212, 0.44);
}

.custom-goal-card.is-empty .custom-goal-title,
.custom-goal-card.is-empty .custom-goal-meta {
  color: rgba(190, 216, 212, 0.56);
}

.custom-goal-card.is-empty .custom-goal-title {
  font-weight: 600;
  opacity: 0.38;
}

.custom-goal-card.is-empty .custom-goal-copy {
  gap: 0;
}

.custom-goal-card.is-empty .custom-prefix {
  font-size: 1.05rem;
  font-weight: 600;
}

.custom-goal-card .custom-prefix,
.stake-entry .custom-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.custom-goal-card.is-empty:hover,
.custom-goal-card.is-empty:focus-within {
  transform: none;
  border-color: rgba(111, 224, 192, 0.1);
  box-shadow: none;
  background: rgba(15, 41, 49, 0.14);
}

.custom-goal-remove {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-main);
  border: 1px solid rgba(111, 224, 192, 0.14);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.stake-remove-button {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--text-main);
  border: 1px solid rgba(111, 224, 192, 0.14);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.custom-goal-remove:hover,
.custom-goal-remove:focus-visible,
.stake-remove-button:hover,
.stake-remove-button:focus-visible {
  transform: translateY(1px);
  background: rgba(111, 224, 192, 0.22);
  border-color: rgba(111, 224, 192, 0.24);
  box-shadow: 0 2px 6px rgba(4, 14, 18, 0.12);
  outline: none;
}

.custom-goal-remove:active,
.stake-remove-button:active {
  transform: translateY(2px);
  background: rgba(111, 224, 192, 0.26);
  border-color: rgba(111, 224, 192, 0.28);
  box-shadow: none;
}

.option-input-row input::placeholder {
  color: #91b2ab;
}

.option-input-row input.participant-input::placeholder {
  color: rgba(190, 216, 212, 0.2);
  opacity: 1;
}

.option-input-row input.participant-input::-webkit-input-placeholder {
  color: rgba(190, 216, 212, 0.2);
  opacity: 1;
}

.option-input-row input.participant-input::-moz-placeholder {
  color: rgba(190, 216, 212, 0.2);
  opacity: 1;
}

.summary-callout,
.review-card,
.option-input-row {
  padding: 14px;
}

.review-list .review-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.review-list {
  gap: 14px;
}

#step-6-screen.is-solo-summary .review-list {
  padding-top: clamp(24px, 4svh, 42px);
}

#step-6-screen.is-solo-summary #summary-mode-card {
  display: none;
}

#step-6-screen.is-solo-summary #summary-goals-card {
  order: 1;
}

#step-6-screen.is-solo-summary #summary-duration-card {
  order: 2;
}

#step-6-screen.is-solo-summary #summary-target-card {
  order: 3;
}

#step-6-screen.is-solo-summary #summary-stakes-card {
  order: 4;
}

.message-field {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message-field > span:first-child {
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.message-input-wrap {
  position: relative;
}

.message-input-wrap textarea {
  padding: 12px 76px 12px 14px;
}

.message-field textarea {
  min-height: 82px;
  max-height: 82px;
  overflow-y: auto;
  resize: none;
}

.message-input-wrap textarea::placeholder {
  color: rgba(145, 178, 171, 0.58);
  font-weight: 400;
}

.message-field textarea {
  font-size: 0.96rem;
  line-height: 1.32;
}

.message-field textarea::placeholder {
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 400;
}

.message-field.is-readonly-message .message-input-wrap {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.message-field.is-readonly-message textarea {
  min-height: 0;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-main);
  line-height: 1.45;
  resize: none;
  overflow: hidden;
  pointer-events: none;
}

.message-field.is-readonly-message .message-counter {
  display: none;
}

.summary-message-copy {
  margin: 0;
  color: var(--text-main);
  font-size: 0.96rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#summary-friend-alias-field .participant-input::placeholder {
  color: rgba(145, 178, 171, 0.58);
  opacity: 1;
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 400;
}

#summary-friend-alias-field .participant-input::-webkit-input-placeholder {
  color: rgba(145, 178, 171, 0.58);
  opacity: 1;
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 400;
}

#summary-friend-alias-field .participant-input::-moz-placeholder {
  color: rgba(145, 178, 171, 0.58);
  opacity: 1;
  font-size: 0.88rem;
  line-height: 1.2;
  font-weight: 400;
}

#step-6-screen .message-field > span:first-child {
  font-weight: 400;
}

.summary-callout {
  background: linear-gradient(180deg, rgba(111, 224, 192, 0.16), rgba(31, 76, 91, 0.2));
}

.rule-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rules-layout {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 30px;
  min-height: 0;
  padding-top: 2px;
}

.rules-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(100%, 460px);
  align-self: flex-start;
}

.step-1-rules {
  width: 100%;
}

.step-1-rule-list {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.step-1-rule-row {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.24;
  text-align: center;
  text-wrap: balance;
  max-width: min(100%, 38ch);
}

.step-1-rule-icon {
  font-size: 1.65rem;
  line-height: 1;
}

.rules-intro {
  margin: 0;
  text-align: center;
}

.rule-kicker {
  margin: 0;
  color: var(--accent-strong);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rule-text {
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.target-slider-wrap {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.target-slider-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.target-slider-label,
.target-slider-value {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.target-slider-label {
  color: var(--accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.target-slider-value {
  margin-left: auto;
  text-align: right;
}

.target-slider-value {
  color: var(--accent);
}

.target-slider {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.12) 100%);
  outline: none;
  cursor: pointer;
}

.target-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: transparent;
}

.target-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 0;
  border-radius: 999px;
  background: #edf7f5;
  box-shadow: 0 4px 10px rgba(4, 14, 18, 0.24);
}

.target-slider::-moz-range-track {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.target-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 999px;
  background: #edf7f5;
  box-shadow: 0 4px 10px rgba(4, 14, 18, 0.24);
}

.official-target-slider {
  --official-target-progress: 90%;
  --official-target-left: calc(90% - 8.7px);
}

.official-target-slider .target-slider {
  cursor: default;
  opacity: 1;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) var(--official-target-progress), rgba(255, 255, 255, 0.12) var(--official-target-progress), rgba(255, 255, 255, 0.12) 100%);
}

.official-target-slider-control {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}

.official-target-slider-lock {
  position: absolute;
  left: var(--official-target-left);
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: transparent;
  color: #123a3b;
  font-size: 0.78rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: none;
  pointer-events: none;
}

.rule-text strong {
  color: var(--text-main);
  font-weight: 700;
}

.review-label,
.review-value {
  margin: 0;
}

.review-label {
  color: var(--accent-strong);
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.review-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
}

.review-content-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.summary-change-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 auto;
  border-radius: 8px;
  min-height: 20px;
  padding: 3px 8px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  border: 1px solid rgba(111, 224, 192, 0.44);
  box-shadow:
    inset 0 2px 8px rgba(5, 14, 18, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(4, 14, 18, 0.12);
  color: var(--text-main);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.summary-change-badge:hover,
.summary-change-badge:focus-visible {
  transform: translateY(1px);
  border-color: rgba(111, 224, 192, 0.54);
  box-shadow:
    inset 0 2px 9px rgba(5, 14, 18, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 3px 8px rgba(4, 14, 18, 0.14);
}

.summary-change-badge:active {
  transform: translateY(2px);
  box-shadow: var(--button-shadow-pressed);
}

.review-value {
  margin-top: 0;
  font-size: 0.93rem;
  line-height: 1.35;
}

.review-content-row > .review-value,
.review-content-row > .review-detail-stack {
  flex: 1 1 auto;
  min-width: 0;
}

.review-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 0;
}

.review-detail-stack .review-value {
  margin-top: 0;
}

.period-separator {
  color: var(--accent-strong);
  font-size: 0.85em;
  font-weight: 700;
  opacity: 0.85;
}

.review-detail-stack .official-participant-copy {
  margin-top: 16px;
  color: var(--text-main);
}

.official-message-copy {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.official-challenge-image {
  display: block;
  width: min(180px, 70vw);
  max-height: 120px;
  margin: 20px auto -12px;
  object-fit: contain;
  border-radius: 12px;
  transform: scale(1.15);
  transform-origin: center;
}

.official-summary-heading {
  position: relative;
}

.official-summary-heading .official-qr-button {
  position: absolute;
  top: 12px;
  right: 0;
  z-index: 2;
}

.detail-official-challenge-image {
  display: block;
  width: min(180px, 70vw);
  max-height: 120px;
  margin: 10px auto 8px;
  object-fit: contain;
  border-radius: 12px;
}

.official-participant-count {
  color: #ffd37a;
  font-weight: 700;
}

.official-participant-copy {
  margin: 16px 0 0;
  color: var(--text-main);
  text-align: center;
}

.official-participant-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  margin: 16px auto 0;
  padding: 5px 14px;
  border: 1px solid rgba(111, 224, 192, 0.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), rgba(31, 76, 91, 0.68);
  color: var(--text-main);
  box-shadow:
    var(--button-shadow),
    0 5px 4px rgba(4, 18, 22, 0.18),
    0 11px 14px rgba(4, 18, 22, 0.1);
  font: inherit;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.official-participant-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.official-participant-actions .official-participant-button {
  margin: 0;
}

.official-participant-empty {
  margin: 0;
  color: var(--text-soft);
  text-align: center;
}

.official-qr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(111, 224, 192, 0.28);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)), rgba(31, 76, 91, 0.68);
  color: var(--accent);
  box-shadow:
    var(--button-shadow),
    0 5px 4px rgba(4, 18, 22, 0.18),
    0 11px 14px rgba(4, 18, 22, 0.1);
  font-size: 1rem;
  cursor: pointer;
}

.official-qr-button:active {
  transform: translateY(2px);
  border-color: rgba(111, 224, 192, 0.5);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  box-shadow:
    inset 0 4px 12px rgba(9, 26, 30, 0.3),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

.official-card-emoji.is-empty {
  min-height: 46px;
}

.official-participant-button:hover,
.official-participant-button:focus-visible {
  border-color: rgba(111, 224, 192, 0.52);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)), rgba(41, 98, 113, 0.82);
  box-shadow:
    var(--button-shadow-hover),
    0 6px 5px rgba(4, 18, 22, 0.2),
    0 13px 16px rgba(4, 18, 22, 0.11);
  outline: none;
  transform: translateY(-1px);
}

.official-participant-button .official-participant-count {
  color: #ffd37a;
  font-weight: 700;
}

.official-participant-button .period-separator {
  color: var(--text-main);
  margin-inline: 0.4em;
  flex: 0 0 auto;
}

.official-participant-button:active {
  transform: translateY(2px);
  border-color: rgba(111, 224, 192, 0.5);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  color: var(--accent);
  box-shadow:
    inset 0 4px 12px rgba(9, 26, 30, 0.3),
    inset 0 -1px 0 rgba(245, 255, 251, 0.06),
    0 0 0 2px rgba(14, 44, 46, 0.26),
    0 1px 3px rgba(4, 14, 18, 0.08);
}

#official-participants-floater {
  position: fixed;
  top: max(calc(var(--safe-top) + 42px), 11svh);
  left: 0;
  right: 0;
  z-index: 59;
  width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-max-width));
  margin-inline: auto;
  transform: none;
}

#official-qr-floater {
  position: fixed;
  top: max(calc(var(--safe-top) + 42px), 11svh);
  left: 0;
  right: 0;
  z-index: 59;
  width: min(calc(100vw - var(--safe-left) - var(--safe-right) - 20px), var(--floater-max-width));
  margin-inline: auto;
  transform: none;
}

#official-participants-floater .dashboard-floater-card,
#official-qr-floater .dashboard-floater-card {
  width: 100%;
  max-height: min(78svh, 680px);
  max-height: min(78dvh, 680px);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.01) 18%, transparent 38%),
    linear-gradient(180deg, rgba(111, 224, 192, 0.16), rgba(111, 224, 192, 0.03) 40%),
    linear-gradient(180deg, rgba(49, 109, 126, 0.97), rgba(36, 88, 103, 0.99));
  box-shadow:
    inset 0 10px 18px rgba(255, 255, 255, 0.03),
    inset 0 12px 20px rgba(4, 14, 18, 0.1),
    inset 0 -14px 22px rgba(7, 22, 28, 0.12),
    inset 0 -2px 0 rgba(255, 255, 255, 0.045),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px rgba(4, 14, 18, 0.18);
}

#official-participants-floater .dashboard-floater-top,
#official-qr-floater .dashboard-floater-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 44px;
}

#official-participants-floater .dashboard-floater-top > div,
#official-qr-floater .dashboard-floater-top > div {
  width: 100%;
  text-align: center;
}

#official-participants-floater .dashboard-floater-close,
#official-qr-floater .dashboard-floater-close {
  position: absolute;
  top: 0;
  right: 0;
}

#official-participants-list {
  display: grid;
  gap: 8px;
  max-height: calc(min(78svh, 680px) - 64px);
  overflow-y: auto;
  padding: 0 2px 2px;
}

.official-participant-alias-card {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 7px 12px;
  border: 1px solid rgba(163, 227, 211, 0.2);
  border-radius: 14px;
  background: rgba(31, 76, 91, 0.62);
  color: var(--text-main);
  font-size: 1rem;
  font-weight: 500;
}

#official-participants-list > .detail-empty {
  text-align: center;
}

.official-qr-placeholder {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 0;
  padding: 12px;
  border: 1px dashed rgba(111, 224, 192, 0.28);
  border-radius: 18px;
  color: var(--text-soft);
  text-align: center;
}

.official-qr-placeholder img {
  display: block;
  width: min(100%, 260px);
  aspect-ratio: 1;
  padding: 10px;
  border-radius: 12px;
  background: #ffffff;
}

.official-qr-url {
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--accent);
  font-size: 0.78rem;
}

.official-qr-copy-button {
  width: fit-content;
  min-width: 0;
  min-height: 36px;
  margin: 4px auto 0;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.84rem;
}

.official-qr-copy-button.is-mint {
  border-color: rgba(111, 224, 192, 0.5);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-soft-strong));
  color: var(--text-main);
  box-shadow:
    inset 0 1px 0 rgba(245, 255, 251, 0.12),
    0 5px 12px rgba(4, 18, 22, 0.18);
}

.official-qr-copy-button.is-mint:hover,
.official-qr-copy-button.is-mint:focus-visible {
  border-color: rgba(111, 224, 192, 0.7);
  background: linear-gradient(180deg, var(--accent-soft-strong), rgba(111, 224, 192, 0.24));
  outline: none;
}

.detail-actions > #detail-invite-link-button.is-official-detail-invite {
  min-width: 0;
  min-height: 38px;
  height: 38px;
  padding-inline: 14px;
  font-size: 0.86rem;
}

.review-detail-stack .target-slider-wrap {
  margin-top: 0;
  margin-bottom: 6px;
}

.review-card.is-highlight {
  background: linear-gradient(180deg, var(--accent-soft), rgba(31, 76, 91, 0.3));
}

#summary-target-card .review-content-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.option-input-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.message-counter {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
}