/* The feedback form, in the app's own dark glass, one column that fits a phone. */
#feedback-dialog { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(560px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px;
  background: #0f141d; color: #cbd5e1; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9); overflow: auto; font-family: inherit; }
#feedback-dialog::backdrop { background: rgba(4, 6, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fb-form, .fb-done { display: grid; gap: 16px; padding: 24px 24px 22px; }
.fb-top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.fb-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); color: #e2e8f0; }
.fb-top h2, .fb-done h2 { margin: 0 0 4px; color: #fff; font: 400 1.35rem/1.25 Georgia, "Times New Roman", serif; }
.fb-top p, .fb-done p { margin: 0; color: #94a3b8; font-size: .92rem; line-height: 1.5; }
.fb-close { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: #94a3b8; font-size: 1.2rem; cursor: pointer; }
.fb-form fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.fb-form legend, .fb-form label { color: #e2e8f0; font-size: .88rem; font-weight: 500; }
.fb-form label { display: grid; gap: 6px; }
.fb-form em { color: #64748b; font-style: normal; font-weight: 400; }
.fb-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 12px; background: #0a0e15; border: 1px solid rgba(255, 255, 255, .08); }
.fb-seg label { display: block; }
.fb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fb-seg span { display: block; padding: 8px 6px; border-radius: 9px; text-align: center; color: #94a3b8; font-size: .85rem; cursor: pointer; }
.fb-seg input:checked + span { background: #1e2633; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.fb-seg input:focus-visible + span { outline: 2px solid #38bdf8; outline-offset: 1px; }
.fb-form input[type=text], .fb-form input[type=number], .fb-form input[type=email], .fb-form textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .12); background: #0a0e15;
  color: #f1f5f9; font: inherit; font-size: .95rem; }
.fb-form textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.fb-form input:focus, .fb-form textarea:focus { outline: none; border-color: rgba(56, 189, 248, .6); }
.fb-preview { margin: 0; min-height: 1.2em; color: #64748b; font-size: .82rem; }
.fb-pair { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; }
.fb-count { justify-self: end; color: #475569; font-size: .75rem; font-weight: 400; }
.fb-check { grid-template-columns: auto 1fr; align-items: start; gap: 10px !important; font-weight: 400 !important; color: #cbd5e1 !important; line-height: 1.45; }
.fb-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: #38bdf8; }
.fb-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.fb-note { margin: 0; color: #64748b; font-size: .82rem; }
.fb-status { margin: 0; min-height: 1.2em; color: #94a3b8; font-size: .88rem; }
.fb-status.bad { color: #fca5a5; }
.fb-actions { display: flex; justify-content: flex-end; }
/* Filled pill: the action a block exists for. Light-to-deep cyan fill, dark text, a lit top edge and a soft
   glow; the arrow sits in its own disc and steps forward on hover. */
.fb-send, .fb-close-done {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; box-sizing: border-box;
  padding: 0 7px 0 20px; border-radius: 999px; border: 1px solid rgba(186, 230, 253, .6);
  background: linear-gradient(180deg, #8fdcfd 0%, #38bdf8 52%, #0ea5e9 100%);
  color: #04121d; font: inherit; font-weight: 650; font-size: .9rem; line-height: 1; letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(3, 105, 161, .35), 0 10px 26px -12px rgba(56, 189, 248, .85);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}
.fb-send::after, .fb-close-done::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(4, 18, 29, .13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .22s ease, background-color .22s ease;
}
.fb-send:hover, .fb-close-done:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(3, 105, 161, .35), 0 16px 34px -12px rgba(56, 189, 248, .95); }
.fb-send:hover::after, .fb-close-done:hover::after { transform: translateX(2px); background-color: rgba(4, 18, 29, .2); }
.fb-send:active, .fb-close-done:active { transform: translateY(0); filter: brightness(.96); }
.fb-send:focus-visible, .fb-close-done:focus-visible { outline: 2px solid #bae6fd; outline-offset: 3px; }
.fb-send:disabled { opacity: .55; cursor: wait; filter: saturate(.6); transform: none; }
.fb-done { justify-items: center; text-align: center; padding: 40px 28px 32px; }
.fb-done .fb-mark { width: 52px; height: 52px; border-radius: 50%; color: #86efac; border-color: rgba(134, 239, 172, .35); }
/* Outline pill: the quieter action beside a filled one. Glass fill, fine border, cyan on hover. */
.db-feedback {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box;
  padding: 0 16px 0 16px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .26);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  color: #e2e8f0; font: inherit; font-size: .86rem; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px -14px rgba(0, 0, 0, .8);
  transition: border-color .22s ease, color .22s ease, background .22s ease;
}
.db-feedback:hover, .db-feedback:focus-visible { border-color: rgba(56, 189, 248, .55); color: #fff; background: linear-gradient(180deg, rgba(56, 189, 248, .12), rgba(56, 189, 248, .04)); }
.db-feedback { margin-top: 14px; }
@media (max-width: 480px) { .fb-pair { grid-template-columns: 1fr; } .fb-form { padding: 20px 18px 18px; } }
#feedback-dialog [hidden] { display: none !important; }