* {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f5f8;
  color: #333;
  overflow-x: hidden;
}

button,
select,
input,
textarea {
  font-family: inherit;
}

.dashboard {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background: #f4f5f8;
}

.sidebar {
  width: 250px;
  flex: 0 0 auto;
  position: relative;
  color: #f5f5f5;
  min-height: 100vh;
  transition: width 0.25s ease, flex-basis 0.25s ease, transform 0.25s ease;
  overflow: hidden;
  background: linear-gradient(180deg, #1f1f22 0%, #242426 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: 10px 0 30px rgba(0,0,0,0.08);
}

.sidebar--closed {
  width: 0;
  flex-basis: 0;
}

.sidebar-overlay {
  display: none;
}

.sidebar-title {
  min-height: 100px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}

.sidebar-logo {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1455d9, #e34397);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  font-size: 38px;
  flex: 0 0 auto;
}

.sidebar-title strong {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.1;
}

.sidebar-title span {
  display: block;
  color: #a7a7ad;
  font-size: 11px;
  margin-top: 3px;
}

.sidebar-mobile-brand {
  display: none;
}

.mobile-menu-fab {
  display: none;
}

.sidebar-close {
  display: none;
  margin-left: auto;
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 8px 18px;
  gap: 4px;
}

.sidebar-nav a,
.sidebar-group-title {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f0f0f2;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 12px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: transparent;
  text-align: left;
  position: relative;
  transition: background 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.sidebar-nav a:hover,
.sidebar-group-title:hover {
  background: rgba(255,255,255,0.04);
}

.sidebar-group-title {
  justify-content: space-between;
}

.sidebar-group-title > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-group-title.active-parent {
  background: transparent;
  color: #c4b5fd;
}

.sidebar-submenu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 2px 0 6px;
}

.sidebar-nav a.subitem {
  padding-left: 48px;
  background: transparent;
  color: #d7d7db;
  min-height: 38px;
  font-size: 12.5px;
}

.sidebar-nav a.subitem:hover {
  background: rgba(255,255,255,0.04);
}

.sidebar-nav a.active,
.sidebar-nav a.active.subitem {
  background: rgba(255,255,255,0.07);
  border-left: 0;
  color: #ffffff;
  font-weight: 700;
}
.sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 999px;
  background: #8b5cf6;
}

.sidebar-nav a.active.subitem {
  padding-left: 48px;
}

.nav-icon {
  width: 20px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 15px;
}

.chevron {
  color: #9b9ba1;
  font-size: 14px;
}

.main {
  flex: 1;
  min-width: 0;
}

.topbar {
  height: 56px;
  background: #ffffff;
  border-bottom: 1px solid #dfe3ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  box-shadow: 0 2px 12px rgba(18, 22, 33, 0.04);
}

.hamburger {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-size: 22px;
  color: #555;
  cursor: pointer;
  transition: background 0.16s ease;
}

.hamburger:hover {
  background: #eef2ff;
  color: #1455d9;
}

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5bd7e8;
  color: #18434a;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.content {
  width: 100%;
  padding: 22px 28px;
}

.page-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.page-title-row h1,
h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0;
}

.page-title-row p {
  margin: 6px 0 0;
  color: #777;
  font-size: 13px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.primary-button,
.secondary-button,
.details-button,
.arrow-button,
.save-button,
.cancel-button,
.add-tag-button {
  border: none;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 700;
}

.primary-button {
  background: #1455d9;
  color: white;
  padding: 10px 16px;
  margin-right: 8px;
}

.secondary-button {
  background: #eef2ff;
  color: #1455d9;
  padding: 10px 16px;
}

.period-select {
  height: 38px;
  border: 1px solid #d8dce5;
  color: #777;
  padding: 0 12px;
  background: white;
  border-radius: 6px;
}

.view-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.info-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-title-block p {
  margin: 0;
  color: #777;
  font-size: 13px;
}

.filter-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
}

.filter-tab {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  background: #eef0f5;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.filter-tab.active {
  background: #1455d9;
  color: white;
}

.filter-tab span {
  opacity: 0.75;
  font-size: 12px;
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.view-toggle {
  display: flex;
  gap: 4px;
  background: #eef0f5;
  padding: 4px;
  border-radius: 8px;
}

.view-toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #555;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.view-toggle-btn:hover {
  background: #dde3f0;
}

.view-toggle-btn.active {
  background: #1455d9;
  color: white;
}

.desktop-only {
  display: block;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.dash-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
}

.dash-card {
  background: white;
  border-radius: 18px;
  border: 1px solid #e4e8f0;
  border-left: 5px solid transparent;
  padding: 26px 24px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.dash-grid--compact .dash-card {
  min-height: 124px;
  border-radius: 12px;
}

.dash-card--clickable {
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}

.dash-card--clickable:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.dash-card-count {
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
}

.dash-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.dash-card-desc {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

.dash-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.dash-card-priority {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
}

.dash-card-label-row .dash-card-priority {
  margin-top: 0;
}
.dash-card-priority--critical { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.dash-card-priority--high     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.dash-card-priority--normal   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

.dash-card-info-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
}

/* New HUD layout: count+label left, metrics right */
.dash-card-body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.dash-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dash-card-label-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-width: 0;
}

.dash-card-metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.dash-card-sla { font-size: 11px; font-weight: 600; white-space: nowrap; }
.dash-card-sla--positive { color: #6b7280; }
.dash-card-sla--warning  { color: #d97706; font-weight: 700; }
.dash-card-sla--negative { color: #dc2626; font-weight: 700; }

.dash-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.dash-card-meta-item {
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.4;
}

.dash-card-progress {
  height: 3px;
  background: #eef0f4;
  border-radius: 2px;
  margin-top: auto;
  overflow: hidden;
}
.dash-card-progress-bar {
  height: 100%;
  border-radius: 2px;
  opacity: 0.7;
  transition: width 0.6s ease, opacity 0.2s;
}
.dash-card--clickable:hover .dash-card-progress-bar {
  opacity: 1;
  filter: brightness(1.08);
}

.backlog-section {
  margin-bottom: 22px;
}

.backlog-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
}

.backlog-section-title > span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e3e7ef;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  font-size: 20px;
}

.backlog-section-title h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #222;
}

.backlog-section-title p {
  margin: 3px 0 0;
  color: #777;
  font-size: 13px;
}

.card-grid,
.info-card-grid,
.config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.grid-card,
.info-card,
.config-card {
  background: white;
  border: 1px solid #e4e8f0;
  border-radius: 14px;
  padding: 18px 14px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s;
}

.config-card {
  align-items: stretch;
  text-align: left;
  padding: 18px;
}

.config-card h3 {
  margin: 0 0 8px;
}

.config-card label,
.form-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #555;
}

.config-card input,
.config-card select,
.form-panel input,
.form-panel select,
.form-panel textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid #dfe3ea;
  border-radius: 7px;
  padding: 8px 10px;
  background: white;
  color: #333;
}

.form-panel textarea {
  min-height: 94px;
  resize: vertical;
}

.grid-card:hover,
.info-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.grid-card--pending { border-top: 3px solid #d68b00; }
.grid-card--complete { border-top: 3px solid #159947; }

.grid-card img,
.info-card-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #eef0f5;
}

.info-card-preview {
  width: 100%;
  height: 95px;
  border-radius: 10px;
  object-fit: cover;
}

.info-card-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef2ff;
  color: #1455d9;
  font-size: 28px;
  font-weight: 800;
}

.grid-card-name,
.info-card-body strong {
  font-weight: 700;
  font-size: 13px;
  color: #222;
  line-height: 1.3;
}

.info-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
  width: 100%;
}

.info-card-meta {
  color: #777;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid-card-status,
.status-badge,
.card-status-inline {
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
  background: #eef0f5;
  color: #555;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
}

.status-badge--active,
.status-badge--approved,
.status-badge--published,
.status-badge--complete,
.status-badge--successful,
.status-badge--yes,
.status-badge--true,
.status-badge--resolved,
.grid-card-status.complete,
.card-status-inline.complete {
  background: #d4f5e2;
  color: #0e7a35;
}

.status-badge--pending,
.status-badge--review,
.status-badge--in-review,
.status-badge--initiated,
.status-badge--draft,
.status-badge--open,
.grid-card-status.pending,
.card-status-inline.pending {
  background: #fff3cd;
  color: #b87000;
}

.status-badge--not-started {
  background: #eef0f5;
  color: #555555;
}

.status-badge--rejected,
.status-badge--declined,
.status-badge--blocked,
.status-badge--suspended,
.status-badge--deleted,
.status-badge--no,
.status-badge--false,
.status-badge--dismissed,
.status-badge--fake-account,
.status-badge--harassment,
.status-badge--spam,
.status-badge--other {
  background: #ffe0e0;
  color: #b42323;
}

.status-badge--high {
  background: #ffe0e0;
  color: #b42323;
}

.status-badge--medium {
  background: #fff3cd;
  color: #b87000;
}

.status-badge--low {
  background: #e8edff;
  color: #1455d9;
}

.table-card {
  width: 100%;
  background: white;
  border: 1px solid #dfe6f2;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  background: #f8fafc;
  color: #334155;
  text-align: left;
  padding: 10px 8px;
  border: 1px solid #e1e4eb;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
  overflow: visible;
}

td {
  padding: 10px 8px;
  border: 1px solid #e8ebf1;
  white-space: nowrap;
  vertical-align: middle;
  height: 70px;
  position: relative;
}

tbody tr:nth-child(even) { background: #f7f8fb; }
tbody tr:nth-child(odd) { background: #ffffff; }
.info-table tbody tr:hover,
table tbody tr:hover { background: #f1f6ff; }

.filter-row th {
  padding: 6px 8px;
}

.filter-row input {
  width: 100%;
  height: 30px;
  border: 1px solid #e2e5ec;
  border-radius: 3px;
  padding: 4px 6px;
  background: white;
}

.filter-row input:focus,
.form-panel input:focus,
.form-panel select:focus,
.form-panel textarea:focus,
.config-card input:focus,
.config-card select:focus {
  outline: none;
  border-color: #1455d9;
  box-shadow: 0 0 0 3px rgba(20, 85, 217, 0.12);
}

.resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}

.resize-handle::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 3px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.resize-handle:hover::after {
  background: #1455d9;
}

.sticky-col {
  position: sticky;
  left: 0;
  z-index: 4;
  min-width: 150px;
  max-width: 150px;
  background: #f1f3f8;
  box-shadow: 2px 0 0 #e1e4eb;
}

tbody .sticky-col {
  background: inherit;
  z-index: 3;
  font-weight: 700;
}

.sticky-filter {
  background: #f1f3f8;
  z-index: 5;
}

.username-cell {
  color: #333;
}

.thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  object-fit: cover;
}

.game-preview {
  width: 72px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

/* ── Game media strip (portrait thumbnails + lightbox) ──────── */
.game-media-cell {
  overflow: hidden;
  max-width: 0;
  padding: 6px 8px;
}
.game-media-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.15) transparent;
}
.game-media-strip::-webkit-scrollbar { height: 3px; }
.game-media-strip::-webkit-scrollbar-track { background: transparent; }
.game-media-strip::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 99px; }
.game-media-thumb-btn {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0;
  cursor: zoom-in;
  border-radius: 8px;
  display: block;
}
.game-media-thumb {
  display: block;
  width: 54px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  transition: opacity 0.15s;
}
.game-media-thumb-btn:hover .game-media-thumb { opacity: 0.82; }

.tag-list {
  display: flex;
  gap: 6px;
  align-items: center;
}

