/* Test 10 feedback CSS, namespaced for the static Listening 1A page. */
.cf-feedbackControls {
  position: absolute;
  top: 50%;
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 0.48rem;
  transform: translateY(-50%);
}

.cf-feedbackControls[data-feedback-placement="header"] {
  position: static;
  width: auto;
  margin: 0;
  transform: none;
}

.cf-feedbackControls[data-feedback-placement="header"] .cf-feedbackButton {
  border-color: rgba(255, 229, 151, 0.78);
  color: #7a1119;
  background: linear-gradient(180deg, #fffdf7, #f9e5ab);
  box-shadow: 0 5px 16px rgba(49, 0, 3, 0.2);
}

.cf-feedbackButton {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  padding: 0.58rem 0.82rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(72, 39, 9, 0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.cf-feedbackButton:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(72, 39, 9, 0.13);
}

.cf-feedbackButton:focus-visible,
.cf-closeButton:focus-visible,
.cf-captureButton:focus-visible,
.cf-removeScreenshotButton:focus-visible,
.cf-screenshotThumbnailButton:focus-visible,
.cf-lightboxCloseButton:focus-visible,
.cf-submitButton:focus-visible {
  outline: 3px solid rgba(181, 14, 29, 0.25);
  outline-offset: 2px;
}

.cf-unifiedButton {
  border-color: #dcb94e;
  color: #7a1119;
  background: linear-gradient(180deg, #fffdf6, #fff3c9);
}

.cf-buttonIcon,
.cf-dialogIcon {
  color: currentColor;
}

.cf-buttonIcon svg,
.cf-dialogIcon svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-dialogIcon svg { width: 1.45rem; height: 1.45rem; }
.cf-dialog {
  width: min(710px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfd0b4;
  border-radius: 24px;
  color: #253241;
  background: #fffdf8;
  box-shadow: 0 28px 90px rgba(42, 21, 16, 0.3);
}

.cf-dialog::backdrop {
  background: rgba(26, 22, 29, 0.56);
  backdrop-filter: blur(5px);
}

.cf-dialogSurface {
  position: relative;
  max-height: calc(100dvh - 34px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cf-dialogHeader {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.35rem;
  border-bottom: 1px solid #eadfca;
  background: rgba(255, 253, 248, 0.98);
}

.cf-dialogTitleGroup {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.cf-dialogIcon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #fff2c2;
  font-size: 1.45rem;
}

.cf-dialogTitleGroup h2 {
  margin: 0;
  color: #741018;
  font-size: 1.45rem;
  line-height: 1.15;
}

.cf-dialogTitleGroup p {
  margin: 0.22rem 0 0;
  color: #6d7580;
  font-size: 0.9rem;
}

.cf-closeButton {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid #ded9d0;
  border-radius: 50%;
  color: #374454;
  background: #f7f5f0;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.cf-form {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-bottom: 1.1rem;
  overscroll-behavior: contain;
}

.cf-intro {
  margin: 0;
  padding: 1.15rem 1.35rem 0;
  color: #39485b;
  font-size: 0.96rem;
  line-height: 1.55;
}

.cf-descriptionHeading > label {
  margin-bottom: 0.65rem;
  color: #344154;
  font-size: 0.92rem;
  font-weight: 850;
}

.cf-textareaLabel {
  display: grid;
  margin: 1.1rem 1.35rem 0;
}

.cf-descriptionHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.cf-descriptionHeading > label {
  display: block;
}

.cf-bugCaptureGuide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 106px minmax(0, 1fr);
  grid-template-areas: "copy action illustration";
  align-items: center;
  gap: 1.05rem;
  margin: 1.1rem 1.35rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid #e2c15b;
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdf7 0%, #fff7d9 100%);
  box-shadow: 0 7px 20px rgba(105, 73, 15, 0.07);
}

.cf-captureAction {
  position: relative;
  isolation: isolate;
  grid-area: action;
  width: 106px;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0.52rem;
}

.cf-captureAction > span {
  order: -1;
  padding: 0.24rem 0.52rem;
  border: 1px solid rgba(213, 181, 79, 0.5);
  border-radius: 999px;
  color: #77131b;
  background: rgba(255, 253, 247, 0.92);
  font-size: 0.72rem;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
}

.cf-captureButton {
  position: relative;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #b50e1d;
  background: linear-gradient(145deg, #fffdf7, #f8f0df);
  box-shadow:
    0 8px 18px rgba(137, 14, 25, 0.16),
    inset 0 0 0 4px rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.cf-captureButton:hover {
  transform: translateY(-1px);
  box-shadow:
    0 11px 22px rgba(137, 14, 25, 0.22),
    inset 0 0 0 4px rgba(255, 255, 255, 0.7);
}

.cf-captureButton::before {
  position: absolute;
  inset: 2px;
  border: 1px solid #b50e1d;
  border-radius: inherit;
  content: "";
  pointer-events: none;
}

.cf-captureButton:disabled,
.cf-removeScreenshotButton:disabled,
.cf-screenshotNoteTextarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.cf-captureButton:disabled svg {
  animation: none;
}
.cf-captureButton svg {
  width: 1.65rem;
  height: 1.65rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: center;
  animation: captureCameraInvite 2.4s ease-in-out infinite;
}

.cf-captureGuideCopy {
  grid-area: copy;
  min-width: 0;
}

.cf-captureGuideCopy > span {
  display: block;
  margin-bottom: 0.2rem;
  color: #a50f1c;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.cf-captureGuideCopy h3 {
  margin: 0;
  color: #641018;
  font-size: 1.02rem;
  line-height: 1.25;
}

.cf-captureGuideCopy p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.48rem;
  margin: 0.38rem 0 0;
  color: #364252;
  font-size: 0.78rem;
  line-height: 1.4;
}

.cf-captureGuideCopy p strong { font-weight: 780; }
.cf-captureGuideCopy p b { color: #b50e1d; font-size: 1rem; }

.cf-captureGuideCopy small {
  display: block;
  margin-top: 0.35rem;
  color: #7c7569;
  font-size: 0.68rem;
  line-height: 1.35;
}

.cf-captureGuideIllustration {
  grid-area: illustration;
  width: min(100%, 230px);
  min-width: 0;
  display: grid;
  place-items: center;
  justify-self: center;
}

.cf-captureGuideIllustration svg {
  width: 100%;
  height: auto;
  display: block;
}

.cf-guideScreen { fill: #fff; stroke: #d5b54f; stroke-width: 2; }
.cf-guideBrowserDot { fill: #c9ced5; }
.cf-guideBrowserLine { fill: none; stroke: #d9dde2; stroke-linecap: round; stroke-width: 4; }
.cf-guideErrorBlock { fill: #f5dfe1; }
.cf-guideSelectionBox { fill: none; stroke: #b50e1d; stroke-dasharray: 5 4; stroke-width: 2.4; }
.cf-guideArrow { fill: none; stroke: #b50e1d; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; }
.cf-guideNoteCard { fill: #fff; stroke: #d5b54f; stroke-width: 2; }
.cf-guideNoteNumber { fill: #b50e1d; }
.cf-guideNoteLine { fill: none; stroke: #aeb6c0; stroke-linecap: round; stroke-width: 4; }
.cf-guideCheck { fill: none; stroke: #2ea54f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.cf-guideStepBadge circle { fill: #b50e1d; stroke: #fff3c7; stroke-width: 2; }
.cf-guideStepText {
  fill: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  dominant-baseline: central;
  text-anchor: middle;
}

.cf-descriptionComposer {
  overflow: hidden;
  border: 1px solid #cfd5dd;
  border-radius: 16px;
  background: #f8fafc;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.cf-descriptionComposer:focus-within {
  border-color: #b50e1d;
  box-shadow: 0 0 0 3px rgba(181, 14, 29, 0.16);
}

.cf-descriptionTextarea {
  width: 100%;
  min-height: 160px;
  display: block;
  resize: vertical;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 0;
  color: #263547;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
}

.cf-descriptionTextarea:focus { outline: 0; }
.cf-descriptionTextarea::placeholder,
.cf-screenshotNoteTextarea::placeholder { color: #98a1ad; }

.cf-screenshotList {
  display: grid;
  gap: 0.65rem;
  margin: 0.9rem 1.35rem 0;
  padding: 0.72rem;
  border: 1px solid #d7dce2;
  border-radius: 16px;
  background: #f3f6f8;
}

.cf-screenshotListHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  color: #66717f;
  font-size: 0.74rem;
  line-height: 1.3;
}

.cf-screenshotListHeading strong { color: #77131b; }
.cf-screenshotListHeading > div {
  display: grid;
  justify-items: end;
  gap: 0.12rem;
  text-align: right;
}

.cf-autosaveStatus {
  color: #6a7480;
  font-size: 0.68rem;
  font-weight: 780;
}

.cf-autosaveStatus[data-autosave-state="saved"] { color: #258442; }
.cf-autosaveStatus[data-autosave-state="error"] { color: #a30d18; }

.cf-screenshotList ol {
  display: grid;
  gap: 0.62rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cf-screenshotRow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(145px, 0.72fr) minmax(0, 1.28fr);
  gap: 0.72rem;
  padding: 0.66rem;
  border: 1px solid #dfc97d;
  border-radius: 13px;
  background: #fffdf8;
  box-shadow: 0 4px 12px rgba(71, 49, 13, 0.06);
}

.cf-screenshotVisual,
.cf-screenshotNote {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.38rem;
}

.cf-screenshotNumber,
.cf-screenshotNoteHeading label {
  color: #77131b;
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.25;
}

.cf-screenshotThumbnailButton {
  position: relative;
  width: 100%;
  height: 94px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid #cbd2da;
  border-radius: 10px;
  background: #e9edf1;
  cursor: zoom-in;
}

.cf-screenshotThumbnail {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.cf-expandHint {
  position: absolute;
  right: 0.35rem;
  bottom: 0.35rem;
  padding: 0.22rem 0.4rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(91, 12, 20, 0.88);
  font-size: 0.61rem;
  font-weight: 800;
  line-height: 1;
}

.cf-screenshotMeta {
  overflow: hidden;
  color: #7a828d;
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-screenshotNoteHeading {
  min-height: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
}

.cf-screenshotNoteHeading label {
  min-width: 0;
  display: grid;
  gap: 0.18rem;
}

.cf-screenshotLocation {
  color: #485a6c;
  font-size: 0.68rem;
  font-weight: 780;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.cf-screenshotNoteTextarea {
  width: 100%;
  min-height: 94px;
  display: block;
  resize: vertical;
  padding: 0.62rem 0.7rem;
  border: 1px solid #cfd5dd;
  border-radius: 10px;
  color: #263547;
  background: #fff;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.42;
}

.cf-screenshotNoteTextarea:focus {
  border-color: #b50e1d;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(181, 14, 29, 0.12);
}

.cf-removeScreenshotButton {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border: 1px solid #e0a5aa;
  border-radius: 50%;
  color: #8f101a;
  background: #fff1f1;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.cf-screenshotLightbox {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(24, 23, 29, 0.72);
  backdrop-filter: blur(4px);
}

.cf-screenshotLightboxSurface {
  width: min(100%, 650px);
  max-height: calc(100dvh - 70px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #e4cf86;
  border-radius: 17px;
  background: #fffdf8;
  box-shadow: 0 20px 60px rgba(22, 13, 16, 0.42);
}

.cf-screenshotLightboxSurface > header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.72rem 0.8rem 0.68rem 0.9rem;
  border-bottom: 1px solid #eadcae;
}

.cf-screenshotLightboxSurface h3,
.cf-screenshotLightboxSurface header p { margin: 0; }
.cf-screenshotLightboxSurface h3 { color: #741018; font-size: 0.95rem; line-height: 1.3; }
.cf-screenshotLightboxSurface header p { margin-top: 0.14rem; color: #7a828d; font-size: 0.68rem; font-variant-numeric: tabular-nums; }

.cf-lightboxCloseButton {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid #e0a5aa;
  border-radius: 50%;
  color: #8f101a;
  background: #fff1f1;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.cf-screenshotLightboxImageFrame {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 0.72rem;
  background: #e9edf1;
}

.cf-screenshotLightboxImageFrame img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100dvh - 190px);
  display: block;
  object-fit: contain;
}

.cf-screenshotLightboxNote {
  flex: 0 0 auto;
  max-height: 6.5rem;
  margin: 0;
  overflow-y: auto;
  padding: 0.72rem 0.9rem;
  border-top: 1px solid #eadcae;
  color: #344154;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.cf-captureOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  background: rgba(20, 24, 31, 0.48);
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  outline: 0;
}

.cf-captureOverlay[data-has-selection="true"] { background: transparent; }
.cf-captureOverlay[data-capture-state="rendering"] { cursor: wait; }

.cf-captureInstruction {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: 50%;
  z-index: 2;
  min-height: 46px;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  transform: translateX(-50%);
  padding: 0.68rem 0.9rem;
  border: 1px solid rgba(255, 225, 137, 0.9);
  border-radius: 999px;
  color: #fff;
  background: rgba(63, 11, 17, 0.94);
  box-shadow: 0 9px 30px rgba(0, 0, 0, 0.3);
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

.cf-captureInstruction svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: #ffe59a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cf-captureInstruction kbd {
  flex: 0 0 auto;
  padding: 0.24rem 0.48rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 7px;
  color: #ffe9aa;
  background: rgba(255, 255, 255, 0.1);
  font: inherit;
  font-size: 0.7rem;
}

.cf-captureSelection {
  position: fixed;
  z-index: 1;
  border: 2px solid #ffd45a;
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(20, 24, 31, 0.58), 0 0 0 1px rgba(91, 8, 17, 0.5);
  pointer-events: none;
}

.cf-captureSelection > span {
  position: absolute;
  right: -2px;
  bottom: calc(100% + 7px);
  padding: 0.3rem 0.48rem;
  border-radius: 6px;
  color: #541018;
  background: #ffe79f;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  font-size: 0.7rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cf-captureProgress {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.cf-captureProgress > span {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.45);
  border-top-color: #ffd45a;
  border-radius: 50%;
  animation: captureSpin 700ms linear infinite;
}

@keyframes captureSpin {
  to { transform: rotate(360deg); }
}

@keyframes captureCameraInvite {
  0%, 58%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  66% { transform: translateY(-3px) rotate(-5deg) scale(1.06); }
  74% { transform: translateY(0) rotate(0deg) scale(1); }
  82% { transform: translateY(-2px) rotate(4deg) scale(1.04); }
  90% { transform: translateY(0) rotate(0deg) scale(1); }
}

.cf-formMeta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.35rem 0;
  color: #78818d;
  font-size: 0.73rem;
  line-height: 1.4;
}

.cf-formMeta p { margin: 0; }
.cf-formMeta span { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cf-error { margin: 0.8rem 1.35rem 0; color: #a30d18; font-size: 0.84rem; font-weight: 750; }

.cf-submitFooter {
  position: sticky;
  bottom: -1.1rem;
  z-index: 4;
  display: flex;
  justify-content: flex-end;
  margin-top: 0.9rem;
  padding: 0.9rem 1.35rem 1rem;
  border-top: 1px solid #eadfca;
  background: rgba(255, 253, 248, 0.98);
  box-shadow: 0 -8px 18px rgba(74, 48, 19, 0.04);
}

.cf-submitButton {
  min-width: 154px;
  min-height: 46px;
  padding: 0.72rem 1.1rem;
  border: 1px solid #940d18;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #c31323, #940d18);
  box-shadow: 0 7px 18px rgba(148, 13, 24, 0.2);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.1;
  cursor: pointer;
}

.cf-submitButton:hover:not(:disabled) {
  background: linear-gradient(145deg, #d0192a, #a00d1a);
}

.cf-submitButton:disabled {
  cursor: wait;
  opacity: 0.72;
}

.cf-submitFooter[data-submission-state="sent"] .cf-submitButton {
  border-color: #21823e;
  background: #2d9b4f;
  box-shadow: 0 7px 18px rgba(33, 130, 62, 0.18);
  cursor: default;
  opacity: 1;
}

@media (max-width: 1359px) {
  .cf-feedbackControls {
    position: static;
    width: min(820px, 100%);
    margin: 0.55rem auto 0;
    justify-content: flex-end;
    transform: none;
  }
}

@media (max-width: 520px) {
  .cf-feedbackControls { display: flex; justify-content: flex-end; gap: 0.4rem; }
  .cf-feedbackButton { width: auto; padding-inline: 0.72rem; }
  .cf-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 19px; }
  .cf-dialogSurface { max-height: calc(100dvh - 26px); }
  .cf-dialogHeader { padding: 0.9rem; }
  .cf-dialogIcon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
  .cf-dialogTitleGroup { gap: 0.6rem; }
  .cf-dialogTitleGroup h2 { font-size: 1.12rem; }
  .cf-dialogTitleGroup p { font-size: 0.76rem; }
  .cf-intro { padding: 0.9rem 0.9rem 0; font-size: 0.86rem; }
  .cf-textareaLabel { margin: 0.9rem 0.9rem 0; }
  .cf-descriptionHeading { align-items: flex-start; }
  .cf-bugCaptureGuide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "action"
      "copy"
      "illustration";
    gap: 0.72rem;
    margin: 0.9rem 0.9rem 0;
    padding: 0.82rem;
    border-radius: 15px;
    background: linear-gradient(135deg, #fffdf7 0%, #fff7d9 100%);
  }
  .cf-captureAction { width: 100%; min-height: 104px; }
  .cf-captureButton { width: 62px; height: 62px; }
  .cf-captureButton svg { width: 1.45rem; height: 1.45rem; }
  .cf-captureGuideCopy { text-align: center; }
  .cf-captureGuideCopy h3 { font-size: 0.92rem; }
  .cf-captureGuideCopy p { justify-content: center; gap: 0.2rem 0.35rem; font-size: 0.72rem; }
  .cf-captureGuideCopy small { font-size: 0.64rem; }
  .cf-captureGuideIllustration {
    width: min(100%, 230px);
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: -0.2rem;
  }
  .cf-descriptionTextarea { min-height: 145px; font-size: 0.86rem; }
  .cf-screenshotList { margin: 0.8rem 0.9rem 0; padding: 0.58rem; }
  .cf-screenshotListHeading { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .cf-screenshotListHeading > div { justify-items: start; text-align: left; }
  .cf-screenshotRow { grid-template-columns: minmax(0, 1fr); gap: 0.62rem; padding: 0.58rem; }
  .cf-screenshotThumbnailButton { height: 118px; }
  .cf-screenshotNoteTextarea { min-height: 88px; font-size: 0.78rem; }
  .cf-removeScreenshotButton { width: 36px; height: 36px; flex-basis: 36px; }
  .cf-screenshotLightbox { padding: 0.55rem; }
  .cf-screenshotLightboxSurface { max-height: calc(100dvh - 42px); border-radius: 14px; }
  .cf-lightboxCloseButton { width: 44px; height: 44px; flex-basis: 44px; }
  .cf-screenshotLightboxImageFrame img { max-height: calc(100dvh - 180px); }
  .cf-captureInstruction { width: calc(100vw - 24px); gap: 0.42rem; border-radius: 14px; font-size: 0.76rem; }
  .cf-captureInstruction kbd { display: none; }
  .cf-formMeta { padding: 0.62rem 0.9rem 0; font-size: 0.68rem; }
  .cf-formMeta p { max-width: 75%; }
  .cf-error { margin: 0.7rem 0.9rem 0; }
  .cf-submitFooter { bottom: -1.1rem; padding: 0.8rem 0.9rem 0.9rem; }
  .cf-submitButton { width: 100%; min-height: 48px; }
}

@media (max-width: 350px) {
  .cf-captureGuideCopy p {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.08rem;
  }

  .cf-captureGuideCopy p b {
    justify-self: center;
    line-height: 0.65;
    transform: rotate(90deg);
  }
}

@media (max-width: 760px) {
  .cf-feedbackControls[data-feedback-placement="header"] {
    width: auto;
    display: flex;
    gap: 0.35rem;
  }

  .cf-feedbackControls[data-feedback-placement="header"] .cf-feedbackButton {
    width: auto;
    min-width: 44px;
    padding-inline: 0.58rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .cf-feedbackButton { transition: none; }
  .cf-captureButton { transition: none; }
  .cf-captureButton svg { animation: none; }
  .cf-descriptionComposer { transition: none; }
  .cf-captureProgress > span { animation: none; }
}

:root{  --glass-pearl: linear-gradient(135deg, #fffdfb, #eee9e8);
  --glass-rim:
    inset 0 0 0 1px #fffffff2,
    inset 0 0 0 4px #ffffff59,
    inset 0 2px 1px #fff,
    inset 0 -2px 1px #9b88952e,
    0 0 0 1px #b6a9ad40;
  --glass-ruby-rim:
    inset 0 0 0 1px #ffffffa6,
    inset 0 0 0 3px #ffffff24,
    inset 0 2px 2px #ffffff73,
    inset 0 -2px 2px #3e00174d,
    0 0 0 1px #8b0e2433;}
.cf-dialog {
  border-color: #ffffffe6;
  border-radius: 30px;
  background: var(--glass-pearl) #f7f3f1;
  box-shadow: var(--glass-rim), 0 18px 46px #30232e33;
}
.cf-dialog::backdrop {
  background: #20232a66;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-feedback-mode] > header {
  background: transparent;
  border-bottom-color: #ded5d780;
}
[data-feedback-mode] > header > div > span {
  color: #9e1028;
  border-radius: 16px;
  background: linear-gradient(120deg, #fff6ef, #f0dce0);
  box-shadow: var(--glass-rim), 0 3px 8px #633d4612;
}
[data-feedback-mode] > header h2 {
  color: #9e1028;
  font-weight: 750;
}
[data-feedback-mode] button {
  -webkit-appearance: none;
  appearance: none;
  border-color: #ffffffe6;
  background: var(--glass-pearl) #f7f3f1;
  box-shadow: var(--glass-rim), 0 3px 8px #633d4612;
  transform: none;
}
[data-feedback-mode] > header > button {
  border-radius: 16px;
}
[data-feedback-capture-guide] {
  border-color: #ffffffe6;
  border-radius: 24px;
  background: linear-gradient(110deg, #fffdf9, #f0e9e9) #f7f3f1;
  box-shadow: var(--glass-rim), 0 5px 14px #633d4610;
}
[data-feedback-capture-guide] > :first-child::before {
  content: none;
}
[data-feedback-capture-guide] > :first-child > span {
  order: 0;
  padding: 0;
  border: 0;
  color: #9e1028;
  background: none;
  font-size: 0.8rem;
  line-height: 1.3;
}
[data-feedback-mode] [data-feedback-screenshot-button] {
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  padding: 0;
  border: 1px solid #b5233e;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(145deg, #bb1c3a, #a6102b) #ab102c;
  box-shadow: var(--glass-ruby-rim), 0 6px 12px #94102a29;
  transition: none;
}
[data-feedback-screenshot-button]::after {
  inset: 3px;
  border: 1px solid #ffffff40;
  box-shadow: none;
  animation: none;
  transform: none;
}
[data-feedback-screenshot-button] svg {
  width: 32px;
  height: 32px;
  animation: none;
  transform: none;
}
[data-feedback-mode] [data-feedback-screenshot-button]:active:not(:disabled) {
  box-shadow: var(--glass-ruby-rim), inset 0 3px 8px #6c09234d;
}
[data-feedback-screenshot-button]:focus-visible {
  outline: 3px solid #a6102b;
  outline-offset: 4px;
}

.capture-previews{display:flex;gap:10px;margin-top:16px}.capture-thumb{position:relative;width:130px}.capture-thumb img{width:130px;height:90px;object-fit:contain;background:white;border:1px solid #d6c5b5;border-radius:9px;cursor:zoom-in}.capture-thumb button{position:absolute;top:2px;right:2px;background:#fff;border:1px solid #d5c7bb;border-radius:50%;width:23px;height:23px}.capture-thumb.expanded{width:100%}.capture-thumb.expanded img{width:100%;height:auto;max-height:50vh;cursor:zoom-out}#capture-overlay{position:fixed;inset:0;z-index:100;cursor:crosshair;touch-action:none;background:#26354524}#capture-overlay>p{position:absolute;top:15px;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:20px;background:#fffef9;font-size:14px;box-shadow:0 4px 20px #0002;width:max-content;max-width:95%;pointer-events:none}#capture-overlay button{pointer-events:auto;color:#a11531;margin-left:14px;font-weight:800}#capture-region{position:absolute;border:2px dashed #b20f2f;background:#fff2;pointer-events:none}#toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);background:#28353cf0;color:white;border-radius:18px;padding:12px 18px;max-width:90vw;font-size:13px;z-index:120;opacity:0;pointer-events:none;transition:opacity .15s}#toast.visible{opacity:1}

.cf-dialog{font-family:Geist,Arial,sans-serif}.cf-feedbackButton{font-family:inherit}.cf-feedback-editor{padding:20px}.cf-feedback-editor label{display:block;margin-bottom:8px}.cf-feedback-editor textarea{width:100%;min-height:110px;font:inherit;padding:12px;border:1px solid #ded5d7;border-radius:14px}.cf-feedback-editor button{margin-top:12px}.cf-feedbackButton{display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:#fffaf7;color:#99142f;padding:13px 21px;font-weight:800}.cf-form{padding-bottom:1.1rem}