/* ============================================ */
/* RESET & BASE                                 */
/* ============================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0C0F14;
  color: #C8D6DF;
  min-height: 100vh;
}

.hidden { display: none !important; }

/* ============================================ */
/* LOGIN                                        */
/* ============================================ */
#login-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.login-card {
  background: #151A23;
  border: 1px solid #1E2736;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
}

.login-logo {
  font-size: 28px;
  font-weight: 800;
  color: #2D8BFF;
  margin-bottom: 4px;
}

.login-card h2 {
  font-size: 16px;
  font-weight: 400;
  color: #6B7D8E;
  margin-bottom: 32px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #6B7D8E;
  margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: #0C0F14;
  border: 1px solid #1E2736;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  color: #C8D6DF;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: #2D8BFF;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.error-text {
  color: #F06B6B;
  font-size: 13px;
  margin-top: 12px;
}

.env-url {
  font-size: 12px;
  color: #566575;
  margin-bottom: 16px;
  padding: 6px 10px;
  background: #0C0F14;
  border-radius: 6px;
  font-family: monospace;
  word-break: break-all;
}

.env-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.env-badge.env-production {
  background: #0F2916;
  color: #34C759;
}

.env-badge.env-staging {
  background: #332800;
  color: #E09B3D;
}

.env-badge.env-preprod {
  background: #1A1533;
  color: #9B8AFF;
}

.env-badge.env-local {
  background: #0F1E33;
  color: #5BA8F5;
}

/* ============================================ */
/* BUTTONS                                      */
/* ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #C8D6DF;
  background: #1E2736;
}

.btn:hover { background: #283548; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: #2D8BFF; color: #fff; }
.btn-primary:hover { background: #1a6fd4; }

.btn-success { background: #34C759; color: #fff; }
.btn-success:hover { background: #28a745; }

.btn-danger { background: #E8364B; color: #fff; }
.btn-danger:hover { background: #c62d3e; }

.btn-warning { background: #E09B3D; color: #fff; }
.btn-warning:hover { background: #c5862e; }

.btn-sm { padding: 6px 14px; font-size: 13px; }

.btn-full { width: 100%; }

.btn-group {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* ============================================ */
/* APP LAYOUT (sidebar + main)                  */
/* ============================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ============================================ */
/* SIDEBAR                                      */
/* ============================================ */
.sidebar {
  width: 220px;
  background: #111620;
  border-right: 1px solid #1E2736;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 60;
}

.sidebar-logo {
  font-size: 22px;
  font-weight: 800;
  color: #2D8BFF;
  padding: 20px 20px 24px;
}

.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #6B7D8E;
  background: none;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
}

.nav-item:hover {
  background: #1A2233;
  color: #C8D6DF;
}

.nav-item.active {
  background: #1A2A45;
  color: #2D8BFF;
}

.nav-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid #1E2736;
}

/* ============================================ */
/* MAIN CONTENT                                 */
/* ============================================ */
.main-content {
  flex: 1;
  margin-left: 220px;
  min-height: 100vh;
  min-width: 0;
  overflow: hidden;
  overflow-y: auto;
}

/* ============================================ */
/* TOP BAR                                      */
/* ============================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: #111620;
  border-bottom: 1px solid #1E2736;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: #EBF0F4;
}

.topbar-right {
  display: flex;
  gap: 8px;
}

/* ============================================ */
/* STATS BAR                                    */
/* ============================================ */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 20px 24px;
}

.stat-card {
  background: #151A23;
  border: 1px solid #1E2736;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  border-left: 4px solid #2D8BFF;
}

