#userFeedback {
  --uf-ink: #22312a;
  --uf-text: #4c5d54;
  --uf-muted: #819087;
  --uf-line: #e1e7e2;
  --uf-soft: #f6f8f6;
  --uf-green: #214b3d;
  margin-top: 16px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.user-feedback-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  min-height: 120px;
  padding: 26px 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 20px;
  background: radial-gradient(circle at 88% -35%, rgba(220, 184, 119, .3), transparent 38%), linear-gradient(125deg, #173d32, #285548 72%, #315e50);
  box-shadow: 0 16px 36px rgba(23, 61, 50, .12);
}
.user-feedback-hero::before { position: absolute; right: 27%; bottom: -110px; width: 190px; height: 190px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; content: ''; pointer-events: none; }
.user-feedback-hero-copy,
.user-feedback-hero-actions,
.user-feedback-overview { position: relative; z-index: 1; }
.user-feedback-hero .eyebrow { color: #dfbd84; font-size: 10px; font-weight: 750; letter-spacing: .22em; }
.user-feedback-hero h2 { margin: 8px 0 5px; color: #fff; font-size: 30px; font-weight: 720; letter-spacing: -.03em; }
.user-feedback-hero-copy p { margin: 0; color: rgba(238, 246, 242, .68); font-size: 13px; line-height: 1.6; }
.user-feedback-overview { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .13); border-radius: 12px; background: rgba(255, 255, 255, .075); backdrop-filter: blur(8px); }
.user-feedback-overview article { display: grid; min-width: 88px; padding: 13px 16px; border-left: 1px solid rgba(255, 255, 255, .12); }
.user-feedback-overview article:first-child { border-left: 0; }
.user-feedback-overview strong { color: #fff; font-family: Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1; }
.user-feedback-overview span { margin-top: 6px; color: rgba(238, 246, 242, .58); font-size: 10px; }
.user-feedback-hero-actions { display: flex; align-items: center; gap: 8px; }
.user-feedback-create,
.user-feedback-refresh { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 15px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 9px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .82); font-size: 13px; font-weight: 680; transition: .16s ease; }
.user-feedback-create { border-color: #fff; background: #fff; color: #244b3d; }
.user-feedback-create span { font-size: 16px; line-height: 1; }
.user-feedback-refresh svg { width: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.user-feedback-create:hover { background: #f4f8f6; transform: translateY(-1px); }
.user-feedback-refresh:hover { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); }
.user-feedback-create:disabled,
.user-feedback-refresh:disabled { cursor: wait; opacity: .5; transform: none; }

.user-feedback-board { margin-top: 14px; overflow: hidden; border: 1px solid #dfe5e0; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(28, 51, 42, .045); }
.user-feedback-toolbar { display: flex; align-items: stretch; gap: 10px; padding: 17px 20px; border-bottom: 1px solid #edf0ed; background: #fff; }
.user-feedback-search { display: flex; min-width: 280px; height: 48px; flex: 1; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid var(--uf-line); border-radius: 10px; background: #f7f9f7; box-shadow: inset 0 1px 2px rgba(37, 63, 51, .025); transition: .16s ease; }
.user-feedback-search:focus-within { border-color: #78978a; background: #fff; box-shadow: 0 0 0 3px rgba(65, 104, 86, .09); }
.user-feedback-search svg { width: 17px; flex: 0 0 auto; fill: none; stroke: #7f8f87; stroke-linecap: round; stroke-width: 1.8; }
.ops-home #userFeedback .user-feedback-search input { width: 100%; height: 46px; min-height: 0; padding: 0; border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: var(--uf-ink); font-size: 14px; }
.ops-home #userFeedback .user-feedback-search input:focus { border: 0 !important; background: transparent !important; box-shadow: none !important; }
.user-feedback-search input::placeholder { color: #98a49e; }
.user-feedback-filter { position: relative; display: block; width: 190px; height: 48px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--uf-line); border-radius: 10px; background: #fff; color: var(--uf-muted); transition: .16s ease; }
.user-feedback-filter:focus-within { border-color: #78978a; box-shadow: 0 0 0 3px rgba(65, 104, 86, .09); }
.user-feedback-filter > span { position: absolute; z-index: 1; top: 7px; left: 12px; color: #98a39d; font-size: 10px; font-weight: 680; line-height: 1; pointer-events: none; }
.user-feedback-filter[hidden] { display: none; }
.ops-home #userFeedback .user-feedback-filter select { width: 100%; height: 46px; min-height: 0; padding: 16px 34px 0 12px; border: 0; border-radius: 0; outline: 0; background-color: transparent; box-shadow: none; color: #31453b; font-size: 13px; font-weight: 620; }
.ops-home #userFeedback .user-feedback-filter select:focus { border: 0 !important; background-color: transparent !important; box-shadow: none !important; }
#userFeedbackCompanyField { width: 240px; }

.user-feedback-list-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 20px 12px; }
.user-feedback-list-head h3 { margin: 0 0 4px; color: var(--uf-ink); font-size: 19px; }
#userFeedbackStatus { margin: 0; color: var(--uf-muted); font-size: 12px; }
.user-feedback-scope-badge { padding: 7px 11px; border: 1px solid #d9e5dd; border-radius: 999px; background: #f1f6f2; color: #4d6c5e; font-size: 12px; font-weight: 700; }
.user-feedback-columns,
.user-feedback-card { display: grid; grid-template-columns: 40px minmax(180px, 230px) minmax(300px, 1fr) minmax(160px, 200px) 146px; align-items: center; column-gap: 18px; }
.user-feedback-columns { margin: 0 20px; padding: 10px 16px; border: 1px solid var(--uf-line); border-bottom: 0; border-radius: 11px 11px 0 0; background: #f5f7f5; color: #89958e; font-size: 11px; font-weight: 680; letter-spacing: .03em; }
.user-feedback-columns[hidden] { display: none; }
.user-feedback-list { margin: 0 20px 20px; overflow: hidden; border: 1px solid var(--uf-line); border-radius: 0 0 11px 11px; background: #fff; }
.user-feedback-list:has(.user-feedback-empty) { border: 0; border-radius: 12px; }
.user-feedback-card { position: relative; min-height: 98px; padding: 17px 16px; border-bottom: 1px solid #edf0ed; transition: background .15s ease; }
.user-feedback-card:last-child { border-bottom: 0; }
.user-feedback-card:hover { background: #fbfcfb; }
.user-feedback-card:hover::before { position: absolute; inset: 16px auto 16px 0; width: 3px; border-radius: 0 3px 3px 0; background: #628878; content: ''; }
.user-feedback-order { color: #a1aba5; font-family: Georgia, serif; font-size: 12px; }
.user-feedback-card header { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.user-feedback-avatar { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #dce7df; border-radius: 50%; background: #eef4ef; color: #315e4d; font-family: serif; font-size: 16px; font-weight: 700; }
.user-feedback-person { min-width: 0; }
.user-feedback-person strong,
.user-feedback-person span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-feedback-person strong { color: var(--uf-ink); font-size: 14px; }
.user-feedback-person span { margin-top: 4px; color: var(--uf-muted); font-size: 11px; }
.user-feedback-content { min-width: 0; }
.user-feedback-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.user-feedback-type { padding: 4px 8px; border-radius: 999px; background: #edf3ef; color: #507060; font-size: 11px; font-weight: 700; }
.user-feedback-card time { color: #99a29d; font-size: 11px; }
.user-feedback-message { display: -webkit-box; margin: 0; overflow: hidden; color: #3b4b43; font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.user-feedback-card footer { min-width: 0; }
.user-feedback-contact-label,
.user-feedback-card footer strong,
.user-feedback-card footer small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-feedback-contact-label { color: #929d97; font-size: 10px; }
.user-feedback-card footer strong { margin-top: 6px; color: #465950; font-size: 12px; }
.user-feedback-card footer small { margin-top: 3px; color: #a0a8a4; font-size: 10px; }
.user-feedback-actions { display: flex; justify-content: flex-end; gap: 4px; }
.user-feedback-actions button { min-height: 32px; padding: 0 9px; border: 1px solid #dfe5e1; border-radius: 7px; background: #fff; color: #52665c; font-size: 12px; font-weight: 650; transition: .15s ease; }
.user-feedback-actions button:hover { border-color: #9eb3a8; background: #eef4f0; color: #234c3d; }
.user-feedback-actions button.is-danger { border-color: transparent; color: #a05e58; }
.user-feedback-actions button.is-danger:hover { border-color: #efd5d1; background: #fff4f2; color: #8b443d; }

.user-feedback-empty { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; min-height: 0; padding: 28px 30px; border: 1px dashed #d5ddd7; border-radius: 12px; background: linear-gradient(110deg, #f8faf8, #fff); text-align: left; }
.user-feedback-empty > span { display: grid; grid-row: 1 / 3; width: 52px; height: 52px; place-items: center; border-radius: 15px; background: #eaf1ec; color: #486b5c; }
.user-feedback-empty svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.user-feedback-empty strong { align-self: end; color: var(--uf-ink); font-size: 16px; }
.user-feedback-empty p { align-self: start; max-width: 560px; margin: 0; color: var(--uf-muted); font-size: 12px; line-height: 1.65; }
.user-feedback-empty button { grid-column: 3; grid-row: 1 / 3; min-height: 40px; padding: 0 15px; border: 0; border-radius: 8px; background: var(--uf-green); color: #fff; font-size: 13px; font-weight: 680; }
.user-feedback-empty button b { margin-right: 4px; font-size: 14px; font-weight: 400; }
.user-feedback-pagination { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px 20px; color: var(--uf-muted); font-size: 12px; }
.user-feedback-pagination[hidden] { display: none; }
.user-feedback-pagination .ghost-button { min-height: 36px; padding: 0 12px; border-color: var(--uf-line); background: #fff; font-size: 12px; }

.user-feedback-dialog { width: min(650px, calc(100vw - 32px)); max-height: calc(100vh - 36px); padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: #fff; color: var(--uf-ink, #22312a); box-shadow: 0 30px 90px rgba(19, 42, 33, .28); }
.user-feedback-dialog::backdrop { background: rgba(18, 38, 31, .58); backdrop-filter: blur(5px); }
.user-feedback-dialog form { display: flex; max-height: calc(100vh - 36px); flex-direction: column; }
.user-feedback-dialog form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 23px 26px; border-bottom: 1px solid #dfe7e1; background: radial-gradient(circle at 88% -20%, rgba(211, 174, 117, .18), transparent 36%), linear-gradient(125deg, #eef5f1, #fff 74%); }
.user-feedback-dialog form > header span { color: #9a7440; font-size: 10px; font-weight: 750; letter-spacing: .18em; }
.user-feedback-dialog form > header h2 { margin: 7px 0 5px; color: #21382e; font-size: 23px; }
.user-feedback-dialog form > header p { margin: 0; color: #738078; font-size: 13px; }
.user-feedback-dialog form > header button { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid #d7e1db; border-radius: 8px; background: #fff; color: #66766e; font-size: 19px; }
.user-feedback-dialog-body { padding: 21px 26px 24px; overflow: auto; }
.user-feedback-dialog-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 18px; padding: 11px 13px; border: 1px solid #e1e7e2; border-radius: 10px; background: #f8faf8; }
.user-feedback-dialog-person > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #d8e5dc; border-radius: 50%; background: #ebf2ed; color: #315e4d; font-family: serif; font-size: 14px; font-weight: 700; }
.user-feedback-dialog-person strong,
.user-feedback-dialog-person small { display: block; }
.user-feedback-dialog-person strong { color: #2f4339; font-size: 14px; }
.user-feedback-dialog-person small { margin-top: 3px; color: #839088; font-size: 11px; }
.user-feedback-dialog-person time { color: #909a94; font-size: 11px; }
.user-feedback-dialog-body > label { display: block; margin-top: 16px; color: #34473d; font-size: 13px; font-weight: 680; }
.user-feedback-dialog-body > label[hidden] { display: none; }
.user-feedback-dialog-body > label > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.user-feedback-dialog-body > label small { color: #909b95; font-size: 10px; font-weight: 500; }
.user-feedback-dialog :is(textarea, input, select) { box-sizing: border-box; width: 100%; padding: 11px 12px; border: 1px solid #dce4de; border-radius: 9px; outline: 0; background: #fbfcfb; color: #304239; font: inherit; font-size: 14px; }
.user-feedback-dialog textarea { min-height: 150px; line-height: 1.7; resize: vertical; }
.user-feedback-dialog :is(textarea, input, select):focus { border-color: #759487; background: #fff; box-shadow: 0 0 0 3px rgba(62, 99, 82, .1); }
.user-feedback-dialog :is(textarea, input)[readonly] { border-color: #e5e9e6; background: #f5f7f5; color: #47554e; }
.user-feedback-dialog form > footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 26px; border-top: 1px solid #e2e7e3; background: #fafbfa; }
.user-feedback-dialog form > footer p { margin: 0; color: #77847c; font-size: 11px; }
.user-feedback-dialog form > footer > div { display: flex; flex: 0 0 auto; gap: 7px; }
.user-feedback-dialog form > footer button { min-height: 35px; }
.user-feedback-dialog form > footer button[hidden] { display: none; }

@media (max-width: 1180px) {
  .user-feedback-hero { grid-template-columns: minmax(260px, 1fr) auto; }
  .user-feedback-overview { grid-column: 1; grid-row: 2; justify-self: start; }
  .user-feedback-hero-actions { grid-column: 2; grid-row: 1 / 3; }
  .user-feedback-columns,
  .user-feedback-card { grid-template-columns: 30px minmax(150px, 180px) minmax(250px, 1fr) minmax(130px, 160px) 118px; column-gap: 12px; }
}
@media (max-width: 900px) {
  .user-feedback-toolbar { flex-wrap: wrap; }
  .user-feedback-search { min-width: calc(100% - 366px); }
  #userFeedbackCompanyField { width: 190px; }
  .user-feedback-filter { width: 156px; }
  .user-feedback-columns { display: none; }
  .user-feedback-list { border-radius: 11px; }
  .user-feedback-card { grid-template-columns: 28px minmax(150px, 190px) minmax(0, 1fr); row-gap: 12px; }
  .user-feedback-card footer { grid-column: 2; }
  .user-feedback-actions { grid-column: 3; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .user-feedback-board { border-radius: 15px; }
  .user-feedback-hero { grid-template-columns: 1fr; gap: 18px; padding: 23px 20px; }
  .user-feedback-overview { grid-column: 1; grid-row: auto; width: 100%; }
  .user-feedback-overview article { min-width: 0; flex: 1; }
  .user-feedback-hero-actions { grid-column: 1; grid-row: auto; width: 100%; }
  .user-feedback-create,
  .user-feedback-refresh { flex: 1; }
  .user-feedback-toolbar { align-items: stretch; flex-direction: column; padding: 16px 18px; }
  .user-feedback-search { box-sizing: border-box; width: 100%; min-width: 0; flex: none; }
  #userFeedbackCompanyField,
  .user-feedback-filter { width: 100%; }
  .user-feedback-list-head { padding: 18px 18px 12px; }
  .user-feedback-list { margin: 0 18px 18px; }
  .user-feedback-empty { grid-template-columns: 46px minmax(0, 1fr); gap: 4px 13px; padding: 22px 18px; }
  .user-feedback-empty > span { width: 46px; height: 46px; }
  .user-feedback-empty button { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 8px; }
  .user-feedback-card { grid-template-columns: 24px minmax(0, 1fr); padding: 16px 13px; }
  .user-feedback-order { grid-row: 1 / 5; align-self: start; padding-top: 3px; }
  .user-feedback-card header,
  .user-feedback-content,
  .user-feedback-card footer,
  .user-feedback-actions { grid-column: 2; }
  .user-feedback-actions { justify-content: flex-start; }
  .user-feedback-dialog { width: calc(100vw - 18px); max-height: calc(100vh - 18px); }
  .user-feedback-dialog form { max-height: calc(100vh - 18px); }
  .user-feedback-dialog form > header,
  .user-feedback-dialog-body,
  .user-feedback-dialog form > footer { padding-right: 16px; padding-left: 16px; }
  .user-feedback-dialog form > footer { align-items: stretch; flex-direction: column; }
  .user-feedback-dialog form > footer > div { width: 100%; }
  .user-feedback-dialog form > footer button { flex: 1; }
}