@geenius/feedback 0.1.0 → 0.3.0

package/packages/solidjs-css/dist/index.css

@@ -0,0 +1,965 @@
+/* src/styles.css */
+:root {
+  --feedback-bg: oklch(0.12 0.01 250);
+  --feedback-surface: oklch(0.16 0.01 250);
+  --feedback-border: oklch(0.22 0.01 250);
+  --feedback-text: oklch(0.95 0.01 250);
+  --feedback-text-muted: oklch(0.58 0.02 250);
+  --feedback-accent: oklch(0.65 0.20 265);
+  --feedback-open: oklch(0.65 0.20 245);
+  --feedback-review: oklch(0.72 0.18 60);
+  --feedback-planned: oklch(0.70 0.22 280);
+  --feedback-progress: oklch(0.65 0.20 265);
+  --feedback-done: oklch(0.72 0.18 155);
+  --feedback-declined: oklch(0.50 0.10 250);
+  --feedback-bug: oklch(0.60 0.25 25);
+  --feedback-feature: oklch(0.70 0.22 280);
+  --feedback-suggestion: oklch(0.72 0.18 60);
+  --feedback-general: oklch(0.65 0.20 245);
+  --feedback-radius: 0.75rem;
+}
+.feedback__card {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  transition: all 0.2s;
+  cursor: pointer;
+}
+.feedback__card:hover {
+  border-color: oklch(0.65 0.20 265 / 0.2);
+  background: oklch(1 0 0 / 0.04);
+}
+.feedback__card-info {
+  flex: 1;
+  min-width: 0;
+}
+.feedback__card-badges {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.25rem;
+}
+.feedback__card-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.9);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-bottom: 0.125rem;
+}
+.feedback__card-desc {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.4);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.feedback__card-meta {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.25);
+}
+.feedback__card--bug {
+  border-left: 3px solid var(--feedback-bug);
+}
+.feedback__card--feature {
+  border-left: 3px solid var(--feedback-feature);
+}
+.feedback__card--suggestion {
+  border-left: 3px solid var(--feedback-suggestion);
+}
+.feedback__card--general {
+  border-left: 3px solid var(--feedback-general);
+}
+.feedback__vote-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.125rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  border: none;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-variant-numeric: tabular-nums;
+}
+.feedback__vote-btn--inactive {
+  background: oklch(1 0 0 / 0.05);
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__vote-btn--inactive:hover {
+  background: oklch(1 0 0 / 0.1);
+  color: oklch(1 0 0 / 0.5);
+}
+.feedback__vote-btn--active {
+  background: oklch(0.65 0.20 265 / 0.15);
+  color: oklch(0.65 0.20 265);
+}
+.feedback__vote-btn-arrow {
+  font-size: 0.875rem;
+}
+.feedback__status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.625rem;
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 500;
+}
+.feedback__status-badge--open {
+  background: oklch(0.65 0.20 245 / 0.15);
+  color: oklch(0.65 0.20 245);
+}
+.feedback__status-badge--under-review {
+  background: oklch(0.72 0.18 60 / 0.15);
+  color: oklch(0.72 0.18 60);
+}
+.feedback__status-badge--planned {
+  background: oklch(0.70 0.22 280 / 0.15);
+  color: oklch(0.70 0.22 280);
+}
+.feedback__status-badge--in-progress {
+  background: oklch(0.65 0.20 265 / 0.15);
+  color: oklch(0.65 0.20 265);
+}
+.feedback__status-badge--done {
+  background: oklch(0.72 0.18 155 / 0.15);
+  color: oklch(0.72 0.18 155);
+}
+.feedback__status-badge--declined {
+  background: oklch(0.50 0.10 250 / 0.15);
+  color: oklch(0.50 0.10 250);
+}
+.feedback__priority-badge {
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 500;
+}
+.feedback__priority-badge--low {
+  background: oklch(0.58 0.10 250 / 0.15);
+  color: oklch(0.58 0.10 250);
+}
+.feedback__priority-badge--medium {
+  background: oklch(0.72 0.18 60 / 0.15);
+  color: oklch(0.72 0.18 60);
+}
+.feedback__priority-badge--high {
+  background: oklch(0.68 0.22 35 / 0.15);
+  color: oklch(0.68 0.22 35);
+}
+.feedback__priority-badge--critical {
+  background: oklch(0.60 0.25 25 / 0.15);
+  color: oklch(0.60 0.25 25);
+}
+.feedback__type-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 500;
+}
+.feedback__type-badge--bug {
+  background: oklch(0.60 0.25 25 / 0.15);
+  color: oklch(0.60 0.25 25);
+}
+.feedback__type-badge--feature {
+  background: oklch(0.70 0.22 280 / 0.15);
+  color: oklch(0.70 0.22 280);
+}
+.feedback__type-badge--suggestion {
+  background: oklch(0.72 0.18 60 / 0.15);
+  color: oklch(0.72 0.18 60);
+}
+.feedback__type-badge--general {
+  background: oklch(0.65 0.20 245 / 0.15);
+  color: oklch(0.65 0.20 245);
+}
+.feedback__widget-trigger {
+  position: fixed;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+  z-index: 40;
+  padding: 0.5rem 1rem;
+  border-radius: var(--feedback-radius) 0 0 var(--feedback-radius);
+  background: var(--feedback-accent);
+  color: white;
+  border: none;
+  cursor: pointer;
+  writing-mode: vertical-rl;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
+  box-shadow: -2px 0 12px oklch(0.65 0.20 265 / 0.3);
+}
+.feedback__widget-trigger:hover {
+  background: oklch(0.70 0.22 265);
+}
+.feedback__widget-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  justify-content: flex-end;
+}
+.feedback__widget-backdrop {
+  position: absolute;
+  inset: 0;
+  background: oklch(0 0 0 / 0.5);
+  backdrop-filter: blur(4px);
+}
+.feedback__widget-panel {
+  position: relative;
+  width: 100%;
+  max-width: 28rem;
+  background: oklch(0.06 0.01 250);
+  border-left: 1px solid var(--feedback-border);
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+.feedback__widget-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+.feedback__widget-title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--feedback-text);
+}
+.feedback__form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.feedback__form-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.03);
+  font-size: 0.875rem;
+  color: var(--feedback-text);
+  outline: none;
+}
+.feedback__form-input::placeholder {
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__form-input:focus {
+  border-color: oklch(0.65 0.20 265 / 0.4);
+}
+.feedback__form-textarea {
+  resize: none;
+  min-height: 6rem;
+}
+.feedback__form-error {
+  font-size: 0.6875rem;
+  color: oklch(0.60 0.25 25);
+}
+.feedback__form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+.feedback__type-selector {
+  display: flex;
+  gap: 0.375rem;
+}
+.feedback__type-tab {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  border: none;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.feedback__type-tab--inactive {
+  background: oklch(1 0 0 / 0.05);
+  color: oklch(1 0 0 / 0.5);
+}
+.feedback__type-tab--inactive:hover {
+  background: oklch(1 0 0 / 0.1);
+}
+.feedback__nps {
+  position: fixed;
+  bottom: 1.5rem;
+  right: 1.5rem;
+  z-index: 50;
+  width: 24rem;
+  border: 1px solid oklch(1 0 0 / 0.1);
+  border-radius: calc(var(--feedback-radius) * 1.5);
+  background: oklch(0.08 0.01 250);
+  padding: 1.5rem;
+  box-shadow: 0 8px 32px oklch(0 0 0 / 0.5);
+}
+.feedback__nps-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+.feedback__nps-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.9);
+}
+.feedback__nps-subtitle {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.4);
+  margin-bottom: 1rem;
+}
+.feedback__nps-scores {
+  display: flex;
+  gap: 0.25rem;
+}
+.feedback__nps-score-btn {
+  flex: 1;
+  padding: 0.625rem 0;
+  border: none;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  background: oklch(1 0 0 / 0.05);
+  color: oklch(1 0 0 / 0.5);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.feedback__nps-score-btn:hover {
+  background: oklch(1 0 0 / 0.1);
+}
+.feedback__nps-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.2);
+}
+.feedback__nps-results {
+  padding: 1.25rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+}
+.feedback__nps-results-score {
+  font-size: 1.875rem;
+  font-weight: 900;
+  font-variant-numeric: tabular-nums;
+}
+.feedback__nps-bar {
+  display: flex;
+  height: 1.25rem;
+  overflow: hidden;
+  border-radius: 9999px;
+  margin: 1rem 0;
+}
+.feedback__nps-bar-detractors {
+  background: oklch(0.60 0.25 25 / 0.7);
+}
+.feedback__nps-bar-passives {
+  background: oklch(0.72 0.18 60 / 0.7);
+}
+.feedback__nps-bar-promoters {
+  background: oklch(0.72 0.18 155 / 0.7);
+}
+.feedback__nps-breakdown {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  text-align: center;
+  font-size: 0.6875rem;
+}
+.feedback__board {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+.feedback__admin-table {
+  width: 100%;
+  font-size: 0.875rem;
+  border-collapse: collapse;
+}
+.feedback__admin-table th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-size: 0.625rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: oklch(1 0 0 / 0.4);
+  border-bottom: 1px solid oklch(1 0 0 / 0.08);
+}
+.feedback__admin-table td {
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid oklch(1 0 0 / 0.05);
+}
+.feedback__admin-table tr:hover {
+  background: oklch(1 0 0 / 0.02);
+}
+.feedback__admin-select {
+  padding: 0.25rem 0.5rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: calc(var(--feedback-radius) * 0.6);
+  background: oklch(1 0 0 / 0.05);
+  font-size: 0.6875rem;
+  color: var(--feedback-text);
+  outline: none;
+}
+.feedback__stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+  margin-bottom: 2rem;
+}
+.feedback__stat-card {
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+}
+.feedback__stat-icon {
+  font-size: 1.125rem;
+}
+.feedback__stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: oklch(1 0 0 / 0.9);
+}
+.feedback__stat-label {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.4);
+}
+.feedback__search {
+  width: 100%;
+  max-width: 16rem;
+  padding: 0.625rem 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.03);
+  font-size: 0.875rem;
+  color: var(--feedback-text);
+  outline: none;
+}
+.feedback__search::placeholder {
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__search:focus {
+  border-color: oklch(0.65 0.20 265 / 0.4);
+}
+.feedback__filter-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+.feedback__filter-tab {
+  padding: 0.375rem 0.75rem;
+  border: none;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+.feedback__filter-tab--active {
+  background: var(--feedback-accent);
+  color: white;
+}
+.feedback__filter-tab--inactive {
+  background: oklch(1 0 0 / 0.05);
+  color: oklch(1 0 0 / 0.5);
+}
+.feedback__filter-tab--inactive:hover {
+  background: oklch(1 0 0 / 0.1);
+}
+.feedback__btn {
+  padding: 0.5rem 1rem;
+  border-radius: calc(var(--feedback-radius) * 0.8);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  transition: all 0.15s;
+}
+.feedback__btn--primary {
+  background: var(--feedback-accent);
+  color: white;
+}
+.feedback__btn--primary:hover {
+  background: oklch(0.70 0.22 265);
+}
+.feedback__btn--outline {
+  border: 1px solid var(--feedback-border);
+  background: transparent;
+  color: oklch(1 0 0 / 0.6);
+}
+.feedback__btn--danger {
+  background: oklch(0.60 0.25 25 / 0.2);
+  color: oklch(0.60 0.25 25);
+}
+.feedback__skeleton {
+  background: oklch(1 0 0 / 0.05);
+  border-radius: var(--feedback-radius);
+  animation: feedback-pulse 1.5s ease-in-out infinite;
+}
+@keyframes feedback-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+.feedback__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 1rem;
+  text-align: center;
+}
+.feedback__empty-icon {
+  font-size: 3rem;
+  opacity: 0.2;
+  margin-bottom: 0.75rem;
+}
+.feedback__empty-text {
+  font-size: 0.875rem;
+  color: oklch(1 0 0 / 0.4);
+}
+.feedback__success {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 2rem;
+  text-align: center;
+}
+.feedback__success-icon {
+  font-size: 2.5rem;
+  margin-bottom: 0.75rem;
+}
+.feedback__success-text {
+  font-size: 1rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.9);
+  margin-bottom: 0.25rem;
+}
+.feedback__success-sub {
+  font-size: 0.875rem;
+  color: oklch(1 0 0 / 0.5);
+}
+.feedback__tag {
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  background: oklch(1 0 0 / 0.05);
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__close-btn {
+  padding: 0.375rem;
+  border: none;
+  background: transparent;
+  color: oklch(1 0 0 / 0.3);
+  cursor: pointer;
+  border-radius: calc(var(--feedback-radius) * 0.6);
+}
+.feedback__close-btn:hover {
+  color: oklch(1 0 0 / 0.5);
+  background: oklch(1 0 0 / 0.05);
+}
+.feedback__comment-thread {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.01);
+}
+.feedback__comment {
+  display: flex;
+  gap: 0.75rem;
+}
+.feedback__comment-avatar {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  background: oklch(0.65 0.20 265 / 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+}
+.feedback__comment-body {
+  flex: 1;
+}
+.feedback__comment-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+.feedback__comment-author {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.8);
+}
+.feedback__comment-time {
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__comment-text {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.7);
+  line-height: 1.4;
+}
+.feedback__comment-reply-btn {
+  margin-top: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.625rem;
+  border: none;
+  background: transparent;
+  color: oklch(0.65 0.20 265);
+  cursor: pointer;
+  transition: all 0.1s;
+}
+.feedback__comment-reply-btn:hover {
+  color: oklch(0.70 0.22 265);
+}
+.feedback__rating {
+  display: flex;
+  gap: 0.25rem;
+}
+.feedback__rating-star {
+  font-size: 1.5rem;
+  cursor: pointer;
+  opacity: 0.3;
+  transition: all 0.15s;
+}
+.feedback__rating-star--filled {
+  opacity: 1;
+  color: oklch(0.72 0.18 60);
+}
+.feedback__rating-star:hover {
+  opacity: 1;
+  transform: scale(1.1);
+}
+.feedback__sentiment-card {
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  text-align: center;
+}
+.feedback__sentiment-icon {
+  font-size: 2rem;
+  margin-bottom: 0.5rem;
+}
+.feedback__sentiment-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.8);
+  margin-bottom: 0.25rem;
+}
+.feedback__sentiment-count {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.4);
+}
+.feedback__response-panel {
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  padding: 1rem;
+}
+.feedback__response-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+.feedback__response-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.8);
+}
+.feedback__response-time {
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__response-body {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.7);
+  line-height: 1.5;
+}
+.feedback__response-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+}
+.feedback__response-btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.625rem;
+  border: none;
+  background: oklch(1 0 0 / 0.05);
+  color: oklch(1 0 0 / 0.5);
+  cursor: pointer;
+  border-radius: calc(var(--feedback-radius) * 0.6);
+  transition: all 0.1s;
+}
+.feedback__response-btn:hover {
+  background: oklch(1 0 0 / 0.1);
+  color: oklch(1 0 0 / 0.6);
+}
+.feedback__analytics {
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  padding: 1rem;
+}
+.feedback__analytics-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: oklch(1 0 0 / 0.8);
+  margin-bottom: 1rem;
+}
+.feedback__analytics-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.5rem;
+  height: 10rem;
+}
+.feedback__analytics-bar {
+  flex: 1;
+  border-radius: 0.25rem 0.25rem 0 0;
+  background:
+    linear-gradient(
+      to top,
+      oklch(0.65 0.20 265),
+      oklch(0.65 0.20 265 / 0.4));
+  transition: all 0.2s;
+  position: relative;
+}
+.feedback__analytics-bar:hover {
+  background:
+    linear-gradient(
+      to top,
+      oklch(0.70 0.22 265),
+      oklch(0.70 0.22 265));
+}
+.feedback__analytics-label {
+  position: absolute;
+  bottom: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.4);
+  white-space: nowrap;
+}
+.feedback__filter-panel {
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+  padding: 1rem;
+}
+.feedback__filter-section {
+  margin-bottom: 1rem;
+}
+.feedback__filter-section:last-child {
+  margin-bottom: 0;
+}
+.feedback__filter-section-title {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  color: oklch(1 0 0 / 0.4);
+  margin-bottom: 0.5rem;
+  letter-spacing: 0.05em;
+}
+.feedback__filter-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.feedback__filter-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+  font-size: 0.6875rem;
+}
+.feedback__filter-option input {
+  cursor: pointer;
+}
+.feedback__filter-option-label {
+  color: oklch(1 0 0 / 0.7);
+  cursor: pointer;
+}
+.feedback__tag-selector {
+  padding: 1rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.02);
+}
+.feedback__tag-selector-label {
+  display: block;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  color: oklch(1 0 0 / 0.6);
+  margin-bottom: 0.5rem;
+  text-transform: uppercase;
+}
+.feedback__tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.feedback__tag-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  background: oklch(0.65 0.20 265 / 0.15);
+  color: oklch(0.65 0.20 265);
+  font-size: 0.6875rem;
+  font-weight: 500;
+}
+.feedback__tag-remove {
+  margin-left: 0.25rem;
+  cursor: pointer;
+  font-weight: 700;
+  opacity: 0.6;
+  transition: opacity 0.1s;
+}
+.feedback__tag-remove:hover {
+  opacity: 1;
+}
+.feedback__form-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 1rem;
+  border-top: 1px solid var(--feedback-border);
+}
+.feedback__form-counter {
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.3);
+}
+.feedback__form-actions-group {
+  display: flex;
+  gap: 0.5rem;
+}
+.feedback__status-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.625rem;
+  font-weight: 500;
+}
+.feedback__status-indicator--new {
+  background: oklch(0.65 0.20 245 / 0.15);
+  color: oklch(0.65 0.20 245);
+}
+.feedback__status-indicator--in-review {
+  background: oklch(0.72 0.18 60 / 0.15);
+  color: oklch(0.72 0.18 60);
+}
+.feedback__status-indicator--implemented {
+  background: oklch(0.72 0.18 155 / 0.15);
+  color: oklch(0.72 0.18 155);
+}
+.feedback__detailed-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 0.5rem;
+}
+.feedback__detailed-stat-item {
+  padding: 0.75rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: var(--feedback-radius);
+  background: oklch(1 0 0 / 0.01);
+  text-align: center;
+}
+.feedback__detailed-stat-icon {
+  font-size: 1.25rem;
+  margin-bottom: 0.25rem;
+}
+.feedback__detailed-stat-value {
+  font-size: 1rem;
+  font-weight: 700;
+  color: oklch(1 0 0 / 0.9);
+}
+.feedback__detailed-stat-label {
+  font-size: 0.625rem;
+  color: oklch(1 0 0 / 0.4);
+  margin-top: 0.25rem;
+}
+.feedback__breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+.feedback__breadcrumb-item {
+  color: oklch(1 0 0 / 0.5);
+}
+.feedback__breadcrumb-item--active {
+  color: oklch(1 0 0 / 0.8);
+  font-weight: 500;
+}
+.feedback__breadcrumb-sep {
+  color: oklch(1 0 0 / 0.2);
+  margin: 0 0.25rem;
+}
+.feedback__pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
+  padding: 1rem;
+}
+.feedback__pagination-btn {
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--feedback-border);
+  border-radius: calc(var(--feedback-radius) * 0.6);
+  background: oklch(1 0 0 / 0.05);
+  color: oklch(1 0 0 / 0.6);
+  font-size: 0.6875rem;
+  cursor: pointer;
+  transition: all 0.1s;
+}
+.feedback__pagination-btn:hover:not(:disabled) {
+  background: oklch(1 0 0 / 0.1);
+  color: oklch(1 0 0 / 0.8);
+}
+.feedback__pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.feedback__pagination-info {
+  font-size: 0.6875rem;
+  color: oklch(1 0 0 / 0.5);
+}
+/*# sourceMappingURL=index.css.map */