/* Feedback is scoped separately so existing workbench tools retain their layout. */
.workspace-ui .fb-heading h1 { font-size: var(--frontend-title-size); font-weight: 650; letter-spacing: -.3px; }
.workspace-ui .fb-stat strong { font-size: 22px; }
.workspace-ui .fb-detail-title h3 { font-size: 16px; }
.fb-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; margin-left: auto; border-radius: 6px; background: #e45166; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.fb-nav-badge[hidden], .feedback-page [hidden] { display: none !important; }
[data-feedback-root], .feedback-page { min-width: 0; width: 100%; }
.feedback-page { color: #253047; --fb-line: #e7edf5; --fb-muted: #8490a4; }
.fb-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 24px; }
.fb-eyebrow { display: block; color: #6286ba; font-size: 12px; font-weight: 600; letter-spacing: 2px; margin-bottom: 7px; }
.fb-heading h1 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.6px; }
.fb-heading-mark { display: inline-flex; padding: 7px; border-radius: 10px; background: #e9f0ff; color: #447bf1; }
.fb-heading-mark .ui-icon { width: 19px; height: 19px; }
.fb-heading p { margin: 8px 0 0; font-size: 13px; color: #79869c; line-height: 1.65; }
.fb-heading-actions { display: flex; gap: 10px; flex-shrink: 0; }
.feedback-page .button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; min-height: 38px; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.feedback-page .button .ui-icon { width: 16px; height: 16px; }
.feedback-page .button-primary { background: #3474ff; border: 1px solid #3474ff; color: #fff; box-shadow: 0 3px 8px #3474ff16; }
.feedback-page .button-primary:hover { background: #2864e5; }
.feedback-page .button-ghost { border: 1px solid #dfe6f0; background: #fff; color: #5f6e85; }
.feedback-page .button-small { min-height: 31px; padding: 5px 11px; font-size: 12px; }
.feedback-page button:disabled, .feedback-page fieldset:disabled { opacity: .55; cursor: not-allowed; }
.feedback-page button:focus-visible, .feedback-page input:focus-visible, .feedback-page select:focus-visible, .feedback-page textarea:focus-visible, .fb-thread:focus-visible { outline: 2px solid #83aaff; outline-offset: 3px; }
.fb-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.fb-stat { display: flex; align-items: center; gap: 15px; padding: 17px 22px; border: 1px solid var(--fb-line); border-radius: 12px; background: #fff; }
.fb-stat-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: #edf3ff; color: #4b80ed; }
.fb-stat-icon .ui-icon { width: 21px; height: 21px; }
.fb-stat-pending { background: #fff6e7; color: #dca23c; }
.fb-stat-processing { background: #eeefff; color: #8073d8; }
.fb-stat-resolved { background: #eaf8f4; color: #36a383; }
.fb-stat > div { display: flex; align-items: baseline; justify-content: space-between; flex: 1; min-width: 0; gap: 12px; }
.fb-stat > div > span { color: #7a879a; font-size: 13px; white-space: nowrap; }
.fb-stat strong { font-size: 25px; font-weight: 650; color: #304362; line-height: 1.2; font-variant-numeric: tabular-nums; }
.fb-grid { display: grid; grid-template-columns: minmax(360px, .85fr) minmax(0, 1.15fr); align-items: start; gap: 24px; }
.fb-admin .fb-grid { grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); }
.fb-admin .fb-list { order: -1; }
.fb-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--fb-line); border-radius: 14px; box-shadow: 0 4px 18px #20366103; }
.fb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 83px; padding: 20px 24px; border-bottom: 1px solid #edf1f7; }
.fb-card-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 16px; font-weight: 650; line-height: 1.5; }
.fb-card-head p { margin: 5px 0 0; color: var(--fb-muted); font-size: 12px; line-height: 1.5; }
.fb-section-icon { display: inline-flex; color: #527ed0; }
.fb-section-icon .ui-icon { width: 18px; height: 18px; }
.fb-private { padding: 5px 7px; border-radius: 5px; background: #f4f7fc; color: #7d8da5; font-size: 10px; white-space: nowrap; }
.fb-list-count { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 21px; border-radius: 6px; padding: 0 6px; background: #f0f4fa; color: #7e8fa8; font-size: 12px; font-weight: 500; }
.fb-editor { padding: 22px 24px 24px; }
.feedback-page fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fb-editor fieldset { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: 14px; }
.fb-editor .fb-description-field, .fb-editor .fb-captcha, .fb-editor .fb-form-error, .fb-editor .fb-form-footer { grid-column: 1 / -1; }
.fb-field { display: flex; flex-direction: column; min-width: 0; gap: 9px; margin: 0 0 20px; }
.fb-field > span { display: flex; align-items: center; gap: 5px; color: #4b5d78; font-size: 13px; font-weight: 600; }
.fb-field em { font-size: 12px; color: #e17b7b; font-style: normal; }
.fb-field small { margin-left: auto; color: #9aa5b6; font-weight: 400; font-size: 11px; }
.feedback-page input, .feedback-page select, .feedback-page textarea { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid #dfe6f0; border-radius: 7px; background: #fff; color: #36465e; padding: 10px 12px; font-family: inherit; font-size: 13px; line-height: 1.6; box-shadow: none; }
.feedback-page input, .feedback-page select { height: 41px; }
.feedback-page input::placeholder, .feedback-page textarea::placeholder { color: #a0aabb; font-weight: 400; }
.feedback-page textarea { resize: vertical; min-height: 105px; }
.feedback-page textarea[name="description"] { min-height: 176px; height: 176px; }
.feedback-page input:focus, .feedback-page select:focus, .feedback-page textarea:focus { border-color: #7ea6fb; box-shadow: 0 0 0 3px #3474ff0a; }
.fb-editor .fb-field:has(select) { max-width: none; }
.fb-captcha { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 23px; }
.fb-captcha .fb-field { flex: 1; margin: 0; max-width: 210px; }
.fb-captcha-picture { display: inline-flex; align-items: center; justify-content: center; width: 125px; height: 41px; flex: 0 0 125px; padding: 0; border: 1px solid #e1e8f1; background: #f6f9fd; overflow: hidden; border-radius: 7px; }
.fb-captcha-picture img { display: block; height: 100%; width: 100%; object-fit: fill; }
.fb-captcha-picture span { color: #7d8ca1; font-size: 11px; }
.feedback-page .text-button { font-size: 12px; font-weight: 500; color: #5280cc; white-space: nowrap; }
.fb-captcha-refresh { height: 41px; }
.fb-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 18px; border-top: 1px solid #edf1f6; }
.fb-form-footer > span { flex: 1; font-size: 11px; color: #919cad; line-height: 1.6; }
.fb-form-footer .button { padding: 10px 18px; }
.fb-unread-filter { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; padding: 6px 9px; border: 1px solid #e9eef7; background: #f8faff; color: #7185a5; font-size: 11px; border-radius: 7px; }
.fb-unread-filter b { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; padding: 1px 3px; border-radius: 4px; background: #eaf0fc; color: #5f82be; font-weight: 600; }
.fb-unread-filter.active { border-color: #adc9ff; color: #3474ff; background: #edf3ff; }
.fb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 22px; background: #fdfdff; border-bottom: 1px solid #f0f3f8; }
.fb-search { display: flex; align-items: center; gap: 7px; flex: 1 1 190px; }
.fb-search input { min-width: 90px; }
.fb-filter-selects { display: flex; gap: 8px; flex: 1 1 210px; }
.fb-filters select { flex: 1; min-width: 96px; padding-left: 10px; }
.fb-filters input, .fb-filters select { height: 36px; font-size: 12px; }
.fb-records { padding: 2px 22px; min-height: 340px; }
.fb-ticket { position: relative; border-bottom: 1px solid #edf1f7; }
.fb-ticket:last-child { border-bottom: 0; }
.fb-ticket.selected { background: #f6f9ff; border-radius: 8px; box-shadow: -3px 0 #77a2f7; }
.fb-ticket-open { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 20px 4px 8px; text-align: left; background: transparent; border: 0; color: inherit; }
.fb-ticket-open:hover .fb-ticket-top strong { color: #3474ff; }
.fb-ticket-symbol { display: flex; align-items: center; justify-content: center; width: 34px; height: 38px; flex: 0 0 34px; border: 1px solid #edf1f8; border-radius: 9px; background: #f8faff; color: #7d9bce; }
.fb-ticket-symbol .ui-icon { width: 18px; height: 18px; }
.fb-ticket-content { display: flex; flex-direction: column; flex: 1; gap: 7px; min-width: 0; }
.fb-ticket-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fb-ticket-top strong { font-size: 14px; font-weight: 600; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.fb-new-dot { display: inline-block; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #f0717d; }
.fb-ticket-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: #8292a9; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.fb-ticket-meta > span + span { border-left: 1px solid #e1e7f0; padding-left: 10px; }
.fb-ticket-date { color: #a3adbc; font-size: 10px; }
.fb-status { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 4px 8px; border-radius: 5px; font-size: 11px; line-height: 1.4; background: #f0f3f7; color: #8a95a8; white-space: nowrap; }
.fb-status::before { content: ''; width: 4px; height: 4px; background: currentColor; border-radius: 50%; }
.fb-status-pending { background: #fff7e9; color: #c18c31; }
.fb-status-processing { background: #edf2ff; color: #5a80d4; }
.fb-status-resolved { background: #edf8f4; color: #3c9b7d; }
.fb-ticket-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 16px 50px; }
.fb-ticket-actions > span { font-size: 10px; color: #7293c6; line-height: 1.6; }
.fb-ticket-actions > div, .fb-detail-actions { display: flex; gap: 14px; }
.feedback-page .fb-delete { color: #a2aaba; }
.feedback-page .fb-delete:hover { color: #d65f6e; }
.fb-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 15px 24px; border-top: 1px solid #edf1f7; color: #8996a9; font-size: 11px; }
.fb-pagination > div { display: flex; align-items: center; gap: 12px; }
.fb-empty { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 338px; padding: 35px 20px; text-align: center; }
.fb-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 22px; border: 7px solid #f7f9ff; border-radius: 25px; background: #edf3ff; color: #8facdf; }
.fb-empty-icon .ui-icon { width: 30px; height: 30px; stroke-width: 1.4; }
.fb-empty h3 { margin: 0 0 10px; font-size: 15px; font-weight: 500; color: #657b9b; }
.fb-empty p { margin: 0; color: #9aa6b7; font-size: 12px; line-height: 1.7; }
.fb-detail-empty { min-height: 540px; }
.fb-detail-body { padding: 22px 24px 24px; }
.fb-detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fb-detail-title h3 { margin: 0; font-size: 17px; line-height: 1.65; font-weight: 600; overflow-wrap: anywhere; }
.fb-detail-title .fb-status { margin-top: 3px; }
.fb-detail-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 11px; color: #8b98ac; }
.fb-description { max-height: 300px; margin: 18px 0 24px; padding: 15px 17px; border: 1px solid #edf1f7; border-radius: 8px; background: #f9fbff; color: #60718a; font-size: 13px; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; }
.fb-conversation-heading { display: flex; align-items: center; justify-content: space-between; padding: 0 0 14px; border-bottom: 1px solid #eef2f7; }
.fb-conversation-heading h3 { margin: 0; font-size: 13px; font-weight: 600; color: #536681; }
.fb-conversation-heading span { font-size: 11px; color: #95a2b5; }
.fb-thread { max-height: 360px; overflow: auto; padding: 18px 2px 4px; margin: 0 0 22px; scrollbar-width: thin; }
.fb-message { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 19px; }
.fb-avatar { flex: 0 0 30px; height: 30px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #e5ebf5; border-radius: 9px; color: #8a9cb9; background: #f5f8fc; }
.fb-avatar .ui-icon { width: 15px; height: 15px; }
.fb-message-admin .fb-avatar { color: #4c81e6; background: #edf3ff; border-color: #dfe9ff; }
.fb-message > div { flex: 1; min-width: 0; }
.fb-message-author { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin: 4px 0 9px; font-size: 12px; color: #697f9e; }
.fb-message-author strong { font-weight: 600; }
.fb-message time { font-size: 10px; color: #a0adbf; }
.fb-message-body { padding: 12px 14px; border-radius: 0 9px 9px 9px; background: #f6f8fb; color: #5b708e; font-size: 12px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-message-admin .fb-message-body { background: #f0f5ff; color: #54729e; }
.fb-event { padding: 0 0 17px 41px; font-size: 10px; line-height: 1.8; color: #9aa8bd; }
.fb-event time { display: block; font-size: 10px; color: #acb5c4; }
.fb-awaiting { padding: 8px 0 18px; margin: 0; color: #93a1b5; text-align: center; font-size: 12px; }
.fb-reply-form .fb-field { margin-bottom: 16px; }
.fb-status-controls { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 20px; }
.fb-status-controls .fb-field { flex: 1; max-width: 210px; margin: 0; }
.fb-status-controls .button { height: 41px; }
.fb-form-error, .fb-list-error { color: #c15d66; font-size: 12px; line-height: 1.7; padding: 10px 12px; margin-bottom: 14px; background: #fff5f5; border: 1px solid #f5dce0; border-radius: 7px; }
.fb-list-error { margin: 15px 22px 0; }
.fb-service-message, .fb-update-notice { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; margin: 0 0 18px; border: 1px solid #dde8fd; border-radius: 8px; background: #f1f6ff; color: #6484b5; font-size: 12px; line-height: 1.7; }
.fb-reopen-note { margin: 0 0 18px; color: #98a3b5; font-size: 11px; line-height: 1.7; }
.topnav .fb-nav-badge { margin-left: 6px; }
.feedback-page { scroll-margin-top: 80px; }
@media (max-width: 600px) { .fb-editor fieldset { display: block; } }
@media (min-width: 1800px) { .fb-records { min-height: 440px; } .fb-card-head, .fb-editor, .fb-detail-body { padding-left: 30px; padding-right: 30px; } }
@media (max-width: 1300px) { .fb-grid, .fb-admin .fb-grid { gap: 18px; } .fb-stat { padding: 16px; gap: 10px; } .fb-stat > div { flex-direction: column; gap: 5px; } .fb-private { display: none; } .fb-card-head, .fb-editor, .fb-detail-body { padding-left: 18px; padding-right: 18px; } .fb-filters { padding: 15px 16px; } .fb-records { padding: 0 16px; } .fb-filter-selects { flex-basis: 100%; } }
@media (max-width: 1100px) { .fb-grid, .fb-admin .fb-grid { grid-template-columns: minmax(0, 1fr); } .fb-admin .fb-list { order: 0; } .fb-work { order: -1; } .fb-detail-empty { min-height: 230px; } .fb-search { flex-basis: 200px; } .fb-filter-selects { flex-basis: 220px; flex-grow: 0; } .fb-private { display: block; } }
@media (max-width: 600px) { .fb-heading { align-items: flex-start; flex-wrap: wrap; gap: 15px; margin-bottom: 18px; } .fb-heading h1 { font-size: 24px; } .fb-heading p { font-size: 12px; } .fb-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .fb-stat { padding: 14px; } .fb-stat > div { flex-direction: row; flex-wrap: wrap; } .fb-stat > div > span { font-size: 11px; } .fb-stat strong { font-size: 21px; } .fb-stat-icon { width: 32px; height: 34px; border-radius: 9px; } .fb-stat-icon .ui-icon { width: 17px; height: 17px; } .fb-heading-actions { width: 100%; } .fb-grid { gap: 18px; } .fb-card-head { padding: 16px; } .fb-card-head h2 { font-size: 15px; } .fb-card-head p { font-size: 11px; } .fb-private { display: none; } .fb-editor, .fb-detail-body { padding: 18px 16px; } .fb-captcha { flex-wrap: wrap; gap: 8px; } .fb-captcha .fb-field { max-width: none; flex-basis: 100%; } .fb-captcha-picture { flex-basis: 136px; width: 136px; } .fb-filter-selects { flex-basis: 100%; flex-grow: 1; } .fb-ticket-open { gap: 8px; padding-top: 17px; } .fb-ticket-symbol { display: none; } .fb-ticket-top strong { font-size: 13px; } .fb-ticket-actions { padding-left: 4px; gap: 6px; } .fb-ticket-actions > div { gap: 12px; } .fb-ticket-actions > span { max-width: 110px; } .fb-pagination { padding: 14px 16px; } .fb-pagination > div { gap: 9px; } .fb-unread-filter { font-size: 10px; gap: 4px; padding: 5px 7px; } .fb-detail-title h3 { font-size: 15px; } .fb-form-footer > span { flex-basis: 100%; } .fb-form-footer .button { width: 100%; } .fb-status-controls { flex-wrap: wrap; } .fb-status-controls .fb-field { max-width: none; } .fb-records { min-height: 280px; } .fb-empty { min-height: 280px; } }