.stat-card.stat-orange { border-left-color: #E09B3D; }
.stat-card.stat-green { border-left-color: #34C759; }
.stat-card.stat-red { border-left-color: #E8364B; }

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #EBF0F4;
}

.stat-label {
  font-size: 13px;
  color: #6B7D8E;
  margin-top: 4px;
}

/* ============================================ */
/* TABS                                         */
/* ============================================ */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  border-bottom: 1px solid #1E2736;
}

.tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  background: none;
  border: none;
  color: #6B7D8E;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}

.tab:hover { color: #C8D6DF; }
.tab.active { color: #2D8BFF; border-bottom-color: #2D8BFF; }

.tab-content { padding: 20px 24px; }

/* ============================================ */
/* REPORT LIST                                  */
/* ============================================ */
.report-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loading {
  text-align: center;
  padding: 40px;
  color: #6B7D8E;
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6B7D8E;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state-text {
  font-size: 16px;
}

/* ============================================ */
/* REPORT CARD                                  */
/* ============================================ */
.report-card {
  background: #151A23;
  border: 1px solid #1E2736;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.report-card:hover {
  border-color: #2D8BFF;
  transform: translateY(-1px);
}

.report-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.report-card-reason {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reason-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
}

.reason-spam { background: #332800; color: #E09B3D; }
.reason-harassment { background: #331418; color: #F06B6B; }
.reason-inappropriate { background: #331418; color: #F06B6B; }
.reason-fake { background: #0F1E33; color: #5BA8F5; }
.reason-impersonation { background: #1A1533; color: #9B8AFF; }
.reason-other { background: #1E2736; color: #6B7D8E; }

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  text-transform: uppercase;
}

.status-pending { background: #332800; color: #E09B3D; }
.status-reviewing { background: #0F1E33; color: #5BA8F5; }
.status-appealed { background: #1A1533; color: #9B8AFF; }
.status-resolved_valid { background: #0F2916; color: #34C759; }
.status-resolved_invalid { background: #1E2736; color: #6B7D8E; }

.report-card-users {
  display: flex;
  gap: 24px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #6B7D8E;
}

.report-card-users strong { color: #C8D6DF; }

.report-card-preview {
  font-size: 14px;
  color: #8A9AAD;
  line-height: 1.5;
  padding: 12px;
  background: #0C0F14;
  border-radius: 8px;
  border-left: 3px solid #1E2736;
}

.report-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 12px;
  color: #566575;
}

.report-card-type {
  padding: 2px 8px;
  background: #1E2736;
  border-radius: 4px;
  font-size: 11px;
  text-transform: uppercase;
}

/* ============================================ */
/* MODAL                                        */
/* ============================================ */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
}

.modal-content {
  position: relative;
  background: #151A23;
  border: 1px solid #1E2736;
  border-radius: 16px;
  width: 95%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #1E2736;
  border: none;
  color: #C8D6DF;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.modal-close:hover { background: #283548; }

/* ============================================ */
/* DETAIL VIEW (inside modal)                   */
/* ============================================ */
.detail-header {
  margin-bottom: 24px;
}

.detail-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: #EBF0F4;
  margin-bottom: 8px;
}

.detail-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: #6B7D8E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.detail-users {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-user {
  background: #0C0F14;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1E2736;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #2D8BFF;
  flex-shrink: 0;
  overflow: hidden;
}

.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-user-info {
  min-width: 0;
}

.detail-user-name {
  font-weight: 600;
  font-size: 14px;
  color: #C8D6DF;
}

.detail-user-role {
  font-size: 12px;
  color: #6B7D8E;
}

.detail-content-box {
  background: #0C0F14;
  border: 1px solid #1E2736;
  border-radius: 10px;
  padding: 20px;
}

.detail-content-text {
  font-size: 15px;
  line-height: 1.6;
  color: #C8D6DF;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-content-image {
  margin-top: 16px;
  border-radius: 8px;
  overflow: hidden;
  max-height: 400px;
}

.detail-content-image img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  display: block;
  background: #000;
}

.detail-description {
  background: #0C0F14;
  border-radius: 10px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #8A9AAD;
  font-style: italic;
}

/* appeal section */
.appeal-box {
  background: #131828;
  border: 1px solid #1E2736;
  border-radius: 10px;
  padding: 20px;
}

.appeal-reason {
  font-size: 14px;
  line-height: 1.5;
  color: #C8D6DF;
  margin-bottom: 8px;
}

.appeal-meta {
  font-size: 12px;
  color: #6B7D8E;
}

/* AI section */
.ai-decision {
  background: #0C0F14;
  border-radius: 10px;
  padding: 16px;
}

.ai-decision-result {
  font-weight: 600;
  margin-bottom: 8px;
}

.ai-decision-reasoning {
  font-size: 13px;
  color: #8A9AAD;
  line-height: 1.5;
}

/* action form */
.action-form {
  background: #0C0F14;
  border: 1px solid #1E2736;
  border-radius: 10px;
  padding: 20px;
}

.action-form h3 {
  margin-bottom: 16px;
}

.action-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.action-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* ============================================ */
/* APPEAL STATUS BADGES                         */
/* ============================================ */
.appeal-status-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}

.appeal-status-pending {
  background: #332800;
  color: #E09B3D;
}

.appeal-status-approved {
  background: #0F2916;
  color: #34C759;
}

.appeal-status-rejected {
  background: #331418;
  color: #F06B6B;
}

/* Appeal card borders */
.appeal-pending {
  border-left: 4px solid #E09B3D;
}

.appeal-resolved {
  border-left: 4px solid #283548;
  opacity: 0.75;
}

.appeal-resolved:hover {
  opacity: 1;
}

/* Admin response preview in appeals list */
.admin-response-preview {
  margin-top: 8px;
  padding: 8px 12px;
  background: #0C0F14;
  border-radius: 6px;
  font-size: 13px;
  color: #8A9AAD;
  border-left: 3px solid #2D8BFF;
}

.admin-label {
  color: #2D8BFF;
  font-weight: 600;
}

/* Admin response in modal detail */
.admin-response-box {
  margin-top: 12px;
  padding: 12px;
  background: #0C0F14;
  border-radius: 8px;
  font-size: 13px;
  color: #C8D6DF;
  border-left: 3px solid #2D8BFF;
}

/* ============================================ */
/* BANNED USER CARDS                            */
/* ============================================ */
.banned-user-card {
  background: #151A23;
  border: 1px solid #1E2736;
  border-radius: 12px;
  overflow: hidden;
  border-left: 4px solid #E8364B;
}

.banned-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.2s;
}

.banned-user-header:hover {
  background: #1A2233;
}

.banned-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.banned-user-name {
  font-weight: 600;
  font-size: 15px;
  color: #C8D6DF;
}

.banned-user-meta {
  font-size: 12px;
  color: #6B7D8E;
  margin-top: 2px;
}

.banned-user-toggle {
  color: #6B7D8E;
  font-size: 14px;
}

.toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
}

.banned-user-details {
  padding: 0 20px 20px;
  border-top: 1px solid #1E2736;
}

.banned-user-reason {
  padding: 12px;
  background: #0C0F14;
  border-radius: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: #8A9AAD;
}

.banned-user-reason strong {
  color: #C8D6DF;
}

/* ============================================ */
/* STRIKE LIST                                  */
/* ============================================ */
.strikes-list {
  margin-top: 16px;
}

.strikes-list h4 {
  font-size: 13px;
  font-weight: 600;
  color: #6B7D8E;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.strike-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #0C0F14;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.strike-number {
  font-weight: 700;
  color: #E8364B;
  min-width: 24px;
}

.strike-reason {
  flex: 1;
  color: #C8D6DF;
  line-height: 1.4;
}

.strike-date {
  color: #566575;
  font-size: 12px;
  white-space: nowrap;
}

/* ============================================ */
/* RESET STRIKES FORM                           */
/* ============================================ */
.reset-strikes-form {
  margin-top: 20px;
  padding: 16px;
  background: #0C0F14;
  border: 1px solid #1E2736;
  border-radius: 10px;
}

.reset-strikes-form h4 {
  font-size: 14px;
  font-weight: 600;
  color: #C8D6DF;
  margin-bottom: 12px;
}

/* ============================================ */
/* INFLUENCER SELECTOR                          */
/* ============================================ */
.influencer-selector {
  padding: 20px 24px 0;
}

.influencer-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 16px;
}

.influencer-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  background: #151A23;
  border: 2px solid #1E2736;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 140px;
  text-align: center;
}

.influencer-card:hover {
  border-color: #2D8BFF;
  transform: translateY(-2px);
}

.influencer-card.active {
  border-color: #2D8BFF;
  background: #1A2A45;
}

.influencer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1E2736;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #2D8BFF;
  overflow: hidden;
}

.influencer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.influencer-name {
  font-size: 13px;
  font-weight: 600;
  color: #C8D6DF;
}

.influencer-handle {
  font-size: 11px;
  color: #6B7D8E;
}

/* ============================================ */
/* COMMUNITY POSTS                              */
/* ============================================ */
.community-posts {
  padding: 20px 24px;
}

.post-card {
  background: #151A23;
  border: 1px solid #1E2736;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  transition: border-color 0.2s;
  overflow: hidden;
  min-width: 0;
}

.post-card:hover {
  border-color: #283548;
}

.post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1E2736;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #2D8BFF;
  overflow: hidden;
}

.post-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-author-name {
  font-size: 14px;
  font-weight: 600;
  color: #C8D6DF;
}

.post-author-date {
  font-size: 12px;
  color: #566575;
}

.post-category {
  padding: 3px 10px;
  background: #1E2736;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #6B7D8E;
}

.post-content {
  font-size: 14px;
  line-height: 1.6;
  color: #C8D6DF;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  margin-bottom: 12px;
}

.post-media {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  max-width: 300px;
  max-height: 600px;
}

.post-media img {
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: contain;
  display: block;
}

.post-media video {
  width: 100%;
  max-height: 800px;
  display: block;
}

.post-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  color: #6B7D8E;
}

.post-stat {
  display: flex;
  align-items: center;
  gap: 4px;
}

.post-actions {
  margin-left: auto;
}

.post-actions .btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* Load more button */
.load-more-container {
  text-align: center;
  padding: 20px;
}

/* ============================================ */
/* COMMENTS                                     */
/* ============================================ */
.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-card {
  background: #0C0F14;
  border: 1px solid #1E2736;
  border-radius: 10px;
  padding: 14px;
}

.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1E2736;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #2D8BFF;
  overflow: hidden;
  flex-shrink: 0;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comment-author-name {
  font-size: 13px;
  font-weight: 600;
  color: #C8D6DF;
}

.comment-date {
  font-size: 11px;
  color: #566575;
  margin-left: 8px;
}

.comment-text {
  font-size: 14px;
  line-height: 1.5;
  color: #C8D6DF;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-likes {
  margin-top: 6px;
  font-size: 12px;
  color: #6B7D8E;
}

.comment-replies {
  margin-top: 10px;
  margin-left: 20px;
  padding-left: 16px;
  border-left: 2px solid #1E2736;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-replies .comment-card {
  background: #10141C;
  border-color: #1A2233;
}

/* ============================================ */
/* RESPONSIVE                                   */
/* ============================================ */
@media (max-width: 768px) {
  .sidebar {
    width: 60px;
  }

  .sidebar-logo {
    font-size: 14px;
    padding: 16px 8px;
    text-align: center;
  }

  .nav-label {
    display: none;
  }

  .nav-item {
    justify-content: center;
    padding: 12px;
  }

  .nav-icon {
    margin: 0;
  }

  .sidebar-footer {
    padding: 8px;
  }

  .sidebar-footer .btn {
    font-size: 11px;
    padding: 6px;
  }

  .main-content {
    margin-left: 60px;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-users {
    grid-template-columns: 1fr;
  }

  .action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-content {
    padding: 16px;
    width: 98%;
  }

  .influencer-card {
    min-width: 80px;
    padding: 10px 10px;
  }

  .influencer-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .influencer-name {
    font-size: 11px;
  }

  .influencer-handle {
    font-size: 10px;
  }

  .community-posts {
    padding: 12px;
  }

  .post-card {
    padding: 14px;
    overflow: hidden;
  }

  .post-content {
    font-size: 13px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .post-media {
    max-width: 100%;
  }

  .post-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .post-footer {
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
  }

  .comment-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .comment-replies {
    margin-left: 10px;
    padding-left: 10px;
  }

  .btn-group {
    flex-wrap: wrap;
  }

  .topbar {
    padding: 10px 12px;
  }

  .topbar-title {
    font-size: 15px;
  }

  .tabs {
    padding: 0 12px;
    overflow-x: auto;
  }

  .tab {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  .stats-bar {
    padding: 12px;
    gap: 10px;
  }

  .tab-content {
    padding: 12px;
  }

  .influencer-selector {
    padding: 12px 12px 0;
  }
}

@media (max-width: 480px) {
  .stats-bar {
    grid-template-columns: 1fr;
  }

  .influencer-list {
    gap: 8px;
  }

  .influencer-card {
    min-width: 70px;
    padding: 8px;
  }

  .post-media {
    max-width: 100%;
    max-height: 500px;
  }

  .post-media img {
    max-height: 500px;
  }
}