.table-tags {
  width: 250px;
  max-width: 250px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.modal-tags { flex-wrap: wrap; }

.tag {
  border: none;
  background: #e7e7e7;
  color: #333;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.tag.removable { cursor: pointer; }
.tag.removable:hover { background: #e34397; color: white; }

.categorization-select {
  width: 110px;
  height: 34px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.categorization-select.pending { color: #d68b00; }
.categorization-select.complete { color: #159947; }

.details-button,
.arrow-button {
  background: #1455d9;
  color: white;
  padding: 9px 12px;
  transition: transform 0.12s ease, background 0.15s ease;
}

.details-button:hover {
  background: #0f48bd;
  transform: translateY(-1px);
}

.action-dropdown {
  position: relative;
  display: inline-block;
}

.action-main {
  min-width: 92px;
  background: #eef3ff;
  color: #1455d9;
  border: 1px solid #d8e3ff;
}

.action-main:hover { background: #dfe9ff; }

.action-menu {
  position: absolute;
  top: 38px;
  right: 0;
  width: 170px;
  background: white;
  border: 1px solid #dfe6f2;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  z-index: 50;
  overflow: hidden;
}

.action-menu button {
  width: 100%;
  border: none;
  background: white;
  text-align: left;
  padding: 10px 12px;
  cursor: pointer;
  color: #333;
  border-radius: 10px;
  font-weight: 700;
}

.action-menu button:hover {
  background: #eef3ff;
  color: #1455d9;
}

.action-menu .danger { color: #b42323; }
.action-menu .danger:hover { background: #fff1f2; color: #b42323; }

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px;
}

.pagination button {
  min-width: 34px;
  height: 34px;
  border: none;
  background: #eef0f5;
  border-radius: 5px;
  cursor: pointer;
}

.pagination .page-active {
  background: #dce6ff;
  color: #1455d9;
  font-weight: 700;
}

.column-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -6px 0 12px;
  flex-wrap: wrap;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.column-tools-button {
  height: 38px;
  border: 1px solid #dbe1ee;
  background: #fff;
  color: #1455d9;
  border-radius: 10px;
  padding: 0 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.column-tools-button:hover { background: #eef3ff; }
.column-tools-button--eye {
  width: 38px;
  padding: 0;
  font-size: 18px;
  display: inline-grid;
  place-items: center;
  font-weight: 400;
}
.column-tools-hint { color: #64748b; font-size: 12px; }

.column-menu {
  position: absolute;
  top: 48px;
  left: 0;
  width: 260px;
  max-height: 360px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dfe5f0;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
  padding: 12px;
  z-index: 100;
}

.column-menu-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a93a3;
  font-weight: 900;
  margin-bottom: 8px;
}

.column-menu label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 6px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
}

.column-menu label:hover { background: #f4f7fb; }
.column-menu input { accent-color: #1455d9; }

.draggable-th {
  cursor: grab;
  user-select: none;
  transition: background 0.15s ease;
}

.draggable-th:hover { background: #eef3ff; }
.draggable-th:active { cursor: grabbing; }

.header-grip {
  display: inline-flex;
  margin-right: 8px;
  color: #94a3b8;
  font-size: 12px;
}

.simple-modal-overlay,
.modal-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 1000;
}

.simple-modal-overlay {
  background: radial-gradient(circle at top, rgba(20, 85, 217, 0.18), transparent 34%), rgba(10, 15, 25, 0.72);
  backdrop-filter: blur(6px);
}

.modal-overlay { background: rgba(0, 0, 0, 0.68); }

.simple-modal {
  width: min(680px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  background: white;
  border-radius: 16px;
  padding: 22px;
  position: relative;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.wide-modal { width: min(850px, 96vw); }
.popup-modal { width: min(1060px, 96vw); padding: 26px; }

.simple-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: none;
  background: #f1f5f9;
  color: #475569;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.simple-modal-close:hover {
  background: #ffe0ec;
  color: #c2185b;
  transform: rotate(90deg);
}

.simple-modal-header {
  padding-right: 48px;
  margin-bottom: 18px;
}

.simple-modal-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #172033;
}

.simple-modal-header p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.simple-modal-image {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 16px;
}

.simple-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.simple-modal-field {
  background: #f7f8fb;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  padding: 12px;
}

.simple-modal-field span {
  display: block;
  color: #777;
  font-size: 12px;
  margin-bottom: 4px;
}

.simple-modal-field strong { font-size: 14px; }

.simple-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid #edf1f7;
  margin-top: 20px;
}

.simple-modal-footer.centered { justify-content: flex-end; }

/* Generic Details modal pattern: used only by InfoDetailsModal fallback */
.details-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(6px);
  overscroll-behavior: contain;
}

.details-modal {
  width: min(860px, 96vw);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.details-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #e8edf5;
  background: #fff;
  flex-shrink: 0;
}

.details-modal-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.details-modal-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  flex-shrink: 0;
}

.details-modal-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #4a6cf7, #7c3aed);
  font-size: 22px;
  font-weight: 800;
}

.details-modal-title-block {
  min-width: 0;
}

.details-modal-title-block h2 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.2;
}

.details-modal-title-block p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.details-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.details-modal-close {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.details-modal-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.details-modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 22px 22px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.details-modal-section {
  background: #fff;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  padding: 16px;
}

.details-modal-section-title {
  margin-bottom: 14px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.details-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.details-modal-field {
  min-width: 0;
  border: 1px solid #e7ebf2;
  border-radius: 10px;
  background: #fbfcff;
  padding: 12px;
}

.details-modal-field span {
  display: block;
  margin-bottom: 5px;
  color: #7a8495;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.details-modal-field strong {
  display: block;
  color: #172033;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.details-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #e8edf5;
  background: #fff;
  flex-shrink: 0;
}

.dashboard--dark .details-modal {
  background: #2f2f2f;
  border-color: rgba(255,255,255,0.08);
  color: #ececec;
}

.dashboard--dark .details-modal-header,
.dashboard--dark .details-modal-footer,
.dashboard--dark .details-modal-section {
  background: #2f2f2f;
  border-color: rgba(255,255,255,0.08);
}

.dashboard--dark .details-modal-body {
  background: #262626;
}

.dashboard--dark .details-modal-title-block h2,
.dashboard--dark .details-modal-field strong {
  color: #ececec;
}

.dashboard--dark .details-modal-title-block p,
.dashboard--dark .details-modal-section-title,
.dashboard--dark .details-modal-field span {
  color: #b4b4b4;
}

.dashboard--dark .details-modal-avatar {
  border-color: rgba(255,255,255,0.1);
  background: #383838;
}

.dashboard--dark .details-modal-field,
.dashboard--dark .details-modal-close {
  background: #383838;
  border-color: rgba(255,255,255,0.08);
}

.dashboard--dark .details-modal-close {
  color: #ececec;
}

.dashboard--dark .details-modal-close:hover {
  background: rgba(239,68,68,0.18);
  color: #f87171;
}

@media (max-width: 768px) {
  .details-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .details-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .details-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }

  .details-modal-header {
    padding: 14px 14px 12px;
  }

  .details-modal-avatar {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }

  .details-modal-title-block h2 {
    font-size: 17px;
  }

  .details-modal-header-actions {
    gap: 8px;
  }

  .details-modal-header-actions .status-badge {
    max-width: 94px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .details-modal-close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .details-modal-body {
    padding: 14px 14px 18px;
  }

  .details-modal-section {
    padding: 14px;
    border-radius: 12px;
  }

  .details-modal-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .details-modal-footer {
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  }

  .details-modal-footer .cancel-button {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 15px;
  }
}

.form-panel {
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  border: 1px solid #dfe6f2;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
}

.form-panel label { color: #334155; }

.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.four-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.three-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.nam-err {
  display: block;
  font-size: 11px;
  color: #ef4444;
  margin-top: 4px;
}

.nam-input-err {
  border-color: #ef4444 !important;
  outline-color: #ef4444;
}

.cpm-total-ro {
  background: #f1f5f9 !important;
  color: #64748b !important;
  cursor: default !important;
  border-color: #e2e8f0 !important;
  font-weight: 600;
}

.popup-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

.popup-preview {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 16px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.popup-preview h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #172033;
}

.popup-preview img,
.upload-empty {
  width: 100%;
  height: 250px;
  border-radius: 16px;
}

.popup-preview img {
  object-fit: cover;
  background: #e8ecf4;
}

.upload-empty {
  border: 2px dashed #cfd6e3;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f8fafc, #eef4ff);
  color: #64748b;
  font-weight: 700;
}

.popup-preview strong {
  font-size: 18px;
  color: #172033;
  line-height: 1.2;
}

.popup-preview p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
}

.save-button {
  background: linear-gradient(135deg, #e34397, #c21874);
  color: white;
  padding: 14px 24px;
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(227, 67, 151, 0.22);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}

.save-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(227, 67, 151, 0.3);
}

.cancel-button {
  background: #e9eef7;
  color: #334155;
  padding: 14px 20px;
  font-size: 15px;
}

.modal {
  width: min(1100px, 96vw);
  max-height: 90vh;
  background: #111;
  border: 1px solid #e34397;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 40% 60%;
  position: relative;
  color: white;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 5;
}

.modal-left {
  padding: 20px;
  border-right: 1px solid rgba(255, 74, 166, 0.25);
  background: #0d0d0d;
  overflow-y: auto;
}

.creator-slider {
  height: 420px;
  border: 1px solid #e34397;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #000;
}

.creator-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-button {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: none;
  background: #e34397;
  color: white;
  font-size: 28px;
  cursor: pointer;
  z-index: 3;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 68px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.72);
  color: white;
  font-size: 46px;
  line-height: 1;
  cursor: pointer;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-arrow:hover { background: #e34397; border-color: #e34397; }
.slider-arrow-left { left: 12px; }
.slider-arrow-right { right: 12px; }

.slide-counter {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 700;
  z-index: 4;
}

.slider-thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.slider-thumbnails button {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  border: 2px solid transparent;
  padding: 0;
  overflow: hidden;
  background: #222;
  cursor: pointer;
  flex: 0 0 auto;
}

.slider-thumbnails button.active { border-color: #e34397; }
.slider-thumbnails img { width: 100%; height: 100%; object-fit: cover; }

.creator-info { margin-top: 18px; text-align: center; }
.creator-info h2 { margin: 0 0 6px; }
.creator-info p { margin: 5px 0; color: #bdbdbd; }
.status-active { display: inline-block; margin-top: 8px; color: #4fd56b; font-weight: 700; }
.status-inactive { display: inline-block; margin-top: 8px; color: #ff5a5a; font-weight: 700; }

.modal-right {
  padding: 20px 24px;
  overflow-y: auto;
  background: #141414;
  display: flex;
  flex-direction: column;
}

.modal-header { text-align: center; }
.modal-header h2 { margin: 0; font-size: 24px; }
.modal-header p { margin: 6px 0 0; color: #aaa; }

.modal-section {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 74, 166, 0.45);
  border-radius: 12px;
  background: #191919;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.modal-section h3 {
  margin: 0 0 14px;
  font-size: 16px;
  color: #f1f1f1;
}

.section-title-row h3 { margin: 0; }
.add-tag-button { background: #e34397; color: white; padding: 9px 12px; }
.tag-dropdown-wrapper { position: relative; }

.tag-dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  width: 260px;
  max-height: 340px;
  overflow-y: auto;
  background: #242424;
  border: 1px solid #e34397;
  border-radius: 10px;
  padding: 10px;
  z-index: 10;
}

.custom-tag-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 10px;
}

.custom-tag-row input {
  height: 34px;
  border: 1px solid #454545;
  background: #151515;
  color: white;
  border-radius: 7px;
  padding: 0 10px;
  font-size: 13px;
}

.custom-tag-row input:focus { outline: none; border-color: #e34397; }

.custom-tag-row button {
  border: none;
  background: #e34397;
  color: white;
  border-radius: 7px;
  padding: 0 12px;
  font-weight: 700;
  cursor: pointer;
}

.tag-dropdown-divider { height: 1px; background: #3a3a3a; margin: 8px 0; }

.tag-dropdown label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px;
  color: #eee;
  font-size: 13px;
  cursor: pointer;
}

.tag-dropdown input[type="checkbox"] { accent-color: #e34397; }
.appearance-section { margin-top: 16px; }
.appearance-section h3 { text-align: center; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  align-items: center;
  gap: 10px;
  background: #101010;
  border: 1px solid #2f2f2f;
  border-radius: 9px;
  padding: 10px;
}

.field-row span {
  color: #b8b8b8;
  font-size: 13px;
  font-weight: 700;
}

.field-row select {
  width: 100%;
  height: 36px;
  border: 1px solid #424242;
  background: #1c1c1c;
  color: white;
  border-radius: 7px;
  padding: 0 10px;
}

.field-row select:focus {
  outline: none;
  border-color: #e34397;
  box-shadow: 0 0 0 2px rgba(227, 67, 151, 0.2);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 20px;
}

.mobile-cards { display: none; }

.creator-card {
  background: white;
  border: 1px solid #dfe3ea;
  border-left: 5px solid #dfe3ea;
  border-radius: 10px;
  padding: 14px;
}

.creator-card--pending { border-left-color: #d68b00; }
.creator-card--complete { border-left-color: #159947; }
.creator-card-header { display: flex; gap: 12px; align-items: center; }
.creator-card-header .thumb { width: 52px; height: 52px; flex-shrink: 0; }
.creator-card-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.creator-card-info strong { font-size: 15px; }
.creator-card-info span { font-size: 12px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-card-header .details-button { flex-shrink: 0; padding: 10px 16px; font-size: 14px; }

/* Game review moderation modal */
.review-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 22px;
  background: radial-gradient(circle at top, rgba(20, 85, 217, 0.22), transparent 38%), rgba(15, 23, 42, 0.76);
  backdrop-filter: blur(8px);
}

.review-modal {
  position: relative;
  width: min(1120px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 24px;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.36);
}

.review-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #e9eef7;
  color: #334155;
  font-size: 26px;
  cursor: pointer;
  z-index: 3;
}

.review-close:hover { background: #ffe0ec; color: #c2185b; }

.review-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 72px 18px 24px;
  background: white;
  border-bottom: 1px solid #e2e8f0;
}

.review-kicker {
  display: inline-flex;
  margin-bottom: 6px;
  color: #1455d9;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.review-header h2 {
  margin: 0;
  color: #172033;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.review-header p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
}

.review-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: 18px;
  padding: 18px;
}

.review-media-card,
.review-info-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.review-media-card { padding: 14px; }

.review-media-frame {
  position: relative;
  height: min(62vh, 620px);
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: #050505;
}

.review-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.review-media-counter {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.72);
  color: white;
  font-size: 12px;
  font-weight: 800;
}

.review-media-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.review-media-actions button {
  height: 46px;
  border: none;
  border-radius: 14px;
  background: #eef3ff;
  color: #1455d9;
  font-weight: 900;
  cursor: pointer;
}

.review-media-actions button:hover { background: #dce8ff; }

.review-info-card {
  padding: 16px;
  overflow: auto;
}

.review-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef3ff, #ffffff);
  border: 1px solid #dce6ff;
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #1455d9, #e34397);
  color: white;
  font-size: 20px;
  font-weight: 900;
}

.review-user-card strong,
.review-user-card span { display: block; }
.review-user-card strong { color: #172033; font-size: 15px; }
.review-user-card span { margin-top: 3px; color: #64748b; font-size: 12px; }

.review-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.review-meta-grid div {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.review-meta-grid span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 4px;
}

.review-meta-grid strong {
  display: block;
  color: #172033;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-policy-box,
.review-decision-box { margin-top: 16px; }

.review-policy-box h3,
.review-decision-box h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 15px;
  font-weight: 900;
}

.review-policy-list {
  display: grid;
  gap: 8px;
  max-height: 250px;
  overflow: auto;
  padding-right: 4px;
}

.review-policy-list button {
  width: 100%;
  min-height: 40px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #ffffff;
  color: #334155;
  text-align: left;
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

.review-policy-list button:hover { background: #f1f6ff; }

.review-policy-list button.active {
  border-color: #1455d9;
  background: #eaf1ff;
  color: #1455d9;
}

.review-decision-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.review-decision-grid button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.review-decision-grid .approve { background: #dcfce7; color: #15803d; }
.review-decision-grid .changes { background: #fff7d6; color: #b87000; }
.review-decision-grid .reject { background: #ffe4e6; color: #b42323; }

.review-decision-grid button.active {
  outline: 3px solid rgba(20, 85, 217, 0.18);
  border-color: #1455d9;
}

.review-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 18px;
  background: white;
  border-top: 1px solid #e2e8f0;
}

@media (min-width: 1500px) {
  .content { padding: 22px 28px; }
  .sticky-col { min-width: 180px; max-width: 180px; }
}

@media (max-width: 1000px) {
  .sidebar:not(.sidebar--closed) {
    width: 250px;
    flex-basis: 250px;
  }

  .modal {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .modal-left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 74, 166, 0.25);
  }

  .creator-slider { height: 420px; }
}

@media (max-width: 800px) {
  .review-modal-overlay {
    padding: 0;
    place-items: stretch;
  }

  .review-modal {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
  }

  .review-header {
    padding: 14px 58px 12px 14px;
  }

  .review-header h2 { font-size: 22px; }
  .review-header p { font-size: 12px; }

  .review-close {
    top: 12px;
    right: 12px;
  }

  .review-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .review-media-card { padding: 10px; }

  .review-media-frame {
    height: 42dvh;
    min-height: 260px;
    border-radius: 16px;
  }

  .review-media-actions button { height: 44px; }
  .review-info-card { padding: 12px; }
  .review-user-card { padding: 10px; }

  .review-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .review-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .review-meta-grid div { padding: 10px; }
  .review-policy-list { max-height: 150px; }

  .review-policy-list button {
    min-height: 38px;
    font-size: 12px;
    padding: 8px 10px;
  }

  .review-decision-grid { grid-template-columns: 1fr 1fr 1fr; }

  .review-decision-grid button {
    min-height: 42px;
    font-size: 12px;
  }

  .review-footer {
    padding: 10px;
    gap: 8px;
  }

  .review-footer .cancel-button,
  .review-footer .save-button {
    flex: 1;
    padding: 13px 10px;
    font-size: 14px;
  }
}

@media (max-width: 700px) {
  .dashboard { display: block; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    z-index: 100;
    width: 100vw !important;
    max-width: none;
    flex: none !important;
    padding: 0;
    transform: translateX(0);
    overflow-y: auto;
    background: linear-gradient(180deg, #17171a 0%, #242428 100%);
  }

  .sidebar--closed {
    transform: translateX(-100vw);
    width: 100vw !important;
    flex: none !important;
  }

  .sidebar-resize-handle {
    display: none;
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
  }

  .sidebar-title {
    min-height: 100px;
    padding: 16px 18px;
  }

  .sidebar-logo {
    width: 80px;
    height: 80px;
    font-size: 38px;
  }

  .sidebar-title strong { font-size: 20px; }
  .sidebar-title span { font-size: 12px; }
  .sidebar-close { display: grid; place-items: center; }

  .sidebar-nav {
    padding: 14px;
    gap: 7px;
  }

  .sidebar-nav a,
  .sidebar-group-title {
    min-height: 52px;
    border-radius: 16px;
    font-size: 15px;
    padding: 14px 16px;
  }

  .sidebar-nav a.subitem,
  .sidebar-nav a.active.subitem {
    padding-left: 56px;
    min-height: 46px;
    font-size: 14px;
  }

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

  .main { width: 100vw; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 58px;
  }

  .content { padding: 16px; }

  .page-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-title-row h1,
  h1 { font-size: 26px; }

  .toolbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .primary-button,
  .secondary-button {
    padding: 12px 18px;
    font-size: 14px;
  }

  .desktop-only { display: none !important; }

  .mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .view-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .filter-tabs {
    flex-wrap: wrap;
    flex: none;
  }

  .view-controls { display: none; }

  .info-card {
    flex-direction: row;
    text-align: left;
    align-items: center;
    padding: 14px;
  }

  .info-card-avatar,
  .info-card-placeholder {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
  }

  .info-card-preview {
    width: 76px;
    height: 54px;
    flex: 0 0 auto;
  }

  .info-card-body {
    align-items: flex-start;
    flex: 1;
  }

  .info-card .details-button {
    width: auto;
    flex: 0 0 auto;
    padding: 10px 14px;
  }

  .backlog-section-title { align-items: flex-start; }

  .dash-grid,
  .dash-grid--compact {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .dash-card {
    min-height: 118px;
    padding: 22px;
  }

  .column-tools { margin-top: 0; padding: 10px; }
  .column-menu { width: min(280px, calc(100vw - 24px)); }
  .column-tools-hint { display: none; }

  .simple-modal-overlay,
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }

  .simple-modal,
  .modal {
    width: 100%;
    max-height: 96vh;
    border-radius: 18px 18px 0 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }

  .simple-modal-grid,
  .two-cols,
  .three-cols,
  .four-cols,
  .popup-layout {
    grid-template-columns: 1fr;
  }

  .popup-modal { padding: 20px; }
  .popup-preview { position: static; }

  .popup-preview img,
  .upload-empty { height: 190px; }

  .simple-modal-footer { flex-direction: column; }
  .simple-modal-footer.centered { justify-content: stretch; }
  .simple-modal-footer.centered .save-button { width: 100%; }

  .modal-left,
  .modal-right { padding: 16px; }
  .creator-slider { height: 300px; }

  .play-button {
    width: 60px;
    height: 60px;
    font-size: 22px;
  }

  .slider-arrow {
    width: 52px;
    height: 72px;
    font-size: 36px;
  }

  .slider-thumbnails button {
    width: 56px;
    height: 56px;
  }

  .modal-close {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .modal-section { padding: 14px; }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px;
  }

  .field-row select {
    height: 44px;
    font-size: 15px;
  }

  .add-tag-button {
    padding: 12px 16px;
    font-size: 14px;
  }

  .tag {
    padding: 8px 12px;
    font-size: 13px;
  }

  .tag-dropdown {
    width: 240px;
    max-height: 280px;
  }

  .tag-dropdown label {
    padding: 10px 8px;
    font-size: 14px;
  }

  .save-button,
  .cancel-button {
    flex: 1;
    padding: 14px;
    font-size: 15px;
    text-align: center;
  }

  .modal-footer { gap: 10px; }
  .categorization-select { height: 40px; font-size: 14px; }
  .sticky-col { min-width: 130px; max-width: 130px; }
}

@media (max-width: 420px) {
  .review-media-frame {
    height: 38dvh;
    min-height: 230px;
  }

  .review-meta-grid { grid-template-columns: 1fr; }
  .review-policy-list { max-height: 125px; }
  .review-decision-grid { grid-template-columns: 1fr; }
}

/* ===== Tinder-style moderation v2 ===== */
.review-modal-overlay--tinder {
  padding: 0;
  background: rgba(8, 12, 24, 0.72);
  backdrop-filter: blur(10px);
}

.review-modal--tinder {
  width: min(1280px, 96vw);
  height: min(860px, 94vh);
  max-height: 94vh;
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(390px, 0.72fr);
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 16px;
  border-radius: 30px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.45);
}

.tinder-review-media {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 26px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 50px rgba(15, 23, 42, 0.18);
}

.tinder-review-media > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tinder-media-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.1) 24%, rgba(0,0,0,0.0) 46%, rgba(0,0,0,0.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.28), transparent 35%, transparent 65%, rgba(0,0,0,0.28));
  pointer-events: none;
}

.tinder-progress-row {
  position: absolute;
  top: 14px;
  left: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}

.tinder-progress-row span {
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.26);
  overflow: hidden;
}

.tinder-progress-row span.active {
  background: rgba(255,255,255,0.92);
}

.tinder-top-tools {
  position: absolute;
  top: 30px;
  left: 18px;
  right: 18px;
  z-index: 4;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.tinder-filter-btn,
.tinder-profile,
.tinder-chip-scroll button,
.tinder-chip-scroll span {
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.44);
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  backdrop-filter: blur(10px);
}

.tinder-filter-btn {
  width: 48px;
  height: 48px;
  border-radius: 18px;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.tinder-chip-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
}

.tinder-chip-scroll::-webkit-scrollbar { display: none; }

.tinder-chip-scroll button,
.tinder-chip-scroll span {
  flex: 0 0 auto;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 16px;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
}

.tinder-profile {
  width: 58px;
  height: 58px;
  padding: 3px;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(135deg, #1455d9, #e34397);
}

.tinder-profile img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.9);
}

.tinder-side-action {
  position: absolute;
  right: 22px;
  z-index: 5;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.56);
  background: rgba(0,0,0,0.3);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 36px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}

.tinder-side-action--star { top: 118px; }
.tinder-side-action--fire { top: 194px; font-size: 31px; }
.tinder-side-action--star.active { color: #ffffff; background: linear-gradient(135deg, #246bff, #1d4ed8); border-color: rgba(255,255,255,0.86); }
.tinder-side-action--fire.active { background: linear-gradient(135deg, #ff7a18, #e11d48); border-color: rgba(255,255,255,0.86); }

.tinder-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 52px;
  height: 72px;
  transform: translateY(-50%);
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.16);
  color: #ffffff;
  font-size: 54px;
  line-height: 1;
  cursor: pointer;
}
.tinder-arrow--left { left: 86px; }
.tinder-arrow--right { right: 100px; }

.tinder-content-info {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 28px;
  z-index: 4;
  color: #ffffff;
}

.tinder-policy-pill {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 999px;
  padding: 0 16px;
  background: linear-gradient(135deg, #00b3a4, #079284);
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 179, 164, 0.28);
}
.tinder-policy-pill.danger { background: linear-gradient(135deg, #f43f5e, #dc2626); box-shadow: 0 10px 28px rgba(220, 38, 38, 0.26); }
.tinder-policy-pill span { font-size: 12px; font-weight: 900; text-transform: uppercase; opacity: 0.9; }
.tinder-policy-pill strong { font-size: 16px; }

.tinder-content-info h2 {
  margin: 14px 0 2px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.06em;
  text-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.tinder-content-info p {
  margin: 8px 0 0;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 4px 18px rgba(0,0,0,0.35);
}

.tinder-tags-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tinder-tags-inline::-webkit-scrollbar { display: none; }
.tinder-tags-inline button {
  flex: 0 0 auto;
  min-height: 38px;
  border: none;
  border-radius: 999px;
  background: rgba(0,0,0,0.46);
  color: #ffffff;
  padding: 0 15px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.tinder-tags-inline button:last-child { background: #d72b85; }

.tinder-review-panel {
  min-height: 0;
  margin-left: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  border-radius: 26px;
  background: rgba(255,255,255,0.96);
  border: 1px solid #e2e8f0;
}

.tinder-panel-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid #dfe7f5;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
}
.tinder-panel-user button {
  width: 58px;
  height: 58px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}
.tinder-panel-user img { width: 100%; height: 100%; border-radius: 18px; object-fit: cover; }
.tinder-panel-user div { min-width: 0; flex: 1; }
.tinder-panel-user strong { display: block; font-size: 16px; color: #111827; }
.tinder-panel-user span { display: block; margin-top: 3px; font-size: 12px; color: #64748b; }

.tinder-desktop-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.tinder-desktop-meta > div,
.tinder-desktop-meta > button {
  min-height: 62px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
}
.tinder-desktop-meta span { display: block; color: #64748b; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.tinder-desktop-meta strong { display: block; margin-top: 4px; color: #0f172a; font-size: 14px; }

.tinder-desktop-policy { margin-top: 14px; }
.tinder-desktop-policy span { display: block; color: #475569; font-size: 12px; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.tinder-desktop-policy button {
  width: 100%;
  min-height: 52px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #f8fafc;
  color: #64748b;
  text-align: left;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tinder-desktop-policy button:not(.danger):hover { border-color: #cbd5e1; background: #f1f5f9; }
.tinder-desktop-policy button.danger { border: 2px solid #dc2626; background: #fff1f2; color: #dc2626; }

.tinder-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 8px;
}
.tinder-section-title strong { font-size: 15px; color: #0f172a; }
.tinder-section-title button { border: none; background: #eef3ff; color: #1455d9; border-radius: 999px; padding: 7px 12px; font-weight: 900; cursor: pointer; }

.review-feed-compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.feed-control-card {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 72px;
  padding: 10px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #dfe7f5;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.feed-control-card--small { min-height: 64px; }
.feed-control-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.feed-control-main div { min-width: 0; }
.feed-control-main strong { display: block; color: #0f172a; font-size: 14px; white-space: nowrap; }
.feed-control-main small { display: block; color: #64748b; font-size: 11px; font-weight: 800; }
.feed-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #eef3ff;
  font-size: 20px;
  flex: 0 0 auto;
}
.feed-control-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.review-toggle {
  width: 52px;
  height: 30px;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  padding: 3px;
  cursor: pointer;
  flex: 0 0 auto;
}
.review-toggle span {
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(15,23,42,.25);
  transition: transform .15s ease;
}
.review-toggle.active { background: #22c55e; }
.review-toggle.active span { transform: translateX(22px); }
.feed-feature,
.feed-priority {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 15px;
  font-weight: 900;
  cursor: pointer;
}
.feed-feature { background: #fff7d6; color: #d99a00; font-size: 22px; }
.feed-feature:not(.active) { background: #edf2f7; color: #9aa3b2; }
.feed-priority { background: #121a31; color: #fff; font-size: 18px; }

.tinder-desktop-tags > div { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; }
.tinder-desktop-tags > div::-webkit-scrollbar { display: none; }
.tinder-desktop-tags span {
  border-radius: 999px;
  background: #eef3ff;
  color: #1455d9;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
}

.tinder-review-actions {
  grid-column: 1 / -1;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 14px 10px 4px;
  background: transparent;
}
.tinder-round-action,
.tinder-round-count {
  border: none;
  background: #f1f5ff;
  color: #1455d9;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  font-weight: 1000;
}
.tinder-round-action {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  font-size: 34px;
}
.tinder-round-action--reject { color: #ff006e; font-size: 38px; }
.tinder-round-action--star { color: #0ea5ff; font-size: 40px; }
.tinder-round-action--star.active { background: #e0f2fe; color: #0369a1; }
.tinder-round-action--next { transform: rotate(-12deg); font-size: 34px; }
.tinder-round-count {
  width: 94px;
  height: 54px;
  border-radius: 999px;
  color: #111827;
  font-size: 20px;
}
.tinder-final-action {
  min-width: 180px;
  height: 58px;
  border: none;
  border-radius: 18px;
  background: linear-gradient(135deg, #e34397, #c21874);
  color: #fff;
  font-weight: 1000;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(227, 67, 151, 0.18);
}

.review-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(8px);
}
.review-sheet-backdrop--full { padding: 0; }
.review-sheet {
  width: min(620px, 96vw);
  max-height: min(760px, 90vh);
  overflow-y: auto;
  background: #fff;
  border-radius: 28px;
  padding: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.28);
}
.review-sheet--full {
  width: min(820px, 96vw);
  max-height: 92vh;
}
.review-sheet-handle { width: 70px; height: 7px; border-radius: 999px; background: #cbd5e1; margin: 4px auto 12px; }
.review-sheet-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 6px 12px; }
.review-sheet-header h3 { margin: 0; font-size: 24px; color: #0f172a; }
.review-sheet-header button { width: 38px; height: 38px; border: none; border-radius: 50%; background: #eef2f7; color: #334155; font-size: 24px; cursor: pointer; }
.review-option-list { display: grid; gap: 9px; }
.review-option-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.review-option-list button {
  min-height: 48px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #172033;
  border-radius: 15px;
  text-align: left;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}
.review-option-list button.active { border-color: #1455d9; background: #eaf1ff; color: #1455d9; }
.review-sheet-section-title { color: #64748b; text-transform: uppercase; letter-spacing: .05em; font-weight: 1000; font-size: 12px; margin: 0 4px 12px; }
.review-sheet-section-title--tags { margin-top: 18px; }
.review-feed-sheet-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.review-tag-editor { display: flex; flex-wrap: wrap; gap: 8px; }
.review-tag-editor button { border: none; border-radius: 999px; background: #eef3ff; color: #1455d9; padding: 9px 13px; font-weight: 900; cursor: pointer; }
.review-tag-input-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 12px; }
.review-tag-input-row input { min-height: 46px; border: 1px solid #dbe3ef; border-radius: 14px; padding: 0 12px; font-weight: 800; }
.review-tag-input-row button,
.review-sheet-done { border: none; border-radius: 14px; background: #1455d9; color: #fff; padding: 0 16px; font-weight: 1000; cursor: pointer; }
.review-sheet-done { width: 100%; min-height: 52px; margin-top: 18px; font-size: 16px; }
.priority-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.priority-picker-grid button { height: 54px; border: none; border-radius: 16px; background: #eef2f7; color: #111827; font-size: 20px; font-weight: 1000; cursor: pointer; }
.priority-picker-grid button.active { background: #1455d9; color: #fff; }
.review-lightbox { position: fixed; inset: 0; z-index: 1700; display: grid; place-items: center; background: rgba(0,0,0,.82); padding: 18px; }
.review-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 22px; object-fit: contain; }

/* Creator moderation */
.creator-review-modal {
  grid-template-columns: minmax(420px, 1.08fr) minmax(390px, 0.92fr);
}

.creator-review-media {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
}

.creator-review-media-frame {
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 26px;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 18px 50px rgba(15, 23, 42, 0.18);
}

.creator-review-media-frame img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .18s ease;
}

.creator-review-media-frame-wrap {
  min-height: 0;
  position: relative;
  display: grid;
}

.creator-review-media-toolbar {
  display: grid;
  grid-template-columns: 1fr minmax(120px, auto) 1fr;
  align-items: center;
  gap: 10px;
}

.creator-review-media-toolbar div {
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.creator-review-counter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 12px;
  font-weight: 700;
  color: #4c1d95;
  white-space: nowrap;
}

.creator-review-media-toolbar button {
  min-height: 46px;
  border: none;
  border-radius: 15px;
  background: #eef3ff;
  color: #1455d9;
  font-weight: 1000;
  cursor: pointer;
}

.creator-review-media-toolbar button:hover {
  background: #dfe9ff;
}

.creator-review-rotate-btns {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.creator-review-rotate-btns button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.46);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(4px);
  transition: background .15s ease;
}

.creator-review-rotate-btns button:hover {
  background: rgba(0, 0, 0, 0.68);
}

.creator-review-panel {
  gap: 12px;
  padding-bottom: 6px;
}

.creator-review-card {
  padding: 13px;
  border: 1px solid #dfe7f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.creator-review-card-title {
  margin-bottom: 10px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 1000;
  text-transform: uppercase;
}

.creator-review-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.creator-review-identity-grid div {
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.creator-review-identity-grid span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.creator-review-identity-grid strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.creator-review-danger-field {
  border-color: #fecaca !important;
  background: #fff1f2 !important;
}

.creator-review-danger-field span,
.creator-review-danger-field strong {
  color: #dc2626 !important;
}

.creator-review-success-field {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

.creator-review-success-field span {
  color: #15803d !important;
}

.creator-review-success-field strong {
  color: #166534 !important;
}

.creator-review-age-pill {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  white-space: nowrap;
}

.creator-review-age-pill--adult {
  background: #d4f5e2;
  color: #0e7a35;
  border: 1px solid #b8e8cb;
}

.creator-review-age-pill--minor {
  background: #ffe0e0;
  color: #b33030;
  border: 1px solid #f5b8b8;
}

.creator-review-select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  padding: 0 12px;
  font-weight: 900;
}

.creator-review-validation-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.creator-review-validation-row span {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
}

.creator-review-validation-row strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 14px;
}

.creator-review-validation {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.creator-review-validation.invalid {
  border-color: #fecaca;
  background: #fff1f2;
}

.creator-review-validation.invalid .creator-review-card-title,
.creator-review-validation.invalid strong,
.creator-review-validation.invalid p {
  color: #dc2626;
}

.creator-review-validation p {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 900;
}

.creator-review-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(160px, 220px);
  justify-content: center;
  gap: 14px;
  padding: 12px 10px 4px;
}

.creator-review-actions button {
  min-height: 56px;
  border: none;
  border-radius: 18px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 1000;
  cursor: pointer;
}

.creator-review-reject {
  background: linear-gradient(135deg, #f43f5e, #dc2626);
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.22);
}

.creator-review-approve {
  background: linear-gradient(135deg, #7c3aed, #c026d3);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.24);
}

.creator-review-approve[aria-disabled="true"],
.creator-review-approve:disabled {
  opacity: .42;
  cursor: not-allowed;
  box-shadow: none;
}

.creator-review-close-btn {
  background: #f1f5f9 !important;
  color: #475569 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.creator-review-close-btn:hover {
  background: #e2e8f0 !important;
}

.creator-review-issue-dot {
  color: #dc2626;
  font-size: 10px;
  line-height: 1;
}


.creator-review-modal {
  transition: box-shadow .18s ease;
}
.creator-review-modal[data-decision-hover="approve"] {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .28), 0 36px 110px rgba(0, 0, 0, .45);
}
.creator-review-modal[data-decision-hover="reject"] {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .28), 0 36px 110px rgba(0, 0, 0, .45);
}

.game-review-modal {
  transition: box-shadow .18s ease;
}
.game-review-modal[data-decision-hover="approve"] {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .28), 0 36px 110px rgba(0, 0, 0, .45);
}
.game-review-modal[data-decision-hover="reject"] {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .28), 0 36px 110px rgba(0, 0, 0, .45);
}

.creator-review-flash {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  border-radius: inherit;
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: -.01em;
  pointer-events: none;
  animation: creator-flash-in .12s ease forwards;
}
.creator-review-flash--approved { background: rgba(16, 185, 129, .88); color: #fff; }
.creator-review-flash--rejected { background: rgba(220, 38, 38, .88); color: #fff; }
@keyframes creator-flash-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.creator-review-shortcuts-hint {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 4px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
}

.creator-review-select--error {
  border-color: #f87171 !important;
  background: #fff1f2 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
  animation: creator-shake .35s ease;
}
@keyframes creator-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.dashboard--dark .creator-review-modal,
.dashboard--dark .creator-review-panel,
.dashboard--dark .creator-review-card {
  background: #111827;
  border-color: #243044;
}

.dashboard--dark .creator-review-card-title,
.dashboard--dark .creator-review-identity-grid strong,
.dashboard--dark .creator-review-validation-row strong {
  color: #f8fafc;
}

.dashboard--dark .creator-review-identity-grid span,
.dashboard--dark .creator-review-validation-row span {
  color: #94a3b8;
}

.dashboard--dark .creator-review-counter-pill {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.28);
  color: #c4b5fd;
}

.dashboard--dark .creator-review-identity-grid div,
.dashboard--dark .creator-review-select {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

.dashboard--dark .creator-review-validation {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .32);
}

.dashboard--dark .creator-review-validation.invalid {
  background: rgba(220, 38, 38, .16) !important;
  border-color: rgba(248, 113, 113, .42) !important;
}

.dashboard--dark .creator-review-success-field {
  background: rgba(34, 197, 94, .12) !important;
  border-color: rgba(34, 197, 94, .32) !important;
}

.dashboard--dark .creator-review-success-field span {
  color: #4ade80 !important;
}

.dashboard--dark .creator-review-success-field strong {
  color: #86efac !important;
}

.dashboard--dark .creator-review-age-pill--adult {
  background: rgba(21, 153, 71, .2);
  color: #4ade80;
  border-color: rgba(74, 222, 128, .3);
}

.dashboard--dark .creator-review-age-pill--minor {
  background: rgba(220, 38, 38, .18);
  color: #f87171;
  border-color: rgba(248, 113, 113, .3);
}

.dashboard--dark .creator-review-danger-field {
  background: rgba(220, 38, 38, .16) !important;
  border-color: rgba(248, 113, 113, .42) !important;
}

.dashboard--dark .creator-review-close-btn {
  background: #1e293b !important;
  color: #94a3b8 !important;
}
.dashboard--dark .creator-review-close-btn:hover {
  background: #293548 !important;
}

.dashboard--dark .creator-review-shortcuts-hint {
  color: #475569;
}
.dashboard--dark .creator-review-select--error {
  background: rgba(220, 38, 38, .16) !important;
  border-color: rgba(248, 113, 113, .42) !important;
}

@media (max-width: 860px) {
  .review-modal-overlay--tinder {
    background: #000;
    backdrop-filter: none;
  }

  .review-modal--tinder {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #000;
    overflow: hidden;
  }

  .review-close--desktop,
  .tinder-review-panel {
    display: none !important;
  }

  .tinder-review-media {
    width: 100vw;
    height: calc(100dvh - 88px);
    border-radius: 0;
    box-shadow: none;
  }

  .tinder-review-media > img {
    height: 100%;
    object-fit: cover;
  }

  .tinder-progress-row {
    top: max(12px, env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    gap: 6px;
  }

  .tinder-top-tools {
    top: calc(max(12px, env(safe-area-inset-top)) + 22px);
    left: 16px;
    right: 14px;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .tinder-filter-btn {
    width: 46px;
    height: 46px;
    font-size: 24px;
    border-radius: 16px;
  }

  .tinder-chip-scroll button,
  .tinder-chip-scroll span {
    min-height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }

  .tinder-profile {
    width: 58px;
    height: 58px;
  }

  .tinder-side-action {
    right: 16px;
    width: 66px;
    height: 66px;
  }

  .tinder-side-action--star { top: 102px; }
  .tinder-side-action--fire { top: 178px; }

  .tinder-arrow {
    display: none;
  }

  .tinder-content-info {
    left: 22px;
    right: 16px;
    bottom: 20px;
  }

  .tinder-policy-pill {
    min-height: 40px;
    padding: 0 14px;
  }

  .tinder-content-info h2 {
    font-size: 42px;
    margin-top: 12px;
  }

  .tinder-content-info p {
    font-size: 18px;
  }

  .tinder-tags-inline {
    margin-top: 14px;
  }

  .tinder-review-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: 88px;
    padding: 9px 12px max(9px, env(safe-area-inset-bottom));
    gap: 10px;
    justify-content: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.92) 24%, rgba(0,0,0,0.98));
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .tinder-round-action {
    width: 56px;
    height: 56px;
    border-radius: 20px;
    font-size: 30px;
  }

  .tinder-round-count {
    width: 78px;
    height: 52px;
    font-size: 18px;
  }

  .tinder-final-action {
    display: none;
  }

  .tinder-round-action--next::after {
    content: "";
  }

  .review-sheet-backdrop {
    align-items: end;
    place-items: end center;
    padding: 0;
  }

  .review-sheet,
  .review-sheet--full {
    width: 100vw;
    max-height: 86dvh;
    border-radius: 30px 30px 0 0;
    padding: 16px;
  }

  .review-feed-sheet-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .feed-control-card {
    min-height: 66px;
    padding: 10px 12px;
  }

  .feed-control-actions {
    gap: 7px;
  }

  .feed-priority,
  .feed-feature {
    width: 40px;
    height: 40px;
  }

  .priority-picker-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .creator-review-modal {
    display: block;
    width: 100vw;
    height: 100dvh;
    padding: 10px;
    overflow-y: auto;
    background: #f8fafc;
  }

  .creator-review-media {
    min-height: auto;
    display: block;
  }

  .creator-review-media-frame {
    height: 42dvh;
    min-height: 260px;
    border-radius: 22px;
  }

  .creator-review-media-toolbar {
    margin-top: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(86px, auto) minmax(0, 1fr);
  }

  .creator-review-media-toolbar button {
    min-height: 58px;
    border-radius: 18px;
    font-size: 15px;
  }

  .creator-review-rotate-btns {
    bottom: 8px;
    right: 8px;
  }

  .creator-review-panel {
    display: flex !important;
    margin: 10px 0 0;
    padding: 0 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  .creator-review-identity-grid {
    grid-template-columns: 1fr;
  }

  .creator-review-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    grid-template-columns: 1fr 1fr;
    margin: 0 -10px -10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(248,250,252,.78), #f8fafc 35%);
  }

  .dashboard--dark .creator-review-modal {
    background: #0f172a;
  }

  .dashboard--dark .creator-review-actions {
    background: linear-gradient(180deg, rgba(15,23,42,.78), #0f172a 35%);
  }
  .creator-review-shortcuts-hint {
    display: none;
  }
}

@media (max-width: 390px) {
  .tinder-top-tools {
    left: 12px;
    right: 10px;
  }

  .tinder-filter-btn {
    width: 42px;
    height: 42px;
  }

  .tinder-profile {
    width: 52px;
    height: 52px;
  }

  .tinder-chip-scroll button,
  .tinder-chip-scroll span {
    min-height: 40px;
    padding: 0 13px;
    font-size: 14px;
  }

  .tinder-side-action {
    width: 58px;
    height: 58px;
    font-size: 30px;
  }

  .tinder-side-action--star { top: 94px; }
  .tinder-side-action--fire { top: 160px; }

  .tinder-content-info h2 {
    font-size: 36px;
  }

  .tinder-content-info p {
    font-size: 16px;
  }

  .tinder-round-action {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    font-size: 27px;
  }

  .tinder-round-count {
    width: 68px;
    height: 48px;
  }
}

/* ===== Moderation vNext: cleaner desktop + Tinder-style mobile actions ===== */
@media (min-width: 861px) {
  .review-modal--tinder {
    grid-template-columns: minmax(420px, 1.08fr) minmax(430px, 0.92fr);
    gap: 18px;
  }

  .game-review-modal.review-modal--tinder {
    width: min(1220px, 94vw);
    grid-template-columns: 420px minmax(620px, 1fr);
  }

  .tinder-review-media {
    border-radius: 24px;
  }

  .game-review-modal .tinder-review-media {
    aspect-ratio: 9 / 16;
    width: 100%;
    height: auto;
    max-height: 100%;
    align-self: center;
  }

  .tinder-top-tools,
  .tinder-side-action,
  .tinder-content-info {
    display: none !important;
  }

  .tinder-arrow {
    opacity: 0.92;
  }

  .tinder-review-panel {
    margin-left: 0;
  }

  .tinder-desktop-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-feed-compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feed-control-card {
    min-height: 68px;
    padding: 10px 11px;
    gap: 8px;
  }

  .feed-control-main {
    gap: 8px;
  }

  .feed-control-main strong {
    font-size: 13px;
  }

  .feed-control-main small {
    font-size: 10px;
  }

  .feed-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .feed-control-actions {
    gap: 6px;
  }

  .review-toggle {
    width: 46px;
    height: 27px;
  }

  .review-toggle span {
    width: 21px;
    height: 21px;
  }

  .review-toggle.active span {
    transform: translateX(19px);
  }

  .feed-feature,
  .feed-priority {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }

  .feed-feature {
    font-size: 20px;
  }

  .feed-priority {
    font-size: 16px;
  }

  .review-sheet--full {
    width: min(960px, 96vw);
    height: min(760px, 92vh);
  }

  .review-feed-sheet-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tinder-round-action,
.tinder-round-count {
  border-radius: 999px;
  background: radial-gradient(circle at 35% 25%, #ffffff 0%, #eef3ff 78%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.tinder-round-action--reject {
  color: #ff006e;
}

.tinder-round-action--heart {
  color: #22c55e;
  font-size: 36px;
}

.tinder-round-action--heart.active {
  background: radial-gradient(circle at 35% 25%, #dcfce7 0%, #86efac 78%);
  color: #15803d;
}

.tinder-round-action--fire {
  color: #f97316;
  font-size: 30px;
}

.tinder-round-action--fire.active {
  background: radial-gradient(circle at 35% 25%, #ffedd5 0%, #fdba74 78%);
  color: #c2410c;
}

.tinder-round-action--next {
  color: #0b70ff;
}

.feed-control-card {
  overflow: hidden;
}

.feed-control-main {
  flex: 1 1 auto;
}

.feed-control-actions {
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .tinder-side-action {
    display: none !important;
  }

  .tinder-review-media {
    height: calc(100dvh - 92px);
  }

  .tinder-top-tools {
    top: calc(max(12px, env(safe-area-inset-top)) + 22px);
  }

  .tinder-chip-scroll {
    mask-image: linear-gradient(90deg, #000 0%, #000 84%, transparent 100%);
  }

  .tinder-content-info {
    bottom: 18px;
  }

  .tinder-round-action {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    font-size: 28px;
  }

  .tinder-round-action--reject {
    font-size: 36px;
  }

  .tinder-round-action--heart {
    font-size: 34px;
  }

  .tinder-round-action--fire {
    font-size: 27px;
  }

  .tinder-review-actions {
    height: 92px;
    gap: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .tinder-final-action {
    display: none;
  }

  .review-sheet-backdrop--full {
    place-items: stretch;
    align-items: stretch;
  }

  .review-sheet--full {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }

  .review-feed-sheet-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feed-control-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 64px;
    padding: 10px 12px;
  }

  .feed-control-main strong {
    font-size: 15px;
  }

  .feed-control-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .review-toggle {
    width: 50px;
    height: 29px;
  }

  .review-toggle span {
    width: 23px;
    height: 23px;
  }

  .review-toggle.active span {
    transform: translateX(21px);
  }

  .feed-feature,
  .feed-priority {
    width: 42px;
    height: 42px;
    border-radius: 999px;
  }
}

@media (max-width: 390px) {
  .tinder-round-action {
    width: 52px;
    height: 52px;
  }

  .tinder-review-actions {
    gap: 8px;
  }
}

/* ===== Final moderation polish + theme toggle ===== */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  height: 36px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #ffffff;
  color: #172033;
  padding: 0 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.theme-toggle:hover {
  background: #eef3ff;
  color: #1455d9;
}

.dashboard--dark,
.dashboard--dark .main,
.dashboard--dark .content {
  background: #0f172a;
  color: #e5e7eb;
}

.dashboard--dark .topbar,
.dashboard--dark .table-card,
.dashboard--dark .dash-card,
.dashboard--dark .info-card,
.dashboard--dark .config-card,
.dashboard--dark .column-tools {
  background: #111827;
  border-color: #243044;
  color: #e5e7eb;
}

.dashboard--dark h1,
.dashboard--dark h2,
.dashboard--dark h3,
.dashboard--dark .dash-card-title,
.dashboard--dark .backlog-section-title h2,
.dashboard--dark .info-card-body strong {
  color: #f8fafc;
}

.dashboard--dark p,
.dashboard--dark .dash-card-desc,
.dashboard--dark .info-title-block p,
.dashboard--dark .backlog-section-title p {
  color: #94a3b8;
}

.dashboard--dark th {
  background: #1e293b;
  color: #e5e7eb;
  border-color: #334155;
}

.dashboard--dark td {
  border-color: #263346;
}

.dashboard--dark tbody tr:nth-child(odd),
.dashboard--dark tbody tr:nth-child(even) {
  background: #111827;
}

.dashboard--dark tbody tr:hover {
  background: #172033;
}

.dashboard--dark .theme-toggle {
  background: #1e293b;
  color: #f8fafc;
  border-color: #334155;
}

/* Desktop: do not duplicate mobile chips/avatar on top of the media. */
.tinder-top-tools {
  display: none;
}

.tinder-review-media {
  isolation: isolate;
}

.tinder-review-actions {
  gap: 14px;
  padding-bottom: 8px;
}

.tinder-round-action {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at top left, #ffffff, #eef3ff);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.tinder-round-action--undo { color: #2563eb; }
.tinder-round-action--reject { color: #ff006e; }
.tinder-round-action--heart { color: #22c55e; font-size: 36px; }
.tinder-round-action--heart.active { background: #dcfce7; color: #16a34a; }
.tinder-round-action--fire { color: #f97316; font-size: 31px; }
.tinder-round-action--fire.active { background: #ffedd5; color: #ea580c; }
.tinder-round-action--next { color: #2563eb; }

.tinder-final-action {
  height: 62px;
  border-radius: 999px;
  padding: 0 30px;
}

/* Better feed cards on desktop. */
.feed-control-card {
  min-height: 72px;
  overflow: hidden;
}

.feed-control-actions {
  align-items: center;
}

.review-feed-error {
  margin: 0 0 8px;
  padding: 0;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* Priority popup polish. */
.priority-picker-grid {
  grid-template-columns: repeat(7, minmax(58px, 1fr));
  gap: 12px;
  padding: 4px 0 2px;
}

.priority-picker-grid button {
  height: 62px;
  border-radius: 20px;
  background: #f1f5f9;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
}

.priority-picker-grid button.active {
  background: linear-gradient(135deg, #1455d9, #0f48bd);
  box-shadow: 0 12px 24px rgba(20, 85, 217, 0.28);
}

.review-sheet:has(.priority-picker-grid) {
  width: min(700px, 94vw);
  padding: 22px;
}

.review-sheet:has(.priority-picker-grid) .review-sheet-handle {
  margin-top: 0;
}

.review-sheet:has(.priority-picker-grid) .review-sheet-header {
  padding-bottom: 18px;
}

/* Lightbox caption */
.review-lightbox-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.review-lightbox-card strong {
  color: #fff;
  font-size: 18px;
  font-weight: 1000;
  text-shadow: 0 3px 14px rgba(0,0,0,.45);
}

.review-lightbox-card img {
  max-width: 94vw;
  max-height: 86vh;
  border-radius: 22px;
  object-fit: contain;
}

@media (max-width: 860px) {
  .theme-toggle {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .tinder-top-tools {
    display: grid;
  }

  .tinder-filter-btn {
    font-size: 0;
  }

  .tinder-filter-btn::before {
    content: "⚙️";
    font-size: 23px;
  }

  .tinder-chip-policy {
    background: linear-gradient(135deg, #00b3a4, #079284) !important;
  }

  .tinder-chip-policy.danger {
    background: linear-gradient(135deg, #f43f5e, #dc2626) !important;
  }

  .tinder-review-actions {
    height: 96px;
    padding-top: 12px;
    gap: 12px;
  }

  .tinder-round-action {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 31px;
  }

  .tinder-round-action--reject {
    font-size: 38px;
  }

  .tinder-round-action--heart {
    font-size: 36px;
  }

  .tinder-round-action--fire {
    font-size: 30px;
  }

  .tinder-review-media {
    height: calc(100dvh - 96px);
  }

  .review-sheet--full {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
  }

  .review-sheet--full .review-feed-sheet-list {
    grid-template-columns: 1fr;
  }

  .review-sheet--full .feed-control-card {
    min-height: 70px;
  }

  .review-sheet:has(.priority-picker-grid) {
    width: 100vw;
    border-radius: 28px 28px 0 0;
  }

  .priority-picker-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 390px) {
  .tinder-round-action {
    width: 54px;
    height: 54px;
  }

  .tinder-review-actions {
    gap: 8px;
  }
}

/* ===== Latest moderation refinements ===== */
.tinder-chip-policy--icon {
  width: 54px;
  min-width: 54px;
  justify-content: center;
  padding: 0 !important;
  font-size: 23px !important;
  background: rgba(0, 179, 120, 0.88) !important;
  border-color: rgba(255,255,255,0.34) !important;
}

.tinder-chip-policy--icon.danger {
  background: rgba(220, 38, 38, 0.9) !important;
}

.feed-control-card:has(.review-toggle:not(.active)) .feed-priority,
.feed-control-card:has(.review-toggle:not(.active)) .feed-feature {
  opacity: 0.55;
}

.priority-picker-grid {
  grid-template-columns: repeat(7, minmax(58px, 1fr));
  gap: 12px;
}

.priority-picker-grid button {
  height: 64px;
  border-radius: 20px;
  background: linear-gradient(180deg, #f8fafc, #e8eef8);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.priority-picker-grid button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.13);
}

.priority-picker-grid button.active {
  background: linear-gradient(135deg, #1455d9, #0b45bd);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(20, 85, 217, 0.26);
}

.tinder-round-action {
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #f7fbff 42%, #dfe8f8 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.22),
    inset 0 2px 3px rgba(255,255,255,0.95),
    inset 0 -5px 10px rgba(15, 23, 42, 0.12);
  text-shadow: 0 2px 0 rgba(255,255,255,0.55);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.tinder-round-action:hover {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.03);
}

.tinder-round-action:active {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    inset 0 2px 6px rgba(15, 23, 42, 0.12);
}

.tinder-round-action--undo,
.tinder-round-action--next {
  color: #1455d9;
  font-size: 25px;
}

.tinder-round-action--reject {
  font-size: 21px;
}

.tinder-round-action--heart {
  color: #8b5cf6;
  font-size: 27px;
}

.tinder-round-action--heart.active {
  background:
    radial-gradient(circle at 35% 25%, #fff 0%, #f3e8ff 44%, #c084fc 100%);
  color: #7c3aed;
}

.tinder-round-action--fire {
  font-size: 27px;
}

.tinder-round-action--fire.active {
  background:
    radial-gradient(circle at 35% 25%, #fff7ed 0%, #fed7aa 44%, #fb923c 100%);
}

.tinder-round-action--fullscreen {
  color: #64748b;
  font-size: 22px;
}

@media (min-width: 861px) {
  .review-sheet:not(.review-sheet--full) {
    width: min(680px, 92vw);
    padding: 22px;
    border-radius: 28px;
  }

  .review-sheet:not(.review-sheet--full) .review-sheet-header {
    padding: 4px 0 18px;
  }

  .review-sheet:not(.review-sheet--full) .review-sheet-header h3 {
    font-size: 26px;
  }
}

@media (max-width: 860px) {
  .tinder-review-actions {
    height: 98px;
    gap: 12px;
    padding-top: 14px;
  }

  .tinder-round-action {
    width: 58px;
    height: 58px;
    border-radius: 50%;
  }

  .tinder-round-action--undo,
  .tinder-round-action--next {
    font-size: 23px;
  }

  .tinder-round-action--reject {
    font-size: 20px;
  }

  .tinder-round-action--heart,
  .tinder-round-action--fire {
    font-size: 26px;
  }

  .review-sheet-backdrop--full {
    align-items: stretch;
    place-items: stretch;
  }

  .review-sheet--full {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    padding: max(20px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  }

  .review-feed-sheet-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feed-control-card {
    display: flex;
    align-items: center;
    min-height: 76px;
    padding: 12px 14px;
  }

  .feed-control-card .feed-control-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .review-toggle {
    width: 58px;
    height: 34px;
  }

  .review-toggle span {
    width: 28px;
    height: 28px;
  }

  .review-toggle.active span {
    transform: translateX(24px);
  }

  .feed-feature,
  .feed-priority {
    width: 46px;
    height: 46px;
    border-radius: 50%;
  }

  .priority-picker-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 390px) {
  .tinder-round-action {
    width: 52px;
    height: 52px;
  }
}

.profile-logo-input {
  display: none;
}

.sidebar-logo-upload {
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  border: none;
  outline: none;
  transition: opacity 0.15s ease, transform 0.12s ease;
}

.sidebar-logo-upload:hover {
  opacity: 0.85;
  transform: scale(1.04);
}

.sidebar-logo-upload img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ─── Sidebar resize handle ─────────────────────────────────────────────────── */

.sidebar-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background 0.15s;
  user-select: none;
}

.sidebar-resize-handle:hover {
  background: rgba(255,255,255,0.12);
}

/* ─── Sidebar medium mode (icons slightly larger) ───────────────────────────── */

.sidebar--medium .nav-icon {
  font-size: 19px;
  width: 22px;
}

/* ─── Sidebar narrow (icon-only) mode ───────────────────────────────────────── */

.sidebar--narrow .sidebar-title {
  justify-content: center;
  padding: 16px 8px;
}

.sidebar--narrow .sidebar-title > div {
  display: none;
}

.sidebar--narrow .sidebar-close {
  display: none !important;
}

.sidebar--narrow .nav-label {
  display: none;
}

.sidebar--narrow .chevron {
  display: none;
}

.sidebar--narrow .sidebar-nav a > span:not(.nav-icon) {
  display: none;
}

.sidebar--narrow .sidebar-nav a,
.sidebar--narrow .sidebar-group-title {
  justify-content: center;
  gap: 0;
  padding: 10px 6px;
  min-height: 54px;
}

.sidebar--narrow .nav-icon {
  font-size: 30px;
  width: auto;
  line-height: 1;
}

.sidebar--narrow .sidebar-group-title > span:first-child {
  justify-content: center;
}

.sidebar--narrow .sidebar-nav a.subitem,
.sidebar--narrow .sidebar-nav a.active.subitem {
  justify-content: flex-start;
  padding-left: 8px;
  padding-right: 4px;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}

/* ─── Game Detail Modal ──────────────────────────────────────────────────────── */

.game-detail-modal {
  background: #fff;
  border-radius: 14px;
  width: min(860px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 48px rgba(0,0,0,0.18);
  position: relative;
}

/* Header */
.game-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px 18px;
  border-bottom: 1px solid #eef0f5;
  flex-shrink: 0;
}

.game-detail-cover {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid #e8eaf0;
}

.game-detail-header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-detail-header-info h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #1a1d23;
}

.game-detail-priority {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  background: #f0f2f7;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}

/* Body */
.game-detail-body {
  padding: 4px 28px 20px;
  display: flex;
  flex-direction: column;
}

.game-detail-section {
  padding: 16px 0;
  border-bottom: 1px solid #f0f2f7;
}

.game-detail-section:last-child {
  border-bottom: none;
}

.game-detail-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a0a5b0;
  margin: 0 0 12px;
}

/* Creator row (avatar + fields side by side) */
.game-detail-creator-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.game-detail-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #e8eaf0;
}

.game-detail-avatar-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Field grid */
.game-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px 20px;
  flex: 1;
}

.game-detail-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.game-detail-field span {
  font-size: 10px;
  color: #a0a5b0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.game-detail-field strong {
  font-size: 13px;
  color: #1a1d23;
  font-weight: 600;
  word-break: break-word;
}

/* Status counters */
.game-detail-counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.game-detail-counter {
  border-radius: 10px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.gdc-value {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.gdc-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gdc--draft   { background: #eef0f5; color: #555; }
.gdc--removed { background: #ffe0e0; color: #b33030; }
.gdc--active  { background: #d4f5e2; color: #0e7a35; }
.gdc--blocked { background: #fff3cd; color: #b87000; }

/* Game Actions / Media layout */
.game-detail-actions-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Creator photo column */
.game-detail-creator-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.game-detail-creator-photo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e8eaf0;
}

.game-detail-creator-photo-ph {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}

.game-detail-creator-photo > span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a0a5b0;
}

/* Action cards grid */
.game-detail-actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.game-action-card {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e8eaf0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.game-action-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.game-action-card-thumb-empty {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-size: 22px;
}

.game-action-card-info {
  padding: 7px 8px 5px;
  border-top: 1px solid #f0f2f7;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.game-action-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #1a1d23;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-action-card-meta {
  font-size: 10px;
  color: #a0a5b0;
}

/* Status footer strip */
.game-action-card-status {
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
}

.gas--active    { background: #d4f5e2; color: #0e7a35; }
.gas--blocked   { background: #ffe0e0; color: #b33030; }
.gas--draft     { background: #eef0f5; color: #555555; }
.gas--rejected  { background: #ffe0e0; color: #b33030; }
.gas--review    { background: #f0e8ff; color: #6b21a8; }
.gas--published { background: #d4f5e2; color: #0e7a35; }
.gas--deleted,
.gas--delete    { background: #f0f0f0; color: #666666; }

.game-detail-no-actions {
  font-size: 13px;
  color: #999;
  grid-column: 1 / -1;
  padding: 12px 0;
}

/* Responsive */
@media (max-width: 640px) {
  .game-detail-header {
    padding: 18px 16px 14px;
    flex-direction: column;
    align-items: flex-start;
  }

  .game-detail-body {
    padding: 4px 16px 16px;
  }

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

  .game-detail-counters {
    grid-template-columns: repeat(2, 1fr);
  }

  .game-detail-cover {
    width: 72px;
    height: 72px;
  }

  .game-detail-actions-layout {
    flex-direction: column;
  }

  .game-detail-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
  }
}

@media (max-width: 400px) {
  .game-detail-grid {
    grid-template-columns: 1fr;
  }

  .game-detail-counters {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Game Detail Modal — admin form (gdm-*) ────────────────────────────────── */

.gdm-modal {
  background: #fff;
  border-radius: 12px;
  width: min(920px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 48px rgba(0,0,0,0.20);
  overflow: hidden;
}

.gdm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid #e8eaf0;
  flex-shrink: 0;
}

.gdm-header h2 { margin: 0; font-size: 17px; font-weight: 700; color: #1a1d23; }

.gdm-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #888;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1;
}
.gdm-close:hover { background: #f0f2f7; color: #333; }

.gdm-body { flex: 1; overflow-y: auto; padding: 18px 22px 12px; }

/* Top row: fields + creator photo */
.gdm-top { display: flex; gap: 18px; align-items: flex-start; }

.gdm-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.gdm-creator-photo { flex-shrink: 0; width: 155px; }

.gdm-creator-photo img {
  width: 155px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e0e4ef;
  display: block;
}

.gdm-creator-photo-ph {
  width: 155px;
  height: 180px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 700;
  color: #fff;
}

/* Grid layouts */
.gdm-r3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.gdm-r4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; }
.gdm-mt { margin-top: 12px; }

/* Field */
.gdm-f { display: flex; flex-direction: column; gap: 3px; cursor: default; }
.gdm-l { font-size: 11px; font-weight: 600; color: #7a7f8e; }

.gdm-i {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d2d6e0;
  border-radius: 6px;
  font-size: 13px;
  color: #1a1d23;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.gdm-i:read-only { background: #f8f9fc; color: #444; }
.gdm-sel { cursor: pointer; }
.gdm-num { text-align: right; }

/* Input + checkbox row */
.gdm-irow { display: flex; align-items: center; gap: 6px; }
.gdm-irow .gdm-i { flex: 1; min-width: 0; }
.gdm-cb { width: 15px; height: 15px; flex-shrink: 0; accent-color: #4a6cf7; cursor: pointer; margin: 0; }

/* Section label */
/* Badge displayed as a field value (replaces input) */
.gdm-veriff-badge-cell {
  height: 32px;
  display: flex;
  align-items: center;
}

.gdm-sec-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a0a5b0;
  border-top: 1px solid #f0f2f7;
  padding-top: 12px;
  margin-bottom: 10px;
}

/* Game Actions area */
.gdm-actions-layout { display: flex; gap: 14px; align-items: flex-start; }
.gdm-act-creator { flex-shrink: 0; }

.gdm-act-creator-img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e8eaf0;
  display: block;
}

.gdm-act-creator-ph {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  color: #fff;
}

/* Action cards */
.gdm-act-cards { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }

.gdm-act-card {
  width: 105px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e0e4ef;
  display: flex;
  flex-direction: column;
}

.gdm-act-thumb-wrap { width: 100%; }
.gdm-act-thumb { width: 100%; height: 80px; object-fit: cover; display: block; }
.gdm-act-thumb-empty { width: 100%; height: 80px; background: #eef0f5; }

.gdm-act-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.gdm-acb-name   { font-size: 12px; font-weight: 700; color: #fff; }
.gdm-acb-id     { font-size: 11px; color: rgba(255,255,255,0.85); }
.gdm-acb-order  { font-size: 11px; color: rgba(255,255,255,0.85); }
.gdm-acb-status { font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.9); text-transform: uppercase; }

.gdm-acb--blocked   { background: #2563eb; }
.gdm-acb--active    { background: #16a34a; }
.gdm-acb--draft     { background: #6b7280; }
.gdm-acb--rejected  { background: #dc2626; }
.gdm-acb--review    { background: #7c3aed; }
.gdm-acb--published { background: #16a34a; }
.gdm-acb--deleted,
.gdm-acb--delete    { background: #4b5563; }

/* Footer */
.gdm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #e8eaf0;
  flex-shrink: 0;
  background: #fff;
}

/* Responsive */
@media (max-width: 700px) {
  .gdm-top { flex-direction: column-reverse; gap: 12px; }
  .gdm-creator-photo { width: 100%; display: flex; justify-content: center; }
  .gdm-creator-photo img,
  .gdm-creator-photo-ph { width: 72px; height: 72px; border-radius: 50%; }
  .gdm-r3, .gdm-r4 { grid-template-columns: repeat(2, 1fr); }
  .gdm-body { padding: 14px 16px 10px; }
}

@media (max-width: 440px) {
  .gdm-r3 { grid-template-columns: 1fr; }
  .gdm-r4 { grid-template-columns: repeat(2, 1fr); }
}

/* Fase 4: Games Detail modal polish */
.simple-modal-overlay.gdm-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
}

.gdm-modal {
  width: min(940px, 96vw);
  max-height: 90dvh;
  min-height: 0;
}

.gdm-modal .gdm-header {
  gap: 16px;
  padding: 16px 22px;
  background: #fff;
}

.gdm-header-main {
  min-width: 0;
}

.gdm-header-main h2 {
  margin: 0;
  color: #172033;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.2;
}

.gdm-header-main p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gdm-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.gdm-modal .gdm-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  display: inline-grid;
  place-items: center;
}

.gdm-modal .gdm-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.gdm-modal .gdm-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
}

.gdm-section {
  background: #fff;
  border: 1px solid #e5eaf2;
  border-radius: 12px;
  padding: 16px;
}

.gdm-section-title {
  margin-bottom: 14px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gdm-modal .gdm-fields {
  gap: 12px;
}

.gdm-modal .gdm-r3,
.gdm-modal .gdm-r4 {
  gap: 10px 12px;
}

.gdm-modal .gdm-l {
  color: #7a8495;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.gdm-modal .gdm-i {
  min-width: 0;
  height: 36px;
  border-radius: 8px;
  border-color: #d9e0ea;
  background: #fff;
  color: #172033;
  overflow-wrap: anywhere;
}

.gdm-modal .gdm-i:read-only {
  background: #f8fafc;
}

.gdm-modal .gdm-irow {
  min-width: 0;
}

.gdm-modal .gdm-creator-photo img,
.gdm-modal .gdm-creator-photo-ph {
  border-radius: 14px;
  border: 1px solid #e2e8f0;
}

.gdm-modal .gdm-actions-layout {
  gap: 16px;
}

.gdm-modal .gdm-act-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  width: 100%;
}

.gdm-modal .gdm-act-card {
  width: auto;
  min-width: 0;
  border-radius: 10px;
  border-color: #e2e8f0;
  background: #fff;
}

.gdm-modal .gdm-act-thumb {
  height: 92px;
}

.gdm-modal .gdm-act-thumb-empty {
  height: 92px;
  background: #eef2f7;
}

.gdm-modal .gdm-act-body {
  min-height: 74px;
}

.gdm-modal .gdm-acb-name,
.gdm-modal .gdm-acb-id,
.gdm-modal .gdm-acb-order,
.gdm-modal .gdm-acb-status {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gdm-modal .gdm-footer {
  background: #fff;
  padding: 14px 22px;
}

@media (max-width: 700px) {
  .simple-modal-overlay.gdm-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .gdm-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    border-radius: 18px 18px 0 0;
  }

  .gdm-modal .gdm-header {
    padding: 14px;
    gap: 10px;
  }

  .gdm-header-main h2 {
    font-size: 17px;
  }

  .gdm-header-actions {
    gap: 8px;
  }

  .gdm-header-actions .status-badge {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gdm-modal .gdm-close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .gdm-modal .gdm-body {
    padding: 12px 12px 16px;
    gap: 12px;
  }

  .gdm-section {
    padding: 14px;
  }

  .gdm-modal .gdm-top {
    flex-direction: column-reverse;
  }

  .gdm-modal .gdm-r3,
  .gdm-modal .gdm-r4 {
    grid-template-columns: 1fr;
  }

  .gdm-modal .gdm-creator-photo {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .gdm-modal .gdm-creator-photo img,
  .gdm-modal .gdm-creator-photo-ph {
    width: 72px;
    height: 72px;
    border-radius: 50%;
  }

  .gdm-modal .gdm-actions-layout {
    flex-direction: column;
  }

  .gdm-modal .gdm-act-creator {
    display: none;
  }

  .gdm-modal .gdm-act-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gdm-modal .gdm-footer {
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  }

  .gdm-modal .gdm-footer .cancel-button,
  .gdm-modal .gdm-footer .save-button {
    min-height: 50px;
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  .gdm-modal .gdm-act-cards {
    grid-template-columns: 1fr;
  }
}

.dashboard--dark .gdm-modal,
.dashboard--dark .gdm-modal .gdm-header,
.dashboard--dark .gdm-modal .gdm-footer,
.dashboard--dark .gdm-section {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dashboard--dark .gdm-modal .gdm-body {
  background: #262626 !important;
}

.dashboard--dark .gdm-header-main h2,
.dashboard--dark .gdm-modal .gdm-i {
  color: #ececec !important;
}

.dashboard--dark .gdm-header-main p,
.dashboard--dark .gdm-section-title,
.dashboard--dark .gdm-modal .gdm-l {
  color: #b4b4b4 !important;
}

.dashboard--dark .gdm-modal .gdm-i,
.dashboard--dark .gdm-modal .gdm-close,
.dashboard--dark .gdm-modal .gdm-act-card {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dashboard--dark .gdm-modal .gdm-i:read-only,
.dashboard--dark .gdm-modal .gdm-act-thumb-empty {
  background: #333 !important;
}

.dashboard--dark .gdm-modal .gdm-close {
  color: #ececec !important;
}

.dashboard--dark .gdm-modal .gdm-close:hover {
  background: rgba(239,68,68,0.18) !important;
  color: #f87171 !important;
}

/* ─── Inline checkbox+label helper (used in gdm-* and vdm-* forms) ─────────── */
.gdm-f--inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  cursor: default;
}

/* ─── Game Actions media strip (gdm-strip-*) ───────────────────────────────── */
.gdm-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 8px;
  scrollbar-width: none;
}
.gdm-strip::-webkit-scrollbar { display: none; }
.gdm-strip-card {
  flex-shrink: 0;
  width: 110px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e8eaf0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #f8f9fc;
  transition: border-color 0.15s;
}
.gdm-strip-card:hover { border-color: #6366f1; }
.gdm-strip-thumb {
  position: relative;
  width: 100%;
  height: 130px;
  background: #e8eaf0;
  overflow: hidden;
}
.gdm-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gdm-strip-thumb-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #bbb;
}
.gdm-strip-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.gdm-strip-badge--active    { background: #d4f5e2; color: #0e7a35; }
.gdm-strip-badge--published { background: #d4f5e2; color: #0e7a35; }
.gdm-strip-badge--blocked   { background: #ffe0e0; color: #b33030; }
.gdm-strip-badge--rejected  { background: #ffe0e0; color: #b33030; }
.gdm-strip-badge--draft     { background: #eef0f5; color: #555555; }
.gdm-strip-badge--review    { background: #f0e8ff; color: #6b21a8; }
.gdm-strip-badge--pending   { background: #fff3cd; color: #b87000; }
.gdm-strip-meta {
  padding: 5px 6px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gdm-strip-name {
  font-size: 11px;
  font-weight: 600;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gdm-strip-id {
  font-size: 10px;
  color: #888;
}
.dashboard--dark .gdm-strip-card {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
.dashboard--dark .gdm-strip-card:hover { border-color: #8b5cf6; }
.dashboard--dark .gdm-strip-thumb { background: rgba(255,255,255,0.08); }
.dashboard--dark .gdm-strip-thumb-empty { color: #555; }
.dashboard--dark .gdm-strip-name { color: #e8eaf8; }
.dashboard--dark .gdm-strip-id { color: #666; }
.gdm-strip-card--clickable { cursor: zoom-in; }

/* ─── Game Details lightbox (gdm-lightbox-*) ─────────────────────────────── */
.gdm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.gdm-lightbox-panel {
  position: relative;
  max-width: min(800px, 92vw);
  max-height: 88dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.gdm-lightbox-img {
  max-width: 100%;
  max-height: 88dvh;
  border-radius: 10px;
  object-fit: contain;
  display: block;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.6);
}
.gdm-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #1a1a2e;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: background 0.15s, color 0.15s;
}
.gdm-lightbox-close:hover { background: #ef4444; color: #fff; }

/* ─── Placement & Flags redesign (gdm-feed-* / gdm-tags-*) ─────────────────── */
.gdm-placement { display: flex; flex-direction: column; gap: 14px; }
.gdm-feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gdm-feed-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f6f8fc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.gdm-feed-main {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
.gdm-feed-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #eef3ff;
  font-size: 18px;
  flex: 0 0 auto;
}
.gdm-feed-icon--user    { background: #f0e8ff; }
.gdm-feed-icon--creator { background: #fffbe8; }
.gdm-feed-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  white-space: nowrap;
}
.gdm-feed-state {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gdm-feed-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.gdm-feed-star {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: #edf2f7;
  color: #9aa3b2;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gdm-feed-star.active { background: #fff7d6; color: #d99a00; }
.gdm-feed-star:hover   { background: #fef3c7; color: #ca8a04; }
.gdm-feed-priority {
  height: 32px;
  padding: 0 6px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #1a2035;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-width: 46px;
  appearance: none;
  text-align: center;
}
.gdm-feed-toggle {
  width: 46px;
  height: 26px;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  padding: 3px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.15s;
}
.gdm-feed-toggle span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15,23,42,.2);
  transition: transform 0.15s ease;
}
.gdm-feed-toggle.active          { background: #22c55e; }
.gdm-feed-toggle.active span     { transform: translateX(20px); }
.gdm-feed-toggle--sm             { width: 38px; height: 22px; }
.gdm-feed-toggle--sm span        { width: 16px; height: 16px; }
.gdm-feed-toggle--sm.active span { transform: translateX(16px); }
.gdm-feed-flags { display: flex; gap: 10px; flex-wrap: wrap; }
.gdm-feed-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f8fc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
.gdm-tags         { display: flex; flex-direction: column; gap: 8px; }
.gdm-tags-label   { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; }
.gdm-tags-pills   { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; }
.gdm-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef3ff;
  color: #1455d9;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
}
.gdm-tag-pill-remove {
  border: none;
  background: none;
  cursor: pointer;
  color: #1455d9;
  font-size: 14px;
  line-height: 1;
  padding: 0 0 0 2px;
  display: flex;
  align-items: center;
  transition: color 0.12s;
}
.gdm-tag-pill-remove:hover { color: #ef4444; }
.gdm-tag-add { display: flex; gap: 6px; }
.gdm-tag-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #f8f9fc;
  font-size: 12px;
  color: #1a1a2e;
  outline: none;
  transition: border-color 0.12s;
}
.gdm-tag-input:focus    { border-color: #6366f1; }
.gdm-tag-add-btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: none;
  background: #6366f1;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.gdm-tag-add-btn:hover { background: #4f46e5; }
/* Dark mode — Placement & Flags */
.dashboard--dark .gdm-feed-card        { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.dashboard--dark .gdm-feed-icon        { background: rgba(99,102,241,0.15); }
.dashboard--dark .gdm-feed-icon--user  { background: rgba(139,92,246,0.15); }
.dashboard--dark .gdm-feed-icon--creator { background: rgba(234,179,8,0.1); }
.dashboard--dark .gdm-feed-title       { color: #e2e8f0; }
.dashboard--dark .gdm-feed-state       { color: #94a3b8; }
.dashboard--dark .gdm-feed-star        { background: rgba(255,255,255,0.08); color: #666; }
.dashboard--dark .gdm-feed-star.active { background: rgba(253,224,71,0.15); color: #fbbf24; }
.dashboard--dark .gdm-feed-priority    { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.08); color: #e2e8f0; }
.dashboard--dark .gdm-feed-flag        { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #94a3b8; }
.dashboard--dark .gdm-tags-label       { color: #94a3b8; }
.dashboard--dark .gdm-tag-pill         { background: rgba(99,102,241,0.15); color: #818cf8; }
.dashboard--dark .gdm-tag-pill-remove  { color: #818cf8; }
.dashboard--dark .gdm-tag-pill-remove:hover { color: #f87171; }
.dashboard--dark .gdm-tag-input        { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: #e2e8f0; }
.dashboard--dark .gdm-tag-input:focus  { border-color: #818cf8; }
@media (max-width: 520px) { .gdm-feed-grid { grid-template-columns: 1fr; } }

/* ─── Creator Details Modal (cdm-*) ─────────────────────────────────────────── */
.cdm-badge-cell { height: 32px; display: flex; align-items: center; }
.cdm-docs { display: flex; flex-direction: column; gap: 14px; }

/* ─── Game Overview 2-col mobile override ───────────────────────────────────── */
@media (max-width: 480px) {
  .gdm-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gdm-overview-field--span2 { grid-column: span 2; }
  .gdm-placement { gap: 10px; }
  .gdm-feed-card { min-height: 52px; padding: 7px 10px; }
  .gdm-feed-icon { width: 30px; height: 30px; font-size: 16px; }
}

/* ─── Verification Detail Modal (vdm-*) ────────────────────────────────────── */

.vdm-modal {
  background: #fff;
  border-radius: 12px;
  width: min(1100px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 48px rgba(0,0,0,0.22);
  overflow: hidden;
}

.vdm-section {
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  padding: 14px 18px 16px;
  margin-bottom: 14px;
  background: #fff;
}

.vdm-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #1a1d23;
  margin-bottom: 8px;
}

.vdm-divider {
  border: none;
  border-top: 1px solid #e8eaf0;
  margin: 0 0 12px 0;
}

.vdm-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.vdm-section-header-row .vdm-section-title { margin-bottom: 0; }

.vdm-check-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.vdm-mid-check { align-self: center; }

.vdm-edit-btn {
  background: #16a34a;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.vdm-edit-btn:hover { background: #15803d; }

.vdm-add-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vdm-add-btn:hover { background: #1d4ed8; }

/* ─── Verif Details: Agreements accordion add button ─────────────────────────── */
.vdm-agreements-add {
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
  align-self: center;
}
.vdm-agreements-add:hover { background: #1d4ed8; }
.dashboard--dark .vdm-agreements-add { background: #8b5cf6; }
.dashboard--dark .vdm-agreements-add:hover { background: #7c3aed; }

@media (max-width: 700px) {
  .vdm-agreements-add {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
  }
  .vdm-agreements-add-txt { display: none; }
}

.vdm-contract-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.vdm-contract-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  flex: 1;
  align-items: center;
}

.vdm-table-wrap { overflow-x: auto; margin-top: 4px; }

.vdm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 700px;
}
.vdm-table th {
  background: #f4f5f8;
  color: #555;
  font-weight: 600;
  font-size: 11px;
  padding: 7px 10px;
  text-align: left;
  border: 1px solid #e4e6ec;
  white-space: nowrap;
}
.vdm-th-filter { font-size: 9px; color: #bbb; margin-left: 3px; }
.vdm-table td { padding: 6px 10px; border: 1px solid #e4e6ec; color: #444; font-size: 12px; }
.vdm-table tr:hover td { background: #f9fafb; }
.vdm-empty {
  text-align: center;
  color: #aaa;
  font-style: italic;
  padding: 18px;
}
.vdm-empty-inline {
  color: #aaa;
  font-style: italic;
  font-size: 13px;
  margin-top: 12px;
}

.vdm-doc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.vdm-doc-card {
  border: 1px solid #e4e6ec;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.vdm-doc-thumb {
  width: 100%;
  padding: 16px 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f7;
}
.vdm-doc-thumb img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
}
.vdm-doc-thumb-ph {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #c7cde8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}
.vdm-doc-info {
  background: #1e40af;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vdm-doc-name { font-size: 11px; font-weight: 700; color: #fff; }
.vdm-doc-meta { font-size: 10px; color: rgba(255,255,255,0.85); }

/* Responsive */
@media (max-width: 900px) {
  .vdm-contract-fields { grid-template-columns: repeat(2, 1fr); }
  .vdm-doc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .vdm-contract-row { flex-direction: column; align-items: flex-start; }
  .vdm-contract-fields { grid-template-columns: 1fr; }
  .vdm-doc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .gdm-r3 { grid-template-columns: 1fr; }
  .gdm-r4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Reported Game Modal (rgm-*) ─────────────────────────────────── */
.rgm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.rgm-modal {
  background: #fff;
  border-radius: 12px;
  width: min(1080px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}
.rgm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e8eaf0;
  background: #fff;
  flex-shrink: 0;
}
.rgm-header h2 { font-size: 16px; font-weight: 700; margin: 0; color: #1a1d23; }
.rgm-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
  border-radius: 4px;
}
.rgm-close:hover { background: #f3f4f6; color: #1a1d23; }
.rgm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.rgm-info {
  width: 340px;
  min-width: 280px;
  max-width: 380px;
  overflow-y: auto;
  padding: 16px;
  background: #f8f9fc;
  border-right: 1px solid #e8eaf0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.rgm-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  padding: 12px 14px;
}
.rgm-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 10px;
}
.rgm-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
}
.rgm-label { font-size: 11px; color: #9ca3af; white-space: nowrap; padding-top: 2px; }
.rgm-value { font-size: 12px; font-weight: 600; color: #1a1d23; word-break: break-word; }
.rgm-policy-text { color: #b45309; }
.rgm-action-btns { display: flex; gap: 10px; }
.rgm-action-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.rgm-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rgm-action-approve { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.rgm-action-approve:not(:disabled):hover { background: #16a34a; color: #fff; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25); }
.rgm-action-reject { background: #fff1f1; color: #b91c1c; border-color: #fca5a5; }
.rgm-action-reject:not(:disabled):hover { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); }
.rgm-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}
.rgm-preset {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: #374151;
  transition: all 0.12s;
}
.rgm-preset:hover { background: #e0e7ff; border-color: #818cf8; color: #4338ca; }
.rgm-preset.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.rgm-comment {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
  color: #1a1d23;
  transition: border-color 0.15s;
}
.rgm-comment:focus { outline: none; border-color: #2563eb; }
.rgm-media {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.rgm-media-header {
  font-size: 12px;
  color: #6b7280;
  background: #f8f9fc;
  border: 1px solid #e8eaf0;
  border-radius: 7px;
  padding: 8px 12px;
  line-height: 1.6;
}
.rgm-media-header strong { color: #1a1d23; }
.rgm-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.rgm-thumb { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 2px solid #e8eaf0; cursor: pointer; }
.rgm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rgm-carousel {
  display: none;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 4px;
  scrollbar-width: none;
}
.rgm-carousel::-webkit-scrollbar { display: none; }
.rgm-carousel-item {
  flex-shrink: 0;
  width: 130px;
  height: 174px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e8eaf0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.15s;
}
.rgm-carousel-item:hover { border-color: #6366f1; }
.rgm-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rgm-flash-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.rgm-flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  animation: rgm-flash-in 0.15s ease-out forwards;
  pointer-events: none;
}
.rgm-flash--approved { background: rgba(22, 163, 74, 0.9); }
.rgm-flash--rejected { background: rgba(220, 38, 38, 0.9); }
.rgm-flash span { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
@keyframes rgm-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rgm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.rgm-lightbox-img {
  max-width: min(90vw, 600px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  animation: rgm-img-in 0.15s ease-out;
}
.rgm-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rgm-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.rgm-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rgm-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.rgm-lightbox-prev { left: 16px; }
.rgm-lightbox-next { right: 16px; }
.rgm-lightbox-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}
.rgm-decision-err {
  margin-top: 8px;
  font-size: 12px;
  color: #dc2626;
  font-weight: 500;
}
.rgm-comment--error { border-color: #dc2626 !important; }
@media (max-width: 700px) {
  .rgm-overlay { padding: 0; align-items: flex-start; }
  .rgm-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .rgm-body { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rgm-info { width: 100%; max-width: 100%; min-width: 0; border-right: none; overflow-y: visible; }
  .rgm-media { display: none; }
  .rgm-carousel { display: flex; }
  .rgm-action-card { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e8eaf0; z-index: 2; border-radius: 0; }
}
@media (max-width: 400px) {
  .rgm-carousel-item { width: 110px; height: 147px; }
}

/* ── Reported Creator Modal (rcm-*) ──────────────────────────────── */
.rcm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.rcm-modal {
  background: #fff;
  border-radius: 12px;
  width: min(1080px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  position: relative;
}
.rcm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e8eaf0;
  background: #fff;
  flex-shrink: 0;
}
.rcm-header h2 { font-size: 16px; font-weight: 700; margin: 0; color: #1a1d23; }
.rcm-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 4px 8px;
  border-radius: 4px;
}
.rcm-close:hover { background: #f3f4f6; color: #1a1d23; }
.rcm-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.rcm-info {
  width: 340px;
  min-width: 280px;
  max-width: 380px;
  overflow-y: auto;
  padding: 16px;
  background: #f8f9fc;
  border-right: 1px solid #e8eaf0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}
.rcm-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 8px;
  padding: 12px 14px;
}
.rcm-card-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 10px;
}
.rcm-identity-card { display: flex; align-items: center; gap: 14px; }
.rcm-identity-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e8eaf0;
  flex-shrink: 0;
}
.rcm-identity-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rcm-identity-name { font-size: 14px; font-weight: 700; color: #1a1d23; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcm-identity-email { font-size: 11px; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcm-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 12px;
  align-items: start;
}
.rcm-label { font-size: 11px; color: #9ca3af; white-space: nowrap; padding-top: 2px; }
.rcm-value { font-size: 12px; font-weight: 600; color: #1a1d23; word-break: break-word; }
.rcm-policy-text { color: #b45309; }
.rcm-action-btns { display: flex; gap: 10px; }
.rcm-action-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
.rcm-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rcm-action-approve { background: #f0fdf4; color: #15803d; border-color: #86efac; }
.rcm-action-approve:not(:disabled):hover { background: #16a34a; color: #fff; border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25); }
.rcm-action-reject { background: #fff1f1; color: #b91c1c; border-color: #fca5a5; }
.rcm-action-reject:not(:disabled):hover { background: #dc2626; color: #fff; border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25); }
.rcm-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
}
.rcm-preset {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  color: #374151;
  transition: all 0.12s;
}
.rcm-preset:hover { background: #e0e7ff; border-color: #818cf8; color: #4338ca; }
.rcm-preset.active { background: #2563eb; border-color: #2563eb; color: #fff; }
.rcm-comment {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e2e8f0;
  border-radius: 7px;
  padding: 9px 10px;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  font-family: inherit;
  color: #1a1d23;
  transition: border-color 0.15s;
}
.rcm-comment:focus { outline: none; border-color: #2563eb; }
.rcm-decision-err { margin-top: 8px; font-size: 12px; color: #dc2626; font-weight: 500; }
.rcm-comment--error { border-color: #dc2626 !important; }
.rcm-carousel {
  display: none;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 4px 4px;
  scrollbar-width: none;
}
.rcm-carousel::-webkit-scrollbar { display: none; }
.rcm-carousel-item {
  flex-shrink: 0;
  width: 110px;
  height: 147px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #e8eaf0;
  scroll-snap-align: start;
  cursor: pointer;
  transition: border-color 0.15s;
}
.rcm-carousel-item:hover { border-color: #6366f1; }
.rcm-carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcm-profile {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  background: #f8f9fc;
}
.rcm-profile-hero {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e8eaf0;
  padding-bottom: 16px;
  flex-shrink: 0;
}
.rcm-profile-banner {
  height: 96px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 60%, #475569 100%);
}
.rcm-profile-avatar {
  position: absolute;
  bottom: -4px;
  left: 20px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transform: translateY(-40%);
}
.rcm-profile-meta {
  padding: 8px 20px 0 108px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rcm-profile-name { font-size: 17px; font-weight: 800; color: #1a1d23; line-height: 1.2; }
.rcm-profile-email { font-size: 12px; color: #6b7280; }
.rcm-profile-badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.rcm-media-header {
  font-size: 12px;
  color: #6b7280;
  background: #fff;
  border-bottom: 1px solid #e8eaf0;
  padding: 10px 16px;
  line-height: 1.6;
  flex-shrink: 0;
}
.rcm-media-header strong { color: #1a1d23; }
.rcm-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 16px;
  flex: 1;
}
.rcm-thumb { aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 2px solid #e8eaf0; cursor: pointer; transition: border-color 0.15s; }
.rcm-thumb:hover { border-color: #6366f1; }
.rcm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes rcm-flash-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
.rcm-flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  animation: rcm-flash-in 0.15s ease-out forwards;
  pointer-events: none;
}
.rcm-flash--approved { background: rgba(22, 163, 74, 0.9); }
.rcm-flash--rejected { background: rgba(220, 38, 38, 0.9); }
.rcm-flash span { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
@keyframes rcm-img-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rcm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
.rcm-lightbox-img {
  max-width: min(90vw, 520px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  animation: rcm-img-in 0.15s ease-out;
}
.rcm-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rcm-lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.rcm-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.rcm-lightbox-nav:hover { background: rgba(255, 255, 255, 0.25); }
.rcm-lightbox-prev { left: 16px; }
.rcm-lightbox-next { right: 16px; }
.rcm-lightbox-counter {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 500;
  user-select: none;
}
@media (max-width: 700px) {
  .rcm-overlay { padding: 0; align-items: flex-start; }
  .rcm-modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .rcm-body { flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .rcm-info { width: 100%; max-width: 100%; min-width: 0; border-right: none; overflow-y: visible; }
  .rcm-profile { display: none; }
  .rcm-carousel { display: flex; }
  .rcm-action-card { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #e8eaf0; z-index: 2; border-radius: 0; }
}

/* sck-* — System Config Keys table section */
.sck-section { margin-top: 28px; }
.sck-heading { margin-bottom: 14px; }
.sck-heading h2 { font-size: 17px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.sck-heading p  { font-size: 13px; color: #64748b; margin: 0; }
.sck-key { font-family: ui-monospace, "SFMono-Regular", monospace; font-size: 12.5px; background: #f1f5f9; color: #334155; padding: 2px 7px; border-radius: 5px; }
.sck-desc { color: #64748b; font-size: 13px; }

/* danger-button — destructive action (e.g. Delete in AccountModal) */
.danger-button {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1px solid #fca5a5;
  background: #fff;
  color: #dc2626;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.danger-button:hover { background: #fee2e2; border-color: #ef4444; }

/* acm-footer — delete left, close+ok right */
.simple-modal-footer.acm-footer { justify-content: space-between; }
.acm-footer-right { display: flex; gap: 8px; }

/* ccm-* — Custom Coin Movements form */
.ccm-card {
  background: #fff;
  border: 1px solid #e8eaf0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  max-width: 520px;
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ccm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ccm-field label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.ccm-field input,
.ccm-field select,
.ccm-field textarea {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.ccm-field input:focus,
.ccm-field select:focus,
.ccm-field textarea:focus {
  outline: none;
  border-color: #3b6bff;
  box-shadow: 0 0 0 3px rgba(59, 107, 255, 0.1);
}
.ccm-field textarea {
  resize: vertical;
  min-height: 96px;
}
.ccm-actions {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}
@media (max-width: 600px) {
  .ccm-card { max-width: 100%; padding: 20px 16px; }
}

/* ========================================================================================
   PURPLE / NEON THEME + PREMIUM DARK MODE + MOBILE-FIRST
   Appended after all existing rules — safe cascade overrides only.
   ======================================================================================== */

/* ── CSS Custom Properties ──────────────────────────────────────────────────── */
:root {
  --p: #8b5cf6;
  --p-h: #7c3aed;
  --p-lt: #f5f0ff;
  --p-md: #ede9fe;
  --p-bd: #ddd6fe;
  --p-sh: rgba(139, 92, 246, 0.2);
}
.dashboard--dark {
  --p: #a855f7;
  --p-h: #9333ea;
  --p-lt: rgba(168,85,247,.14);
  --p-md: rgba(168,85,247,.2);
  --p-bd: rgba(168,85,247,.32);
  --p-sh: rgba(168,85,247,.28);
}

/* ── Blue → Purple Overrides ─────────────────────────────────────────────── */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Arial, sans-serif; background: #f5f3ff; }
.dashboard { background: #f5f3ff; }

.sidebar-group-title.active-parent { background: transparent; color: #c4b5fd; }

.primary-button { background: #8b5cf6; }
.primary-button:hover { background: #7c3aed; }
.secondary-button { background: #f5f0ff; color: #8b5cf6; }
.secondary-button:hover { background: #ede9fe; }

.filter-tab.active { background: #8b5cf6; color: #fff; }
.view-toggle-btn.active { background: #8b5cf6; color: #fff; }
.view-toggle-btn:hover { background: #ede9fe; color: #7c3aed; }

.details-button, .arrow-button { background: #8b5cf6; }
.details-button:hover { background: #7c3aed; }
.action-main { background: #f5f0ff; color: #8b5cf6; border-color: #ddd6fe; }
.action-main:hover { background: #ede9fe; }
.action-menu button:hover { background: #f5f0ff; color: #8b5cf6; }

.hamburger:hover { background: #f5f0ff; color: #8b5cf6; }

.filter-row input:focus, .form-panel input:focus,
.form-panel select:focus, .form-panel textarea:focus,
.config-card input:focus, .config-card select:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}
.column-tools-button { color: #8b5cf6; border-color: #ddd6fe; }
.column-tools-button:hover { background: #f5f0ff; }
.column-menu input { accent-color: #8b5cf6; }
.resize-handle:hover::after { background: #8b5cf6; }
.draggable-th:hover { background: #f5f0ff; }
.pagination .page-active { background: #ede9fe; color: #7c3aed; }
.info-card-placeholder { background: #f5f0ff; color: #8b5cf6; }
.backlog-section-title > span { background: #f5f0ff; border-color: #ede9fe; }
.priority-picker-grid button.active { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 12px 24px rgba(139,92,246,.26); }
.tinder-section-title button { background: #f5f0ff; color: #8b5cf6; }
.tinder-desktop-tags span { background: #f5f0ff; color: #8b5cf6; }
.tinder-desktop-policy button:not(.danger) { border-color: #e2e8f0; background: #f8fafc; color: #64748b; }
.review-policy-list button.active, .review-option-list button.active { border-color: #8b5cf6; background: #f5f0ff; color: #8b5cf6; }
.review-tag-input-row button, .review-sheet-done { background: #8b5cf6; }
.review-tag-editor button { background: #f5f0ff; color: #8b5cf6; }
.review-tag-editor button:hover { background: #ede9fe; }
.tinder-final-action { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 8px 20px rgba(139,92,246,.18); transition: transform .12s ease, filter .12s ease; }
.tinder-final-action:hover { transform: translateY(-2px); filter: brightness(1.06); }
.tinder-final-action:active { transform: translateY(1px); }
.tinder-final-action--reject { background: linear-gradient(135deg, #f43f5e, #dc2626) !important; box-shadow: 0 8px 20px rgba(220, 38, 38, 0.16) !important; }
.review-kicker { color: #8b5cf6; }
.review-media-actions button { background: #f5f0ff; color: #8b5cf6; }
.review-media-actions button:hover { background: #ede9fe; }
.review-decision-grid button.active { border-color: #8b5cf6; outline-color: rgba(139,92,246,.2); }

/* ── Premium Dark Mode ────────────────────────────────────────────────────── */
.dashboard--dark, .dashboard--dark .main, .dashboard--dark .content { background: #09090f; color: #e2e8f0; }

.dashboard--dark .topbar { background: #0c0c16; border-color: rgba(139,92,246,.14); box-shadow: 0 1px 0 rgba(139,92,246,.08); }
.dashboard--dark .hamburger { color: #9090b0; }
.dashboard--dark .hamburger:hover { background: rgba(139,92,246,.14); color: #a855f7; }
.dashboard--dark .theme-toggle { background: #161626; color: #e2e8f0; border-color: rgba(255,255,255,.1); }
.dashboard--dark .theme-toggle:hover { background: rgba(139,92,246,.2); color: #c084fc; }
.dashboard--dark .admin-avatar { background: linear-gradient(135deg,#8b5cf6,#ec4899); color: #fff; }

.dashboard--dark .sidebar { background: linear-gradient(180deg,#0b0b16 0%,#0f0f1c 100%); border-color: rgba(139,92,246,.1); }
.dashboard--dark .sidebar-title { border-color: rgba(255,255,255,.05); }
.dashboard--dark .sidebar-nav a, .dashboard--dark .sidebar-group-title { color: #c0c0d4; }
.dashboard--dark .sidebar-nav a:hover, .dashboard--dark .sidebar-group-title:hover { background: rgba(139,92,246,.06); color: #f0f0f8; }
.dashboard--dark .sidebar-nav a.active, .dashboard--dark .sidebar-nav a.active.subitem { background: rgba(255,255,255,0.07) !important; color: #fff !important; }
.dashboard--dark .sidebar-group-title.active-parent { background: transparent !important; color: #c084fc !important; }
.dashboard--dark .chevron { color: #5050a0; }

.dashboard--dark .table-card { background: #0e0e1a; border-color: rgba(255,255,255,.05); }
.dashboard--dark th { background: #121220; color: #b0b0cc; border-color: rgba(255,255,255,.05); }
.dashboard--dark td { border-color: rgba(255,255,255,.04); }
.dashboard--dark tbody tr:nth-child(odd), .dashboard--dark tbody tr:nth-child(even) { background: #0e0e1a; }
.dashboard--dark tbody tr:hover { background: rgba(139,92,246,.07); }
.dashboard--dark .info-table tbody tr:hover { background: rgba(139,92,246,.07); }
.dashboard--dark .filter-row input, .dashboard--dark .filter-row select { background: #16162a; border-color: rgba(255,255,255,.08); color: #c0c0d4; }

.dashboard--dark .dash-card { background: #101020; border-color: rgba(255,255,255,.05); }
.dashboard--dark .info-card, .dashboard--dark .creator-card { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark .info-card-placeholder { background: rgba(139,92,246,.18); color: #c084fc; }
.dashboard--dark .info-card-body strong { color: #f0f0f8; }
.dashboard--dark .info-card-meta { color: #7070a0; }

.dashboard--dark .column-tools { background: #101020; border-color: rgba(255,255,255,.05); }
.dashboard--dark .column-tools-button { background: #16162a; color: #a855f7; border-color: rgba(139,92,246,.25); }
.dashboard--dark .column-tools-button:hover { background: rgba(139,92,246,.15); }
.dashboard--dark .column-tools-hint { color: #505070; }
.dashboard--dark .column-menu { background: #13132a; border-color: rgba(255,255,255,.1); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.dashboard--dark .column-menu-title { color: #606090; }
.dashboard--dark .column-menu label { color: #c4c4e4; }
.dashboard--dark .column-menu label:hover { background: rgba(139,92,246,.1); }

.dashboard--dark .filter-tab { background: #161626; color: #8888a8; }
.dashboard--dark .filter-tab:hover { background: rgba(139,92,246,.1); color: #c084fc; }
.dashboard--dark .filter-tab.active { background: #8b5cf6; color: #fff; }
.dashboard--dark .primary-button { background: #8b5cf6; }
.dashboard--dark .secondary-button { background: rgba(139,92,246,.14); color: #c084fc; }
.dashboard--dark .details-button, .dashboard--dark .arrow-button { background: #8b5cf6; color: #fff; }
.dashboard--dark .view-toggle { background: #161626; }
.dashboard--dark .view-toggle-btn { color: #8888a8; }
.dashboard--dark .view-toggle-btn:hover { background: rgba(139,92,246,.14); color: #c084fc; }
.dashboard--dark .view-toggle-btn.active { background: #8b5cf6; color: #fff; }
.dashboard--dark .period-select { background: #16162a; border-color: rgba(255,255,255,.1); color: #9090b0; }
.dashboard--dark .pagination button { background: #16162a; color: #9090b0; }
.dashboard--dark .pagination .page-active { background: rgba(139,92,246,.25); color: #c084fc; }
.dashboard--dark .action-menu { background: #13132a; border-color: rgba(255,255,255,.08); }
.dashboard--dark .action-menu button { background: #13132a; color: #c4c4e4; }
.dashboard--dark .action-menu button:hover { background: rgba(139,92,246,.1); color: #c084fc; }
.dashboard--dark .action-main { background: rgba(139,92,246,.14); color: #c084fc; border-color: rgba(139,92,246,.25); }

.dashboard--dark .form-panel { background: #101020; border-color: rgba(255,255,255,.05); }
.dashboard--dark .form-panel label { color: #9090b0; }
.dashboard--dark .form-panel input, .dashboard--dark .form-panel select, .dashboard--dark .form-panel textarea { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .form-panel input:focus, .dashboard--dark .form-panel select:focus, .dashboard--dark .form-panel textarea:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.12); }

/* Dark mode status badges */
.dashboard--dark .status-badge--active,.dashboard--dark .status-badge--approved,.dashboard--dark .status-badge--published,.dashboard--dark .status-badge--complete,.dashboard--dark .status-badge--successful,.dashboard--dark .status-badge--resolved { background: rgba(21,153,71,.18); color: #4ade80; }
.dashboard--dark .status-badge--pending,.dashboard--dark .status-badge--review,.dashboard--dark .status-badge--in-review,.dashboard--dark .status-badge--initiated,.dashboard--dark .status-badge--draft,.dashboard--dark .status-badge--open { background: rgba(214,139,0,.18); color: #fbbf24; }
.dashboard--dark .status-badge--rejected,.dashboard--dark .status-badge--declined,.dashboard--dark .status-badge--blocked,.dashboard--dark .status-badge--suspended,.dashboard--dark .status-badge--deleted,.dashboard--dark .status-badge--dismissed,.dashboard--dark .status-badge--fake-account,.dashboard--dark .status-badge--harassment,.dashboard--dark .status-badge--spam,.dashboard--dark .status-badge--other { background: rgba(180,35,35,.18); color: #f87171; }
.dashboard--dark .status-badge--not-started,.dashboard--dark .status-badge--false { background: rgba(255,255,255,.07); color: #8888a8; }
.dashboard--dark .status-badge--true { background: rgba(21,153,71,.18); color: #4ade80; }

.dashboard--dark .sticky-col { background: #121220; box-shadow: 2px 0 0 rgba(255,255,255,.05); }
.dashboard--dark tbody .sticky-col { background: #0e0e1a; }
.dashboard--dark .tag { background: rgba(255,255,255,.08); color: #c4c4e4; }

.dashboard--dark .backlog-section-title > span { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark h1,.dashboard--dark h2,.dashboard--dark h3 { color: #f0f0f8; }
.dashboard--dark p { color: #8888a8; }
.dashboard--dark .dash-card-title { color: #f0f0f8; }
.dashboard--dark .dash-card-desc { color: #6060a0; }
.dashboard--dark .info-title-block p { color: #6060a0; }

.dashboard--dark .simple-modal { background: #101020; border-color: rgba(255,255,255,.07); }
.dashboard--dark .simple-modal-header h2 { color: #f0f0f8; }
.dashboard--dark .simple-modal-header p { color: #6060a0; }
.dashboard--dark .simple-modal-field { background: #16162a; border-color: rgba(255,255,255,.06); }
.dashboard--dark .simple-modal-field span { color: #5050a0; }
.dashboard--dark .simple-modal-field strong { color: #c4c4e4; }
.dashboard--dark .simple-modal-close { background: #16162a; color: #c4c4e4; }
.dashboard--dark .simple-modal-footer { border-color: rgba(255,255,255,.05); }
.dashboard--dark .cancel-button { background: #16162a; color: #c4c4e4; }
.dashboard--dark .cpm-total-ro { background: #0c0c1a !important; color: #5050a0 !important; border-color: rgba(255,255,255,.07) !important; }

.dashboard--dark .popup-preview { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark .popup-preview h3,.dashboard--dark .popup-preview strong { color: #f0f0f8; }
.dashboard--dark .popup-preview p { color: #6060a0; }
.dashboard--dark .upload-empty { background: linear-gradient(135deg,#0e0e1a,#16162a); border-color: rgba(255,255,255,.1); color: #5050a0; }

.dashboard--dark .gdm-modal,.dashboard--dark .vdm-modal { background: #101020; color: #e2e8f0; }
.dashboard--dark .gdm-header,.dashboard--dark .gdm-footer { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark .gdm-header h2 { color: #f0f0f8; }
.dashboard--dark .gdm-l { color: #5050a0; }
.dashboard--dark .gdm-i { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .gdm-i:read-only { background: #0e0e1a; color: #7070a0; }
.dashboard--dark .gdm-sec-lbl { color: #5050a0; border-color: rgba(255,255,255,.05); }
.dashboard--dark .gdm-sel { color: #e2e8f0; }
.dashboard--dark .vdm-section { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark .vdm-section-title { color: #c4c4e4; }
.dashboard--dark .vdm-divider { border-color: rgba(255,255,255,.05); }
.dashboard--dark .vdm-table th { background: #121220; color: #9090b0; border-color: rgba(255,255,255,.05); }
.dashboard--dark .vdm-table td { border-color: rgba(255,255,255,.04); color: #c4c4e4; }
.dashboard--dark .vdm-table tr:hover td { background: rgba(139,92,246,.06); }
.dashboard--dark .vdm-edit-btn { background: #166534; }
.dashboard--dark .vdm-add-btn { background: #8b5cf6; }

.dashboard--dark .rgm-modal { background: #101020; }
.dashboard--dark .rgm-header { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark .rgm-header h2 { color: #f0f0f8; }
.dashboard--dark .rgm-info { background: #0c0c18; border-color: rgba(255,255,255,.05); }
.dashboard--dark .rgm-card { background: #101020; border-color: rgba(255,255,255,.06); }
.dashboard--dark .rgm-label { color: #5050a0; }
.dashboard--dark .rgm-value { color: #c4c4e4; }
.dashboard--dark .rgm-media-header { background: #0c0c18; border-color: rgba(255,255,255,.05); color: #8080a0; }
.dashboard--dark .rgm-comment { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }

.dashboard--dark .rgm-preset { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); color: #9090b0; }
.dashboard--dark .rgm-preset:hover { background: rgba(139,92,246,.14); color: #c084fc; }
.dashboard--dark .rgm-preset.active { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.dashboard--dark .rgm-carousel-item { border-color: rgba(255, 255, 255, 0.1); }
.dashboard--dark .rgm-carousel-item:hover { border-color: #8b5cf6; }
.dashboard--dark .rgm-action-card { background: #101020; border-color: rgba(255,255,255,.06); }

.dashboard--dark .ccm-card { background: #101020; border-color: rgba(255,255,255,.05); }
.dashboard--dark .ccm-field label { color: #8888a8; }
.dashboard--dark .ccm-field input,.dashboard--dark .ccm-field select,.dashboard--dark .ccm-field textarea { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .sck-key { background: rgba(139,92,246,.14); color: #c084fc; }
.dashboard--dark .sck-desc { color: #6060a0; }
.dashboard--dark .danger-button { background: transparent; border-color: rgba(239,68,68,.35); color: #f87171; }

/* ── Mobile Menu Premium ──────────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* Hide large logo, file input and branding div — replaced by sidebar-mobile-brand */
  .sidebar-logo, .profile-logo-input, .sidebar-title > div { display: none; }
  .sidebar-title {
    min-height: 0;
    padding: 12px 14px 10px;
    justify-content: space-between;
    gap: 0;
    align-items: center;
    background: transparent;
  }
  .sidebar-mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 4px 6px 4px 2px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
    text-align: left;
  }
  .sidebar-mobile-brand:hover,
  .sidebar-mobile-brand:active {
    background: rgba(255,255,255,0.07);
  }
  .sidebar-mobile-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1455d9, #e34397);
    display: grid !important;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
    color: inherit;
    margin-top: 0 !important;
  }
  .sidebar-mobile-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  .sidebar-mobile-brand-text {
    display: flex;
    flex-direction: column;
  }
  .sidebar-mobile-brand-text strong {
    display: block;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
  .sidebar-mobile-brand-text span {
    display: block;
    color: #a7a7ad;
    font-size: 11px;
    margin-top: 2px;
  }
  .sidebar { background: linear-gradient(180deg,#0c0c18 0%,#111120 100%) !important; }
  .sidebar-nav { padding: 10px 12px 18px; gap: 5px; }
  .sidebar-nav a, .sidebar-group-title { min-height: 48px; border-radius: 12px; font-size: 14px; padding: 12px 14px; }
  .sidebar-nav a.subitem, .sidebar-nav a.active.subitem { padding-left: 44px; min-height: 42px; font-size: 13px; }
  .nav-icon { font-size: 16px; width: 20px; }
  .sidebar-nav a.active, .sidebar-nav a.active.subitem { background: rgba(255,255,255,0.07) !important; }
}

/* ── Topbar Premium ───────────────────────────────────────────────────────── */
.topbar { background: #fff; border-bottom: 1px solid #ece8ff; }
.dashboard--dark .topbar { background: #0b0b15; border-color: rgba(139,92,246,.12); }

/* Mobile compact icon buttons (export / refresh) */
.topbar-icon-btn {
  width: 36px; height: 36px;
  border: 1px solid #e0daf0; border-radius: 10px;
  background: #f5f0ff; color: #7c3aed;
  display: none; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 900; cursor: pointer;
  transition: background .14s, color .14s;
  flex-shrink: 0;
}
.topbar-icon-btn:hover { background: #ede9fe; color: #6d28d9; }
.dashboard--dark .topbar-icon-btn { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.25); color: #c084fc; }
.dashboard--dark .topbar-icon-btn:hover { background: rgba(139,92,246,.24); }

@media (max-width: 700px) {
  .topbar-icon-btn { display: flex; }
  /* Hide Export/Refresh inside toolbar on mobile */
  .toolbar-action-secondary { display: none !important; }
}

/* ── Mobile Search Bar ────────────────────────────────────────────────────── */
.mobile-search-bar { display: none; gap: 8px; margin-bottom: 14px; }

.mobile-search-bar input[type="search"],
.mobile-search-bar input[type="text"] {
  flex: 1; height: 46px;
  border: 1.5px solid #e0daf0; border-radius: 14px;
  padding: 0 14px; font-size: 15px;
  background: #fff; color: #1a1a2e;
  -webkit-appearance: none; appearance: none;
}
.mobile-search-bar input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.1); background: #fff; }
.mobile-search-bar input::placeholder { color: #b0a8d0; }

.mobile-filter-btn {
  height: 46px; border: 1.5px solid #e0daf0; border-radius: 14px;
  background: #fff; color: #4a4a6a; padding: 0 14px;
  font-size: 13px; font-weight: 800; cursor: pointer;
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.mobile-filter-btn:hover { background: #f5f0ff; color: #8b5cf6; border-color: #ddd6fe; }
.mobile-filter-btn.has-filters { background: #f5f0ff; color: #7c3aed; border-color: #c4b5fd; }

.filter-active-badge {
  background: #8b5cf6; color: #fff;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; display: inline-flex; align-items: center; justify-content: center; font-weight: 900;
}

.dashboard--dark .mobile-search-bar input { background: #0e0e1a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .mobile-search-bar input::placeholder { color: #5050a0; }
.dashboard--dark .mobile-filter-btn { background: #0e0e1a; border-color: rgba(255,255,255,.1); color: #9090b0; }
.dashboard--dark .mobile-filter-btn.has-filters { background: rgba(139,92,246,.14); color: #c084fc; border-color: rgba(139,92,246,.28); }

/* Desktop search input (inside column-tools) */
.desktop-search-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; max-width: 320px; position: relative; }
.desktop-search-wrap::before { content: "🔍"; position: absolute; left: 10px; font-size: 14px; pointer-events: none; z-index: 1; }
.desktop-search-input {
  width: 100%; height: 36px;
  border: 1px solid #ddd6fe; border-radius: 10px;
  padding: 0 10px 0 32px; font-size: 13px;
  background: #fff; color: #333;
}
.desktop-search-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.1); }
.desktop-search-input::placeholder { color: #9090b0; }
.dashboard--dark .desktop-search-input { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .desktop-search-input::placeholder { color: #5050a0; }

.clear-filters-btn {
  height: 36px; padding: 0 12px; border: 1px solid #fca5a5;
  border-radius: 10px; background: #fff1f2; color: #b91c1c;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.clear-filters-btn:hover { background: #fee2e2; }
.dashboard--dark .clear-filters-btn { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); color: #f87171; }

.showing-count { font-size: 12px; color: #8888a8; margin-left: auto; }
.dashboard--dark .showing-count { color: #5050a0; }

@media (max-width: 700px) {
  .mobile-search-bar { display: flex; }
  .desktop-search-wrap { display: none; }
}

/* ── Filter Chips ─────────────────────────────────────────────────────────── */
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; align-items: center; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px;
  border: 1px solid #ddd6fe; border-radius: 999px;
  background: #f5f0ff; color: #7c3aed;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  transition: all .12s;
}
.filter-chip:hover { background: #ede9fe; border-color: #c4b5fd; }
.filter-chip--clear { background: #fff1f2; border-color: #fca5a5; color: #b91c1c; }
.filter-chip--clear:hover { background: #fee2e2; }
.dashboard--dark .filter-chip { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.28); color: #c084fc; }
.dashboard--dark .filter-chip:hover { background: rgba(139,92,246,.22); }
.dashboard--dark .filter-chip--clear { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.28); color: #f87171; }

/* ── Filter Row: select elements ─────────────────────────────────────────── */
.filter-row select {
  width: 100%; height: 30px;
  border: 1px solid #e2e5ec; border-radius: 4px;
  padding: 0 4px; background: #fff; font-size: 12px; color: #333; cursor: pointer;
}
.filter-row select:focus { outline: none; border-color: #8b5cf6; }
.dashboard--dark .filter-row select { background: #16162a; border-color: rgba(255,255,255,.08); color: #c0c0d4; }

/* ── Mobile Bottom Sheet ──────────────────────────────────────────────────── */
.mobile-sheet-backdrop {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(0,0,0,.55); display: flex;
  align-items: flex-end; justify-content: center;
  backdrop-filter: blur(4px);
}
.mobile-sheet {
  width: 100%; max-height: 92dvh;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
  background: #fff; border-radius: 24px 24px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -20px 60px rgba(0,0,0,.2);
}
.mobile-sheet-handle { width: 48px; height: 5px; background: #d4d0e8; border-radius: 999px; margin: 12px auto 6px; flex-shrink: 0; }
.mobile-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 14px; flex-shrink: 0; }
.mobile-sheet-header h3 { margin: 0; font-size: 20px; font-weight: 900; color: #1a1a2e; }
.mobile-sheet-header button { width: 36px; height: 36px; border: none; border-radius: 50%; background: #f1f1f8; color: #475569; font-size: 22px; cursor: pointer; }
.mobile-sheet-body { flex: 1; overflow-y: auto; padding: 0 18px 10px; display: flex; flex-direction: column; gap: 14px; }
.mobile-sheet-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: #334155; }
.mobile-sheet-input, .mobile-sheet-select {
  height: 48px; border: 1.5px solid #e0daf0; border-radius: 12px;
  padding: 0 14px; font-size: 15px; background: #f8f6ff; color: #1a1a2e;
  width: 100%; -webkit-appearance: none; appearance: none; font-family: inherit;
}
.mobile-sheet-input:focus, .mobile-sheet-select:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.1); background: #fff; }
.mobile-sheet-footer {
  padding: 12px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom));
  border-top: 1px solid #eee8ff; display: flex; gap: 10px; flex-shrink: 0;
}
.mobile-sheet-footer .cancel-button, .mobile-sheet-footer .save-button { flex: 1; padding: 14px; font-size: 15px; text-align: center; }
.dashboard--dark .mobile-sheet { background: #101020; }
.dashboard--dark .mobile-sheet-header h3 { color: #f0f0f8; }
.dashboard--dark .mobile-sheet-header button { background: #16162a; color: #c0c0d4; }
.dashboard--dark .mobile-sheet-label { color: #9090b0; }
.dashboard--dark .mobile-sheet-input, .dashboard--dark .mobile-sheet-select { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .mobile-sheet-footer { border-color: rgba(255,255,255,.05); }

/* ── Empty State ──────────────────────────────────────────────────────────── */
.empty-state {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 56px 20px; text-align: center; gap: 10px;
}
.empty-state-icon { font-size: 44px; opacity: .45; margin-bottom: 4px; }
.empty-state strong { font-size: 18px; font-weight: 800; color: #334155; }
.empty-state p { font-size: 14px; color: #94a3b8; margin: 0; }
.empty-state-btn {
  margin-top: 8px; height: 40px; padding: 0 20px;
  border: 1.5px solid #ddd6fe; border-radius: 10px;
  background: #f5f0ff; color: #7c3aed; font-weight: 700; font-size: 14px; cursor: pointer;
}
.empty-state-btn:hover { background: #ede9fe; }
.dashboard--dark .empty-state strong { color: #c4c4e4; }
.dashboard--dark .empty-state p { color: #5050a0; }
.dashboard--dark .empty-state-btn { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.28); color: #c084fc; }

/* ── Mobile Cards Premium ─────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .info-card {
    padding: 12px 14px; border-radius: 14px; gap: 11px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: transform .12s, box-shadow .12s;
  }
  .info-card:active { transform: scale(.99); }
  .info-card-avatar { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #ede9fe; }
  .info-card-placeholder { width: 46px; height: 46px; font-size: 20px; border-radius: 50%; }
  .info-card-preview { width: 70px; height: 48px; border-radius: 10px; flex: 0 0 auto; }
  .info-card-body { gap: 3px; }
  .info-card-body strong { font-size: 14px; font-weight: 800; color: #1a1a2e; line-height: 1.2; }
  .info-card-meta { font-size: 12px; color: #8080a0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .info-card .details-button { padding: 10px 14px; font-size: 13px; border-radius: 10px; flex-shrink: 0; }

  .dashboard--dark .info-card { background: #101020; border-color: rgba(255,255,255,.05); box-shadow: none; }
  .dashboard--dark .info-card-body strong { color: #f0f0f8; }
  .dashboard--dark .info-card-meta { color: #6060a0; }
  .dashboard--dark .info-card-avatar { border-color: rgba(139,92,246,.2); }

  /* Algorithm cards */
  .creator-card { border-radius: 14px; border-left-width: 4px; padding: 12px 14px; }
  .creator-card--pending { border-left-color: #f59e0b; }
  .creator-card--complete { border-left-color: #22c55e; }
  .dashboard--dark .creator-card { background: #101020; border-color: rgba(255,255,255,.05); }
}

/* ── Page Title Elegance ──────────────────────────────────────────────────── */
.page-count-badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 999px; background: #f5f0ff; color: #8b5cf6;
  font-size: 12px; font-weight: 900; margin-left: 8px; vertical-align: middle;
  letter-spacing: .01em;
}
.dashboard--dark .page-count-badge { background: rgba(139,92,246,.2); color: #c084fc; }

@media (max-width: 700px) {
  .info-title-block h1 { font-size: 20px; }
  .info-title-block p { font-size: 12px; }
  .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-tab { padding: 7px 12px; font-size: 12px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
}

/* ── Algorithm Search ─────────────────────────────────────────────────────── */
.algo-search-wrap { margin-bottom: 12px; position: relative; }
.algo-search-wrap::before { content: "🔍"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; z-index: 1; }
.algo-search-input {
  width: 100%; height: 46px;
  border: 1.5px solid #e0daf0; border-radius: 14px;
  padding: 0 14px 0 40px; font-size: 15px;
  background: #fff; color: #1a1a2e; -webkit-appearance: none; appearance: none;
}
.algo-search-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.1); }
.algo-search-input::placeholder { color: #b0a8d0; }
.dashboard--dark .algo-search-input { background: #0e0e1a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .algo-search-input::placeholder { color: #5050a0; }
@media (min-width: 701px) {
  .algo-search-input { max-width: 380px; height: 40px; padding-left: 36px; font-size: 13px; }
  .algo-search-wrap::before { font-size: 14px; left: 12px; }
}

/* ── Dark mode review feeds/tinder ───────────────────────────────────────── */
.dashboard--dark .feed-control-card { background: #16162a; border-color: rgba(255,255,255,.07); }
.dashboard--dark .feed-control-main strong { color: #f0f0f8; }
.dashboard--dark .feed-control-main small { color: #7070a0; }
.dashboard--dark .review-sheet { background: #101020; }
.dashboard--dark .review-sheet-header h3 { color: #f0f0f8; }
.dashboard--dark .review-sheet-header button { background: #16162a; color: #c0c0d4; }
.dashboard--dark .review-option-list button { background: #0e0e1a; border-color: rgba(255,255,255,.07); color: #c0c0d4; }
.dashboard--dark .review-option-list button:hover { background: rgba(139,92,246,.1); }
.dashboard--dark .review-option-list button.active { background: rgba(139,92,246,.14); color: #c084fc; border-color: rgba(139,92,246,.3); }
.dashboard--dark .review-tag-editor button { background: rgba(139,92,246,.14); color: #c084fc; }
.dashboard--dark .review-tag-input-row input { background: #16162a; border-color: rgba(255,255,255,.1); color: #e2e8f0; }
.dashboard--dark .priority-picker-grid button { background: linear-gradient(180deg,#16162a,#1a1a30); border-color: rgba(255,255,255,.07); color: #c0c0d4; }
.dashboard--dark .tinder-review-panel { background: rgba(14,14,26,.96); border-color: rgba(255,255,255,.07); }
.dashboard--dark .tinder-panel-user { background: linear-gradient(135deg,#13132a,#101020); border-color: rgba(255,255,255,.07); }
.dashboard--dark .tinder-panel-user strong { color: #f0f0f8; }
.dashboard--dark .tinder-panel-user span { color: #7070a0; }
.dashboard--dark .tinder-desktop-meta > div, .dashboard--dark .tinder-desktop-meta > button { background: #0e0e1a; border-color: rgba(255,255,255,.06); }
.dashboard--dark .tinder-desktop-meta span { color: #5050a0; }
.dashboard--dark .tinder-desktop-meta strong { color: #f0f0f8; }
.dashboard--dark .tinder-section-title strong { color: #f0f0f8; }
.dashboard--dark .tinder-section-title button { background: rgba(139,92,246,.14); color: #c084fc; }
.dashboard--dark .tinder-desktop-tags > div span { background: rgba(139,92,246,.14); color: #c084fc; }

/* ========================================================================================
   LAYOUT REFINEMENT — mobile-first polish pass
   ======================================================================================== */

/* 1. Export/Refresh topbar buttons: always visible (not just mobile) */
.topbar-icon-btn { display: flex !important; }

/* 2. Export/Refresh content-area toolbar: always hidden (they live in topbar now) */
.toolbar-action-secondary { display: none !important; }

/* 3. Fields button placement in view-controls */
.fields-vc-wrap { position: relative; display: inline-flex; align-items: center; }
.column-menu--vc { top: 44px; left: 0; z-index: 200; }

/* 4. column-tools: strip card appearance — just a lean hint bar */
.column-tools {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 6px !important;
  margin: 0 0 6px !important;
}

/* 5. column-menu mobile overlay — inline card under mobile-search-bar */
.column-menu--mobile { display: none; }
@media (max-width: 700px) {
  .column-menu--mobile {
    display: block;
    position: static;
    width: 100%;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 14px;
    margin-bottom: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    z-index: auto;
  }
  .dashboard--dark .column-menu--mobile {
    background: #13132a;
    border-color: rgba(255,255,255,.1);
  }
}

/* 6. Mobile: hide filter-tabs (status moves into Filter bottom-sheet) */
@media (max-width: 700px) {
  .filter-tabs { display: none !important; }
}

/* 7. Mobile: hide column-tools (Fields + hint moved to mobile-search-bar) */
@media (max-width: 700px) {
  .column-tools { display: none !important; }
}

/* 8. Mobile: info-cards fill full width, no wasted right margin */
@media (max-width: 700px) {
  .mobile-cards { padding: 0; box-sizing: border-box; }
  .info-card { width: 100%; box-sizing: border-box; max-width: none !important; }
}

/* 9. Details button status colours (applied in card views) */
.details-button--ok  { background: #16a34a !important; }
.details-button--ok:hover  { background: #15803d !important; }
.details-button--warn { background: #d97706 !important; }
.details-button--warn:hover { background: #b45309 !important; }
.details-button--bad  { background: #dc2626 !important; }
.details-button--bad:hover  { background: #b91c1c !important; }
.dashboard--dark .details-button--ok  { background: #166534 !important; }
.dashboard--dark .details-button--warn { background: #92400e !important; }
.dashboard--dark .details-button--bad  { background: #991b1b !important; }

/* 10. Mobile Fields icon button */
.mobile-fields-btn {
  height: 46px; width: 46px; flex-shrink: 0;
  border: 1.5px solid #e0daf0; border-radius: 14px;
  background: #fff; color: #7c3aed;
  font-size: 16px; font-weight: 800; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.mobile-fields-btn:hover { background: #f5f0ff; border-color: #c4b5fd; }
.dashboard--dark .mobile-fields-btn { background: #0e0e1a; border-color: rgba(255,255,255,.1); color: #c084fc; }
@media (max-width: 700px) {
  .mobile-fields-btn { display: flex; }
}

/* 11. Topbar & main: no horizontal overflow on mobile */
@media (max-width: 700px) {
  .topbar { width: 100%; box-sizing: border-box; }
  .main   { width: 100%; min-width: 0; overflow-x: hidden; }
  .content { padding: 12px 12px 28px; box-sizing: border-box; }
}

/* 12. Mobile: compact top spacing, app-like feel */
@media (max-width: 700px) {
  .view-header.info-view-header { margin-bottom: 8px; gap: 6px; }
  .toolbar { margin-bottom: 8px; }
  h1 { font-size: 22px !important; }
  .info-title-block h1 { font-size: 20px !important; }
}

/* 13. Mobile-search-bar: ensure search fills remaining space */
@media (max-width: 700px) {
  .mobile-search-bar { padding: 0; }
  .mobile-search-bar .desktop-search-input { flex: 1; min-width: 0; padding-left: 12px; }
}

/* ================================================================
   FINAL UX REFINEMENT — counters, dark mode, drawer, grid icon
   ================================================================ */

/* ── Theme toggle: compact icon-only button ──────────────────── */
.theme-toggle {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  font-size: 17px !important;
  display: grid !important;
  place-items: center !important;
  min-width: unset !important;
  line-height: 1 !important;
}

/* ── Menu 2×2 grid icon ───────────────────────────────────────── */
.menu-grid-icon {
  display: block;
  width: 16px;
  height: 16px;
  position: relative;
  pointer-events: none;
  flex-shrink: 0;
}
.menu-grid-icon::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 9px 0 0 currentColor, 0 9px 0 currentColor, 9px 9px 0 currentColor;
  top: 0;
  left: 0;
}

/* ── Mobile sidebar: lateral drawer ~80% wide, not fullscreen ─── */
@media (max-width: 700px) {
  .sidebar {
    width: 82vw !important;
    max-width: 340px !important;
  }
  .sidebar--closed {
    transform: translateX(-100%) !important;
    width: 82vw !important;
    max-width: 340px !important;
  }
  /* Compact sidebar header on mobile */
  .sidebar-title {
    min-height: 52px !important;
    padding: 10px 14px !important;
    gap: 10px !important;
  }
  .sidebar-logo {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    flex: 0 0 34px !important;
  }
  .sidebar-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  .sidebar-title strong { font-size: 13px !important; }
  .sidebar-title > div > span { font-size: 11px !important; }
  .sidebar-nav {
    padding: 8px 10px 18px !important;
    gap: 2px !important;
  }
  .sidebar-nav a,
  .sidebar-group-title {
    min-height: 46px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    padding: 11px 14px !important;
  }
  .sidebar-nav a.subitem,
  .sidebar-nav a.active.subitem {
    padding-left: 44px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
  .mobile-menu-fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 36px);
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(24, 24, 27, 0.82);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    color: #f8fafc;
    cursor: pointer;
    z-index: 40;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .mobile-menu-fab:active {
    transform: scale(0.93);
  }
  .mobile-menu-fab--hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.82);
  }
}

/* ── Filter tab: no count badge span ─────────────────────────── */
.filter-tab span { display: none; }

/* ── Dark mode: ChatGPT-inspired clean neutral style ─────────── */
.dashboard--dark,
.dashboard--dark .main,
.dashboard--dark .content {
  background: #212121 !important;
  color: #ececec !important;
}

.dashboard--dark .topbar {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
}

.dashboard--dark .hamburger { color: #b4b4b4 !important; }
.dashboard--dark .hamburger:hover { background: rgba(139,92,246,0.12) !important; color: #c084fc !important; }

.dashboard--dark .theme-toggle {
  background: #3a3a3a !important;
  color: #ececec !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
.dashboard--dark .theme-toggle:hover { background: rgba(139,92,246,0.18) !important; color: #c084fc !important; }

.dashboard--dark .topbar-icon-btn {
  background: #3a3a3a !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #b4b4b4 !important;
}
.dashboard--dark .topbar-icon-btn:hover { background: rgba(139,92,246,0.18) !important; color: #c084fc !important; }

.dashboard--dark .admin-avatar {
  background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
  color: #fff !important;
}

/* Sidebar dark */
.dashboard--dark .sidebar {
  background: linear-gradient(180deg, #1a1a1a 0%, #1c1c1c 100%) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dashboard--dark .sidebar-title { border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .sidebar-nav a,
.dashboard--dark .sidebar-group-title { color: #d4d4d4 !important; }
.dashboard--dark .sidebar-nav a:hover,
.dashboard--dark .sidebar-group-title:hover { background: rgba(139,92,246,0.1) !important; color: #f0f0f0 !important; }
.dashboard--dark .sidebar-nav a.active,
.dashboard--dark .sidebar-nav a.active.subitem {
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}
.dashboard--dark .sidebar-group-title.active-parent { background: transparent !important; color: #c084fc !important; }
.dashboard--dark .chevron { color: #606060 !important; }
.dashboard--dark .sidebar-nav a.subitem { color: #b4b4b4 !important; }

/* Table dark */
.dashboard--dark .table-card {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dashboard--dark th {
  background: #383838 !important;
  color: #d4d4d4 !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dashboard--dark td {
  border-color: rgba(255,255,255,0.05) !important;
  color: #ececec !important;
}
.dashboard--dark tbody tr:nth-child(odd),
.dashboard--dark tbody tr:nth-child(even) {
  background: #2f2f2f !important;
  color: #ececec !important;
}
.dashboard--dark tbody tr:hover,
.dashboard--dark .info-table tbody tr:hover { background: #383838 !important; }
.dashboard--dark .filter-row input,
.dashboard--dark .filter-row select {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #ececec !important;
}

/* Cards dark */
.dashboard--dark .dash-card {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.06) !important;
}
.dashboard--dark .dash-card-title { color: #ececec !important; }
.dashboard--dark .dash-card-desc { color: #b4b4b4 !important; }
.dashboard--dark h1, .dashboard--dark h2, .dashboard--dark h3 { color: #ececec !important; }
.dashboard--dark p,
.dashboard--dark .info-title-block p,
.dashboard--dark .backlog-section-title p { color: #b4b4b4 !important; }
.dashboard--dark .backlog-section-title h2 { color: #ececec !important; }
.dashboard--dark .backlog-section-title > span {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

.dashboard--dark .info-card,
.dashboard--dark .creator-card {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.dashboard--dark .info-card-body strong { color: #ececec !important; }
.dashboard--dark .info-card-meta { color: #b4b4b4 !important; }
.dashboard--dark .info-card-placeholder { background: rgba(139,92,246,0.15) !important; color: #c084fc !important; }
.dashboard--dark .info-card-avatar { border-color: rgba(139,92,246,0.2) !important; }

/* Column tools / menu dark */
.dashboard--dark .column-tools { background: transparent !important; border: none !important; box-shadow: none !important; }
.dashboard--dark .column-tools-button { background: #383838 !important; color: #c084fc !important; border-color: rgba(139,92,246,0.2) !important; }
.dashboard--dark .column-tools-button:hover { background: rgba(139,92,246,0.15) !important; }
.dashboard--dark .column-menu {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.1) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55) !important;
}
.dashboard--dark .column-menu-title { color: #808080 !important; }
.dashboard--dark .column-menu label { color: #ececec !important; }
.dashboard--dark .column-menu label:hover { background: rgba(139,92,246,0.1) !important; }
.dashboard--dark .column-menu--mobile { background: #2f2f2f !important; border-color: rgba(255,255,255,0.1) !important; }

/* Filter tabs dark */
.dashboard--dark .filter-tab { background: #383838 !important; color: #b4b4b4 !important; border: none !important; }
.dashboard--dark .filter-tab:hover { background: rgba(139,92,246,0.12) !important; color: #c084fc !important; }
.dashboard--dark .filter-tab.active { background: #8b5cf6 !important; color: #fff !important; box-shadow: none !important; }

/* Buttons dark */
.dashboard--dark .primary-button { background: #8b5cf6 !important; color: #fff !important; }
.dashboard--dark .primary-button:hover { background: #7c3aed !important; }
.dashboard--dark .secondary-button { background: rgba(139,92,246,0.14) !important; color: #c084fc !important; border: 1px solid rgba(139,92,246,0.2) !important; }
.dashboard--dark .details-button,
.dashboard--dark .arrow-button { background: #8b5cf6 !important; color: #fff !important; }
.dashboard--dark .details-button:hover { background: #7c3aed !important; }
.dashboard--dark .save-button { background: #8b5cf6 !important; color: #fff !important; }
.dashboard--dark .save-button:hover { background: #7c3aed !important; }
.dashboard--dark .cancel-button { background: #383838 !important; color: #d4d4d4 !important; border: none !important; }
.dashboard--dark .cancel-button:hover { background: #444 !important; }
.dashboard--dark .danger-button { background: rgba(239,68,68,0.15) !important; color: #f87171 !important; border: 1px solid rgba(239,68,68,0.3) !important; }

/* View controls dark */
.dashboard--dark .view-toggle { background: #383838 !important; }
.dashboard--dark .view-toggle-btn { color: #b4b4b4 !important; }
.dashboard--dark .view-toggle-btn:hover { background: rgba(139,92,246,0.12) !important; color: #c084fc !important; }
.dashboard--dark .view-toggle-btn.active { background: #8b5cf6 !important; color: #fff !important; }
.dashboard--dark .period-select { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #ececec !important; }

/* Pagination dark */
.dashboard--dark .pagination button { background: #383838 !important; color: #b4b4b4 !important; border: none !important; }
.dashboard--dark .pagination .page-active { background: rgba(139,92,246,0.25) !important; color: #c084fc !important; }

/* Page count badge dark */
.dashboard--dark .page-count-badge { background: rgba(139,92,246,0.2) !important; color: #c084fc !important; }

/* Mobile search dark */
.dashboard--dark .mobile-search-bar input {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #ececec !important;
}
.dashboard--dark .mobile-search-bar input::placeholder { color: #707070 !important; }
.dashboard--dark .desktop-search-input { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #ececec !important; }
.dashboard--dark .desktop-search-input::placeholder { color: #707070 !important; }
.dashboard--dark .mobile-filter-btn { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #b4b4b4 !important; }
.dashboard--dark .mobile-filter-btn.has-filters { background: rgba(139,92,246,0.18) !important; color: #c084fc !important; border-color: rgba(139,92,246,0.3) !important; }
.dashboard--dark .mobile-fields-btn { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #c084fc !important; }
.dashboard--dark .clear-filters-btn { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.3) !important; color: #f87171 !important; }
.dashboard--dark .algo-search-input { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #ececec !important; }
.dashboard--dark .algo-search-input::placeholder { color: #707070 !important; }

/* Mobile filter sheet dark */
.dashboard--dark .mobile-sheet { background: #2f2f2f !important; }
.dashboard--dark .mobile-sheet-handle { background: #555 !important; }
.dashboard--dark .mobile-sheet-header { border-color: rgba(255,255,255,0.08) !important; }
.dashboard--dark .mobile-sheet-header span { color: #ececec !important; }
.dashboard--dark .mobile-sheet-header button { background: #383838 !important; color: #b4b4b4 !important; }
.dashboard--dark .mobile-sheet-label { color: #b4b4b4 !important; }
.dashboard--dark .mobile-sheet-input { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #ececec !important; }
.dashboard--dark .mobile-sheet-select { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #ececec !important; }
.dashboard--dark .mobile-sheet-footer { border-color: rgba(255,255,255,0.06) !important; }

/* Status badges dark — colored text on subtle dark bg */
.dashboard--dark .status-badge--active,
.dashboard--dark .status-badge--approved,
.dashboard--dark .status-badge--published,
.dashboard--dark .status-badge--complete,
.dashboard--dark .status-badge--successful,
.dashboard--dark .status-badge--resolved,
.dashboard--dark .status-badge--yes,
.dashboard--dark .status-badge--true {
  background: rgba(34,197,94,0.15) !important;
  color: #4ade80 !important;
}
.dashboard--dark .status-badge--pending,
.dashboard--dark .status-badge--review,
.dashboard--dark .status-badge--in-review,
.dashboard--dark .status-badge--open,
.dashboard--dark .status-badge--initiated,
.dashboard--dark .status-badge--draft {
  background: rgba(245,158,11,0.15) !important;
  color: #fbbf24 !important;
}
.dashboard--dark .status-badge--rejected,
.dashboard--dark .status-badge--blocked,
.dashboard--dark .status-badge--suspended,
.dashboard--dark .status-badge--deleted,
.dashboard--dark .status-badge--dismissed,
.dashboard--dark .status-badge--declined,
.dashboard--dark .status-badge--no,
.dashboard--dark .status-badge--false,
.dashboard--dark .status-badge--fake-account,
.dashboard--dark .status-badge--harassment,
.dashboard--dark .status-badge--spam,
.dashboard--dark .status-badge--other {
  background: rgba(239,68,68,0.15) !important;
  color: #f87171 !important;
}
.dashboard--dark .status-badge--not-started {
  background: rgba(255,255,255,0.08) !important;
  color: #9090b0 !important;
}
.dashboard--dark .card-status-inline.complete { background: rgba(34,197,94,0.15) !important; color: #4ade80 !important; }
.dashboard--dark .card-status-inline.pending { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; }

/* Details button status overrides — keep bright enough in dark mode */
.dashboard--dark .details-button--ok { background: #16a34a !important; color: #fff !important; }
.dashboard--dark .details-button--ok:hover { background: #15803d !important; }
.dashboard--dark .details-button--warn { background: #d97706 !important; color: #fff !important; }
.dashboard--dark .details-button--warn:hover { background: #b45309 !important; }
.dashboard--dark .details-button--bad { background: #dc2626 !important; color: #fff !important; }
.dashboard--dark .details-button--bad:hover { background: #b91c1c !important; }

/* Modals dark */
.dashboard--dark .simple-modal {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65) !important;
}
.dashboard--dark .simple-modal-header h2 { color: #ececec !important; }
.dashboard--dark .simple-modal-header p { color: #b4b4b4 !important; }
.dashboard--dark .simple-modal-field { background: #383838 !important; border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .simple-modal-field span { color: #b4b4b4 !important; }
.dashboard--dark .simple-modal-field strong { color: #ececec !important; }
.dashboard--dark .simple-modal-footer { border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .simple-modal-close { background: #383838 !important; color: #b4b4b4 !important; }
.dashboard--dark .simple-modal-close:hover { background: rgba(239,68,68,0.2) !important; color: #f87171 !important; }
.dashboard--dark .form-panel {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.dashboard--dark .form-panel label { color: #d4d4d4 !important; }
.dashboard--dark .form-panel input,
.dashboard--dark .form-panel select,
.dashboard--dark .form-panel textarea {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #ececec !important;
}

/* GDM / VDM modal dark */
.dashboard--dark .gdm-modal,
.dashboard--dark .vdm-modal { background: #2f2f2f !important; border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .gdm-header { background: #383838 !important; border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .gdm-header h2 { color: #ececec !important; }
.dashboard--dark .gdm-close { background: #444 !important; color: #b4b4b4 !important; }
.dashboard--dark .gdm-l { color: #b4b4b4 !important; }
.dashboard--dark .gdm-i { background: #383838 !important; border-color: rgba(255,255,255,0.1) !important; color: #ececec !important; }
.dashboard--dark .gdm-footer { border-color: rgba(255,255,255,0.06) !important; background: #383838 !important; }
.dashboard--dark .vdm-section-title { color: #c084fc !important; }
.dashboard--dark .vdm-divider { border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .vdm-table th { background: #383838 !important; color: #d4d4d4 !important; border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .vdm-table td { color: #ececec !important; border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .vdm-empty { color: #707070 !important; }

/* Empty state dark */
.dashboard--dark .empty-state strong { color: #ececec !important; }
.dashboard--dark .empty-state p { color: #b4b4b4 !important; }
.dashboard--dark .empty-state-btn { background: rgba(139,92,246,0.14) !important; color: #c084fc !important; border-color: rgba(139,92,246,0.3) !important; }

/* Misc dark */
.dashboard--dark .tag { background: #383838 !important; color: #d4d4d4 !important; }
.dashboard--dark .action-menu { background: #2f2f2f !important; border-color: rgba(255,255,255,0.08) !important; }
.dashboard--dark .action-menu button { background: transparent !important; color: #d4d4d4 !important; }
.dashboard--dark .action-menu button:hover { background: rgba(139,92,246,0.1) !important; color: #c084fc !important; }
.dashboard--dark .action-menu .danger { color: #f87171 !important; }
.dashboard--dark .sck-key { background: #383838 !important; color: #c084fc !important; border-color: rgba(255,255,255,0.06) !important; }
.dashboard--dark .ccm-card { background: #2f2f2f !important; border-color: rgba(255,255,255,0.06) !important; }

/* ===== OPS CONSOLE — BACKLOG REDESIGN ===== */

/* ─── Page wrapper ─── */
.backlog-page-wrap {
  max-width: 1400px;
  margin: 0 auto;
}

.backlog-page-wrap .page-title-row {
  margin-bottom: 28px;
}

.backlog-page-wrap .page-title-row h1 {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0f172a;
}

.backlog-page-wrap .page-title-row p {
  color: #64748b;
  font-size: 13px;
  margin-top: 5px;
}

/* ─── Grouped operational grid ─── */
.ops-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.ops-mobile-group-title {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  color: #334155;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ops-mobile-group-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--group-accent, #64748b);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-accent, #64748b) 14%, transparent);
}

.ops-mobile-group-title--review {
  --group-accent: #7c3aed;
  order: 1;
}

.ops-mobile-group-title--report {
  --group-accent: #dc2626;
  order: 3;
  margin-top: 8px;
}

.ops-mobile-group-title--operation {
  --group-accent: #059669;
  order: 5;
  margin-top: 8px;
}

/* ─── Card shell — base ─── */
.ops-card {
  --card-accent: #6366f1;

  position: relative;
  overflow: hidden;

  background: linear-gradient(160deg, #ffffff 0%, #f8f9fb 100%);
  border: 1px solid #e5e7eb;
  border-radius: 22px;

  padding: 24px 26px 20px;
  min-height: 220px;

  display: flex;
  flex-direction: column;

  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1.0);

  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.28s ease;
}

/* Accent top stripe */
.ops-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--card-accent);
  border-radius: 22px 22px 0 0;
  opacity: 0.9;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

/* Inner-glow wash — overridden per section */
.ops-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse at top left, rgba(255,255,255,0.55), transparent 70%);
  pointer-events: none;
  border-radius: inherit;
}

.ops-card--clickable {
  cursor: pointer;
}

.ops-card--clickable:hover {
  transform: translateY(-3px);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.09),
    inset 0 1px 0 rgba(255,255,255,1.0);
}

.ops-card--clickable:hover::before {
  height: 4px;
  opacity: 1;
}

.backlog-page-wrap .ops-card {
  background: linear-gradient(160deg, #ffffff 0%, #fafbfc 100%);
  border-color: #e5e7eb;
  min-height: 0;
  padding: 20px 22px 18px;
}

.backlog-page-wrap .ops-card::before,
.backlog-page-wrap .ops-card::after {
  display: none;
}

.backlog-page-wrap .ops-card--section-review,
.backlog-page-wrap .ops-card--section-reports,
.backlog-page-wrap .ops-card--section-categorization,
.backlog-page-wrap .ops-card--section-finance {
  background: linear-gradient(160deg, #ffffff 0%, #fafbfc 100%);
  border-color: #e5e7eb;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1.0);
}

.backlog-page-wrap .ops-card--section-review.ops-card--clickable:hover,
.backlog-page-wrap .ops-card--section-reports.ops-card--clickable:hover,
.backlog-page-wrap .ops-card--section-categorization.ops-card--clickable:hover,
.backlog-page-wrap .ops-card--section-finance.ops-card--clickable:hover {
  border-color: #d7dde6;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.09),
    inset 0 1px 0 rgba(255,255,255,1.0);
}

.backlog-page-wrap .ops-card-section,
.backlog-page-wrap .ops-card-progress {
  display: none;
}

.backlog-page-wrap .ops-card-aht {
  background: rgba(241,245,249,0.9);
  border-color: #e2e8f0;
  color: #64748b;
  position: absolute;
  right: 16px;
  top: 20px;
}

.backlog-page-wrap .ops-card--review-creators,
.backlog-page-wrap .ops-card--review-games {
  --mobile-aht-color: #7c3aed;
  order: 2;
}

.backlog-page-wrap .ops-card--report-creators,
.backlog-page-wrap .ops-card--report-games {
  --mobile-aht-color: #dc2626;
  order: 4;
}

.backlog-page-wrap .ops-card--operation-categorization,
.backlog-page-wrap .ops-card--operation-finance {
  --mobile-aht-color: #059669;
  order: 6;
}

.backlog-page-wrap .ops-card--review-creators .ops-card-count,
.backlog-page-wrap .ops-card--review-games .ops-card-count {
  color: #7c3aed;
}

.backlog-page-wrap .ops-card--report-creators .ops-card-count,
.backlog-page-wrap .ops-card--report-games .ops-card-count {
  color: #dc2626;
}

.backlog-page-wrap .ops-card--operation-categorization .ops-card-count,
.backlog-page-wrap .ops-card--operation-finance .ops-card-count {
  color: #059669;
}

/* ── Desktop backlog: match approved mobile card layout ── */

/* ops-card-top collapses to zero height — AHT is absolutely positioned, section is hidden */
.backlog-page-wrap .ops-card-top {
  min-height: 0;
  margin-bottom: 0;
}

/* Hide "AHT " label prefix — show only the value (e.g. "18s") */
.backlog-page-wrap .ops-card-aht-prefix {
  display: none;
}

/* Body: 2-row grid — title full-width on row 1, count+SLA on row 2 */
.backlog-page-wrap .ops-card-body {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 10px;
  align-items: center;
}

/* Dissolve body-left so its children participate directly in the grid */
.backlog-page-wrap .ops-card-body-left {
  display: contents;
}

/* Title — grid row 1, spans both columns */
.backlog-page-wrap .ops-card-footer {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-top: 0;
  padding-top: 0;
}

/* Count — grid row 2, left column */
.backlog-page-wrap .ops-card-count {
  grid-column: 1;
  grid-row: 2;
  font-size: 60px !important;
  line-height: 1;
  margin-bottom: 0;
}

/* SLA — grid row 2, right column */
.backlog-page-wrap .ops-card-body-right {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

.backlog-page-wrap .ops-card-sla {
  font-size: 20px;
}

/* Breached SLA state */
.ops-card--breached {
  border-color: rgba(220, 38, 38, 0.25);
}
.ops-card--breached::before {
  background: #dc2626;
  opacity: 1;
}

/* Warning SLA state */
.ops-card--warning {
  border-color: rgba(217, 119, 6, 0.2);
}
.ops-card--warning::before {
  background: #d97706;
  opacity: 1;
}

/* ─── Card top row: section label + AHT chip ─── */
.ops-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  min-height: 20px;
}

.ops-card-section {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #94a3b8;
}

.ops-card-aht {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  background: rgba(241,245,249,0.9);
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
}

/* ─── Count — dominant visual element ─── */
.ops-card-count {
  font-size: 82px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--card-accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
}

/* ─── Card body — count-left / SLA-right ─── */
.ops-card-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 12px;
}

.ops-card-body-left {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.ops-card-body-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ─── SLA — prominent operational metric ─── */
.ops-card-sla {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ops-card-sla--positive {
  color: #64748b;
}

.ops-card-sla--warning {
  color: #d97706;
}

.ops-card-sla--negative {
  color: #dc2626;
  text-shadow: 0 0 24px rgba(220, 38, 38, 0.28);
}

/* ─── Footer: priority pill + queue label ─── */
.ops-card-footer {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 10px;
}

.ops-card-title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #94a3b8;
  white-space: nowrap;
}

.ops-card-priority {
  font-size: 9px;
  font-weight: 900;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.ops-card-priority--critical { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.ops-card-priority--high     { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.ops-card-priority--normal   { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }

/* ─── Description (optional) ─── */
.ops-card-desc {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
}

/* ─── Progress bar ─── */
.ops-card-progress {
  height: 3px;
  background: rgba(226,232,240,0.7);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
  flex-shrink: 0;
}

.ops-card-progress-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
  opacity: 0.7;
}

.ops-card--clickable:hover .ops-card-progress-bar {
  opacity: 1;
  filter: brightness(1.08);
}

/* ─── Light mode page title ─── */
.backlog-page-wrap .page-title-row h1 {
  color: #0f172a;
}


/* ===== OPS CONSOLE — SECTION IDENTITIES (LIGHT MODE) ===== */

/* ── REVIEW: Calm, enterprise, stable — violet/indigo tones ── */
.ops-card--section-review {
  background:
    linear-gradient(160deg, #ffffff 0%, #fdfcff 100%);
  border-color: rgba(124, 58, 237, 0.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(124,58,237,0.04);
}
.ops-card--section-review::after {
  background: radial-gradient(ellipse at top left, rgba(196,181,253,0.10), transparent 65%);
}
.ops-card--section-review .ops-card-section {
  color: #7c3aed;
  opacity: 0.7;
}
.ops-card--section-review .ops-card-aht {
  background: rgba(237,233,254,0.8);
  border-color: rgba(196,181,253,0.5);
  color: #7c3aed;
}
.ops-card--section-review.ops-card--clickable:hover {
  transform: translateY(-3px);
  border-color: rgba(124, 58, 237, 0.13);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(124,58,237,0.07);
}

/* ── REPORTS: Urgent, escalated, tension — deep crimson/amber ── */
.ops-card--section-reports {
  background:
    linear-gradient(160deg, #ffffff 0%, #fffafa 100%);
  border-color: rgba(220, 38, 38, 0.09);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(220,38,38,0.04);
}
.ops-card--section-reports::after {
  background: radial-gradient(ellipse at top left, rgba(252,165,165,0.10), transparent 60%);
}
.ops-card--section-reports .ops-card-section {
  color: #dc2626;
  opacity: 0.75;
  letter-spacing: 0.16em;
}
.ops-card--section-reports .ops-card-aht {
  background: rgba(254,226,226,0.8);
  border-color: rgba(252,165,165,0.5);
  color: #b91c1c;
}
.ops-card--section-reports.ops-card--clickable:hover {
  transform: translateY(-3px);
  border-color: rgba(220, 38, 38, 0.15);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(220,38,38,0.07);
}

/* ── CATEGORIZATION: AI/system, scientific — emerald/cyan ── */
.ops-card--section-categorization {
  background:
    linear-gradient(155deg, #ffffff 0%, #fafffd 100%);
  border-color: rgba(5, 150, 105, 0.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(5,150,105,0.04);
}
.ops-card--section-categorization::after {
  background: radial-gradient(ellipse at top left, rgba(110,231,183,0.10), transparent 60%);
}
.ops-card--section-categorization .ops-card-section {
  color: #059669;
  opacity: 0.75;
  letter-spacing: 0.16em;
}
.ops-card--section-categorization .ops-card-aht {
  background: rgba(209,250,229,0.8);
  border-color: rgba(110,231,183,0.5);
  color: #065f46;
}
.ops-card--section-categorization.ops-card--clickable:hover {
  transform: translateY(-3px);
  border-color: rgba(5, 150, 105, 0.13);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(5,150,105,0.07);
}

/* ── FINANCE: Premium fintech — cyan/slate glass ── */
.ops-card--section-finance {
  background:
    linear-gradient(155deg, #ffffff 0%, #fafeff 100%);
  border-color: rgba(8, 145, 178, 0.08);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 12px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(8,145,178,0.04);
}
.ops-card--section-finance::after {
  background: radial-gradient(ellipse at top left, rgba(125,211,252,0.10), transparent 65%);
}
.ops-card--section-finance .ops-card-section {
  color: #0891b2;
  opacity: 0.75;
}
.ops-card--section-finance .ops-card-aht {
  background: rgba(224,242,254,0.8);
  border-color: rgba(125,211,252,0.5);
  color: #0e7490;
}
.ops-card--section-finance.ops-card--clickable:hover {
  transform: translateY(-3px);
  border-color: rgba(8, 145, 178, 0.13);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.06),
    0 8px 20px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,1.0),
    inset 0 0 0 1px rgba(8,145,178,0.07);
}


/* ===== OPS CONSOLE — DARK MODE ===== */

.dashboard--dark .backlog-page-wrap .page-title-row h1 {
  color: #f0f0f8 !important;
}

.dashboard--dark .backlog-page-wrap .page-title-row p {
  color: #64748b !important;
}

/* Dark base — overridden per section below */
.dashboard--dark .ops-card {
  background: linear-gradient(160deg, #1c1e25 0%, #1d1f27 100%);
  border-color: rgba(255,255,255,0.09);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.50),
    0 4px 20px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.dashboard--dark .ops-card-count {
  filter: saturate(0.60) brightness(0.85);
}

.dashboard--dark .ops-card::before {
  opacity: 0.8;
}

.dashboard--dark .ops-card::after {
  background: radial-gradient(ellipse at top left, rgba(255,255,255,0.03), transparent 60%);
}

.dashboard--dark .ops-card--clickable:hover {
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.dashboard--dark .ops-card--breached {
  border-color: rgba(220, 38, 38, 0.32);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.5),
    0 6px 28px rgba(220, 38, 38, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.dashboard--dark .ops-card--warning {
  border-color: rgba(217, 119, 6, 0.26);
}

.dashboard--dark .ops-card-section {
  color: #64748b;
}

.dashboard--dark .ops-card-aht {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.09);
  color: #64748b;
}

.dashboard--dark .ops-card-sla--positive {
  color: #64748b;
}

.dashboard--dark .ops-card-sla--warning {
  color: #f59e0b;
}

.dashboard--dark .ops-card-sla--negative {
  color: #f87171;
  text-shadow: 0 0 28px rgba(248, 113, 113, 0.40);
}

.dashboard--dark .ops-card-title {
  color: #64748b;
}

.dashboard--dark .ops-card-priority--critical {
  background: rgba(185,28,28,0.18);
  color: #fca5a5;
  border-color: rgba(185,28,28,0.35);
}
.dashboard--dark .ops-card-priority--high {
  background: rgba(194,65,12,0.18);
  color: #fdba74;
  border-color: rgba(194,65,12,0.35);
}
.dashboard--dark .ops-card-priority--normal {
  background: rgba(22,101,52,0.18);
  color: #86efac;
  border-color: rgba(22,101,52,0.35);
}

.dashboard--dark .ops-card-progress {
  background: rgba(255,255,255,0.06);
}

/* ── Dark: REVIEW ── */
.dashboard--dark .ops-card--section-review {
  background: linear-gradient(155deg, #1a1720 0%, #1b1822 100%);
  border-color: rgba(124, 58, 237, 0.13);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.45),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(196,181,253,0.05),
    inset 0 0 0 1px rgba(124,58,237,0.06);
}
.dashboard--dark .ops-card--section-review::after {
  background: radial-gradient(ellipse at top left, rgba(124,58,237,0.04), transparent 60%);
}
.dashboard--dark .ops-card--section-review .ops-card-section {
  color: #a78bfa;
  opacity: 0.85;
}
.dashboard--dark .ops-card--section-review .ops-card-aht {
  background: rgba(124,58,237,0.12);
  border-color: rgba(124,58,237,0.25);
  color: #a78bfa;
}
.dashboard--dark .ops-card--section-review.ops-card--clickable:hover {
  border-color: rgba(124, 58, 237, 0.18);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(196,181,253,0.07),
    inset 0 0 0 1px rgba(124,58,237,0.09);
}

/* ── Dark: REPORTS ── */
.dashboard--dark .ops-card--section-reports {
  background: linear-gradient(155deg, #1d1717 0%, #1f1818 100%);
  border-color: rgba(220, 38, 38, 0.15);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.45),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(252,165,165,0.05),
    inset 0 0 0 1px rgba(220,38,38,0.06);
}
.dashboard--dark .ops-card--section-reports::after {
  background: radial-gradient(ellipse at top left, rgba(220,38,38,0.05), transparent 55%);
}
.dashboard--dark .ops-card--section-reports .ops-card-section {
  color: #f87171;
  opacity: 0.85;
}
.dashboard--dark .ops-card--section-reports .ops-card-aht {
  background: rgba(220,38,38,0.14);
  border-color: rgba(220,38,38,0.28);
  color: #fca5a5;
}
.dashboard--dark .ops-card--section-reports.ops-card--clickable:hover {
  border-color: rgba(220, 38, 38, 0.20);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(252,165,165,0.07),
    inset 0 0 0 1px rgba(220,38,38,0.09);
}

/* ── Dark: CATEGORIZATION ── */
.dashboard--dark .ops-card--section-categorization {
  background: linear-gradient(155deg, #171d1a 0%, #181e1b 100%);
  border-color: rgba(5, 150, 105, 0.13);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.45),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(110,231,183,0.05),
    inset 0 0 0 1px rgba(5,150,105,0.06);
}
.dashboard--dark .ops-card--section-categorization::after {
  background: radial-gradient(ellipse at top left, rgba(16,185,129,0.04), transparent 60%);
}
.dashboard--dark .ops-card--section-categorization .ops-card-section {
  color: #34d399;
  opacity: 0.85;
}
.dashboard--dark .ops-card--section-categorization .ops-card-aht {
  background: rgba(5,150,105,0.14);
  border-color: rgba(5,150,105,0.28);
  color: #6ee7b7;
}
.dashboard--dark .ops-card--section-categorization.ops-card--clickable:hover {
  border-color: rgba(5, 150, 105, 0.18);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(110,231,183,0.07),
    inset 0 0 0 1px rgba(5,150,105,0.09);
}

/* ── Dark: FINANCE ── */
.dashboard--dark .ops-card--section-finance {
  background: linear-gradient(155deg, #15181f 0%, #161a22 100%);
  border-color: rgba(8, 145, 178, 0.13);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.45),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(125,211,252,0.05),
    inset 0 0 0 1px rgba(8,145,178,0.06);
}
.dashboard--dark .ops-card--section-finance::after {
  background: radial-gradient(ellipse at top left, rgba(14,165,233,0.04), transparent 60%);
}
.dashboard--dark .ops-card--section-finance .ops-card-section {
  color: #38bdf8;
  opacity: 0.85;
}
.dashboard--dark .ops-card--section-finance .ops-card-aht {
  background: rgba(8,145,178,0.14);
  border-color: rgba(8,145,178,0.28);
  color: #7dd3fc;
}
.dashboard--dark .ops-card--section-finance.ops-card--clickable:hover {
  border-color: rgba(8, 145, 178, 0.18);
  box-shadow:
    0 2px 8px rgba(0,0,0,0.55),
    0 8px 24px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(125,211,252,0.07),
    inset 0 0 0 1px rgba(8,145,178,0.09);
}

.dashboard--dark .backlog-page-wrap .ops-mobile-group-title {
  color: #e5e7eb;
}

.dashboard--dark .backlog-page-wrap .ops-card,
.dashboard--dark .backlog-page-wrap .ops-card--section-review,
.dashboard--dark .backlog-page-wrap .ops-card--section-reports,
.dashboard--dark .backlog-page-wrap .ops-card--section-categorization,
.dashboard--dark .backlog-page-wrap .ops-card--section-finance {
  background: linear-gradient(160deg, #24272f 0%, #20232a 100%);
  border-color: rgba(255,255,255,0.11);
  box-shadow:
    0 1px 2px rgba(0,0,0,0.42),
    0 8px 18px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.dashboard--dark .backlog-page-wrap .ops-card::after,
.dashboard--dark .backlog-page-wrap .ops-card--section-review::after,
.dashboard--dark .backlog-page-wrap .ops-card--section-reports::after,
.dashboard--dark .backlog-page-wrap .ops-card--section-categorization::after,
.dashboard--dark .backlog-page-wrap .ops-card--section-finance::after {
  display: none;
}

.dashboard--dark .backlog-page-wrap .ops-card-count {
  filter: none;
}

.dashboard--dark .backlog-page-wrap .ops-card-title {
  color: #cbd5e1;
}

.dashboard--dark .backlog-page-wrap .ops-card-aht {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #cbd5e1;
}

.dashboard--dark .backlog-page-wrap .ops-card-sla--positive {
  color: #cbd5e1;
}

.dashboard--dark .backlog-page-wrap .ops-card-sla--negative {
  color: #f87171;
  text-shadow: none;
}


/* ===== OPS CONSOLE — MOBILE ===== */
@media (max-width: 860px) {
  .ops-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ops-card {
    min-height: 190px;
    padding: 20px 22px 16px;
    border-radius: 18px;
  }

  .ops-card-top {
    margin-bottom: 14px;
  }

  .ops-card-count {
    font-size: 64px;
  }

  .ops-card-sla {
    font-size: 20px;
  }
}

@media (max-width: 700px) {
  .backlog-page-wrap .page-title-row {
    margin-bottom: 16px !important;
  }

  .backlog-page-wrap .page-title-row h1 {
    font-size: 24px !important;
  }

  .backlog-page-wrap .page-title-row p {
    font-size: 12px !important;
  }

  .ops-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .ops-card {
    padding: 14px 16px 12px !important;
    min-height: 150px !important;
    border-radius: 14px !important;
  }

  .ops-card-top {
    margin-bottom: 10px !important;
  }

  .ops-card-section {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  .ops-card-aht {
    font-size: 9px !important;
    padding: 1px 7px !important;
  }

  .ops-card-count {
    font-size: 44px !important;
    margin-bottom: 4px !important;
  }

  .ops-card-sla {
    font-size: 17px !important;
  }

  .ops-card-title {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
  }

  .ops-card-priority {
    font-size: 8px !important;
    padding: 1px 5px !important;
  }

  .ops-card-progress {
    height: 2px !important;
    margin-top: 10px !important;
  }

  .ops-card-body {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .ops-card-body-right {
    justify-content: flex-start !important;
  }
}

@media (max-width: 520px) {
  .backlog-page-wrap .page-title-row {
    display: none;
  }

  .backlog-page-wrap .ops-grid {
    height: calc(100dvh - 98px);
    min-height: 520px;
    max-height: 760px;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 8px !important;
    row-gap: 8px !important;
    overflow: hidden;
  }

  .backlog-page-wrap .ops-mobile-group-title {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    color: #334155;
    font-size: clamp(13px, 3.4vw, 15px);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  .backlog-page-wrap .ops-mobile-group-title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--group-accent, #64748b);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--group-accent, #64748b) 16%, transparent);
  }

  .backlog-page-wrap .ops-mobile-group-title--review {
    --group-accent: #7c3aed;
    order: 1;
  }

  .backlog-page-wrap .ops-mobile-group-title--report {
    --group-accent: #dc2626;
    order: 3;
    margin-top: 4px;
  }

  .backlog-page-wrap .ops-mobile-group-title--operation {
    --group-accent: #059669;
    order: 5;
    margin-top: 4px;
  }

  .backlog-page-wrap .ops-card {
    min-width: 0;
    min-height: 0 !important;
    height: 100%;
    padding: clamp(22px, 4dvh, 30px) 10px 7px !important;
    border-radius: 12px !important;
  }

  .backlog-page-wrap .ops-card--review-creators,
  .backlog-page-wrap .ops-card--review-games {
    order: 2;
  }

  .backlog-page-wrap .ops-card--report-creators,
  .backlog-page-wrap .ops-card--report-games {
    order: 4;
  }

  .backlog-page-wrap .ops-card--operation-categorization,
  .backlog-page-wrap .ops-card--operation-finance {
    order: 6;
  }

  .backlog-page-wrap .ops-card::before {
    display: none;
  }

  .backlog-page-wrap .ops-card-top {
    justify-content: flex-end;
    min-height: 0;
    margin-bottom: 0 !important;
    gap: 6px;
  }

  .backlog-page-wrap .ops-card-section {
    display: none;
  }

  .backlog-page-wrap .ops-card-aht {
    position: absolute;
    right: 10px;
    top: clamp(22px, 4dvh, 30px);
    background: color-mix(in srgb, var(--mobile-aht-color, #64748b) 10%, white) !important;
    border: 1px solid color-mix(in srgb, var(--mobile-aht-color, #64748b) 24%, transparent) !important;
    border-radius: 999px;
    box-shadow: none;
    color: var(--mobile-aht-color, #64748b) !important;
    font-size: 9px !important;
    font-weight: 900;
    line-height: 1;
    padding: 3px 6px !important;
    z-index: 1;
  }

  .backlog-page-wrap .ops-card-aht-prefix {
    display: none;
  }

  .backlog-page-wrap .ops-card-body {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    flex: 1;
    row-gap: clamp(8px, 1.7dvh, 13px);
  }

  .backlog-page-wrap .ops-card-body-left {
    display: contents;
  }

  .backlog-page-wrap .ops-card-count {
    grid-column: 1;
    grid-row: 2;
    font-size: clamp(42px, 11.5dvh, 58px) !important;
    line-height: 0.95;
    margin-bottom: 2px !important;
  }

  .backlog-page-wrap .ops-card--review-creators .ops-card-count,
  .backlog-page-wrap .ops-card--review-games .ops-card-count {
    color: #7c3aed;
  }

  .backlog-page-wrap .ops-card--review-creators,
  .backlog-page-wrap .ops-card--review-games {
    --mobile-aht-color: #7c3aed;
  }

  .backlog-page-wrap .ops-card--report-creators .ops-card-count,
  .backlog-page-wrap .ops-card--report-games .ops-card-count {
    color: #dc2626;
  }

  .backlog-page-wrap .ops-card--report-creators,
  .backlog-page-wrap .ops-card--report-games {
    --mobile-aht-color: #dc2626;
  }

  .backlog-page-wrap .ops-card--operation-categorization .ops-card-count,
  .backlog-page-wrap .ops-card--operation-finance .ops-card-count {
    color: #059669;
  }

  .backlog-page-wrap .ops-card--operation-categorization,
  .backlog-page-wrap .ops-card--operation-finance {
    --mobile-aht-color: #059669;
  }

  .backlog-page-wrap .ops-card-footer {
    grid-column: 1 / -1;
    grid-row: 1;
    gap: 5px;
    margin-top: 0;
    padding-top: 0;
  }

  .backlog-page-wrap .ops-card-title {
    min-width: 0;
    color: #64748b;
    font-size: clamp(11px, 2.9vw, 12px) !important;
    letter-spacing: 0.09em !important;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .backlog-page-wrap .ops-card-body-right {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
    margin-top: 0;
    min-width: 0;
  }

  .backlog-page-wrap .ops-card-sla {
    font-size: clamp(12px, 3.4vw, 15px) !important;
    line-height: 1.05;
    white-space: nowrap;
  }

  .backlog-page-wrap .ops-card-progress {
    display: none;
  }

  .dashboard--dark .backlog-page-wrap .ops-mobile-group-title {
    color: #e5e7eb;
  }

  .dashboard--dark .backlog-page-wrap .ops-card,
  .dashboard--dark .backlog-page-wrap .ops-card--section-review,
  .dashboard--dark .backlog-page-wrap .ops-card--section-reports,
  .dashboard--dark .backlog-page-wrap .ops-card--section-categorization,
  .dashboard--dark .backlog-page-wrap .ops-card--section-finance {
    background: linear-gradient(160deg, #24272f 0%, #20232a 100%) !important;
    border-color: rgba(255,255,255,0.11) !important;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.42),
      0 8px 18px rgba(0,0,0,0.28),
      inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }

  .dashboard--dark .backlog-page-wrap .ops-card::after,
  .dashboard--dark .backlog-page-wrap .ops-card--section-review::after,
  .dashboard--dark .backlog-page-wrap .ops-card--section-reports::after,
  .dashboard--dark .backlog-page-wrap .ops-card--section-categorization::after,
  .dashboard--dark .backlog-page-wrap .ops-card--section-finance::after {
    display: none;
  }

  .dashboard--dark .backlog-page-wrap .ops-card-count {
    filter: none;
  }

  .dashboard--dark .backlog-page-wrap .ops-card-title {
    color: #cbd5e1;
  }

  .dashboard--dark .backlog-page-wrap .ops-card-aht {
    background: color-mix(in srgb, var(--mobile-aht-color, #94a3b8) 18%, transparent) !important;
    border-color: color-mix(in srgb, var(--mobile-aht-color, #94a3b8) 32%, transparent) !important;
    color: color-mix(in srgb, var(--mobile-aht-color, #94a3b8) 72%, white) !important;
  }

  .dashboard--dark .backlog-page-wrap .ops-card-sla--positive {
    color: #cbd5e1;
  }

  .dashboard--dark .backlog-page-wrap .ops-card-sla--negative {
    color: #f87171;
    text-shadow: none;
  }
}

/* ===== STATUS FILTER BUTTON + DROPDOWN ===== */

/* Filter icon button — same shape as eye button */
.column-tools-button--filter {
  width: 38px;
  padding: 0;
  font-size: 16px;
  display: inline-grid;
  place-items: center;
  font-weight: 400;
}

/* Active state: not on "All" */
.column-tools-button--filter.is-active {
  border-color: #8b5cf6 !important;
  color: #7c3aed !important;
  background: #f5f0ff !important;
}

/* Wrapper for dropdown positioning */
.filter-vc-wrap {
  position: relative;
}

/* Status dropdown panel */
.status-menu {
  position: absolute;
  top: 44px;
  left: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  padding: 4px;
  min-width: 140px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Status option buttons */
.status-menu-option {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 8px 12px;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  transition: background 0.12s, color 0.12s;
}
.status-menu-option:hover {
  background: #f1f5ff;
  color: #1455d9;
}
.status-menu-option.active {
  background: #f0eaff;
  color: #7c3aed;
  font-weight: 700;
}

/* Mobile filter button: icon-only square */
.mobile-filter-btn {
  width: 46px !important;
  padding: 0 !important;
  justify-content: center !important;
  font-size: 18px !important;
}

/* Dark mode — filter button active */
.dashboard--dark .column-tools-button--filter.is-active {
  border-color: rgba(139,92,246,0.5) !important;
  color: #c084fc !important;
  background: rgba(139,92,246,0.1) !important;
}

/* Dark mode — status dropdown */
.dashboard--dark .status-menu {
  background: #2f2f2f;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
}
.dashboard--dark .status-menu-option {
  color: #d4d4d4;
}
.dashboard--dark .status-menu-option:hover {
  background: rgba(139,92,246,0.1);
  color: #c084fc;
}
.dashboard--dark .status-menu-option.active {
  background: rgba(139,92,246,0.15);
  color: #c084fc;
}

/* ===== MOBILE TABLE POLISH — cards + search/filter bar ===== */
@media (max-width: 700px) {
  .mobile-search-bar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px 46px;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 12px;
    overflow: visible;
  }

  .mobile-search-bar .desktop-search-input {
    width: 100%;
    min-width: 0;
    height: 46px;
    border-radius: 14px;
    padding: 0 12px;
    font-size: 15px;
  }

  .mobile-fields-btn,
  .mobile-filter-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px;
    min-height: 46px;
    border-radius: 14px !important;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    line-height: 1;
  }

  .mobile-filter-btn {
    position: relative;
  }

  .mobile-filter-btn svg {
    width: 18px;
    height: 18px;
  }

  .mobile-filter-btn .filter-active-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    font-size: 10px;
  }

  .column-menu--mobile {
    width: 100%;
    box-sizing: border-box;
  }

  .mobile-cards {
    width: 100%;
    max-width: 100%;
    gap: 10px;
    overflow: hidden;
  }

  .mobile-cards .info-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    border-radius: 14px;
    text-align: left;
  }

  .mobile-cards .info-card-avatar,
  .mobile-cards .info-card-placeholder {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    flex: 0 0 auto;
  }

  .mobile-cards .info-card-avatar {
    object-fit: cover;
  }

  .mobile-cards .info-card-preview {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    object-fit: cover;
    flex: 0 0 auto;
  }

  .mobile-cards .info-card-body {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
    gap: 3px;
  }

  .mobile-cards .info-card-body strong,
  .mobile-cards .creator-card-info strong {
    width: 100%;
    min-width: 0;
    font-size: 14px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-cards .info-card-meta {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-cards .info-card .details-button {
    align-self: center;
    min-width: 74px;
    max-width: 92px;
    min-height: 38px;
    padding: 9px 11px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-cards .creator-card-header {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
  }

  .mobile-cards .creator-card-info {
    min-width: 0;
    gap: 3px;
  }

  .mobile-cards .creator-card-info .status-badge {
    margin-top: 2px;
  }
}

@media (max-width: 390px) {
  .mobile-search-bar {
    grid-template-columns: minmax(0, 1fr) 42px 42px;
    gap: 7px;
  }

  .mobile-fields-btn,
  .mobile-filter-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    min-height: 42px;
  }

  .mobile-cards .info-card,
  .mobile-cards .creator-card-header {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .mobile-cards .info-card-avatar,
  .mobile-cards .info-card-placeholder,
  .mobile-cards .info-card-preview {
    width: 48px;
    height: 48px;
    border-radius: 13px;
  }

  .mobile-cards .info-card .details-button {
    min-width: 68px;
    max-width: 82px;
    padding: 9px 9px;
    font-size: 11px;
  }
}

.dashboard--dark .mobile-filter-btn .filter-active-badge {
  border-color: #383838;
}

/* ═══════════════════════════════════════
   User Details Modal  (.udm-)
═══════════════════════════════════════ */

.udm-overlay {
  align-items: center;
  justify-content: center;
}

.udm-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  width: 92vw;
  max-width: 860px;
  max-height: 92vh;
  overflow: hidden;
}

/* ── Header ── */
.udm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #eaedf3;
  background: #fff;
  flex-shrink: 0;
}

.udm-header-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.udm-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid #eaedf3;
}

.udm-avatar-ph {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6d28d9, #4a6cf7);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.udm-header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.udm-header-name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1d23;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.udm-header-sub {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.udm-muted { color: #9ca3af; }

.udm-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.udm-close-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  margin-left: 4px;
}

/* ── Body ── */
.udm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Section accordion ── */
.udm-section {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}

/* ── Section header (now a div wrapping the collapse button + actions) ── */
.udm-sec-hdr {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  background: #f9fafb;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  min-height: 42px;
}

.udm-sec-collapse-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 8px 11px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: left;
  transition: background 0.15s;
  min-width: 0;
}

.udm-sec-hdr:hover { background: #f3f4f6; }

.udm-sec-icon { font-size: 15px; flex-shrink: 0; }

.udm-sec-title { flex: 1; min-width: 0; }

.udm-chevron {
  font-size: 11px;
  color: #9ca3af;
  flex-shrink: 0;
}

.udm-sec-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid #e5e7eb;
}

/* ── Fields grid ── */
.udm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}

.udm-grid--flags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding-top: 4px;
}

.udm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.udm-field--full {
  width: 100%;
}

/* ── Flag checkboxes ── */
.udm-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.udm-flag-lbl {
  font-size: 13px;
  color: #374151;
}

/* ── Textarea ── */
.udm-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: #1a1d23;
  background: #fff;
  resize: vertical;
  font-family: inherit;
  min-height: 70px;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.udm-textarea:focus {
  outline: none;
  border-color: #6d28d9;
  box-shadow: 0 0 0 3px rgba(109,40,217,0.08);
}

/* ── Media section ── */
.udm-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.udm-media-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.udm-media-thumb-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.udm-media-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.udm-media-actions {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  gap: 5px;
}

.udm-media-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.udm-media-btn:hover { background: rgba(0,0,0,0.78); }

.udm-media-btn--del:hover { background: rgba(185,28,28,0.85); }

.udm-media-empty {
  height: 80px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #9ca3af;
}

/* ── Footer ── */
.udm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid #eaedf3;
  background: #fff;
  flex-shrink: 0;
}

/* ──────────────────────────────────────
   Tablet  ≤ 768px
────────────────────────────────────── */
@media (max-width: 768px) {
  .udm-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    align-self: flex-end;
    margin: auto 0 0;
  }

  .udm-overlay {
    align-items: flex-end;
  }

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

  .udm-media-thumb { height: 110px; }
}

/* ──────────────────────────────────────
   Mobile  ≤ 480px
────────────────────────────────────── */
@media (max-width: 480px) {
  .udm-header { padding: 12px 14px; }

  .udm-avatar, .udm-avatar-ph { width: 42px; height: 42px; }
  .udm-avatar-ph { font-size: 18px; }

  .udm-header-name { font-size: 14px; }
  .udm-header-sub { font-size: 11px; }

  .udm-body { padding: 12px 12px 28px; gap: 12px; }

  .udm-sec-collapse-btn { padding: 10px 6px 10px 2px; }

  .udm-sec-body { padding: 12px; gap: 12px; }

  .udm-grid { grid-template-columns: 1fr; }

  .udm-media-grid { grid-template-columns: 1fr; }

  .udm-media-thumb { height: 160px; }

  .udm-footer { padding: 10px 12px; }

  .udm-footer .cancel-button,
  .udm-footer .save-button {
    flex: 1;
    padding: 13px;
    font-size: 15px;
  }

  .gdm-i, .gdm-sel, .udm-textarea {
    font-size: 16px;
    padding: 10px 12px;
    min-height: 44px;
  }
}

/* ──────────────────────────────────────
   Dark mode
────────────────────────────────────── */
.dashboard--dark .udm-modal {
  background: #101020;
  color: #e2e8f0;
}

.dashboard--dark .udm-header {
  background: #181828;
  border-color: rgba(255,255,255,0.07);
}

.dashboard--dark .udm-avatar {
  border-color: rgba(255,255,255,0.12);
}

.dashboard--dark .udm-header-name {
  color: #f0f0f8;
}

.dashboard--dark .udm-header-sub {
  color: #7070a0;
}

.dashboard--dark .udm-muted {
  color: #505080;
}

.dashboard--dark .udm-section {
  border-color: rgba(255,255,255,0.07);
}

.dashboard--dark .udm-sec-hdr {
  background: #181828;
  color: #c4c4e4;
}

.dashboard--dark .udm-sec-hdr:hover {
  background: #1e1e34;
}

.dashboard--dark .udm-sec-body {
  border-color: rgba(255,255,255,0.07);
  background: #101020;
}

.dashboard--dark .udm-flag-lbl {
  color: #c4c4e4;
}

.dashboard--dark .udm-textarea {
  background: #16162a;
  border-color: rgba(255,255,255,0.1);
  color: #e2e8f0;
}

.dashboard--dark .udm-textarea::placeholder {
  color: #505080;
}

.dashboard--dark .udm-textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}

.dashboard--dark .udm-media-empty {
  border-color: rgba(255,255,255,0.1);
  color: #505080;
}

.dashboard--dark .udm-footer {
  background: #181828;
  border-color: rgba(255,255,255,0.07);
}

.dashboard--dark .udm-sec-hdr {
  background: #181828;
}

.dashboard--dark .udm-sec-hdr:hover {
  background: #1e1e34;
}

.dashboard--dark .udm-sec-collapse-btn {
  color: #c4c4e4;
}

/* Fase 3: User Details modal UX stabilization */
.simple-modal-overlay.udm-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  overflow: hidden;
  padding: 24px;
  overscroll-behavior: contain;
}

.udm-modal {
  width: min(900px, 94vw);
  max-height: 90dvh;
  min-height: 0;
}

.udm-header,
.udm-footer {
  position: relative;
  z-index: 1;
}

.udm-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #f8fafc;
}

.udm-section {
  background: #fff;
  border-radius: 12px;
  flex-shrink: 0;
}

.udm-sec-collapse-btn {
  padding: 12px 14px;
}

.udm-sec-title {
  font-weight: 750;
}

.udm-sec-body {
  background: #fff;
}

.udm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.udm-field,
.udm-flag,
.udm-media-card {
  min-width: 0;
}

.udm-field .gdm-l,
.udm-media-card .gdm-l {
  color: #7a8495;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.udm-field .gdm-i,
.udm-field .gdm-sel,
.udm-textarea {
  border-radius: 8px;
  overflow-wrap: anywhere;
}

.udm-field .gdm-i::placeholder,
.udm-textarea::placeholder {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .simple-modal-overlay.udm-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .udm-modal {
    width: 100vw;
    max-width: 100vw;
    height: 92dvh;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }

  .udm-sec-hdr {
    min-height: 48px;
  }

  .udm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .udm-header {
    padding: 12px 14px;
  }

  .udm-header-identity {
    flex: 1 1 auto;
  }

  .udm-header-right {
    gap: 6px;
  }

  .udm-close-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    margin-left: 0;
  }

  .udm-header-right .status-badge {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .udm-body {
    padding: 12px 12px 18px;
  }

  .udm-grid {
    grid-template-columns: 1fr;
  }

  .udm-sec-collapse-btn {
    padding: 12px;
    min-height: 48px;
  }

  .udm-footer {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  }

  .udm-footer .cancel-button,
  .udm-footer .save-button {
    min-height: 50px;
    border-radius: 14px;
  }
}

.dashboard--dark .udm-modal,
.dashboard--dark .udm-header,
.dashboard--dark .udm-footer,
.dashboard--dark .udm-section,
.dashboard--dark .udm-sec-body {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dashboard--dark .udm-body,
.dashboard--dark .udm-sec-hdr {
  background: #262626 !important;
}

.dashboard--dark .udm-sec-hdr:hover {
  background: #383838 !important;
}

.dashboard--dark .udm-header-name,
.dashboard--dark .udm-sec-collapse-btn,
.dashboard--dark .udm-flag-lbl,
.dashboard--dark .udm-field .gdm-i,
.dashboard--dark .udm-field .gdm-sel,
.dashboard--dark .udm-textarea {
  color: #ececec !important;
}

.dashboard--dark .udm-header-sub,
.dashboard--dark .udm-muted,
.dashboard--dark .udm-field .gdm-l,
.dashboard--dark .udm-media-card .gdm-l,
.dashboard--dark .udm-chevron {
  color: #b4b4b4 !important;
}

.dashboard--dark .udm-field .gdm-i,
.dashboard--dark .udm-field .gdm-sel,
.dashboard--dark .udm-textarea,
.dashboard--dark .udm-media-empty {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* ═══════════════════════════════════════
   Mobile UX polish — Users / Games / Verifications / Algorithm
═══════════════════════════════════════ */

@media (max-width: 700px) {
  html,
  body,
  #root {
    overflow-x: hidden;
  }

  .content {
    width: 100%;
    max-width: 100vw;
  }

  .view-header.info-view-header {
    width: 100%;
    min-width: 0;
  }

  .info-title-block,
  .info-title-block h1 {
    min-width: 0;
    max-width: 100%;
  }

  .page-count-badge {
    height: 20px;
    padding: 0 8px;
    font-size: 11px;
    transform: translateY(-1px);
  }

  .mobile-search-bar {
    grid-template-columns: minmax(0, 1fr) 46px 46px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .mobile-search-bar .desktop-search-input {
    min-width: 0 !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 12px !important;
    border-radius: 14px !important;
  }

  .mobile-fields-btn,
  .mobile-filter-btn {
    box-sizing: border-box;
    flex: 0 0 46px;
    color: #7c3aed;
  }

  .mobile-fields-btn:focus-visible,
  .mobile-filter-btn:focus-visible,
  .details-button:focus-visible {
    outline: 3px solid rgba(139, 92, 246, 0.22);
    outline-offset: 2px;
  }

  .column-menu--mobile {
    max-width: 100%;
    padding: 10px;
    margin: -2px 0 12px;
  }

  .column-menu--mobile label {
    min-height: 40px;
  }

  .mobile-cards {
    overflow: visible !important;
  }

  .mobile-cards .info-card {
    grid-template-columns: 54px minmax(0, 1fr) minmax(72px, auto) !important;
    min-height: 78px;
    overflow: hidden;
  }

  .mobile-cards .info-card-body,
  .mobile-cards .creator-card-info {
    overflow: hidden;
  }

  .mobile-cards .info-card-meta {
    line-height: 1.25;
  }

  .mobile-cards .status-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-cards .info-card .details-button {
    width: auto;
    min-width: 72px;
    max-width: 86px;
    min-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .pagination {
    padding: 10px 0 0;
    gap: 6px;
  }

  .pagination button {
    min-width: 32px;
    height: 32px;
  }

  .mobile-sheet {
    width: 100vw;
    max-width: 100vw;
    max-height: 88dvh;
  }

  .mobile-sheet-header {
    border-bottom: 1px solid #eee8ff;
  }

  .mobile-sheet-header span {
    color: #1a1a2e;
    font-size: 20px;
    font-weight: 900;
  }

  .mobile-sheet-body > div {
    min-width: 0;
  }

  .mobile-sheet-footer {
    box-sizing: border-box;
  }

  .mobile-sheet-footer .clear-filters-btn,
  .mobile-sheet-footer .primary-button {
    flex: 1 1 0;
    height: 48px;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    border-radius: 14px;
    text-align: center;
  }

  .simple-modal-overlay {
    overflow-x: hidden;
  }

  .simple-modal,
  .gdm-modal,
  .vdm-modal,
  .udm-modal,
  .modal {
    max-width: 100vw !important;
  }

  .gdm-modal,
  .vdm-modal {
    width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 18px 18px 0 0;
  }

  .gdm-body {
    overflow-x: hidden;
    padding-left: 14px;
    padding-right: 14px;
  }

  .gdm-r3,
  .gdm-r4,
  .vdm-contract-fields {
    min-width: 0;
  }

  .gdm-f,
  .gdm-irow,
  .vdm-section,
  .vdm-table-wrap {
    min-width: 0;
  }

  .gdm-i,
  .gdm-sel,
  .udm-textarea,
  .mobile-sheet-input,
  .mobile-sheet-select {
    max-width: 100%;
  }

  .gdm-irow {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .gdm-act-creator {
    display: none;
  }

  .gdm-act-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .gdm-act-card {
    width: auto;
    min-width: 0;
  }

  .vdm-table {
    min-width: 640px;
  }

  .vdm-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .udm-header {
    min-width: 0;
  }

  .udm-header-identity {
    flex: 1 1 auto;
  }

  .udm-header-right {
    gap: 6px;
    min-width: 0;
  }

  .udm-header-right .status-badge {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .modal {
    width: 100vw !important;
    max-height: 100dvh !important;
    border-radius: 18px 18px 0 0;
  }

  .modal-left,
  .modal-right {
    min-width: 0;
    overflow-x: hidden;
  }
}

@media (max-width: 430px) {
  .mobile-cards .info-card,
  .mobile-cards .creator-card-header {
    grid-template-columns: 50px minmax(0, 1fr) minmax(68px, auto) !important;
  }

  .mobile-cards .info-card-avatar,
  .mobile-cards .info-card-placeholder,
  .mobile-cards .info-card-preview {
    width: 50px !important;
    height: 50px !important;
  }

  .mobile-cards .info-card .details-button {
    min-width: 68px;
    max-width: 78px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .gdm-act-cards,
  .vdm-doc-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .mobile-search-bar {
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 7px !important;
  }

  .mobile-search-bar .desktop-search-input {
    height: 42px !important;
    border-radius: 13px !important;
  }

  .mobile-cards .info-card,
  .mobile-cards .creator-card-header {
    grid-template-columns: 48px minmax(0, 1fr) minmax(64px, auto) !important;
  }

  .mobile-cards .info-card .details-button {
    min-width: 64px;
    max-width: 72px;
    font-size: 11px;
  }

  .page-count-badge {
    margin-left: 5px;
  }
}

@media (max-width: 700px) {
  .dashboard--dark .mobile-search-bar .desktop-search-input,
  .dashboard--dark .mobile-fields-btn,
  .dashboard--dark .mobile-filter-btn,
  .dashboard--dark .column-menu--mobile,
  .dashboard--dark .mobile-sheet,
  .dashboard--dark .mobile-sheet-input,
  .dashboard--dark .mobile-sheet-select {
    background-color: #383838 !important;
    border-color: rgba(255,255,255,0.1) !important;
  }

  .dashboard--dark .mobile-sheet-header {
    border-color: rgba(255,255,255,0.08) !important;
  }

  .dashboard--dark .mobile-sheet-header span,
  .dashboard--dark .column-menu--mobile label {
    color: #ececec !important;
  }

  .dashboard--dark .mobile-cards .info-card {
    background: #2f2f2f !important;
    border-color: rgba(255,255,255,0.07) !important;
  }

  .dashboard--dark .gdm-modal,
  .dashboard--dark .vdm-modal,
  .dashboard--dark .udm-modal,
  .dashboard--dark .modal {
    background: #2f2f2f !important;
  }
}

/* ═══════════════════════════════════════
   Mobile filter sheet — quick chips only
═══════════════════════════════════════ */

.mobile-filter-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid #eee8ff;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfaff);
}

.mobile-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.mobile-filter-chip {
  min-height: 42px;
  max-width: 100%;
  border: 1px solid #e1daf4;
  border-radius: 999px;
  background: #ffffff;
  color: #3f3a52;
  padding: 0 15px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease, box-shadow .14s ease;
}

.mobile-filter-chip:hover {
  background: #f5f0ff;
  border-color: #c4b5fd;
  color: #7c3aed;
}

.mobile-filter-chip.active {
  background-color: #8b5cf6;
  background-image: linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-color: #7c3aed;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22);
}

.mobile-filter-chip:active {
  transform: scale(.98);
}

.mobile-filter-empty {
  padding: 24px 14px;
  border-radius: 18px;
  background: #f8f6ff;
  color: #7c7198;
  text-align: center;
  font-size: 13px;
  font-weight: 750;
}

@media (max-width: 700px) {
  .mobile-sheet {
    background: #f8f6ff;
  }

  .mobile-sheet-body {
    gap: 12px !important;
    padding: 12px 14px 14px !important;
  }

  .mobile-sheet-label {
    color: #5b5277;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .mobile-sheet-footer {
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 430px) {
  .mobile-filter-section {
    padding: 12px;
    border-radius: 16px;
  }

  .mobile-chip-grid {
    gap: 8px;
  }

  .mobile-filter-chip {
    min-height: 40px;
    padding: 0 13px;
    font-size: 12px;
  }
}

@media (max-width: 700px) {
  .dashboard--dark .mobile-sheet {
    background: #262626 !important;
  }

  .dashboard--dark .mobile-filter-section {
    background: #2f2f2f;
    border-color: rgba(255,255,255,.08);
  }

  .dashboard--dark .mobile-sheet-label {
    color: #b4b4b4 !important;
  }

  .dashboard--dark .mobile-filter-chip {
    background: #383838;
    border-color: rgba(255,255,255,.1);
    color: #ececec;
  }

  .dashboard--dark .mobile-filter-chip:hover {
    background: rgba(139,92,246,.16);
    border-color: rgba(139,92,246,.34);
    color: #d8b4fe;
  }

  .dashboard--dark .mobile-filter-chip.active {
    background-color: #8b5cf6;
    background-image: none;
    border-color: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
  }

  .dashboard--dark .mobile-filter-empty {
    background: #383838;
    color: #b4b4b4;
  }

  .dashboard--dark .mobile-sheet-footer {
    background: rgba(47,47,47,.94);
  }
}

/* ============================================================
   PREMIUM MOBILE POLISH — v2
   CSS-only. No business logic changed. No regressions intended.
   ============================================================ */

/* 1. iPhone safe-area — content bottom padding */
@media (max-width: 700px) {
  .content { padding-bottom: max(28px, env(safe-area-inset-bottom)) !important; }
}

/* 2. Filter sheet entrance animations */
@keyframes pm-sheet-up {
  from { transform: translateY(28px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes pm-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mobile-sheet { animation: pm-sheet-up 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
.mobile-sheet-backdrop { animation: pm-backdrop-in 0.2s ease both; }

/* 3. Details button active press feedback */
.details-button:active {
  transform: scale(0.96) translateY(1px) !important;
  transition: transform 0.08s ease !important;
}

/* 4. Mobile info-card elevation + press feedback */
@media (max-width: 700px) {
  .mobile-cards .info-card {
    box-shadow: 0 1px 8px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04) !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  .mobile-cards .info-card:active {
    transform: scale(0.984) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  }
  .dashboard--dark .mobile-cards .info-card {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) !important;
  }
  .dashboard--dark .mobile-cards .info-card:active {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) !important;
  }
}

/* 5. Creator/algorithm card press feedback */
@media (max-width: 700px) {
  .creator-card {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  .creator-card:active {
    transform: scale(0.984) !important;
  }
}

/* 6. Sheet handle — Apple-standard proportions */
.mobile-sheet-handle {
  width: 36px !important;
  height: 4px !important;
  background: #cac4dc !important;
  margin: 10px auto 8px !important;
  border-radius: 999px !important;
}
.dashboard--dark .mobile-sheet-handle {
  background: #4e4e4e !important;
}

/* 7. Simple modal mobile footer */
@media (max-width: 700px) {
  .simple-modal {
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }
  .simple-modal-footer {
    gap: 10px !important;
    padding-top: 16px !important;
  }
  .simple-modal-footer .save-button,
  .simple-modal-footer .cancel-button {
    min-height: 50px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
  .simple-modal-close {
    width: 38px !important;
    height: 38px !important;
  }
}

/* 8. GDM/UDM footer safe area + close button touch target */
@media (max-width: 700px) {
  .gdm-footer,
  .udm-footer {
    padding-bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  .gdm-close {
    min-width: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 20px !important;
  }
  .gdm-header {
    min-height: 54px !important;
  }
}

/* 9. UDM dark mode — ChatGPT neutral palette */
.dashboard--dark .udm-modal {
  background: #2f2f2f !important;
  color: #ececec !important;
}
.dashboard--dark .udm-header {
  background: #383838 !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dashboard--dark .udm-header-name {
  color: #ececec !important;
}
.dashboard--dark .udm-header-sub {
  color: #b4b4b4 !important;
}
.dashboard--dark .udm-sec-hdr {
  background: #383838 !important;
  color: #d4d4d4 !important;
}
.dashboard--dark .udm-sec-hdr:hover {
  background: #424242 !important;
}
.dashboard--dark .udm-sec-collapse-btn {
  color: #d4d4d4 !important;
}
.dashboard--dark .udm-sec-body {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dashboard--dark .udm-footer {
  background: #383838 !important;
  border-color: rgba(255,255,255,.07) !important;
}
/* 10. VDM sections dark mode — match neutral palette */
.dashboard--dark .vdm-section {
  background: #383838 !important;
  border-color: rgba(255,255,255,.07) !important;
}
.dashboard--dark .vdm-section-title {
  color: #d4d4d4 !important;
}
.dashboard--dark .vdm-divider {
  border-color: rgba(255,255,255,.06) !important;
}

/* Fase 5: Verification Detail modal polish */
.simple-modal-overlay.vdm-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: contain;
}

.vdm-modal {
  width: min(980px, 96vw);
  max-height: 90dvh;
  min-height: 0;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,0.08);
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(15,23,42,0.26);
}

.vdm-header,
.vdm-footer {
  flex: 0 0 auto;
  background: #fff;
  border-color: #e5eaf2;
  position: relative;
  z-index: 1;
}

.vdm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid #e5eaf2;
}

.vdm-header-main {
  min-width: 0;
}

.vdm-header-main h2 {
  margin: 0;
  color: #172033;
  font-size: 19px;
  font-weight: 850;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vdm-header-main p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vdm-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.vdm-close {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}

.vdm-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

.vdm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px 18px;
}

.vdm-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid #e5eaf2;
}

.vdm-section {
  min-width: 0;
  margin-bottom: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5eaf2;
  background: #fff;
}

.vdm-section-title {
  margin-bottom: 12px;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vdm-divider {
  margin: 0 0 14px;
  border-top-color: #e5eaf2;
}

.vdm-section-header-row {
  min-width: 0;
  gap: 12px;
}

.vdm-modal .gdm-r3,
.vdm-contract-fields {
  gap: 10px 12px;
}

.vdm-modal .gdm-f,
.vdm-modal .gdm-f--inline,
.vdm-modal .gdm-irow {
  min-width: 0;
}

.vdm-modal .gdm-l {
  color: #7a8495;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.vdm-modal .gdm-i {
  min-width: 0;
  max-width: 100%;
  height: 36px;
  border-radius: 8px;
  border-color: #d9e0ea;
  background: #fff;
  color: #172033;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vdm-modal .gdm-i:read-only {
  background: #f8fafc;
}

.vdm-check-row,
.vdm-mid-check {
  min-height: 36px;
}

.vdm-contract-row {
  min-width: 0;
}

.vdm-edit-btn,
.vdm-add-btn {
  min-height: 36px;
  border-radius: 9px;
  font-weight: 750;
}

.vdm-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  border: 1px solid #e5eaf2;
  border-radius: 10px;
  margin-top: 4px;
}

.vdm-table {
  min-width: 720px;
}

.vdm-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 750;
  border-color: #e5eaf2;
}

.vdm-table td {
  color: #334155;
  border-color: #e5eaf2;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.vdm-table tr:hover td {
  background: #f8fafc;
}

.vdm-doc-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.vdm-doc-card {
  min-width: 0;
  border-radius: 12px;
  border-color: #e5eaf2;
  background: #fff;
}

.vdm-doc-thumb {
  background: #f1f5f9;
}

.vdm-doc-thumb img,
.vdm-doc-thumb-ph {
  width: 72px;
  height: 72px;
}

.vdm-doc-info {
  background: #334155;
  gap: 3px;
}

.vdm-doc-name,
.vdm-doc-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .simple-modal-overlay.vdm-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .vdm-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    border-radius: 18px 18px 0 0;
  }

  .vdm-header {
    padding: 14px;
    gap: 10px;
  }

  .vdm-header-main h2 {
    font-size: 17px;
  }

  .vdm-header-actions {
    gap: 7px;
  }

  .vdm-header-actions .status-badge {
    max-width: 82px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vdm-close {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
  }

  .vdm-body {
    padding: 12px 12px 16px;
    gap: 12px;
  }

  .vdm-section {
    padding: 14px;
  }

  .vdm-modal .gdm-r3,
  .vdm-contract-fields {
    grid-template-columns: 1fr;
  }

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

  .vdm-edit-btn,
  .vdm-add-btn {
    width: 100%;
  }

  .vdm-table {
    min-width: 680px;
  }

  .vdm-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vdm-footer {
    padding: 12px 14px max(12px, env(safe-area-inset-bottom));
  }

  .vdm-footer .cancel-button {
    width: 100%;
    min-height: 50px;
    border-radius: 14px;
    font-size: 15px;
  }
}

@media (max-width: 430px) {
  .vdm-doc-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard--dark .vdm-modal,
.dashboard--dark .vdm-header,
.dashboard--dark .vdm-footer,
.dashboard--dark .vdm-section {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dashboard--dark .vdm-body {
  background: #262626 !important;
}

.dashboard--dark .vdm-header-main h2,
.dashboard--dark .vdm-modal .gdm-i,
.dashboard--dark .vdm-table td {
  color: #ececec !important;
}

.dashboard--dark .vdm-header-main p,
.dashboard--dark .vdm-section-title,
.dashboard--dark .vdm-modal .gdm-l {
  color: #b4b4b4 !important;
}

.dashboard--dark .vdm-modal .gdm-i,
.dashboard--dark .vdm-close,
.dashboard--dark .vdm-doc-card {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dashboard--dark .vdm-modal .gdm-i:read-only,
.dashboard--dark .vdm-table th,
.dashboard--dark .vdm-doc-thumb {
  background: #383838 !important;
  color: #d4d4d4 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

.dashboard--dark .vdm-table-wrap,
.dashboard--dark .vdm-table td {
  border-color: rgba(255,255,255,0.08) !important;
}

.dashboard--dark .vdm-table tr:hover td {
  background: #383838 !important;
}

.dashboard--dark .vdm-doc-info {
  background: #383838 !important;
}

.dashboard--dark .vdm-close {
  color: #ececec !important;
}

.dashboard--dark .vdm-close:hover {
  background: rgba(239,68,68,0.18) !important;
  color: #f87171 !important;
}

/* 11. Filter sheet group label hierarchy */
@media (max-width: 700px) {
  .mobile-sheet-label {
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #6b5a9a !important;
  }
  .dashboard--dark .mobile-sheet-label {
    color: #9090b0 !important;
  }
}

/* 12. Filter sheet footer CTA — premium purple */
@media (max-width: 700px) {
  .mobile-sheet-footer .primary-button {
    background: #8b5cf6 !important;
    color: #fff !important;
    font-size: 15px !important;
    border-radius: 14px !important;
    min-height: 48px !important;
    box-shadow: 0 8px 20px rgba(139,92,246,.24) !important;
  }
  .mobile-sheet-footer .primary-button:active {
    transform: scale(0.98) !important;
    box-shadow: 0 3px 10px rgba(139,92,246,.2) !important;
  }
  .mobile-sheet-footer .clear-filters-btn {
    min-height: 48px !important;
    border-radius: 14px !important;
  }
}

/* 13. Mobile card typography polish */
@media (max-width: 700px) {
  .mobile-cards .info-card-body strong {
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }
  .mobile-cards .info-card-meta {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    color: #7a748c !important;
  }
  .dashboard--dark .mobile-cards .info-card-meta {
    color: #9090b0 !important;
  }
}

/* 14. Filter badge dark mode border fix */
.dashboard--dark .mobile-filter-btn .filter-active-badge {
  border-color: #383838 !important;
}

/* ============================================================
   MODAL CONSISTENCY PATCH — v2.1
   Aligns GDM + UDM to the same visual standard as VDM + details-modal.
   CSS-only. No business logic changed.
   ============================================================ */

/* A. GDM shadow — elevate to match VDM / details-modal depth */
.gdm-modal {
  box-shadow: 0 24px 70px rgba(15,23,42,0.26) !important;
}

/* B. UDM footer desktop — align vertical padding (12→14px) to match header */
.udm-footer {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* C. UDM mobile bottom-sheet — radius 16px → 18px (match GDM / VDM / details) */
@media (max-width: 768px) {
  .udm-modal {
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
  }
}

/* D+E. UDM mobile footer — safe-area padding + 50px button height */
@media (max-width: 480px) {
  .udm-footer {
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
  }
  .udm-footer .cancel-button,
  .udm-footer .save-button {
    min-height: 50px !important;
    border-radius: 14px !important;
  }
}

/* F. UDM dark mode body — #262626 depth layer (match GDM / VDM / details) */
.dashboard--dark .udm-body {
  background: #262626 !important;
}

/* ═══════════════════════════════════════════
   CreatorModal — Schema v2.0 + Purple Palette
   CSS-only overrides. No JSX changes.
═══════════════════════════════════════════ */

/* 1. Overlay — premium backdrop + purple tint */
.modal-overlay {
  overflow: hidden !important;
  background: radial-gradient(ellipse at top, rgba(124,58,237,0.10) 0%, transparent 50%),
              rgba(5,5,10,0.80) !important;
  backdrop-filter: blur(10px) !important;
}

/* 2. Modal shell — constrained height + scroll isolation */
.modal {
  max-height: 90dvh !important;
  overflow: hidden !important;
  border-color: rgba(139,92,246,0.20) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,0.65), 0 0 0 1px rgba(139,92,246,0.10) !important;
  animation: cm-enter 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cm-enter {
  from { opacity: 0; transform: scale(0.975) translateY(8px); }
  to   { opacity: 1; transform: scale(1)     translateY(0); }
}

/* 3a. Grid items — allow shrinking below content height so they scroll */
.modal-left {
  min-height: 0 !important;
}
.modal-right {
  min-height: 0 !important;
  max-height: 90dvh !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

@media (min-width: 701px) {
  .modal-left {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* 3. Section cards — neutral border */
.modal-section {
  border-color: rgba(255,255,255,0.08) !important;
  background: #1a1a1a !important;
}

/* 4. Header — clean left-aligned title */
.modal-header {
  text-align: left !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  margin-bottom: 4px !important;
}

.cm-modal-header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-right: 62px !important;
}

.cm-modal-header > div {
  min-width: 0 !important;
}

.cm-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.cm-title-row h2 {
  margin: 0 !important;
}

.cm-queue-pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  max-width: 180px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(196,181,253,0.28) !important;
  border-radius: 999px !important;
  background: rgba(139,92,246,0.12) !important;
  color: #d8b4fe !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.cm-autofill-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  max-width: 260px;
}

.cm-autofill-toggle {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(139,92,246,0.38);
  border-radius: 999px;
  background: rgba(139,92,246,0.14);
  color: #d8b4fe;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}

.cm-autofill-toggle:hover,
.cm-autofill-toggle:focus-visible {
  background: rgba(139,92,246,0.26);
  border-color: rgba(196,181,253,0.58);
}

.cm-autofill-toggle:active {
  transform: scale(0.97);
}

.cm-autofill-clear {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #d4d4d8;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}

.cm-autofill-clear:hover,
.cm-autofill-clear:focus-visible {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.2);
}

.cm-autofill-clear:active {
  transform: rotate(-18deg) scale(0.96);
}

.cm-autofill-message {
  flex: 1 0 100%;
  min-height: 14px;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: right;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.cm-autofill-message.show {
  opacity: 1;
}

/* 5. Footer — sticky at bottom of scroll panel */
.modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: #141414 !important;
  z-index: 2 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
}

.cm-queue-footer {
  align-items: center !important;
  flex-wrap: wrap !important;
}

.cm-queue-footer .cancel-button,
.cm-queue-footer .save-button {
  margin: 0 !important;
}

.cm-skip-button {
  background: rgba(255,255,255,0.08) !important;
  color: #d4d4d8 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
}

.cm-skip-button:hover,
.cm-skip-button:focus-visible {
  background: rgba(255,255,255,0.14) !important;
  color: #ffffff !important;
}

.cm-save-next-button {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
  box-shadow: 0 10px 24px rgba(124,58,237,0.26) !important;
}

.cm-save-next-button:hover {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  box-shadow: 0 14px 28px rgba(124,58,237,0.34) !important;
}

/* 6. Close button — hover + focus states */
.modal-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}
.modal-close:hover {
  background: #7c3aed !important;
  transform: scale(1.08) !important;
}
.modal-close:active { transform: scale(0.95) !important; }

/* 7. Slider arrows — rounded corners */
.slider-arrow {
  border-radius: 8px !important;
}

/* 8. Field rows — hover + focus-within interaction feedback */
.field-row {
  transition: border-color 0.15s ease, background 0.15s ease !important;
}
.field-row:hover {
  border-color: rgba(124,58,237,0.32) !important;
}
.field-row:focus-within {
  border-color: rgba(124,58,237,0.58) !important;
  background: #141414 !important;
}

/* 9. Tag dropdown — label hover */
.tag-dropdown label {
  border-radius: 6px !important;
  transition: background 0.12s ease !important;
}
.tag-dropdown label:hover { background: rgba(255,255,255,0.06) !important; }

/* 10. Add-tag button — hover + active feedback */
.add-tag-button {
  border-radius: 8px !important;
  transition: background 0.15s ease, transform 0.12s ease !important;
}
.add-tag-button:hover  { background: #6029c4 !important; }
.add-tag-button:active { transform: scale(0.97) !important; }

/* 11. Creator Identity + Traits section headings */
.creator-identity-section h3,
.creator-traits-section h3 { text-align: left !important; }

/* 12. Categorization section */
.cm-wf-section h3 { text-align: left !important; margin-bottom: 12px !important; }
.cm-wf-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.cm-wf-bar-wrap {
  flex: 1 !important;
  height: 8px !important;
  background: rgba(255,255,255,0.10) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.cm-wf-bar-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.30s ease, background 0.30s ease !important;
}
.cm-wf-pct {
  font-size: 12px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
  min-width: 36px !important;
  text-align: right !important;
}
.cm-wf-done {
  display: block !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #22c55e !important;
}

.save-button--complete {
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.22), 0 12px 28px rgba(34,197,94,0.28) !important;
}

.save-button--complete:hover {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  box-shadow: 0 0 0 1px rgba(34,197,94,0.28), 0 14px 32px rgba(34,197,94,0.34) !important;
}

.cm-image-shell,
.cm-lightbox-image-shell {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  background: #0f0f0f !important;
}

.cm-image-shell {
  width: 100% !important;
  height: 100% !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.cm-lightbox-image-shell {
  border-radius: 8px !important;
  max-width: 94vw !important;
  max-height: 92dvh !important;
}

.cm-image-skeleton {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: linear-gradient(90deg, #151515 0%, #242424 45%, #151515 90%) !important;
  background-size: 220% 100% !important;
  animation: cm-image-shimmer 1.25s ease-in-out infinite !important;
}

.cm-image-shell.loaded .cm-image-skeleton,
.cm-lightbox-image-shell.loaded .cm-image-skeleton {
  opacity: 0 !important;
  animation: none !important;
}

.cm-image-shell img,
.cm-lightbox-image-shell img {
  position: relative !important;
  z-index: 1 !important;
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
}

.cm-image-shell.loaded img,
.cm-lightbox-image-shell.loaded img {
  opacity: 1 !important;
}

@keyframes cm-image-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* 13. Auto-filled fields (Country + Age) — side-by-side row */
.identity-auto-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* 14. Creator Traits — compact multi-select dropdown */
.cm-traits-select {
  position: relative !important;
  margin-top: 8px !important;
}
.cm-traits-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  height: 36px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: white !important;
  background: #1c1c1c !important;
  border: 1px solid #424242 !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: border-color 0.15s ease !important;
}
.cm-traits-trigger:hover {
  border-color: rgba(124,58,237,0.45) !important;
}
.cm-traits-arrow {
  font-size: 9px !important;
  color: rgba(255,255,255,0.40) !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
}
.cm-traits-dropdown {
  background: #1a1a2e !important;
  border: 1px solid rgba(124,58,237,0.25) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  padding: 4px !important;
  margin-top: -1px !important;
}
.cm-traits-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: #d0d0e8 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.10s ease !important;
}
.cm-traits-item:hover {
  background: rgba(124,58,237,0.14) !important;
}
.cm-traits-item input[type="checkbox"] {
  accent-color: #7c3aed !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}
.cm-traits-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 8px !important;
}
.cm-trait-chip {
  font-size: 11px !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  background: rgba(124,58,237,0.18) !important;
  border: 1px solid rgba(124,58,237,0.35) !important;
  color: #c4b5fd !important;
  cursor: pointer !important;
  transition: background 0.12s ease !important;
}
.cm-trait-chip:hover {
  background: rgba(124,58,237,0.30) !important;
}

/* 15. Mobile — fullscreen redesign: sticky dual-image + scrollable form */
@media (max-width: 700px) {
  .modal-overlay {
    padding: 0 !important;
    place-items: stretch !important;
    align-items: stretch !important;
  }

  .modal {
    width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    grid-template-columns: unset !important;
    animation: cm-enter-sheet 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  .modal-close {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: 16px !important;
    z-index: 1100 !important;
    background: rgba(10, 10, 15, 0.72) !important;
    backdrop-filter: blur(4px) !important;
  }

  .modal-left {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: #0d0d0d !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 8px 10px !important;
    flex-shrink: 0 !important;
    overflow-y: unset !important;
    max-height: none !important;
    min-height: unset !important;
  }

  /* Dual-image pair: two 9:16 side by side */
  .creator-slider {
    height: auto !important;
    aspect-ratio: unset !important;
    max-height: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .cm-slide-pair {
    display: flex !important;
    gap: 3px !important;
    width: 100% !important;
    height: auto !important;
  }
  .cm-slide-pair .cm-image-shell {
    flex: 1 !important;
    width: 50% !important;
    aspect-ratio: 9/16 !important;
    border-radius: 6px !important;
  }
  .cm-slide-img {
    flex: 1 !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 44dvh !important;
    aspect-ratio: 9/16 !important;
    object-fit: cover !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    display: block !important;
  }

  /* Mobile arrows: small + subtle */
  .cm-arrow-desktop { display: none !important; }
  .cm-arrow-mobile {
    display: flex !important;
    width: 28px !important;
    height: 44px !important;
    font-size: 22px !important;
    background: rgba(0,0,0,0.40) !important;
    border: none !important;
    border-radius: 5px !important;
  }

  .slider-thumbnails { display: none !important; }
  .creator-info { display: none !important; }

  .modal-right {
    overflow-y: unset !important;
    max-height: none !important;
    overscroll-behavior: unset !important;
    flex: 1 !important;
    min-height: unset !important;
  }

  /* Footer: natural flow, no sticky float */
  .modal-footer {
    position: static !important;
    background: #141414 !important;
    padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
  }

  .cm-queue-footer {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .cm-queue-footer .cancel-button,
  .cm-queue-footer .save-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 2-column form grid */
  .form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Compact field rows */
  .field-row {
    padding: 8px !important;
    gap: 3px !important;
  }
  .field-row span {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.01em !important;
  }
  .field-row select {
    height: 34px !important;
    font-size: 13px !important;
  }

  /* Auto-fields: 2-col */
  .identity-auto-fields {
    grid-template-columns: 1fr 1fr !important;
    margin-bottom: 6px !important;
    padding-bottom: 8px !important;
  }

  /* Tags: compact single-line horizontal scroll */
  .modal-section .section-title-row {
    margin-bottom: 6px !important;
  }
  .add-tag-button {
    padding: 5px 10px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }
  .modal-tags {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    gap: 5px !important;
    padding-bottom: 2px !important;
  }
  .modal-tags::-webkit-scrollbar { display: none !important; }
  .modal-tags .tag {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    padding: 4px 9px !important;
  }

  /* Style dropdown: 2-column grid */
  .cm-traits-dropdown {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    max-height: 180px !important;
  }
  .cm-traits-item {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }
}

@keyframes cm-enter-sheet {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 16. Dual-image pair — desktop base (second image hidden) */
.cm-slide-pair {
  width: 100%;
  height: 100%;
  display: flex;
}
.cm-slide-pair .cm-image-shell:nth-child(2) { display: none !important; }
.cm-slide-img {
  flex: 1;
  min-width: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cm-arrow-mobile { display: none !important; }

.slider-thumbnails .cm-image-shell {
  width: 100% !important;
  height: 100% !important;
  border-radius: 6px !important;
}

.slider-thumbnails .cm-image-shell img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 17. Lightbox */
.cm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cm-lightbox img {
  max-width: 94vw;
  max-height: 92dvh;
  object-fit: contain;
  border-radius: 8px;
  cursor: default;
}
.cm-lightbox-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: 18px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: white;
  font-size: 26px;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cm-lightbox-close:hover { background: rgba(255,255,255,0.24); }

/* 18. Creator categorization mobile completion overrides */
@media (max-width: 700px) {
  .cm-slide-pair .cm-image-shell:nth-child(2) {
    display: block !important;
  }

  .cm-slide-pair {
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  .cm-slide-pair::-webkit-scrollbar {
    display: none !important;
  }

  .cm-slide-img {
    scroll-snap-align: start !important;
  }

  .cm-slide-pair .cm-image-shell {
    scroll-snap-align: start !important;
  }

  .cm-arrow-mobile {
    opacity: 0.58 !important;
  }

  .cm-arrow-mobile:hover,
  .cm-arrow-mobile:active {
    opacity: 0.86 !important;
  }

  .slide-counter {
    padding: 5px 10px !important;
    font-size: 11px !important;
    background: rgba(0,0,0,0.52) !important;
  }

  .modal-right {
    padding: 12px !important;
  }

  .cm-modal-header {
    padding-right: 58px !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .cm-title-row {
    gap: 8px !important;
  }

  .cm-queue-pill {
    min-height: 22px !important;
    max-width: min(180px, calc(100vw - 96px)) !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  .cm-autofill-toolbar {
    width: 100% !important;
    max-width: none !important;
    justify-content: flex-start !important;
    gap: 7px !important;
  }

  .cm-autofill-toggle {
    min-height: 34px !important;
    padding: 0 13px !important;
  }

  .cm-autofill-clear {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
  }

  .cm-autofill-message {
    text-align: left !important;
  }

  .modal-section {
    padding: 12px !important;
    margin-top: 10px !important;
    border-radius: 10px !important;
  }

  .creator-identity-section {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .creator-identity-section .form-grid,
  .creator-identity-section .identity-auto-fields {
    gap: 10px !important;
  }

  .tag-dropdown {
    right: 0 !important;
    width: min(320px, calc(100vw - 32px)) !important;
    max-height: 56dvh !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .tag-dropdown .custom-tag-row,
  .tag-dropdown .tag-dropdown-divider {
    grid-column: 1 / -1 !important;
  }

  .tag-dropdown label {
    min-width: 0 !important;
    padding: 7px 8px !important;
    font-size: 12px !important;
  }

  .cm-traits-dropdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-height: 228px !important;
  }

  .cm-traits-chips {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .cm-traits-chips::-webkit-scrollbar {
    display: none !important;
  }

  .cm-trait-chip {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 390px) {
  .modal-right {
    padding: 10px !important;
  }

  .cm-traits-dropdown,
  .tag-dropdown {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===== Global table/list states polish ===== */
.table-result-count,
.mobile-result-count {
  color: #64748b;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.table-result-count {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #ffffff;
}

.mobile-result-count {
  display: none;
}

.empty-state {
  width: 100%;
  min-width: 0;
}

.empty-table-row td {
  height: auto;
  white-space: normal;
  padding: 0;
}

.empty-table-row:hover,
.empty-table-row:hover td {
  background: transparent !important;
}

.data-row {
  outline: none;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.info-table tbody .data-row:hover,
table tbody .data-row:hover {
  background: #f4f0ff;
}

.data-row:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(139, 92, 246, 0.38);
}

.data-row:focus-visible td:first-child {
  box-shadow: inset 2px 0 0 #8b5cf6;
}

.info-card,
.creator-card {
  outline: none;
}

.info-card:focus-within,
.creator-card:focus-within {
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14), 0 4px 14px rgba(15, 23, 42, 0.08);
}

.table-skeleton-row td,
.table-skeleton-card {
  position: relative;
}

.skeleton-line,
.table-skeleton-cell {
  display: block;
  height: 12px;
  width: 100%;
  max-width: 180px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #eef2f7 90%);
  background-size: 220% 100%;
  animation: table-skeleton-pulse 1.25s ease-in-out infinite;
}

.table-skeleton-cell--short {
  max-width: 72px;
}

.table-skeleton-cell--medium {
  max-width: 120px;
}

.table-skeleton-card {
  min-height: 78px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 14px;
}

.table-skeleton-card::before,
.table-skeleton-card::after {
  content: "";
  display: block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #eef2f7 90%);
  background-size: 220% 100%;
  animation: table-skeleton-pulse 1.25s ease-in-out infinite;
}

.table-skeleton-card::before {
  width: 68%;
  margin-bottom: 12px;
}

.table-skeleton-card::after {
  width: 42%;
}

@keyframes table-skeleton-pulse {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-line,
  .table-skeleton-cell,
  .table-skeleton-card::before,
  .table-skeleton-card::after {
    animation: none;
  }
}

@media (max-width: 700px) {
  .mobile-result-count {
    display: block;
    margin: -4px 0 10px;
    padding: 0 2px;
    line-height: 1.2;
  }

  .empty-state {
    padding: 34px 16px;
  }

  .empty-state-icon {
    font-size: 36px;
  }

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

  .empty-state p {
    max-width: 280px;
  }
}

.dashboard--dark .table-result-count,
.dashboard--dark .mobile-result-count {
  color: #b4b4b4 !important;
}

.dashboard--dark .table-result-count {
  background: #383838 !important;
  border-color: rgba(255,255,255,0.1) !important;
}

.dashboard--dark .info-table tbody .data-row:hover,
.dashboard--dark table tbody .data-row:hover {
  background: #383838 !important;
}

.dashboard--dark .data-row:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(192, 132, 252, 0.5) !important;
}

.dashboard--dark .data-row:focus-visible td:first-child {
  box-shadow: inset 2px 0 0 #c084fc !important;
}

.dashboard--dark .info-card:focus-within,
.dashboard--dark .creator-card:focus-within {
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.16) !important;
}

.dashboard--dark .skeleton-line,
.dashboard--dark .table-skeleton-cell,
.dashboard--dark .table-skeleton-card::before,
.dashboard--dark .table-skeleton-card::after {
  background: linear-gradient(90deg, #383838 0%, #454545 45%, #383838 90%) !important;
  background-size: 220% 100% !important;
}

.dashboard--dark .table-skeleton-card {
  background: #2f2f2f !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Game review mobile: right-arrow inherits final action visual state */
@media (max-width: 860px) {
  .game-review-modal .tinder-round-action--next--publish {
    background: radial-gradient(circle at 35% 25%, #fff 0%, #f3e8ff 44%, #c084fc 100%);
    color: #7c3aed;
    box-shadow:
      0 16px 28px rgba(124, 58, 237, 0.38),
      inset 0 2px 3px rgba(255, 255, 255, 0.95),
      inset 0 -5px 10px rgba(109, 40, 217, 0.15);
  }

  .game-review-modal .tinder-round-action--next--reject-final {
    background: radial-gradient(circle at 35% 25%, #fff 0%, #fee2e2 44%, #fca5a5 100%);
    color: #dc2626;
    box-shadow:
      0 16px 28px rgba(220, 38, 38, 0.38),
      inset 0 2px 3px rgba(255, 255, 255, 0.95),
      inset 0 -5px 10px rgba(220, 38, 38, 0.15);
  }
}