/* ============================================================================
   Category Panel Components
   ============================================================================ */

/* Loading state */
.cat-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  font-family: system-ui, sans-serif;
}

/* Not found state */
.cat-panel-not-found {
  text-align: center;
  padding: 60px 20px;
  font-family: system-ui, sans-serif;
}

.cat-panel-error-text {
  color: #EF4444;
}

/* Panel wrapper */
.cat-panel-wrapper {
  font-family: system-ui, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Headers */
.cat-panel-header-blue {
  background: linear-gradient(135deg, #0369A1, #0EA5E9);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  color: white;
}

.cat-panel-header-brown {
  background: linear-gradient(135deg, #795548, #D4A84B);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  color: white;
}

.cat-panel-header-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cat-panel-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.cat-panel-emoji-lg {
  font-size: 48px;
}

.cat-panel-emoji-mb {
  font-size: 48px;
  margin-bottom: 12px;
}

.cat-panel-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.cat-panel-h1 {
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
}

.cat-panel-description {
  margin: 0;
  font-size: 15px;
  opacity: 0.9;
}

.cat-panel-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
  opacity: 0.9;
}

.cat-panel-new-week {
  color: #90EE90;
}

/* Photo collage background in category header */
.cat-panel-header-has-collage {
  position: relative;
  overflow: hidden;
}

.cat-panel-collage {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 0;
}

.cat-panel-collage-img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
}

.cat-panel-collage-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.cat-panel-header-has-collage .cat-panel-header-layout {
  position: relative;
  z-index: 1;
}

.cat-panel-parent-set {
  margin-top: 12px;
}

.cat-panel-parent-set-btn {
  padding: 6px 12px;
  background: rgba(255,255,255,0.2);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}

/* Follow buttons */
.follow-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.follow-btn-following {
  background: rgba(255,255,255,0.2);
  color: white;
}

.follow-btn-default-blue {
  background: white;
  color: #0369A1;
}

.follow-btn-default-brown {
  background: white;
  color: #795548;
}

/* Card (white box with shadow) */
.cat-panel-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

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

.cat-panel-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
}

/* Progress bars */
.cat-panel-progress-label {
  font-size: 14px;
  color: #6B7280;
}

.cat-panel-progress-label-blue {
  font-size: 14px;
  color: #0369A1;
  font-weight: 600;
}

.cat-panel-progress-track {
  height: 8px;
  background: #E5E7EB;
  border-radius: 4px;
  overflow: hidden;
}

.cat-panel-progress-track-blue {
  height: 12px;
  background: #E0F2FE;
  border-radius: 6px;
  overflow: hidden;
}

.cat-panel-progress-fill-brown {
  height: 100%;
  background: linear-gradient(90deg, #795548, #D4A84B);
  border-radius: 4px;
}

.cat-panel-progress-fill-blue {
  height: 100%;
  background: linear-gradient(90deg, #0369A1, #0EA5E9);
  border-radius: 6px;
  transition: width 0.3s;
}

/* Complete celebration */
.cat-panel-complete-row {
  margin-top: 12px;
  text-align: center;
}

.cat-panel-complete-emoji {
  font-size: 24px;
}

.cat-panel-complete-text {
  font-size: 16px;
  font-weight: 600;
  color: #059669;
  margin-left: 8px;
}

/* Sign-in prompts */
.cat-panel-signin-prompt-blue {
  background: #E0F2FE;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: center;
}

.cat-panel-signin-text-blue {
  margin: 0;
  font-size: 14px;
  color: #0369A1;
}

.cat-panel-signin-link-blue {
  color: #0369A1;
  font-weight: 500;
  text-decoration: underline;
}

.cat-panel-signin-prompt-amber {
  background: #FEF3C7;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: center;
}

.cat-panel-signin-text-amber {
  margin: 0;
  font-size: 14px;
  color: #92400E;
}

.cat-panel-signin-link-brown {
  color: #795548;
  font-weight: 500;
  text-decoration: underline;
}

/* Set children grid */
.cat-panel-h2 {
  margin: 0 0 16px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
}

.cat-panel-children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.cat-panel-child-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
}

.cat-panel-child-item-completed {
  background: #ECFDF5;
  border: 1px solid #86EFAC;
}

.cat-panel-child-item-default {
  background: white;
  border: 1px solid #E5E7EB;
}

.cat-panel-child-emoji {
  font-size: 20px;
}

.cat-panel-child-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-panel-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 14px;
}

.cat-panel-check-completed {
  background: #059669;
  color: white;
}

.cat-panel-check-default {
  background: #F3F4F6;
  color: #9CA3AF;
}

/* Child category pills section */
.cat-panel-pills-section {
  background: white;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.cat-panel-pills-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
}

/* Stats grid override for category panel */
.cat-panel-stats-grid {
  margin-bottom: 24px;
}

/* Stats cards */
.cat-panel-stats-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  min-width: 0;
  overflow: hidden;
}

.cat-panel-stats-card-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1F2937;
}

.cat-panel-muted-count {
  color: #6B7280;
  font-weight: normal;
}

.cat-panel-flex-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-panel-muted-text {
  margin: 0;
  font-size: 13px;
  color: #6B7280;
}

/* Leaderboard rows */
.cat-panel-leaderboard-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  text-align: left;
  width: 100%;
  font-size: 13px;
}

.cat-panel-leaderboard-btn-you {
  background: #FEF3C7;
}

.cat-panel-medal {
  min-width: 20px;
}

.cat-panel-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cat-panel-avatar-placeholder {
  background: #E5E7EB;
}

.cat-panel-name {
  flex: 1;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-panel-you-badge {
  color: #D97706;
  font-size: 11px;
}

.cat-panel-count {
  color: #6B7280;
  flex-shrink: 0;
}

/* Your rank section */
.cat-panel-rank-separator {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #E5E7EB;
}

.cat-panel-rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #FEF3C7;
  border-radius: 6px;
  font-size: 13px;
}

.cat-panel-rank-text {
  color: #92400E;
  font-weight: 500;
}

.cat-panel-rank-count {
  color: #6B7280;
}

/* Latest yoink rows */
.cat-panel-latest-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}

.cat-panel-latest-content {
  flex: 1;
  min-width: 0;
}

.cat-panel-latest-name {
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-panel-latest-meta {
  color: #6B7280;
  font-size: 12px;
}

/* Uncollected nearby rows */
.cat-panel-uncollected-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
}

.cat-panel-uncollected-name {
  flex: 1;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cat-panel-uncollected-dist {
  color: #6B7280;
  font-size: 12px;
}

/* Empty area state */
.cat-panel-empty-area {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  background: #F9FAFB;
  border-radius: 12px;
}

.cat-panel-empty-title {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: #1F2937;
}

.cat-panel-empty-text {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #6B7280;
}

.cat-panel-zoom-btn {
  padding: 10px 20px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

/* Yoinks heading */
.cat-panel-heading {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
  background: #FFFBEB;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: inline-block;
}

.cat-panel-heading-count {
  font-size: 14px;
  font-weight: normal;
  color: #6B7280;
}

/* Map error */
.cat-panel-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #F3F4F6;
}

/* Hover lift for set child items */
.hover-lift {
  transition: transform 0.1s, box-shadow 0.1s;
}

.hover-lift:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ============================================================================
   Admin Panel Components
   ============================================================================ */

.admin-loading-container { display: flex; align-items: center; justify-content: center; min-height: 50vh; font-family: system-ui, sans-serif; }
.admin-loading-text { text-align: center; padding: 40px; }
.admin-panel { font-family: system-ui, sans-serif; max-width: 1400px; margin: 0 auto; padding: 20px; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.admin-title { margin: 0; font-size: 28px; font-weight: 700; color: #FFF8E1; text-shadow: 1px 1px 3px rgba(0,0,0,0.5); }
.admin-subtitle { margin: 4px 0 0 0; font-size: 14px; color: #FFE0B2; text-shadow: 1px 1px 2px rgba(0,0,0,0.4); }
.admin-back-btn { padding: 10px 20px; background: #F3F4F6; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; color: #374151; }
.admin-header-actions { display: flex; gap: 8px; align-items: center; }
.admin-refresh-btn { padding: 8px 16px; background: white; border: 2px solid #D1D5DB; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; color: #374151; font-family: inherit; transition: all 0.2s; }
.admin-refresh-btn:hover { border-color: #795548; color: #795548; }
.admin-refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.admin-emergency-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; background: #F0FDF4; border: 2px solid #BBF7D0; gap: 12px; flex-wrap: wrap; }
.admin-emergency-active { background: #FEF2F2; border-color: #FECACA; }
.admin-emergency-info { display: flex; flex-direction: column; gap: 2px; }
.admin-emergency-label { font-weight: 700; font-size: 14px; color: #166534; }
.admin-emergency-active .admin-emergency-label { color: #991B1B; }
.admin-emergency-desc { font-size: 13px; color: #4B5563; }
.admin-emergency-btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.admin-emergency-btn-on { background: #DC2626; color: white; }
.admin-emergency-btn-on:hover { background: #B91C1C; }
.admin-emergency-btn-off { background: #16A34A; color: white; }
.admin-emergency-btn-off:hover { background: #15803D; }
.admin-emergency-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.admin-nav-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.admin-card-mb { margin-bottom: 24px; }
.admin-card-title { margin: 0 0 16px 0; }
.admin-card-title-sm { margin: 0 0 12px 0; }
.admin-card-title-inline { margin: 0; }
.admin-form-select-compact { width: auto; padding: 6px 12px; }
.admin-table-mt { margin-top: 12px; }
.admin-mb-16 { margin-bottom: 16px; }
.admin-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.admin-controls-group { display: flex; align-items: center; gap: 12px; }
.admin-controls-actions { display: flex; gap: 8px; }
.admin-controls-actions-center { display: flex; align-items: center; gap: 8px; }
.admin-search-input { padding: 8px 12px; border: 1px solid #E5E7EB; border-radius: 6px; width: 200px; }
.admin-count-text { color: #6B7280; font-size: 14px; }
.admin-count-text-warning { color: #F59E0B; font-size: 14px; font-weight: 500; }
.admin-count-text-purple { color: #8B5CF6; font-size: 14px; font-weight: 500; }
.admin-btn-primary { padding: 10px 20px; background: #795548; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-secondary { padding: 10px 20px; background: #F3F4F6; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-danger { padding: 10px 24px; background: #EF4444; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-danger-sm { padding: 8px 16px; background: #EF4444; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-indigo { padding: 8px 16px; background: #6366F1; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-green { padding: 8px 16px; background: #10B981; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-purple { padding: 8px 16px; background: #8B5CF6; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-blue { padding: 10px 20px; background: #3B82F6; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.admin-btn-sm { padding: 8px 12px; background: #E5E7EB; color: #374151; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; }
.admin-btn-xs { padding: 4px 8px; border: none; border-radius: 4px; cursor: pointer; font-size: 11px; white-space: nowrap; }
.admin-btn-cancel-sm { padding: 10px 24px; background: #F3F4F6; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-primary-sm { padding: 8px 16px; background: #795548; color: white; border: none; border-radius: 6px; cursor: pointer; }
.admin-btn-save-sm { padding: 8px 16px; background: #795548; color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
.admin-page-btn { padding: 6px 12px; border: 1px solid #E5E7EB; border-radius: 4px; cursor: pointer; background: white; }
.admin-page-info { font-size: 14px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { min-width: 1100px; }
.admin-empty-cell { text-align: center; padding: 40px; color: #6B7280; }
.admin-cell-name { font-weight: 500; }
.admin-cell-muted { color: #6B7280; font-size: 13px; }
.admin-cell-date { font-size: 13px; }
.admin-cell-actions { display: flex; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.admin-cell-center { text-align: center; }
.admin-cell-truncate { font-weight: 500; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-cell-truncate-plain { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-cell-link { cursor: pointer; color: #795548; }
/* Tutorial progress pills */
.ob-pill { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.ob-pill-btn { border: 1px solid transparent; cursor: pointer; transition: opacity 0.15s, border-color 0.15s; }
.ob-pill-btn:hover { opacity: 0.8; border-color: currentColor; }
.ob-new { background: #FEF3C7; color: #92400E; }
.ob-in-progress { background: #DBEAFE; color: #1E40AF; }
.ob-complete { background: #D1FAE5; color: #065F46; }
/* Admin user name link */
.admin-user-link { color: #795548; text-decoration: none; font-weight: 500; }
.admin-user-link:hover { text-decoration: underline; }
.batch-cat-option:hover { background: #F3F4F6; }

.admin-text-danger { color: #EF4444; }
.admin-text-warning { color: #D97706; }
.admin-th-right { text-align: right; }
.admin-th-center { text-align: center; }
.admin-th-emoji { width: 50px; }
.admin-th-locations { width: 80px; }
.admin-th-actions { width: 220px; white-space: nowrap; }
.admin-th-thumb { width: 60px; }
.admin-td-emoji { font-size: 20px; text-align: center; }
.admin-td-right-bold { text-align: right; font-weight: 500; }
.admin-td-right-muted { text-align: right; color: #6B7280; }
.admin-td-center-lg { text-align: center; font-size: 18px; }
.admin-form-group { margin-bottom: 16px; }
.admin-form-label { display: block; margin-bottom: 4px; font-weight: 500; }
.admin-form-input { width: 100%; padding: 10px; border: 1px solid #E5E7EB; border-radius: 6px; box-sizing: border-box; }
.admin-form-select { width: 100%; padding: 10px; border: 1px solid #E5E7EB; border-radius: 6px; box-sizing: border-box; }
.admin-form-textarea { width: 100%; padding: 10px; border: 1px solid #E5E7EB; border-radius: 6px; box-sizing: border-box; }
.admin-emoji-input { width: 60px; padding: 8px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 24px; text-align: center; }
.admin-checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.admin-checkbox-label-lg { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.admin-checkbox { width: 18px; height: 18px; cursor: pointer; }
.admin-checkbox-lg { width: 20px; height: 20px; cursor: pointer; }
.admin-checkbox-text { font-weight: 500; }
.admin-hint-text { margin: 4px 0 0 26px; font-size: 12px; color: #6B7280; }
.admin-hint-text-spaced { margin: 4px 0 12px; }
.admin-hint-text-flow { margin: 0 0 8px; }
.admin-form-error { color: #EF4444; margin-bottom: 16px; }
.admin-form-actions { display: flex; gap: 12px; justify-content: flex-end; }
.admin-modal-sm { max-width: 500px; width: 90%; }
.admin-modal-xs { max-width: 400px; width: 90%; text-align: center; }
.admin-modal-title { margin: 0 0 20px 0; }
.admin-delete-title { margin: 0 0 16px 0; }
.admin-delete-message { margin: 0 0 24px 0; color: #6B7280; white-space: pre-line; }
.admin-confirm-wrapper { margin-bottom: 16px; }
.admin-confirm-label { display: block; margin-bottom: 8px; font-size: 14px; color: #374151; }
.admin-confirm-input { width: 100%; padding: 10px; border: 2px solid #E5E7EB; border-radius: 6px; text-align: center; font-size: 14px; box-sizing: border-box; }
.admin-delete-actions { display: flex; gap: 12px; justify-content: center; }
.admin-muted-text { color: #6B7280; font-size: 14px; }
.admin-muted-text-plain { color: #6B7280; }
.admin-thermo-layout { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.admin-thermo-column { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.admin-thermo-tube { width: 40px; height: 120px; background: #E5E7EB; border-radius: 20px 20px 0 0; position: relative; overflow: hidden; border: 2px solid #D1D5DB; }
.admin-thermo-fill { position: absolute; bottom: 0; left: 0; right: 0; transition: height 0.5s ease; border-radius: 0 0 18px 18px; }
.admin-thermo-marker { position: absolute; right: -25px; font-size: 10px; color: #9CA3AF; }
.admin-thermo-bulb { width: 50px; height: 50px; border-radius: 50%; margin-top: -10px; display: flex; align-items: center; justify-content: center; border: 2px solid #D1D5DB; }
.admin-thermo-temp { color: white; font-weight: 700; font-size: 14px; }
.admin-thermo-status { margin-top: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; }
.admin-stats-content { flex: 1; min-width: 200px; }
.admin-stats-label { font-size: 14px; margin-bottom: 12px; font-weight: 500; }
.admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.admin-stat-box { background: white; padding: 12px; border-radius: 8px; }
.admin-stat-box-label { font-size: 11px; color: #6B7280; text-transform: uppercase; }
.admin-stat-box-value { font-size: 20px; font-weight: 700; color: #374151; }
.admin-stat-box-value-success { font-size: 20px; font-weight: 700; color: #10B981; }
.admin-stat-box-sub { font-size: 10px; color: #9CA3AF; }
.admin-mini-chart-wrapper { margin-top: 16px; }
.admin-mini-chart-label { font-size: 11px; color: #6B7280; margin-bottom: 8px; }
.admin-mini-chart { display: flex; align-items: flex-end; gap: 2px; height: 40px; }
.admin-mini-chart-bar { flex: 1; border-radius: 2px; min-width: 4px; }
.admin-retention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.admin-retention-card { text-align: center; padding: 16px; border-radius: 8px; }
.admin-retention-value { font-size: 32px; font-weight: 700; }
.admin-retention-label { font-size: 13px; color: #6B7280; }
.admin-retention-note { margin: 12px 0 0 0; font-size: 12px; color: #9CA3AF; }
.admin-chart-container { display: flex; align-items: flex-end; gap: 4px; height: 150px; overflow-x: auto; }
.admin-chart-bar-wrapper { flex: 1; min-width: 20px; display: flex; flex-direction: column; align-items: center; }
.admin-chart-bar-count { font-size: 11px; color: #6B7280; margin-bottom: 4px; }
.admin-chart-bar { width: 100%; border-radius: 4px 4px 0 0; }
.admin-chart-bar-label { font-size: 10px; color: #9CA3AF; margin-top: 4px; }
.admin-leaderboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
.admin-list-column { display: flex; flex-direction: column; gap: 8px; }
.admin-category-health-wrap { overflow-x: auto; margin-top: 12px; }
.admin-table-minw { min-width: 400px; }
.admin-summary { cursor: pointer; font-size: 18px; font-weight: 600; margin-bottom: 16px; }
.admin-category-empty { color: #6B7280; font-size: 14px; margin-top: 12px; }
.admin-recent-item { display: flex; align-items: center; gap: 12px; padding: 8px; cursor: pointer; border-radius: 6px; }
.admin-recent-thumb { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.admin-recent-content { flex: 1; min-width: 0; }
.admin-recent-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-recent-meta { font-size: 12px; color: #6B7280; }
.admin-emoji-span { font-size: 24px; }
.admin-thumb-img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.admin-thumb-placeholder { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #F3F4F6; border-radius: 4px; }
.admin-expand-arrow { cursor: pointer; display: inline-block; width: 16px; transition: transform 0.2s; }
.admin-expand-arrow-expanded { transform: rotate(90deg); }
.admin-expand-spacer { display: inline-block; width: 16px; }
.admin-cat-name-wrap { display: flex; align-items: center; gap: 4px; }
.admin-collection-badge { margin-left: 8px; background: #0EA5E9; color: white; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.admin-dropdown-padding { padding: 8px; }
.admin-dropdown-search { width: 100%; padding: 8px; border: 1px solid #E5E7EB; border-radius: 4px; box-sizing: border-box; margin-bottom: 8px; }
.admin-dropdown-list { max-height: 200px; overflow-y: auto; }
.admin-dropdown-empty { padding: 12px; color: #6B7280; text-align: center; }
.admin-dropdown-item { padding: 8px 12px; cursor: pointer; }
.admin-dropdown-item-name { font-weight: 500; }
.admin-dropdown-item-sub { font-size: 12px; color: #6B7280; }
.admin-dropdown-current { font-size: 11px; color: #D97706; }
.admin-dropdown-current-ml { font-size: 11px; color: #D97706; margin-left: 8px; }
.admin-backfill-container { padding: 12px 16px; background: #DBEAFE; border-radius: 8px; margin-bottom: 16px; }
.admin-backfill-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.admin-backfill-title { font-weight: 500; color: #1E40AF; }
.admin-backfill-count { color: #1E40AF; }
.admin-backfill-bar { height: 8px; background: #BFDBFE; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.admin-backfill-fill { height: 100%; background: #3B82F6; transition: width 0.3s; }
.admin-backfill-log { max-height: 150px; overflow-y: auto; font-size: 11px; font-family: monospace; background: #1E3A5F; color: #93C5FD; padding: 8px; border-radius: 4px; }
.admin-backfill-clear-btn { margin-top: 8px; padding: 4px 8px; font-size: 12px; background: #EF4444; color: white; border: none; border-radius: 4px; cursor: pointer; }
.admin-warning-banner { padding: 12px; background: #FEF3C7; border-radius: 8px; margin-bottom: 16px; font-size: 14px; color: #92400E; }
.admin-settings-container { max-width: 600px; }
.admin-settings-description { color: #6B7280; font-size: 14px; margin: 0 0 16px 0; }
.admin-readonly-btn { padding: 12px 24px; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; }
.admin-readonly-btn-on { background: #EF4444; }
.admin-readonly-btn-off { background: #10B981; }
.admin-banner-textarea { width: 100%; padding: 12px; border: 1px solid #E5E7EB; border-radius: 8px; box-sizing: border-box; margin-bottom: 12px; font-family: inherit; font-size: 14px; }
.admin-banner-actions { display: flex; gap: 12px; }
.admin-status-text { margin-top: 8px; font-size: 13px; color: #6B7280; }
.admin-status-text-sm { font-size: 12px; color: #6B7280; }
.admin-status-text-inline { font-size: 13px; color: #6B7280; }
.admin-email-recipients-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.admin-email-hint { color: #9CA3AF; font-weight: 400; }
.admin-email-input { width: 100%; padding: 10px 12px; border: 1px solid #E5E7EB; border-radius: 6px; font-size: 14px; box-sizing: border-box; margin-bottom: 8px; }
.admin-email-actions { display: flex; gap: 12px; align-items: center; }
.admin-notification-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.admin-milestone-hint { color: #9CA3AF; font-size: 12px; }
.admin-filter-row th { padding: 4px 6px; background: #F9FAFB; border-bottom: 2px solid #E5E7EB; }
.admin-filter-input { width: 100%; padding: 4px 6px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 12px; box-sizing: border-box; }
.admin-filter-input-narrow { max-width: 90px; }
.admin-filter-select { width: 100%; padding: 4px 2px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 12px; box-sizing: border-box; background: white; }
.admin-filter-clear-btn { padding: 4px 8px; background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; border-radius: 4px; cursor: pointer; font-size: 11px; white-space: nowrap; }
.admin-filter-clear-btn:hover { background: #FECACA; }
.admin-btn-filter-active { background: #6366F1 !important; color: white !important; }
.body-scroll-locked { overflow: hidden; }
.btn-state-disabled { opacity: 0.5; cursor: not-allowed; }
.status-text-pending { color: #6B7280; }
.status-text-success { color: #10B981; }
.status-text-error { color: #EF4444; }
.cursor-pointer { cursor: pointer; }
.field-border-valid { border-color: #10B981; }
.field-border-default { border-color: #E5E7EB; }

/* ============================================================================
   EDIT PROFILE MODAL - Extracted inline styles
   ============================================================================ */

.edit-profile-dialog-content {
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.edit-profile-dialog-body {
  padding: 24px;
}

.edit-profile-dialog-title {
  margin: 0 0 24px 0;
  font-size: 24px;
  font-weight: 600;
  color: #1F2937;
}

.edit-profile-error-banner {
  padding: 12px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.edit-profile-form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.edit-profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Background image section in edit profile */
.edit-profile-bg-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-profile-bg-preview {
  width: 100%;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-profile-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-profile-bg-placeholder {
  color: #999;
  font-size: 13px;
}

.edit-profile-avatar-preview {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, #795548, #D4A84B);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 40px;
  font-weight: 600;
  overflow: hidden;
}

.edit-profile-avatar-buttons {
  display: flex;
  gap: 8px;
}

.edit-profile-avatar-upload-label {
  padding: 8px 16px;
  background: #F3F4F6;
  color: #374151;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.edit-profile-avatar-remove-btn {
  padding: 8px 16px;
  background: #FEE2E2;
  color: #DC2626;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.edit-profile-avatar-error {
  color: #DC2626;
  font-size: 12px;
}

.edit-profile-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.edit-profile-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

.edit-profile-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 16px;
  resize: vertical;
  box-sizing: border-box;
}

.edit-profile-bio-count {
  text-align: right;
  font-size: 12px;
  color: #6B7280;
  margin: 4px 0 0 0;
}

.edit-profile-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 8px;
}

.edit-profile-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.edit-profile-checkbox-label {
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.edit-profile-relative {
  position: relative;
}

.edit-profile-location-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #D1D5DB;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.edit-profile-location-selected {
  font-size: 12px;
  color: #059669;
  margin: 4px 0 0 0;
}

.edit-profile-social-prefix {
  display: flex;
  align-items: center;
}

.edit-profile-social-at {
  padding: 10px 12px;
  background: #F3F4F6;
  border: 1px solid #D1D5DB;
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: #6B7280;
}

.edit-profile-social-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 0 8px 8px 0;
  font-size: 16px;
  box-sizing: border-box;
}

.edit-profile-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.edit-profile-cancel-btn {
  flex: 1;
  padding: 12px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.edit-profile-submit-btn {
  flex: 1;
  padding: 12px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

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

.edit-profile-avatar-initial {
  color: white;
  font-size: 40px;
  font-weight: 600;
}

.edit-profile-location-status {
  padding: 12px;
  color: #6B7280;
}

.edit-profile-location-error-text {
  padding: 12px;
  color: #DC2626;
}

.edit-profile-location-result {
  padding: 12px;
  border-bottom: 1px solid #E5E7EB;
  cursor: pointer;
}

.edit-profile-location-result-main {
  font-size: 15px;
  color: #1F2937;
  font-weight: 500;
}

.edit-profile-location-result-secondary {
  font-size: 13px;
  color: #6B7280;
  margin-top: 2px;
}

/* ============================================================================
   YOINK DETAIL PANEL - Extracted inline styles
   ============================================================================ */

.yoink-detail-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  font-family: system-ui, sans-serif;
}

.yoink-detail-not-found {
  text-align: center;
  padding: 60px 20px;
  font-family: system-ui, sans-serif;
}

.yoink-detail-not-found-text {
  color: #EF4444;
}

.yoink-detail-panel {
  font-family: system-ui, sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.yoink-detail-admin-bar {
  background: #FFFBEB;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.yoink-detail-admin-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.yoink-detail-edit-btn {
  padding: 8px 16px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.yoink-detail-delete-btn {
  padding: 8px 16px;
  background: #EF4444;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.yoink-detail-carousel {
  position: relative;
  aspect-ratio: 16/10;
  background: #F3F4F6;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  touch-action: pan-y pinch-zoom;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.yoink-detail-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.yoink-detail-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.yoink-detail-carousel-prev {
  left: 12px;
}

.yoink-detail-carousel-next {
  right: 12px;
}

.yoink-detail-carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.yoink-detail-carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.yoink-detail-carousel-counter {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 12px;
  font-size: 13px;
}

.yoink-detail-no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, #795548 0%, #D4A84B 100%);
}

.yoink-detail-content-card {
  background: #FFFBEB;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.yoink-detail-title-heading {
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 600;
  color: #1F2937;
  font-family: 'Caveat', cursive;
}

.yoink-detail-category-wrapper {
  margin-bottom: 16px;
}

.yoink-detail-category-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  color: #795548;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.yoink-detail-description {
  margin: 0 0 24px 0;
  font-size: 16px;
  line-height: 1.6;
  color: #4B5563;
  white-space: normal;
}

.yoink-detail-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin-bottom: 24px;
}

.yoink-detail-social-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.yoink-detail-location-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: white;
  border-radius: 12px;
  margin-bottom: 24px;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s;
}

.yoink-detail-location-label {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.yoink-detail-location-name {
  margin: 0;
  font-size: 16px;
  color: #1F2937;
  font-weight: 500;
}

.yoink-detail-location-address {
  margin: 6px 0 0 0;
  font-size: 14px;
  color: #6B7280;
}

.yoink-detail-user-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  cursor: pointer;
  width: 100%;
}

.yoink-detail-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.yoink-detail-user-info {
  text-align: left;
}

.yoink-detail-user-name {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #1F2937;
}

/* ============================================================================
   DELETE YOINK MODAL - Extracted inline styles
   ============================================================================ */

.delete-modal-content {
  max-width: 400px;
  width: 90%;
}

.delete-modal-body {
  padding: 24px;
  text-align: center;
}

.delete-modal-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #FEE2E2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.delete-modal-title {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
}

.delete-modal-description {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #6B7280;
}

.delete-modal-preview {
  margin: 20px 0;
  padding: 12px;
  background: #F9FAFB;
  border-radius: 8px;
  text-align: left;
}

.delete-modal-preview-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.delete-modal-preview-image {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  background: #E5E7EB;
  flex-shrink: 0;
  overflow: hidden;
}

.delete-modal-preview-info {
  flex: 1;
  min-width: 0;
}

.delete-modal-preview-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #1F2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.delete-modal-preview-category {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6B7280;
}

.delete-modal-error {
  padding: 12px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
}

.delete-modal-buttons {
  display: flex;
  gap: 12px;
}

.delete-modal-cancel-btn {
  flex: 1;
  padding: 12px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.delete-modal-confirm-btn {
  flex: 1;
  padding: 12px;
  background: #DC2626;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.delete-modal-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-modal-preview-emoji {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ============================================================================
   DISCOVERY VIEW - Extracted inline styles
   ============================================================================ */

.discovery-map-container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.discovery-map-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: #f3f4f6;
  border-radius: 12px;
}

.discovery-map-error-title {
  font-size: 18px;
  color: #374151;
  margin-bottom: 8px;
}

.discovery-map-error-subtitle {
  font-size: 14px;
  color: #6b7280;
}

/* ============================================================================
   INLINE STYLE CLEANUP - Extracted utility classes
   ============================================================================ */

/* Admin Thermometer Marker Positions */
.admin-thermo-marker-high { top: 10%; }
.admin-thermo-marker-mid { top: 40%; }
.admin-thermo-marker-low { top: 70%; }

/* Admin Retention Card Variants */
.admin-retention-card-green { background: #F0FDF4; }
.admin-retention-value-green { color: #166534; }
.admin-retention-card-gray { background: #F3F4F6; }
.admin-retention-value-gray { color: #374151; }
.admin-retention-card-blue { background: #EFF6FF; }
.admin-retention-value-blue { color: #1D4ED8; }

/* Admin Chart Bar Gradient Variants */
.admin-chart-bar-brown { background: linear-gradient(to top, #795548, #D4A84B); }
.admin-chart-bar-blue { background: linear-gradient(to top, #1E88E5, #64B5F6); }

/* Set Discovery Fade-Out Animation */
.set-discovery-fading { animation: setDiscoveryFadeOut 0.2s ease-out forwards; }

/* Modal Z-Index Above Other Modals (e.g. category-picker above create-yoink) */
.modal-z-above { z-index: 1100; }

/* ============================================================================
   USER PANEL - Loading, Error, Buttons
   ============================================================================ */

.user-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  font-family: system-ui, sans-serif;
}

.user-panel-error-container {
  text-align: center;
  padding: 60px 20px;
  font-family: system-ui, sans-serif;
}

.user-panel-error-text {
  color: #EF4444;
}

.user-panel-clear-filter-btn {
  margin-top: 12px;
  padding: 10px 20px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.user-panel-load-more-container {
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
}

.user-panel-load-more-btn {
  padding: 12px 24px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.user-panel-clear-region-btn {
  padding: 2px 8px;
  background: white;
  border: 1px solid #D97706;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #92400E;
}

.user-panel-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #F3F4F6;
}

/* Collection item hover (subtle scale) */
.collection-item-hover {
  transition: transform 0.15s, box-shadow 0.15s;
}

.collection-item-hover:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   USER PANEL - Refactored Inline Styles
   ============================================================================ */

/* --- Profile Container / Header --- */

.user-panel-container {
  font-family: system-ui, sans-serif;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  overflow-x: hidden; /* Prevent long profile content from widening the page */
  box-sizing: border-box;
}

.user-profile-header {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
  position: relative;
}

/* Background image banner on user profile header */
.user-profile-header-has-bg {
  overflow: hidden;
  color: white;
}

.user-profile-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-profile-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.user-profile-header-has-bg .profile-header-content,
.user-profile-header-has-bg .user-edit-btn-wrapper {
  position: relative;
  z-index: 1;
}

.user-profile-header-has-bg .user-profile-name,
.user-profile-header-has-bg .user-profile-bio,
.user-profile-header-has-bg .user-profile-location-btn,
.user-profile-header-has-bg .user-profile-location-text,
.user-profile-header-has-bg .user-social-link {
  color: white;
}

.user-profile-header-has-bg .user-social-link {
  background: rgba(255, 255, 255, 0.15);
}

.user-profile-header-has-bg .user-profile-location-btn {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.user-edit-btn-wrapper {
  position: absolute;
  top: 12px;
  right: 12px;
}

.user-edit-btn {
  padding: 6px 12px;
  background: #795548;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.user-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  font-weight: 600;
  flex-shrink: 0;
}

.user-profile-info {
  flex: 1;
  min-width: 0;
}

.user-profile-name {
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 700;
  color: #1F2937;
  overflow-wrap: break-word;
  word-break: break-word;
}

.user-profile-location-wrapper {
  margin: 0 0 8px 0;
}

.user-profile-location-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-location-text {
  font-size: 13px;
  color: #6B7280;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-profile-bio {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #4B5563;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.user-profile-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.user-social-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: #F3F4F6;
  color: #4B5563;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Dashboard Layout --- */

.user-dashboard-row {
  margin-bottom: 16px;
}

.user-dashboard-flex {
  display: flex;
  flex-direction: column;
}

.user-activity-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  padding-top: 12px;
}

.user-activity-stat-value {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  color: #1F2937;
}

.user-activity-stat-label {
  margin: 4px 0 0 0;
  font-size: 12px;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-admin-badge {
  display: inline-block;
  padding: 4px 10px;
  background: #FEF3C7;
  color: #D97706;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.user-yoinks-heading {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  font-size: 20px;
  font-weight: 600;
  color: #1F2937;
  background: #FFFBEB;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.yoinks-heading-trophy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 28px;
  line-height: 1;
  padding: 4px 12px 4px 6px;
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #F59E0B;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
}

.yoinks-heading-trophy-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #92400E;
}

/* --- Category Card Grid (profile landing view) --- */

.category-card {
  background: white;
  border-radius: 4px;
  overflow: visible;
  /* Thicker shadow suggesting a stack of items */
  box-shadow:
    0 4px 8px var(--shadow),
    0 12px 28px var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 340px;
  position: relative;
  padding: 12px 12px 0 12px;
  max-width: 100%;
  min-width: 0; /* Allow card to shrink below content size in grid layout */
  box-sizing: border-box;
  z-index: 1;
}

/* Stacked cards peeking out behind — "folder/bundle" metaphor */
.category-card::before,
.category-card::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 4px;
  z-index: -1;
  box-shadow: 0 2px 6px var(--shadow);
  transition: transform 0.3s ease;
}

.category-card::before {
  transform: rotate(2deg) translateX(4px);
}

.category-card::after {
  transform: rotate(-1.5deg) translateX(-3px);
  top: 2px;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 20px var(--shadow),
    0 20px 40px var(--shadow);
}

/* Fan out the stack on hover */
.category-card:hover::before {
  transform: rotate(3.5deg) translateX(6px);
}

.category-card:hover::after {
  transform: rotate(-2.5deg) translateX(-5px);
}

.category-card-image-container {
  position: relative;
  width: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 2px;
}

.category-card-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.category-card-image.category-card-placeholder {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.category-card-placeholder-emoji {
  font-size: 48px;
}

.category-card-content {
  padding: 12px 4px 16px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  min-width: 0; /* Allow flex container to shrink below content size */
  overflow: hidden; /* Prevent content from extending beyond card bounds */
}

.category-card-emoji {
  font-size: 24px;
  flex-shrink: 0;
}

.category-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-dark);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0; /* Allow title to shrink and trigger ellipsis in flex layout */
}

.category-card-trophy {
  font-size: 18px;
  flex-shrink: 0;
  margin-left: auto;
}

.category-card-count {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* When trophy is present, it takes the auto margin; count just follows */
.category-card-trophy + .category-card-count {
  margin-left: 6px;
}

/* --- Collections (old/full format) --- */

.user-collections-section {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.user-collections-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
}

.user-collections-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
}

.user-collections-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Collections (dashboard/compact format) --- */

.user-collection-wrapper {
  margin-bottom: 8px;
}

.user-collection-trophy-icon {
  font-size: 14px;
}

.user-collection-emoji-sm {
  font-size: 18px;
}

.user-collection-count-sm {
  font-size: 12px;
  color: #0369A1;
  font-weight: 600;
}

.user-collection-count-complete {
  color: #059669;
}

.user-collection-ring-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-collection-ring-inner-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  color: #0369A1;
}

.user-collection-children-sm {
  margin-left: 24px;
  margin-top: 6px;
  padding: 6px;
  background: #FAFAFA;
  border-radius: 6px;
}

.user-collection-group-header {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  padding: 8px 4px 4px 4px;
  margin-top: 4px;
}

.user-collection-group-emoji {
  font-size: 12px;
}

.user-collection-child-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}

.user-collection-child-sm:hover {
  background: #F0F0F0;
}

.user-collection-child-indented {
  margin-left: 12px;
}

.user-collection-child-emoji-sm {
  font-size: 14px;
}

.user-collection-child-name-sm {
  flex: 1;
  font-size: 12px;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-collection-child-check-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #059669;
  color: white;
  border-radius: 50%;
  font-size: 10px;
}

.user-collection-child-pending-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: #E5E7EB;
  color: #9CA3AF;
  border-radius: 50%;
  font-size: 10px;
}

/* --- Section Toggles --- */

.user-section-wrapper {
  margin-bottom: 12px;
}

.user-section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 0 8px 0;
  border-bottom: 1px solid #E5E7EB;
  margin-bottom: 8px;
}

.user-section-count {
  color: #9CA3AF;
  font-weight: 400;
}

.user-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F9FAFB;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  margin-bottom: 8px;
}

.user-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
}

.user-toggle-spacer {
  flex: 1;
}

.user-toggle-trophy {
  font-size: 13px;
}

.user-toggle-label-upper {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.user-trophy-summary {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
}

.user-trophy-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding: 8px;
  background: #FAFAFA;
  border-radius: 6px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.user-dashboard-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.user-empty-state {
  color: #9CA3AF;
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

/* --- Geography Dashboard --- */

.user-geo-map-container {
  margin-bottom: 16px;
  overflow: hidden; /* Prevent SVG maps from overflowing column */
}

.user-geo-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
}

.user-geo-stat {
  text-align: center;
}

.user-geo-stat-value {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1F2937;
}

.user-geo-stat-label {
  margin: 2px 0 0 0;
  font-size: 11px;
  color: #6B7280;
}

.user-geo-stats-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
  flex-wrap: wrap;
}

.user-geo-stat-label-lg {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #6B7280;
}

.user-location-stats-toggle {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  background: none;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #6B7280;
  transition: background 0.2s;
}

.user-location-stats-list {
  margin-top: 16px;
  text-align: left;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Location Lists (dashboard/compact format) --- */

.user-location-country {
  margin-bottom: 6px;
}

.user-location-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: hidden;
}

.user-location-toggle-flex {
  flex: 1;
}

.user-location-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-location-count {
  font-size: 12px;
  color: #6B7280;
}

.user-location-zoom-btn {
  padding: 4px 8px;
  background: none;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  cursor: pointer;
  font-size: 11px;
  color: #6B7280;
  flex-shrink: 0;
}

.user-location-states {
  margin-left: 20px;
  margin-top: 4px;
}

.user-location-state-sm {
  margin-bottom: 4px;
}

.user-location-row-sm {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-location-no-expand {
  cursor: default;
}

.user-location-spacer-sm {
  width: 18px;
}

.user-location-state-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-location-count-muted {
  font-size: 11px;
  color: #9CA3AF;
}

.user-location-zoom-btn-sm {
  padding: 3px 6px;
  background: none;
  border: 1px solid #E5E7EB;
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  color: #9CA3AF;
  flex-shrink: 0;
}

.user-location-counties {
  margin-left: 24px;
  margin-top: 4px;
}

.user-location-county-item-sm {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  font-size: 12px;
  color: #6B7280;
}

.user-location-county-name {
  flex: 1;
}

.user-location-zoom-btn-xs {
  padding: 2px 5px;
  background: none;
  border: 1px solid #E5E7EB;
  border-radius: 2px;
  cursor: pointer;
  font-size: 9px;
  color: #9CA3AF;
  flex-shrink: 0;
}

/* --- Location Lists (old/full format) --- */

.user-location-country-lg {
  margin-bottom: 12px;
}

.user-location-country-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F9FAFB;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  color: #1F2937;
}

.user-location-count-detail {
  color: #6B7280;
  font-weight: 400;
  font-size: 13px;
}

.user-location-zoom-btn-lg {
  padding: 4px 8px;
  background: none;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  color: #6B7280;
  margin-left: 8px;
}

.user-location-states-lg {
  margin-left: 20px;
  margin-top: 8px;
}

.user-location-state-lg {
  margin-bottom: 8px;
}

.user-location-state-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  color: #374151;
  font-size: 14px;
}

.user-location-spacer {
  width: 10px;
}

.user-location-counties-lg {
  margin-left: 24px;
  margin-top: 6px;
}

.user-location-county-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 13px;
  color: #6B7280;
}

/* --- Trophy Medal Name --- */

.user-trophy-medal-name {
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Profile Header Responsive Layout --- */

.profile-header-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.profile-socials {
  justify-content: center;
}

.profile-location-text {
  justify-content: center;
}

@media (min-width: 768px) {
  .profile-header-content {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 20px;
  }
  .profile-socials {
    justify-content: flex-start !important;
  }
  .profile-location-text {
    justify-content: flex-start !important;
  }
}

/* --- Dashboard Responsive Layout --- */

.dashboard-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
  overflow: hidden; /* Prevent dashboard content from widening beyond container */
}

.dashboard-column {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  min-width: 0; /* Prevent flex children from pushing parent wider */
  overflow: hidden; /* Clip any content that overflows the column */
}

.dashboard-column-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.dashboard-column.expanded > .dashboard-column-header {
  margin-bottom: 12px;
}

.dashboard-column-content {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
  min-height: 0;
}

.dashboard-column-content::-webkit-scrollbar {
  width: 6px;
}

.dashboard-column-content::-webkit-scrollbar-track {
  background: #F3F4F6;
  border-radius: 3px;
}

.dashboard-column-content::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 3px;
}

@media (min-width: 900px) {
  .dashboard-row {
    flex-direction: row;
    align-items: stretch;
  }
  .dashboard-column {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }
  .dashboard-column.activity-column {
    flex: 0 0 180px;
  }
  .dashboard-column-content {
    max-height: none;
    overflow-y: auto;
    min-height: 0;
  }
}

/* --- Collapsible Dashboard Columns --- */

.dashboard-column-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}

.dashboard-column-toggle:hover {
  opacity: 0.8;
}

.dashboard-toggle-chevron {
  font-size: 10px;
  color: #9CA3AF;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.dashboard-column.expanded .dashboard-toggle-chevron {
  transform: rotate(90deg);
}

.dashboard-column-title {
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.dashboard-column-summary {
  font-size: 12px;
  font-weight: 400;
  color: #9CA3AF;
  margin-left: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: normal;
}

.dashboard-column.expanded .dashboard-column-summary {
  display: none;
}

.dashboard-column-body {
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.25s ease;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.dashboard-column.expanded .dashboard-column-body {
  max-height: 60vh;
  opacity: 1;
  margin-top: 12px;
}

/* After expand transition finishes, remove max-height cap and allow scrolling */
.dashboard-column.expanded.scrollable .dashboard-column-body {
  max-height: none;
  overflow-y: auto;
  transition: none;
}

/* When collapsed, reduce vertical padding */
.dashboard-column:not(.expanded) {
  padding: 12px 16px;
}

/* --- Collection Focus Mode --- */

/* When dashboard row is in focus mode:
   - Non-focused columns (Activity, Geography) shrink to title-only strips
   - Their summary text is hidden
   - The focused column takes over the space */
.dashboard-row.dashboard-row-focused .dashboard-column[data-collapsible="activity"] .dashboard-column-summary,
.dashboard-row.dashboard-row-focused .dashboard-column[data-collapsible="geography"] .dashboard-column-summary {
  display: none;
}

@media (min-width: 900px) {
  .dashboard-row.dashboard-row-focused .dashboard-column[data-collapsible="activity"],
  .dashboard-row.dashboard-row-focused .dashboard-column[data-collapsible="geography"] {
    flex: 0 0 60px;
    padding: 12px;
  }
  .dashboard-row.dashboard-row-focused .dashboard-column-focused {
    flex: 1 1 auto;
  }
}

.dashboard-column-focused {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-collection-focus-header-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.user-collection-focus-exit {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #6B7280;
  padding: 4px 8px;
  border-radius: 6px;
}

.user-collection-focus-exit:hover {
  background: #F3F4F6;
  color: #1F2937;
}

.user-collection-focus-band {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #F0F9FF 0%, #FAFAFA 100%);
  border-radius: 12px;
  margin-bottom: 12px;
}

.user-collection-focus-ring-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.user-collection-focus-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-collection-focus-ring-inner {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #0369A1;
}

.user-collection-focus-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-collection-focus-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
}

.user-collection-focus-emoji {
  font-size: 22px;
}

.user-collection-focus-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-collection-focus-count {
  font-size: 14px;
  font-weight: 600;
  color: #0369A1;
}

.user-collection-comparison-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-top: 4px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #92400E;
  cursor: pointer;
}

.user-collection-comparison-chip:hover {
  background: #FDE68A;
}

.user-collection-comparison-chip-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
  opacity: 0.85;
}

.user-collection-focus-body {
  margin-top: 4px;
  padding: 6px;
  background: #FAFAFA;
  border-radius: 8px;
  max-height: 60vh;
  overflow-y: auto;
}

/* Tappable cue on the inline focus trigger elements (icon, name, count, ring) */
.user-collection-focus-trigger {
  cursor: pointer;
}

/* Only the small ring/count get the subtle hover-scale cue — applying it to
   the name would push neighboring elements around. */
.user-collection-ring-sm.user-collection-focus-trigger,
.user-collection-count-sm.user-collection-focus-trigger {
  transition: transform 0.1s ease;
}

.user-collection-ring-sm.user-collection-focus-trigger:hover,
.user-collection-count-sm.user-collection-focus-trigger:hover {
  transform: scale(1.05);
}

/* --- Expand Toggle --- */

.expand-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #F9FAFB;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  min-width: 0; /* Allow shrinking inside flex containers */
  text-align: left;
  font-size: 14px;
  color: #1F2937;
  transition: background 0.2s;
  overflow: hidden; /* Clip long content */
}

.expand-toggle:hover {
  background: #F3F4F6;
}

.expand-toggle-icon {
  font-size: 10px;
  color: #6B7280;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.expand-toggle-icon.expanded {
  transform: rotate(90deg);
}