/* Analytics Dashboard Styles */
.analytics-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 0;
}

/* Header Styles */
.analytics-header {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 2rem 2rem 0;
  margin-bottom: 2rem;
}

.analytics-title-section {
  margin-bottom: 2rem;
}

.analytics-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.5rem;
}

.analytics-subtitle {
  font-size: 1.125rem;
  color: #718096;
  margin: 0;
}

/* Tab Navigation */
.analytics-navigation {
  border-bottom: 1px solid #e2e8f0;
}

.analytics-tabs {
  display: flex;
  gap: 0;
}

.analytics-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  color: #718096;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
  font-weight: 500;
}

.analytics-tab:hover {
  color: #4a5568;
  background: #f7fafc;
}

.analytics-tab-active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
  background: #f7fafc;
}

.tab-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.tab-text {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Filters */
.analytics-filters {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  margin: 0 2rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.filters-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.filter-group {
  display: flex;
  flex-direction: column;
}

.filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #4a5568;
  margin-bottom: 0.5rem;
}

.filter-select {
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: white;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Analytics Content */
.analytics-content {
  padding: 0 2rem;
}

.analytics-section {
  margin-bottom: 3rem;
}

.analytics-section-header {
  margin-bottom: 2rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  font-size: 1rem;
  color: #718096;
  margin: 0;
}

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  border: 1px solid #f1f5f9;
  margin-bottom: 10px;
}

.metric-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.metric-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 12px;
  
  flex-shrink: 0;
}

.metric-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: lightgray;
  color: #000000;
}

.metric-info {
  flex: 1;
}

.metric-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 0.25rem 0;
}

.metric-subtitle {
  font-size: 0.875rem;
  color: #718096;
  margin: 0;
}

.metric-value-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: #2d3748;
}

.metric-unit {
  font-size: 0.875rem;
  color: #718096;
  font-weight: 500;
}

.metric-change {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

.metric-change.positive {
  color: #059669;
  background: #d1fae5;
}

.metric-change.negative {
  color: #dc2626;
  background: #fee2e2;
}

.metric-percentage {
  font-size: 0.875rem;
  color: #718096;
}

.needs-attention {
  color: #dc2626;
}

/* Charts */
.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-header {
  margin-bottom: 1.5rem;
}

.chart-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.chart-subtitle {
  font-size: 0.875rem;
  color: #718096;
  margin: 0;
}

.chart-container-wrapper {
  position: relative;
  height: 300px;
  margin-bottom: 1rem;
}

.analytics-chart {
  width: 100% !important;
  height: 100% !important;
}

.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  color: #718096;
}

.spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #e2e8f0;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-small {
  width: 1rem;
  height: 1rem;
  border: 2px solid #e2e8f0;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #4a5568;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.bg-blue-500 { background-color: #3b82f6; }
.bg-green-500 { background-color: #10b981; }
.bg-purple-500 { background-color: #8b5cf6; }
.bg-yellow-500 { background-color: #f59e0b; }
.bg-red-500 { background-color: #ef4444; }

/* Usage Patterns */
.usage-patterns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.pattern-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.pattern-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.pattern-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.pattern-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #3b82f6;
}

.loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #718096;
  font-style: italic;
}

/* Performance Tables */
.performance-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.performance-header {
  margin-bottom: 1.5rem;
}

.performance-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.performance-subtitle {
  font-size: 0.875rem;
  color: #718096;
  margin: 0;
}

.performance-table-wrapper {
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.performance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.performance-table th {
  background: #f8fafc;
  color: #4a5568;
  font-weight: 600;
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.performance-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}

.table-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: #718096;
}

/* Insights Cards */
.insights-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.insights-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.insights-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.insights-subtitle {
  font-size: 0.875rem;
  color: #718096;
  margin: 0;
}

.insights-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #3b82f6;
  flex-shrink: 0;
}

/* Engagement Breakdown */
.engagement-breakdown-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.engagement-levels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.engagement-level {
  padding: 1rem;
  border-radius: 8px;
  background: #f8fafc;
}

.level-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.level-label {
  font-weight: 600;
  color: #2d3748;
}

.level-percentage {
  font-weight: 700;
  color: #3b82f6;
}

.level-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.level-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  transition: width 0.5s ease;
}

.level-count {
  font-size: 0.875rem;
  color: #718096;
}

/* Recommendations */
.recommendations-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.recommendation-card {
  border-radius: 12px;
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 10px;
}

.priority-high {
  border-left: 4px solid #dc2626;
  background: linear-gradient(135deg, #fef2f2, #ffffff);
}

.priority-medium {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, #fffbeb, #ffffff);
}

.priority-strategy {
  border-left: 4px solid #8b5cf6;
  background: linear-gradient(135deg, #f3f4f6, #ffffff);
}

.priority-engagement {
  border-left: 4px solid #10b981;
  background: linear-gradient(135deg, #ecfdf5, #ffffff);
}

.priority-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.priority-icon {
  width: 1rem;
  height: 1rem;
}

.priority-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.high-priority .priority-label { color: #dc2626; }
.medium-priority .priority-label { color: #f59e0b; }
.strategy-priority .priority-label { color: #8b5cf6; }
.engagement-priority .priority-label { color: #10b981; }

/* Responsive Design */
@media (max-width: 768px) {
  .analytics-header {
    padding: 1rem;
  }
  
  .analytics-title {
    font-size: 2rem;
  }
  
  .analytics-tabs {
    flex-direction: column;
  }
  
  .analytics-content {
    padding: 0 1rem;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .engagement-breakdown-container {
    grid-template-columns: 1fr;
  }
  
  .usage-patterns-grid {
    grid-template-columns: 1fr;
  }
}

/* Loading States */
.analytics-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: #718096;
}

.analytics-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem;
  color: #dc2626;
  background: #fef2f2;
  border-radius: 12px;
  margin: 2rem;
}

/* Animation utilities */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Empty states and cohort display */
.empty-state {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
  font-style: italic;
  background: #f9fafb;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}

.cohort-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cohort-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
  background: #f3f4f6;
  border-radius: 6px;
}

.cohort-label {
  font-weight: 500;
  color: #374151;
}

.cohort-value {
  font-weight: 700;
  color: #1f2937;
}

.engagement-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.engagement-level {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem;
  border-radius: 8px;
  border-left: 4px solid;
}

.engagement-level.high {
  background: #ecfdf5;
  border-color: #10b981;
}

.engagement-level.medium {
  background: #fffbeb;
  border-color: #f59e0b;
}

.engagement-level.low {
  background: #fef2f2;
  border-color: #ef4444;
}

.level-label {
  font-weight: 500;
  color: #374151;
}

.level-count {
  font-weight: 700;
  font-size: 1.125rem;
}

.engagement-level.high .level-count {
  color: #10b981;
}

.engagement-level.medium .level-count {
  color: #f59e0b;
}

.engagement-level.low .level-count {
  color: #ef4444;
}

.no-data-message {
  text-align: center;
  padding: 3rem 2rem;
  background: #f9fafb;
  border-radius: 12px;
  margin: 2rem 0;
  border: 2px dashed #d1d5db;
}

.no-data-content h3 {
  color: #374151;
  margin-bottom: 0.5rem;
}

.no-data-content p {
  color: #6b7280;
  margin-bottom: 0.5rem;
}

/* Chart Visualization Styles */
.chart-container {
  padding: 1rem;
  background: white;
  border-radius: 8px;
}

.chart-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.5rem;
}

.chart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.simple-chart {
  position: relative;
  background: linear-gradient(to top, #f3f4f6, #ffffff);
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  margin-bottom: 1rem;
  overflow: hidden;
}

.chart-bar {
  position: absolute;
  bottom: 20px;
  border-radius: 3px 3px 0 0;
  transition: all 0.3s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 2px;
  box-sizing: border-box;
}

.chart-bar:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.bar-label {
  position: absolute;
  bottom: -18px;
  font-size: 0.75rem;
  color: #374151;
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: center;
}

.bar-value {
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}

.chart-data-table {
  background: #f9fafb;
  border-radius: 6px;
  padding: 0.75rem;
  border: 1px solid #e5e7eb;
}

.table-header {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #d1d5db;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.table-row {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
  color: #6b7280;
  font-size: 0.875rem;
}

.table-row:nth-child(even) {
  background: rgba(243, 244, 246, 0.5);
  border-radius: 3px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.table-more {
  text-align: center;
  color: #9ca3af;
  font-style: italic;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.chart-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.chart-empty h4 {
  color: #374151;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .chart-summary {
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
  }
  
  .bar-label {
    display: none;
  }
  
  .simple-chart {
    height: 150px !important;
  }
} 
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: linear-gradient(135deg, var(--primary-color-light) 0%, var(--primary-color) 100%);
}

.auth-card {
  width: 100%;
  max-width: 28rem;
  background-color: var(--white);
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.auth-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
}

.auth-logo {
  margin-bottom: 1.5rem;
}

.auth-logo svg {
  height: 3rem;
  width: auto;
  color: var(--primary-color);
}

.auth-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.auth-form {
  padding: 1rem 2rem 2rem;
}

.auth-form-group {
  margin-bottom: 1.5rem;
  position: relative;
}

.auth-form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.auth-form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-900);
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.auth-form-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.auth-form-button {
  display: block;
  width: 100%;
  padding: 0.875rem 1.5rem;
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
  background-color: var(--primary-color);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.auth-form-button:hover {
  background-color: var(--primary-color-dark);
}

.auth-separator {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0;
  color: var(--gray-500);
  font-size: 0.875rem;
}

.auth-separator::before,
.auth-separator::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--gray-300);
}

.auth-separator::before {
  margin-right: 1rem;
}

.auth-separator::after {
  margin-left: 1rem;
}

.auth-footer {
  text-align: center;
  padding-top: 1rem;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.auth-footer a {
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-error {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--danger);
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .auth-card {
    box-shadow: none;
    border-radius: 0;
  }
  
  .auth-container {
    padding: 0;
  }
} 
/* Categories Module Styles */

/* Category List Header */
.category-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.category-list-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.category-list-actions {
  display: flex;
  gap: 0.75rem;
}

/* Category Search Bar */
.category-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.search-group {
  flex: 1;
  min-width: 180px;
}

.search-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.search-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

.search-btn-reset {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.search-btn-reset:hover {
  background-color: var(--gray-300);
}

.search-btn-icon {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

/* Categories Table */
.categories-table {
  width: 100%;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.categories-table-header {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.categories-table th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.categories-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}

.categories-table tr:last-child td {
  border-bottom: none;
}

.categories-table tbody tr {
  transition: background-color 0.2s ease;
}

.categories-table tbody tr:hover {
  background-color: var(--gray-50);
}

.category-name {
  font-weight: 500;
  color: var(--gray-900);
}

.category-description {
  color: var(--gray-700);
  font-size: 0.875rem;
}

.category-questions-count {
  font-weight: 500;
  color: var(--gray-800);
  text-align: center;
}

.category-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.category-action-btn {
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-action-btn:hover {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.category-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Empty State */
.category-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--gray-400);
  margin: 0 auto 1rem;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--gray-600);
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.empty-state-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

/* Category Form */
.category-form {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.form-header {
  margin-bottom: 1.5rem;
}

.form-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.form-textarea {
  min-height: 6rem;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.btn-cancel {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
  text-decoration: none;
}

.btn-submit {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background-color: var(--primary-color-dark);
}

/* Category Detail */
.category-detail {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.category-detail-header {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-detail-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.category-detail-actions {
  display: flex;
  gap: 0.5rem;
}

.category-detail-description {
  color: var(--gray-700);
  margin-bottom: 1rem;
}

.category-detail-meta {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.category-meta-item {
  display: flex;
  flex-direction: column;
}

.category-meta-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.category-meta-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .category-list-header,
  .category-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .category-list-actions,
  .category-detail-actions {
    width: 100%;
  }
  
  .category-detail-meta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .categories-table th:nth-child(2),
  .categories-table td:nth-child(2) {
    display: none;
  }
  
  .search-group {
    flex: 100%;
  }
} 
/* Contests Module Styles */

/* Contest List Header */
.contest-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.contest-list-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.contest-list-actions {
  display: flex;
  gap: 0.75rem;
}

/* Contest Search Bar */
.contest-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.filter-group {
  flex: 1;
  min-width: 180px;
}

.filter-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
}

.filter-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.filter-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
  background-color: var(--white);
}

.filter-input:focus,
.filter-select:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.filter-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

.filter-btn-reset {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.filter-btn-reset:hover {
  background-color: var(--gray-300);
  color: var(--gray-800);
}

.filter-btn-icon {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/* Contests Table */
.contests-table {
  width: 100%;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.contests-table-header {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.contests-table th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.contests-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}

.contests-table tr:last-child td {
  border-bottom: none;
}

.contests-table tbody tr {
  transition: background-color 0.2s ease;
}

.contests-table tbody tr:hover {
  background-color: var(--gray-50);
}

.contest-name {
  font-weight: 500;
  color: var(--gray-900);
}

.contest-frequency {
  text-transform: capitalize;
  font-weight: 500;
}

.contest-dates {
  font-size: 0.875rem;
  color: var(--gray-700);
}

.contest-prizes-count {
  font-weight: 500;
  color: var(--gray-800);
  text-align: center;
}

.contest-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contest-language {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
  background-color: var(--gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
}

.contest-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  text-transform: capitalize;
}

.status-active {
  background-color: #dcfce7;
  color: #15803d;
}

.status-upcoming {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.status-completed {
  background-color: #f3f4f6;
  color: #4b5563;
}

.contest-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.contest-action-btn {
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contest-action-btn:hover {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.contest-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Empty State */
.contest-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--gray-400);
  margin: 0 auto 1rem;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--gray-600);
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.empty-state-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

/* Contest Form */
.contest-form {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-section {
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 1.5rem;
}

.form-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.form-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.form-header {
  margin-bottom: 1.5rem;
}

.form-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

/* Make entire date input field clickable */
.form-control[type="date"] {
  cursor: pointer;
  position: relative;
}

.form-control[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
}

/* Make entire time input field clickable */
.form-control[type="time"] {
  cursor: pointer;
  position: relative;
}

.form-control[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: pointer;
}

.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
  background-color: var(--white);
}

.form-select:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.form-hint {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--gray-600);
}

/* Prizes */
.prizes-container {
  margin-bottom: 1.5rem;
}

.prize-item {
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  position: relative;
}

.prize-item:last-child {
  margin-bottom: 0;
}

.prize-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.prize-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.prize-remove-btn {
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prize-remove-btn:hover {
  background-color: var(--gray-200);
  color: #ef4444;
}

.prize-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.prize-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px dashed var(--gray-300);
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 0.5rem;
}

.prize-add-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Languages */
.languages-container {
  margin-bottom: 1.5rem;
}

.languages-list {
  margin-bottom: 1rem;
}

.language-item {
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1rem;
  position: relative;

  gap: 1rem;
  align-items: center;
}

.language-item:last-child {
  margin-bottom: 0;
}

.drag-hint {
  display: inline-flex;
  align-items: center;
  color: var(--gray-600);
  background-color: var(--gray-100);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.hint-icon {
  margin-right: 0.25rem;
}

.language-drag-handle {
  cursor: grab;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease;
  background-color: var(--gray-200);
}

.language-drag-handle:hover {
  background-color: var(--gray-300);
  color: var(--gray-700);
}

.language-drag-handle:active {
  cursor: grabbing;
  background-color: var(--gray-300);
}

.handle-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.language-select {
  flex: 1;
}

.language-remove-btn {
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
}

.language-remove-btn:hover {
  background-color: var(--gray-200);
  color: #ef4444;
}

.language-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px dashed var(--gray-300);
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 0.5rem;
}

.language-add-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Quiz Details */
.quiz-container {
  margin-bottom: 1.5rem;
}

.quiz-toggle {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.quiz-toggle-label {
  margin-left: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-800);
}

.quiz-details {
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 1.5rem;
  width: 100%;
}

.quiz-detail-hint {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 1.5rem;
  padding: 0.75rem;
  background-color: rgba(0, 163, 224, 0.1);
  border-left: 3px solid var(--primary-color);
  border-radius: 0.25rem;
}

/* Category and Tag Options */
.category-options,
.tag-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
  max-height: 12rem;
  overflow-y: auto;
  padding: 0.5rem;
  background-color: var(--white);
  border-radius: 0.375rem;
  border: 1px solid var(--gray-200);
}

.category-option,
.tag-option {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background-color: var(--gray-100);
  border-radius: 0.25rem;
  cursor: pointer;
  user-select: none;
}

.category-option:hover,
.tag-option:hover {
  background-color: var(--gray-200);
}

.category-option input,
.tag-option input {
  margin-right: 0.375rem;
}

.category-option label,
.tag-option label {
  font-size: 0.875rem;
  cursor: pointer;
}

/* Quiz Sequence Info */
.quiz-sequence-info {
  margin-top: 2rem;
  padding: 1.25rem;
  background-color: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
}

.sequence-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.sequence-example p {
  font-size: 0.875rem;
  color: var(--gray-700);
  margin-bottom: 1rem;
}

.sequence-timeline {
  position: relative;
  padding-left: 1.5rem;
  border-left: 2px solid var(--gray-300);
  margin-left: 0.5rem;
}

.timeline-item {
  position: relative;
  padding-bottom: 1.25rem;
}

.timeline-item:before {
  content: "";
  position: absolute;
  left: -1.75rem;
  top: 0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--primary-color);
  border-radius: 50%;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-note:before {
  background-color: var(--gray-400);
}

.timeline-time {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.timeline-label {
  font-size: 0.875rem;
  color: var(--gray-700);
}

.quiz-categories,
.quiz-tags {
  margin-top: 1.5rem;
}

/* Drag and Drop Styling */
.language-item.dragging {
  opacity: 0.5;
  border: 1px dashed var(--primary-color);
}

.language-item.drag-over {
  border-top: 2px solid var(--primary-color);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
}

.btn-cancel {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
  text-decoration: none;
}

.btn-submit {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background-color: var(--primary-color-dark);
}

/* Contest Detail */
.contest-detail {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.contest-detail-header {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contest-detail-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.contest-detail-actions {
  display: flex;
  gap: 0.5rem;
}

.contest-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.contest-meta-item {
  display: flex;
  flex-direction: column;
}

.contest-meta-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.contest-meta-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
}

/* Contest Sections */
.contest-section {
  margin-top: 2rem;
}

.contest-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.contest-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.contest-section-actions {
  display: flex;
  gap: 0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contest-list-header,
  .contest-detail-header,
  .contest-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .contest-list-actions,
  .contest-detail-actions,
  .contest-section-actions {
    width: 100%;
  }
  
  .contest-detail-meta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .filter-group {
    flex: 100%;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Winners Page */
.winners-container {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.winner-card {
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.winner-card:last-child {
  margin-bottom: 0;
}

.winner-prize {
  margin-bottom: 1rem;
}

.winner-prize-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.25rem;
}

.winner-prize-criteria {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.winner-details {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--white);
  border-radius: 0.375rem;
}

.winner-participant {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 250px;
}

.winner-avatar {
  width: 3rem;
  height: 3rem;
  background-color: var(--primary-color);
  color: var(--white);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 600;
}

.winner-info {
  flex: 1;
}

.winner-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
}

.winner-phone {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.winner-stats {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.winner-stat {
  display: flex;
  flex-direction: column;
  min-width: 100px;
}

.winner-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
}

.winner-stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.no-winners {
  text-align: center;
  padding: 2rem;
  color: var(--gray-600);
}

.no-participants {
  text-align: center;
  padding: 2rem 0;
  color: var(--gray-600);
}

/* Step Progress styles */
.step-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  width: 100%;
  padding: 0 1rem;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #666;
  border: 2px solid #ddd;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  font-weight: 500;
  transition: all 0.3s ease;
}

.step-connector {
  flex-grow: 1;
  height: 2px;
  background-color: #ddd;
  margin: 0 0.5rem;
  position: relative;
  top: -1.25rem;
  transition: all 0.3s ease;
}

.step-item.active .step-number {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

.step-item.active .step-label {
  color: #333;
  font-weight: 600;
}

.step-item.completed .step-number {
  background-color: #2ecc71;
  color: white;
  border-color: #2ecc71;
}

.step-connector.active {
  background-color: #2ecc71;
}

/* Summary styles */
.summary-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
}

.summary-section {
  background-color: #f9f9f9;
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.summary-title {
  font-size: 1.125rem;
  color: #333;
  margin-bottom: 1rem;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5rem;
}

.summary-item {
  display: flex;
  margin-bottom: 0.75rem;
}

.summary-label {
  font-weight: 600;
  color: #555;
  min-width: 140px;
}

.summary-value {
  color: #333;
}

/* Clone Contest Section */
.clone-contest-section {
  margin-top: 3rem;
  border-top: 1px solid #eee;
  padding-top: 2rem;
}

.clone-section-title {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.clone-section-hint {
  color: #666;
  margin-bottom: 1.5rem;
}

.clone-contest-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.clone-contest-card {
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.clone-contest-card:hover {
  border-color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.clone-contest-name {
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
}

.clone-contest-details {
  font-size: 0.875rem;
  color: #666;
  display: flex;
  flex-direction: column;
}

.clone-contest-dates {
  margin-bottom: 0.25rem;
}

.clone-contest-frequency {
  font-style: italic;
}

/* Make the form steps responsive */
@media (max-width: 768px) {
  .summary-container {
    grid-template-columns: 1fr;
  }
  
  .step-label {
    font-size: 0.75rem;
  }
  
  .step-number {
    width: 2rem;
    height: 2rem;
  }
}

/* Category and Tag Lists */
.category-list,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.category-item,
.tag-item {
  display: flex;
  align-items: center;
  background-color: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.category-item:hover,
.tag-item:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-300);
}

.category-item input,
.tag-item input {
  margin-right: 0.5rem;
}

.category-item label,
.tag-item label {
  font-size: 0.875rem;
  color: var(--gray-800);
  cursor: pointer;
  margin-bottom: 0;
} 

/* Friendly Contest Creation Styles */
.contest-explanation {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 2px solid #0ea5e9;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.explanation-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: #0ea5e9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.explanation-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
  stroke-width: 2.5;
}

.explanation-content {
  flex: 1;
}

.explanation-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 0.5rem;
}

.explanation-content p {
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.form-label-friendly {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
  display: block;
  min-height: 1.5rem;
}

.form-hint {
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-bottom: 0.75rem;
  font-style: italic;
  min-height: 1.25rem;
  line-height: 1.4;
}

.form-control-friendly {
  border: 2px solid var(--gray-300);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  width: 100%;
}

.form-control-friendly:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15);
  outline: none;
  transform: translateY(-1px);
}

.form-control-friendly:hover {
  border-color: var(--primary-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

/* Enhanced styling for select dropdowns */
.form-control-friendly select,
select.form-control-friendly {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 3rem;
  cursor: pointer;
}

.form-control-friendly select:focus,
select.form-control-friendly:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.custom-dates-section {
  background: #f8fafc;
  border: 2px dashed var(--gray-300);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 1rem;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-row {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1.5rem;
}

.form-group-half {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-actions-friendly {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--gray-200);
}

.btn-friendly {
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  border: 2px solid transparent;
}

.btn-friendly:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-primary.btn-friendly {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.btn-primary.btn-friendly:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.btn-outline.btn-friendly {
  background: transparent;
  color: var(--gray-700);
  border-color: var(--gray-300);
}

.btn-outline.btn-friendly:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
  color: var(--gray-900);
}

/* Responsive Design */
@media (max-width: 768px) {
  .contest-explanation {
    flex-direction: column;
    text-align: center;
  }
  
  .explanation-icon {
    align-self: center;
  }
  
  .form-row {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .form-group-half {
    width: 100%;
  }
  
  .calculated-info {
    min-height: 100px;
    margin-top: 0;
  }
  
  .form-actions-friendly {
    flex-direction: column-reverse;
  }
  
  .btn-friendly {
    justify-content: center;
    width: 100%;
  }
} 

/* Quiz Explanation Box (Green Theme) */
.quiz-explanation {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #10b981;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.quiz-explanation .explanation-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.quiz-explanation .explanation-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
  stroke-width: 2.5;
}

.quiz-explanation .explanation-content {
  flex: 1;
}

.quiz-explanation .explanation-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #064e3b;
  margin-bottom: 0.5rem;
}

.quiz-explanation .explanation-content p {
  font-size: 1rem;
  color: #047857;
  line-height: 1.6;
  margin: 0;
}

/* Calculated Info Display */
.calculated-info {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  margin-top: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.calculated-info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), #06b6d4, var(--primary-color));
}

.calculation-label {
  font-size: 1rem;
  color: var(--gray-700);
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calculation-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.calculation-hint {
  font-size: 0.8rem;
  color: var(--gray-500);
  font-style: italic;
  font-weight: 500;
}

/* Selection Grid for Categories and Tags */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.selection-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  animation: fadeInUp 0.3s ease-out;
}

.selection-item:hover {
  border-color: var(--primary-color);
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.selection-checkbox {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--gray-300);
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.selection-checkbox:checked {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.selection-checkbox:checked + .selection-label {
  color: var(--primary-color);
  font-weight: 600;
}

.selection-label {
  font-size: 0.9rem;
  color: var(--gray-700);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  margin: 0;
}

.selection-item:hover .selection-label {
  color: var(--primary-color);
}

/* Form Section Improvements */
.form-section {
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}

.form-section:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 3px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.form-section-title::before {
  content: '⚙️';
  font-size: 1.25rem;
}

/* Responsive Design for New Elements */
@media (max-width: 768px) {
  .quiz-explanation {
    flex-direction: column;
    text-align: center;
  }
  
  .quiz-explanation .explanation-icon {
    align-self: center;
  }
  
  .selection-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .calculated-info {
    margin-top: 1rem;
  }
  
  .form-section {
    padding: 1rem;
  }
} 

/* Selection Search */
.selection-search {
  position: relative;
  margin-bottom: 1.5rem;
}

.search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gray-400);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 3rem;
  border: 2px solid var(--gray-300);
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.search-input:focus + .search-icon {
  color: var(--primary-color);
}

.search-input::placeholder {
  color: var(--gray-500);
}

/* Show More Button */
.show-more-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.show-more-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: white;
  border: 2px solid var(--primary-color);
  border-radius: 8px;
  color: var(--primary-color);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.show-more-btn:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.show-more-icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.show-more-btn:hover .show-more-icon {
  transform: translateY(1px);
}

/* Animation for new items */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design for Search and Pagination */
@media (max-width: 768px) {
  .selection-search {
    margin-bottom: 1rem;
  }
  
  .search-input {
    padding: 0.75rem 0.875rem 0.75rem 2.75rem;
    font-size: 0.9rem;
  }
  
  .search-icon {
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
  }
  
  .show-more-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.85rem;
  }
  
  .show-more-container {
    margin-top: 1rem;
  }
} 

/* Enhanced Form Group Styling for Quiz Settings */
.form-section .form-group {
  margin-bottom: 1.5rem;
}

.form-section .form-group:last-child {
  margin-bottom: 0;
}

.form-control-friendly {
  flex: 1;
  margin-top: auto;
}

/* Quiz Settings specific improvements */
.form-section h3.form-section-title {
  background: linear-gradient(135deg, var(--gray-50) 0%, white 100%);
  padding: 1rem 1.5rem;
  margin: -2rem -2rem 1.5rem -2rem;
  border-radius: 16px 16px 0 0;
  border-bottom: 3px solid var(--primary-color);
}

/* Better spacing for quiz settings rows */
.form-section .form-row + .form-row {
  margin-top: 0.5rem;
}

/* Improved input field styling */
.form-control-friendly:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15);
  outline: none;
  transform: translateY(-1px);
}

/* Mobile specific improvements */
@media (max-width: 768px) {
  .form-section h3.form-section-title {
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    padding: 0.875rem 1.25rem;
    font-size: 1.25rem;
  }
  
  .form-section h3.form-section-title::before {
    font-size: 1rem;
  }
  
  .calculated-info {
    padding: 0.875rem;
  }
  
  .calculation-value {
    font-size: 1.5rem;
  }
} 

/* Prize Explanation Box (Purple Theme) */
.prize-explanation {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
  border: 2px solid #a855f7;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.prize-explanation .explanation-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.prize-explanation .explanation-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
  stroke-width: 2.5;
}

.prize-explanation .explanation-content {
  flex: 1;
}

.prize-explanation .explanation-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #581c87;
  margin-bottom: 0.5rem;
}

.prize-explanation .explanation-content p {
  font-size: 1rem;
  color: #7c3aed;
  line-height: 1.6;
  margin: 0;
}

/* Prize Item Styling */
.prize-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: white;
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.prize-item:hover {
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
  transform: translateY(-1px);
}

.prize-fields {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: start;
}

.btn-remove-prize {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border: 2px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
  margin-top: 0.25rem;
}

.btn-remove-prize:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4);
}

.btn-add-prize {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
  color: var(--white);
  border: 2px solid transparent;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(168, 85, 247, 0.2);
  text-decoration: none;
  margin-top: 1.5rem;
}

.btn-add-prize:hover {
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
  color: var(--white);
}

.btn-add-prize .btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

/* Prize Item Mobile Responsive */
@media (max-width: 768px) {
  .prize-explanation {
    flex-direction: column;
    text-align: center;
  }
  
  .prize-explanation .explanation-icon {
    align-self: center;
  }
  
  .prize-item {
    flex-direction: column;
    gap: 1rem;
  }
  
  .prize-fields {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .btn-remove-prize {
    align-self: flex-end;
    margin-top: 0;
  }
  
  .btn-add-prize {
    width: 100%;
    justify-content: center;
  }
} 
/* Dashboard Layout */
.dashboard-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar Navigation */
.sidebar {
  width: 260px;
  background-color: var(--white);
  border-right: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width 0.3s ease;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

/* Sidebar Header */
.sidebar-header {
  display: flex;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid var(--gray-200);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sidebar-logo svg {
  color: var(--primary-color);
  height: 2rem;
  width: auto;
}

.sidebar-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
}

/* Sidebar Navigation Items */
.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 0.5rem;
}

.nav-section-title {
  padding: 0.75rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gray-500);
  letter-spacing: 0.05em;
}

.nav-items {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
}

.nav-item-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--primary-color);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  color: var(--gray-700);
  text-decoration: none;
  transition: all 0.2s ease;
}

.nav-link:hover {
  background-color: var(--gray-100);
  color: var(--primary-color);
  text-decoration: none;
}

.nav-link-active {
  background-color: var(--gray-100);
  color: var(--primary-color);
  font-weight: 500;
}

.nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.nav-text {
  font-size: 0.875rem;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--primary-color);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 0.875rem;
}

.user-info {
  max-width: 140px;
}

.user-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.75rem;
  color: var(--gray-500);
}

.user-menu {
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  transition: color 0.2s ease;
}

.user-menu:hover {
  color: var(--gray-700);
}

/* Main Content Area */
.dashboard-content {
  flex: 1;
  background-color: var(--gray-50);
  padding: 1.5rem;
}

/* Dashboard Container */
.dashboard-container {
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
}

/* Dashboard Header */
.dashboard-header {
  margin-bottom: 1.5rem;
}

.dashboard-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.dashboard-subtitle {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* Dashboard Cards */
.dashboard-card {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.card-content {
  padding: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar {
    width: 260px;
    position: relative;
  }
}

/* Dashboard Styles */

/* Color Variables using Pantone 2995C */
:root {
  --primary-color: #00A0E4;    /* Pantone 2995C */
  --primary-light: #33B3E8;
  --primary-dark: #0080B8;
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --danger-color: #EF4444;
  --info-color: #3B82F6;
  --neutral-color: #6B7280;
  --background-light: #F8FAFC;
  --background-white: #FFFFFF;
  --border-color: #E5E7EB;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-muted: #9CA3AF;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --border-radius: 8px;
  --border-radius-lg: 12px;
}

/* Dashboard Container */
.dashboard-container {
  min-height: 100vh;
  background-color: var(--background-light);
  padding: 0;
}

.dashboard-content {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.dashboard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

/* Header Section */
.dashboard-header {
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: white;
  padding: 2rem;
  margin: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.header-main .dashboard-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-main .dashboard-subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  margin: 0;
}

.header-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

.current-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}

.admin-type-badge .badge {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-super {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.badge-admin {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
}

.badge-regular {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Active Quiz Alert */
.active-quiz-alert {
  margin-top: 1.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  padding: 1rem;
}

.alert-content {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1400px;
  margin: 0 auto;
}

.alert-icon {
  font-size: 1.5rem;
}

.alert-text {
  flex: 1;
  font-weight: 500;
}

.alert-action {
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  transition: background-color 0.2s;
}

.alert-action:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* Section Headers */
.section-header {
  margin-bottom: 1.5rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Quick Actions Section */
.quick-actions-section {
  background-color: var(--background-white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.action-card {
  background-color: var(--background-white);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.action-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.action-icon {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.action-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.action-content {
  flex: 1;
  margin-bottom: 1rem;
}

.action-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.action-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.action-footer {
  margin-top: auto;
}

.action-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.2s;
  text-align: center;
  width: 100%;
}

.action-button:hover {
  background-color: var(--primary-dark);
}

/* Overview Metrics Section */
.overview-metrics-section {
  background-color: var(--background-white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.metric-card {
  background-color: var(--background-white);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow 0.2s;
}

.metric-card:hover {
  box-shadow: var(--shadow-md);
}

.metric-card.primary {
  border-left: 4px solid var(--primary-color);
}

.metric-card.success {
  border-left: 4px solid var(--success-color);
}

.metric-card.info {
  border-left: 4px solid var(--info-color);
}

.metric-card.warning {
  border-left: 4px solid var(--warning-color);
}

.metric-card.secondary {
  border-left: 4px solid var(--neutral-color);
}

.metric-card.neutral {
  border-left: 4px solid var(--text-muted);
}

.metric-icon {
  width: 3rem;
  height: 3rem;
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--text-secondary);
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.metric-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.125rem;
}

.metric-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Activity Metrics Section */
.activity-metrics-section {
  background-color: var(--background-white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.activity-card {
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
}

.activity-card.today {
  border-left: 4px solid var(--primary-color);
}

.activity-card.week {
  border-left: 4px solid var(--success-color);
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.activity-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.activity-date {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.activity-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stat-item {
  text-align: center;
  padding: 1rem;
  background-color: var(--background-white);
  border-radius: var(--border-radius);
  border: 1px solid var(--border-color);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.stat-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-item.accuracy .stat-value {
  color: var(--success-color);
}

.stat-item.growth .stat-value {
  color: var(--primary-color);
}

/* Upcoming Section - IMPROVED */
.upcoming-section {
  background-color: var(--background-white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.upcoming-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

.upcoming-card {
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  min-height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.card-action {
  font-size: 0.875rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
}

.card-action:hover {
  color: var(--primary-dark);
  background-color: rgba(0, 160, 228, 0.1);
}

.quiz-list, .contest-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.quiz-item, .contest-item {
  background-color: var(--background-white);
  border-radius: var(--border-radius);
  padding: 1.25rem;
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  box-shadow: var(--shadow-sm);
}

.quiz-item:hover, .contest-item:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.quiz-info, .contest-info {
  margin-bottom: 1rem;
}

.quiz-name, .contest-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
}

.quiz-details, .contest-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.quiz-language, .quiz-datetime,
.contest-end, .contest-frequency {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  
  border-radius: var(--border-radius);
  font-weight: 500;
}

.quiz-datetime {
  display: flex;
  gap: 1rem;
}

.quiz-date, .quiz-time {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
}

.language-flag {
  font-size: 0.875rem;
}

.quiz-status, .contest-urgency {
  display: flex;
  justify-content: flex-end;
}

.status-badge, .urgency-badge {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.status-badge.upcoming {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

.urgency-badge.critical {
  background-color: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.urgency-badge.high {
  background-color: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

.urgency-badge.medium {
  background-color: #DBEAFE;
  color: #1E40AF;
  border: 1px solid #93C5FD;
}

.urgency-icon {
  font-size: 0.875rem;
}

/* More Items Link */
.more-items {
  text-align: center;
  padding: 1rem;
  margin-top: 0.5rem;
}

.more-link {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  transition: background-color 0.2s;
}

.more-link:hover {
  color: var(--primary-dark);
  background-color: rgba(0, 160, 228, 0.1);
}

/* Enhanced Empty State */
.empty-state {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.6;
}

.empty-content {
  max-width: 250px;
  margin: 0 auto;
}

.empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 0.5rem 0;
}

.empty-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem 0;
  line-height: 1.4;
}

.empty-action {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  transition: all 0.2s;
  display: inline-block;
}

.empty-action:hover {
  color: white;
  background-color: var(--primary-color);
}

/* Recent Activity Section */
.recent-activity-section {
  background-color: var(--background-white);
  border-radius: var(--border-radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
}

.activity-feed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.feed-card {
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
}

.feed-card.full-width {
  grid-column: 1 / -1;
}

.feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.feed-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.feed-action {
  font-size: 0.875rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}

.feed-action:hover {
  color: var(--primary-dark);
}

.feed-content {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feed-item {
  background-color: var(--background-white);
  border-radius: var(--border-radius);
  padding: 1rem;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.feed-icon {
  width: 2rem;
  height: 2rem;
  background-color: var(--background-light);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feed-icon .icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-secondary);
}

.feed-details {
  flex: 1;
}

.feed-title-text {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.feed-meta {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.feed-category, .feed-frequency {
  background-color: var(--background-light);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.feed-boost {
  flex-shrink: 0;
}

.boost-score {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: white;
}

.boost-1, .boost-2, .boost-3 { background-color: #EF4444; }
.boost-4, .boost-5, .boost-6 { background-color: #F59E0B; }
.boost-7, .boost-8 { background-color: #10B981; }
.boost-9, .boost-10 { background-color: var(--primary-color); }

.feed-status {
  flex-shrink: 0;
}

.status-indicator {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-indicator.active {
  background-color: #D1FAE5;
  color: #065F46;
}

.status-indicator.upcoming {
  background-color: #FEF3C7;
  color: #92400E;
}

.status-indicator.completed {
  background-color: #E5E7EB;
  color: #374151;
}

.feed-empty {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.feed-empty-action {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.feed-empty-action:hover {
  color: var(--primary-dark);
}

.feed-empty-sub {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  opacity: 0.8;
}

/* Responses List */
.responses-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.response-item {
  background-color: var(--background-white);
  border-radius: var(--border-radius);
  padding: 1rem;
  border: 1px solid var(--border-color);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
}

.response-participant {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.participant-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.participant-info {
  flex: 1;
}

.participant-name {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
  font-size: 0.875rem;
}

.response-contest {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.response-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.correctness-badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.correctness-badge.correct {
  background-color: #D1FAE5;
  color: #065F46;
}

.correctness-badge.incorrect {
  background-color: #FEE2E2;
  color: #991B1B;
}

.response-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.response-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.response-language {
  background-color: var(--background-light);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

/* Icons */
.icon {
  display: inline-block;
  flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .dashboard-row,
  .activity-grid,
  .upcoming-grid,
  .activity-feed-grid {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  
  .quick-actions-grid {
    grid-template-columns: 1fr;
  }
  
  .header-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .header-meta {
    align-items: center;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 1rem;
    gap: 1.5rem;
  }
  
  .activity-stats {
    grid-template-columns: 1fr;
  }
  
  .response-item {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .response-details,
  .response-meta {
    align-items: flex-start;
  }
  
  .upcoming-card {
    min-height: auto;
  }
  
  .quiz-details, .contest-details {
    gap: 0.75rem;
  }
  
  .quiz-datetime {
    flex-direction: column;
    gap: 0.25rem;
  }
} 

/* Onboarding Styles */
.onboarding-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

.onboarding-header {
  text-align: center;
  margin-bottom: 3rem;
}

.onboarding-header h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.75rem;
}

.onboarding-header p {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.onboarding-step {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.onboarding-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.onboarding-step.step-disabled {
  opacity: 0.6;
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.onboarding-step.step-disabled:hover {
  transform: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Collapsed Step State */
.onboarding-step.step-collapsed {
  padding: 1.25rem 2rem;
  border-color: #10b981;
  background: #f0fdf4;
}

.onboarding-step.step-collapsed:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(16, 185, 129, 0.15);
}

.onboarding-step.step-collapsed .step-number {
  background: #10b981;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

/* Highlighted Step (next action needed) */
.onboarding-step.step-highlighted {
  border-color: var(--primary-color);
  background: #f8faff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.onboarding-step.step-highlighted:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.2), 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.onboarding-step.step-highlighted .step-number {
  background: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  animation: pulse-highlight 2s infinite;
}

@keyframes pulse-highlight {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);
  }
}

/* Collapsed Content Styles */
.step-collapsed-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.step-expanded-content {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

.expand-step-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid #10b981;
  border-radius: 6px;
  color: #10b981;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.expand-step-btn:hover {
  background: #10b981;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.expand-icon {
  width: 1rem;
  height: 1rem;
  stroke-width: 2;
  transition: transform 0.2s ease;
}

.step-number {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-top: 0.25rem;
}

.step-disabled .step-number {
  background: var(--gray-400);
}

.step-content {
  flex: 1;
}

.step-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.75rem;
}

.step-content p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.step-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.status-badge {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.status-badge.status-complete {
  background: #dcfce7;
  color: #166534;
}

.status-badge.status-pending {
  background: #fef3c7;
  color: #92400e;
}

.status-badge.status-locked {
  background: var(--gray-100);
  color: var(--gray-600);
}

.status-badge.status-ready {
  background: #dbeafe;
  color: #1e40af;
}

.status-text {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.step-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  cursor: pointer;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-outline {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-outline:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.btn-disabled {
  background: var(--gray-300) !important;
  color: var(--gray-500) !important;
  cursor: not-allowed !important;
  border-color: var(--gray-300) !important;
}

.btn-disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

.btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .onboarding-container {
    padding: 1rem;
  }
  
  .onboarding-header h2 {
    font-size: 2rem;
  }
  
  .onboarding-step {
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
  }
  
  .onboarding-step.step-collapsed {
    padding: 1rem 1.5rem;
  }
  
  .step-number {
    align-self: flex-start;
  }
  
  .step-actions {
    flex-direction: column;
  }
  
  .btn {
    justify-content: center;
  }
  
  .step-collapsed-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .expand-step-btn {
    align-self: flex-end;
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
  }
} 
/* Import Questions Styles */

.import-instructions {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.instruction-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.instruction-icon {
  width: 24px;
  height: 24px;
  color: #3b82f6;
  margin-right: 0.5rem;
}

.instruction-header h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: #1f2937;
}

.import-instructions p {
  color: #4b5563;
  margin-bottom: 1rem;
}

.instruction-table-container {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.instruction-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.instruction-table th {
  background-color: #e5e7eb;
  padding: 0.75rem;
  text-align: left;
  font-weight: 600;
  color: #1f2937;
}

.instruction-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
  color: #4b5563;
}

.instruction-table tr:last-child td {
  border-bottom: none;
}

.download-template {
  margin-top: 1rem;
}

.template-link {
  display: inline-flex;
  align-items: center;
  color: #3b82f6;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.template-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

.template-icon {
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
}

/* File Upload Styles */

.file-upload-container {
  margin-bottom: 1.5rem;
}

.file-upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  padding: 2rem;
  background-color: #f9fafb;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
  position: relative;
  min-height: 200px;
}

.file-upload-area:hover, .file-upload-area.drag-active {
  border-color: #3b82f6;
  background-color: #eff6ff;
}

.file-upload-icon {
  width: 48px;
  height: 48px;
  color: #6b7280;
  margin-bottom: 1rem;
}

.file-upload-text {
  text-align: center;
}

.file-upload-prompt {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.file-upload-hint {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
}

.file-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.file-preview {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem;
  background-color: #eff6ff;
  border-radius: 6px;
}

.file-preview-icon {
  width: 32px;
  height: 32px;
  color: #3b82f6;
  margin-right: 1rem;
}

.file-info {
  flex: 1;
}

.file-name {
  display: block;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

.file-size {
  display: block;
  font-size: 0.75rem;
  color: #6b7280;
}

.file-remove-btn {
  background: none;
  border: none;
  padding: 0.25rem;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s;
}

.file-remove-btn:hover {
  color: #ef4444;
}

.file-remove-icon {
  width: 20px;
  height: 20px;
}

/* Import Options Styles */

.import-options {
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

.form-check-label {
  font-size: 0.875rem;
  color: #374151;
}

/* Form Actions */

.form-actions {
  display: flex;
  gap: 1rem;
}

.form-submit-btn {
  padding: 0.625rem 1.25rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-submit-btn:hover {
  background-color: #2563eb;
}

.form-cancel-btn {
  padding: 0.625rem 1.25rem;
  background-color: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.form-cancel-btn:hover {
  background-color: #e5e7eb;
}

/* Responsive Adjustments */

@media (max-width: 768px) {
  .form-actions {
    flex-direction: column;
  }
  
  .file-name {
    max-width: 200px;
  }
}

@media (max-width: 576px) {
  .file-upload-area {
    padding: 1.5rem;
  }
  
  .file-preview {
    flex-direction: column;
    text-align: center;
  }
  
  .file-preview-icon {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
  
  .file-info {
    margin-bottom: 0.5rem;
  }
  
  .file-name {
    max-width: 100%;
  }
} 
/* Language Form Styles - High Specificity */
.form-section[data-controller="language-form"] .language-list {
  margin-bottom: 1.5rem !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

.form-section[data-controller="language-form"] .language-item {
  display: flex !important;
  align-items: center !important;
  padding: 1rem 1.25rem !important;
  background: var(--white) !important;
  border: 2px solid var(--gray-200) !important;
  border-radius: 12px !important;
  gap: 1rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  min-height: 70px !important;
  margin-bottom: 0 !important;
  position: relative !important;
}

.form-section[data-controller="language-form"] .language-item:hover {
  background-color: var(--gray-50) !important;
  border-color: var(--primary-color) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15) !important;
}

.form-section[data-controller="language-form"] .language-order {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  background: linear-gradient(135deg, var(--primary-color) 0%, #0284c7 100%) !important;
  color: var(--white) !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3) !important;
  border: 2px solid var(--white) !important;
}

.form-section[data-controller="language-form"] .order-number {
  display: block !important;
}

.form-section[data-controller="language-form"] .language-fields {
  flex: 1 !important;
}

.form-section[data-controller="language-form"] .language-fields .form-group {
  margin-bottom: 0 !important;
}

[data-controller="language-form"] .language-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--white);
  transition: border-color 0.2s ease;
}

[data-controller="language-form"] .language-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

[data-controller="language-form"] .language-select.error {
  border-color: var(--danger);
  background-color: #fef2f2;
}

.form-section[data-controller="language-form"] .btn-remove {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  padding: 0 !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: white !important;
  border: 2px solid var(--white) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3) !important;
}

.form-section[data-controller="language-form"] .btn-remove:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.4) !important;
}

[data-controller="language-form"] .btn-remove:disabled {
  background-color: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
}

.form-section[data-controller="language-form"] .btn-add {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.875rem 1.5rem !important;
  background: linear-gradient(135deg, var(--primary-color) 0%, #0284c7 100%) !important;
  color: var(--white) !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
}

.form-section[data-controller="language-form"] .btn-add:hover:not(:disabled) {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

[data-controller="language-form"] .btn-add:disabled {
  background-color: var(--gray-300);
  cursor: not-allowed;
}

[data-controller="language-form"] .btn-add i {
  font-size: 0.875rem;
}

.language-error {
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%);
  border: 2px solid #fecaca;
  border-radius: 12px;
  position: relative;
  animation: errorSlideIn 0.4s ease-out;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.language-error::before {
  content: '⚠️';
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
}

.error-text {
  margin: 0;
  margin-left: 2rem;
  font-size: 0.9rem;
  color: #dc2626;
  font-weight: 600;
  line-height: 1.5;
}

/* Empty state when no languages */
.form-section[data-controller="language-form"] .language-list:empty {
  min-height: 120px !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, var(--gray-50) 0%, #f8fafc 100%) !important;
  border: 2px dashed var(--gray-300) !important;
  border-radius: 12px !important;
}

.form-section[data-controller="language-form"] .language-list:empty::after {
  content: "🌍 No languages selected yet" !important;
  font-size: 1rem !important;
  color: var(--gray-500) !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Animations */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Section styling improvements */
.form-section[data-controller="language-form"] {
  background: var(--white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--gray-200);
  margin-bottom: 2rem;
}

.form-section[data-controller="language-form"] .form-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section[data-controller="language-form"] .form-section-title::before {
  content: '🌐';
  font-size: 1.5rem;
}

.form-section[data-controller="language-form"] .form-hint {
  color: var(--gray-600);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .form-section[data-controller="language-form"] {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }
  
  .form-section[data-controller="language-form"] .language-list {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .form-section[data-controller="language-form"] .language-item {
    padding: 0.875rem 1rem !important;
    min-height: 60px !important;
  }
  
  .btn-add {
    width: 100%;
    justify-content: center;
    padding: 1.25rem;
    font-size: 1rem;
  }
  
  .language-select {
    font-size: 1rem;
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .form-section[data-controller="language-form"] {
    padding: 1rem;
    border-radius: 12px;
  }
  
  .language-item {
    padding: 0.75rem;
  }
  
  .language-fields {
    gap: 0.75rem;
  }
} 
/* Leaderboards Styles */

/* Header Styles */
.leaderboard-header {
  background: linear-gradient(135deg, #0071CE 0%, #005B9E 100%);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 113, 206, 0.15);
}

.leaderboard-header-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.leaderboard-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
}

.leaderboard-title-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

.leaderboard-subtitle {
  font-size: 1.1rem;
  margin: 0;
  opacity: 0.9;
  font-weight: 400;
}

.leaderboard-header-actions {
  margin-top: 1rem;
}

.ranking-type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  backdrop-filter: blur(10px);
}

.ranking-type-label {
  font-size: 0.9rem;
  opacity: 0.9;
}

.ranking-type-value {
  font-weight: 600;
  font-size: 1rem;
}

/* Contest Header Styles */
.contest-header {
  position: relative;
}

.breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: white;
}

.breadcrumb-icon {
  width: 1rem;
  height: 1rem;
}

.breadcrumb-separator {
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0.25rem;
}

.breadcrumb-current {
  color: white;
  font-weight: 500;
}

/* Filter Bar Styles */
.leaderboard-filter-bar {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-section-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
}

.filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  align-items: end;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
}

.filter-select {
  padding: 0.75rem;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: white;
  font-size: 0.9rem;
  color: #374151;
  transition: all 0.2s ease;
}

.filter-select:focus {
  outline: none;
  border-color: #0071CE;
  box-shadow: 0 0 0 3px rgba(0, 113, 206, 0.1);
}

.filter-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.filter-btn-apply {
  background: #0071CE;
  color: white;
}

.filter-btn-apply:hover {
  background: #005B9E;
  transform: translateY(-1px);
}

.filter-btn-reset {
  background: #F3F4F6;
  color: #6B7280;
}

.filter-btn-reset:hover {
  background: #E5E7EB;
  color: #374151;
}

.filter-btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Ranking Stats Styles */
.ranking-stats-section {
  margin-bottom: 2rem;
}

.ranking-stats-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
}

.ranking-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.ranking-stat-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ranking-stat-card:hover {
  border-color: #0071CE;
  box-shadow: 0 4px 12px rgba(0, 113, 206, 0.15);
  transform: translateY(-2px);
}

.ranking-stat-icon {
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #0071CE, #005B9E);
  color: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ranking-stat-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.ranking-stat-content {
  flex: 1;
}

.ranking-stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

.ranking-stat-label {
  font-size: 0.9rem;
  color: #6B7280;
  font-weight: 500;
  margin-top: 0.25rem;
}

/* Leaderboard Table Styles */
.leaderboard-table-container {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.leaderboard-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  background: #F9FAFB;
  border-bottom: 1px solid #E5E7EB;
}

.leaderboard-table-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.leaderboard-table-info {
  font-size: 0.9rem;
  color: #6B7280;
}

.leaderboard-table-wrapper {
  overflow-x: auto;
}

.leaderboard-table {
  width: 100%;
  border-collapse: collapse;
}

.leaderboard-table th {
  background: #F9FAFB;
  padding: 1rem;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #E5E7EB;
}

.leaderboard-table td {
  padding: 1rem;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.leaderboard-row {
  transition: background-color 0.2s ease;
}

.leaderboard-row:hover {
  background: #F9FAFB;
}

/* Rank Cell Styles */
.rank-cell {
  width: 80px;
}

.rank-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-weight: 600;
  width: fit-content;
}

.rank-badge.rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #B45309;
}

.rank-badge.rank-2 {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color: #374151;
}

.rank-badge.rank-3 {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  color: white;
}

.rank-badge.rank-other {
  background: #F3F4F6;
  color: #6B7280;
}

.rank-icon {
  width: 1rem;
  height: 1rem;
}

.rank-number {
  font-size: 0.9rem;
}

/* Participant Cell Styles */
.participant-cell {
  min-width: 200px;
}

.participant-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.participant-link:hover .participant-name {
  color: #0071CE;
}

.participant-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.participant-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: linear-gradient(135deg, #0071CE, #005B9E);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.participant-details {
  flex: 1;
  min-width: 0;
}

.participant-name {
  font-weight: 500;
  color: #111827;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.participant-phone {
  font-size: 0.8rem;
  color: #6B7280;
  margin-top: 0.25rem;
}

/* Metric Cell Styles */
.metric-cell {
  min-width: 120px;
}

.primary-metric {
  text-align: center;
}

.metric-value {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0071CE;
}

.metric-label {
  display: block;
  font-size: 0.75rem;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* Accuracy Cell Styles */
.accuracy-cell {
  min-width: 100px;
}

.accuracy-display {
  text-align: center;
}

.accuracy-percentage {
  font-size: 1rem;
  font-weight: 600;
  color: #059669;
}

.accuracy-fraction {
  font-size: 0.8rem;
  color: #6B7280;
  margin-top: 0.25rem;
}

/* Response Cell Styles */
.responses-cell,
.quizzes-cell,
.time-cell {
  text-align: center;
  font-weight: 500;
  color: #374151;
}

.quizzes-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.quiz-count {
  font-size: 1rem;
  font-weight: 600;
  color: #059669;
}

.contest-count {
  font-size: 0.75rem;
  color: #6B7280;
}

.avg-time {
  font-size: 0.9rem;
  color: #6B7280;
}

/* Actions Cell Styles */
.actions-cell {
  width: 60px;
  text-align: center;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  color: #6B7280;
  transition: all 0.2s ease;
  text-decoration: none;
}

.action-btn:hover {
  background: #F3F4F6;
  color: #0071CE;
  transform: scale(1.1);
}

.action-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Empty State Styles */
.leaderboard-empty-state {
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: #9CA3AF;
  margin: 0 auto 1.5rem;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #374151;
  margin: 0 0 1rem 0;
}

.empty-state-text {
  font-size: 1rem;
  color: #6B7280;
  margin: 0 0 2rem 0;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #0071CE;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.empty-state-btn:hover {
  background: #005B9E;
  transform: translateY(-1px);
}

/* Contest Specific Styles */
.contest-filter-bar {
  border-left: 4px solid #0071CE;
}

.contest-stats .ranking-stats-title {
  color: #0071CE;
}

.contest-table .leaderboard-table-header {
  background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
}

.contest-empty-state {
  border-left: 4px solid #0071CE;
}

/* Responsive Design */
@media (max-width: 768px) {
  .leaderboard-header {
    padding: 1.5rem;
  }
  
  .leaderboard-title {
    font-size: 1.5rem;
  }
  
  .leaderboard-subtitle {
    font-size: 1rem;
  }
  
  .filter-row {
    grid-template-columns: 1fr;
  }
  
  .filter-actions {
    flex-direction: column;
  }
  
  .ranking-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .leaderboard-table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .leaderboard-table {
    font-size: 0.85rem;
  }
  
  .leaderboard-table th,
  .leaderboard-table td {
    padding: 0.75rem 0.5rem;
  }
  
  .participant-info {
    gap: 0.5rem;
  }
  
  .participant-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.8rem;
  }
  
  .breadcrumb-nav {
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .leaderboard-table th:nth-child(n+5),
  .leaderboard-table td:nth-child(n+5) {
    display: none;
  }
  
  .ranking-type-indicator {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
  }
  
  .empty-state-icon {
    width: 3rem;
    height: 3rem;
  }
  
  .empty-state-title {
    font-size: 1.25rem;
  }
  
  .empty-state-text {
    font-size: 0.9rem;
  }
} 
/* Participants Styles */

/* Participant List Header */
.participant-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.participant-list-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.participant-list-actions {
  display: flex;
  gap: 1rem;
}

.participant-stats-summary {
  display: flex;
  gap: 2rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

/* Participant Search Bar */
.participant-search-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  align-items: flex-end;
  flex-wrap: wrap;
}

.search-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.search-label,
.filter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
}

.search-input,
.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.search-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

.search-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.search-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.search-btn:hover {
  background: var(--primary-color-hover);
  transform: translateY(-1px);
}

.search-btn-reset {
  background: var(--color-gray-600);
}

.search-btn-reset:hover {
  background: var(--color-gray-700);
}

.search-btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Participants Table */
.participants-table {
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.participants-table-header {
  background: var(--color-gray-50);
}

.participants-table-header th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-gray-700);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-gray-200);
}

.participants-table tbody tr {
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color 0.2s ease;
}

.participants-table tbody tr:hover {
  background: var(--color-gray-50);
}

.participants-table tbody tr:last-child {
  border-bottom: none;
}

.participants-table td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
}

/* Participant Table Cells */
.participant-name {
  font-weight: 600;
}

.participant-name-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.participant-name-link:hover {
  color: var(--primary-color);
}

.participant-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.participant-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background: var(--primary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
}

.participant-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.participant-details .name {
  font-weight: 600;
  color: var(--color-gray-900);
}

.participant-details .join-date {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.participant-phone {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.phone-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.phone-toggle-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
}

.phone-toggle-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.participant-performance {
  font-size: 0.875rem;
}

.performance-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.performance-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.performance-value {
  font-weight: 700;
  color: var(--color-gray-900);
}

.performance-label {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.participant-activity {
  font-size: 0.875rem;
}

.activity-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.activity-badge.activity-active {
  background: #10B981;
  color: white;
}

.activity-badge.activity-inactive {
  background: var(--color-gray-400);
  color: white;
}

.activity-details {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.participant-contests {
  font-size: 0.875rem;
}

.contest-count {
  font-weight: 700;
  color: var(--color-gray-900);
}

.contest-label {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  margin-left: 0.25rem;
}

.participant-last-active {
  font-size: 0.875rem;
}

.last-active-date {
  font-weight: 600;
  color: var(--color-gray-900);
  display: block;
}

.last-active-full {
  font-size: 0.75rem;
  color: var(--color-gray-600);
}

.never-active {
  color: var(--color-gray-500);
  font-style: italic;
}

.participant-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.participant-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.participant-action-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  transform: translateY(-1px);
}

.participant-action-icon {
  width: 1rem;
  height: 1rem;
}

/* Empty State */
.participant-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--color-gray-400);
  margin-bottom: 1.5rem;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  color: var(--color-gray-600);
  margin-bottom: 2rem;
  max-width: 400px;
  line-height: 1.6;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.empty-state-btn:hover {
  background: var(--primary-color-hover);
  transform: translateY(-1px);
}

/* Participant Show Page */
.participant-show-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
}

.participant-show-header-left {
  flex: 1;
}

.participant-show-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.participant-show-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.breadcrumb-link {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: var(--primary-color-hover);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-gray-400);
}

.breadcrumb-current {
  color: var(--color-gray-600);
  font-weight: 500;
}

.participant-show-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.participant-status-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
}

.participant-status-badge.status-active {
  background: #D1FAE5;
  color: #065F46;
}

.participant-status-badge.status-inactive {
  background: #F3F4F6;
  color: #6B7280;
}

.status-icon {
  width: 1rem;
  height: 1rem;
}

/* Participant Details Container */
.participant-details-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 2rem;
}

.participant-secondary-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Participant Info Card */
.participant-info-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.participant-info-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.participant-info-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

.participant-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.participant-info-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.participant-info-value {
  font-size: 1rem;
  color: var(--color-gray-900);
  margin: 0;
}

.phone-full-display {
  font-family: monospace;
  font-weight: 600;
}

.phone-masked-display {
  font-family: monospace;
  color: var(--color-gray-600);
}

.relative-time {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  display: block;
  margin-top: 0.25rem;
}

.no-activity {
  color: var(--color-gray-500);
  font-style: italic;
}

/* Performance Stats Card */
.performance-stats-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.performance-stats-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.performance-stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.stat-card {
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  transition: transform 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
}

.stat-card-primary {
  background: linear-gradient(135deg, var(--primary-color), #0ea5e9);
  color: white;
}

.stat-card-secondary {
  background: linear-gradient(135deg, #10B981, #059669);
  color: white;
}

.stat-card-accent {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: white;
}

.stat-card-neutral {
  background: linear-gradient(135deg, #6B7280, #4B5563);
  color: white;
}

.stat-card-info {
  background: linear-gradient(135deg, #8B5CF6, #7C3AED);
  color: white;
}

.stat-card .stat-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-card .stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 0.25rem;
}

.stat-card .stat-description {
  font-size: 0.75rem;
  opacity: 0.8;
  line-height: 1.3;
}

/* Contests Participated Card */
.contests-participated-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contests-participated-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.contests-participated-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contest-participated-item {
  padding: 1.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.contest-participated-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 163, 224, 0.1);
}

.contest-participated-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.contest-participated-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.contest-participated-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.contest-participated-link:hover {
  background: var(--primary-color-hover);
}

.contest-participated-details {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.contest-participated-stats {
  display: flex;
  gap: 1rem;
}

.contest-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contest-stat-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-gray-900);
  line-height: 1;
}

.contest-stat-label {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  margin-top: 0.25rem;
}

/* Recent Responses Card */
.recent-responses-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.recent-responses-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.recent-responses-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.response-item {
  padding: 1.5rem;
  border: 1px solid var(--color-gray-200);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.response-item:hover {
  border-color: var(--primary-color);
  box-shadow: 0 2px 8px rgba(0, 163, 224, 0.1);
}

.response-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  gap: 1rem;
}

.response-quiz-info {
  flex: 1;
}

.response-contest-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 0.25rem 0;
}

.response-quiz-details {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.response-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.response-correctness {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.response-correctness.response-correct {
  background: #D1FAE5;
  color: #065F46;
}

.response-correctness.response-incorrect {
  background: #FEE2E2;
  color: #991B1B;
}

.response-icon {
  width: 1rem;
  height: 1rem;
}

.response-time {
  font-size: 0.75rem;
  color: var(--color-gray-600);
  font-weight: 600;
}

.response-content {
  margin-bottom: 1rem;
}

.response-question,
.response-answer,
.response-correct-answer {
  margin-bottom: 1rem;
}

.response-question-title,
.response-answer-title,
.response-correct-answer-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin: 0 0 0.5rem 0;
}

.response-question-text,
.response-answer-text,
.response-correct-answer-text {
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.5;
}

.response-answer-text.response-answer-correct {
  color: #059669;
  font-weight: 600;
}

.response-answer-text.response-answer-incorrect {
  color: #DC2626;
  font-weight: 600;
}

.response-correct-answer-text {
  color: #059669;
  font-weight: 600;
}

.response-timestamp {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
  .participant-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-actions {
    justify-content: stretch;
  }

  .search-btn {
    flex: 1;
    justify-content: center;
  }

  .participants-table {
    font-size: 0.875rem;
  }

  .participants-table th,
  .participants-table td {
    padding: 0.75rem 1rem;
  }

  .participant-show-header {
    flex-direction: column;
  }

  .participant-show-actions {
    align-self: stretch;
  }

  .participant-details-container {
    grid-template-columns: 1fr;
  }

  .participant-info-grid {
    grid-template-columns: 1fr;
  }

  .performance-stats-grid {
    grid-template-columns: 1fr;
  }

  .contest-participated-header {
    flex-direction: column;
    align-items: stretch;
  }

  .contest-participated-stats {
    justify-content: space-around;
  }

  .response-header {
    flex-direction: column;
    align-items: stretch;
  }

  .response-status {
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
  }
} 
/* Prizes Styles */

/* Prize List Header */
.prize-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.prize-list-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0;
}

.prize-list-actions {
  display: flex;
  gap: 1rem;
}

/* Prize Search Bar */
.prize-search-bar {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  align-items: flex-end;
  flex-wrap: wrap;
}

.search-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 200px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 150px;
}

.search-label,
.filter-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
}

.search-input,
.filter-select {
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.search-input:focus,
.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

.search-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

.search-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.search-btn:hover {
  background: var(--primary-color-hover);
  transform: translateY(-1px);
}

.search-btn-reset {
  background: var(--color-gray-600);
}

.search-btn-reset:hover {
  background: var(--color-gray-700);
}

.search-btn-icon {
  width: 1rem;
  height: 1rem;
}

/* Prizes Table */
.prizes-table {
  width: 100%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.prizes-table-header {
  background: var(--color-gray-50);
}

.prizes-table-header th {
  padding: 1rem 1.5rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-gray-700);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-gray-200);
}

.prizes-table tbody tr {
  border-bottom: 1px solid var(--color-gray-200);
  transition: background-color 0.2s ease;
}

.prizes-table tbody tr:hover {
  background: var(--color-gray-50);
}

.prizes-table tbody tr:last-child {
  border-bottom: none;
}

.prizes-table td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
}

.prize-name {
  font-weight: 600;
}

.prize-name-link {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.prize-name-link:hover {
  color: var(--primary-color-hover);
  text-decoration: underline;
}

.prize-contest {
  font-size: 0.875rem;
}

.contest-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--primary-color);
  color: white;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.no-contest {
  color: var(--color-gray-500);
  font-style: italic;
}

.prize-criteria {
  font-size: 0.875rem;
}

.criteria-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.criteria-most-correct {
  background: #10B981;
  color: white;
}

.criteria-highest-percentage {
  background: #3B82F6;
  color: white;
}

.criteria-most-questions-answered {
  background: #F59E0B;
  color: white;
}

.criteria-fastest-average-time {
  background: #EF4444;
  color: white;
}

.criteria-participation {
  background: #8B5CF6;
  color: white;
}

.description-preview {
  color: var(--color-gray-600);
  font-size: 0.875rem;
  line-height: 1.4;
}

.prize-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.prize-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: var(--color-gray-100);
  color: var(--color-gray-600);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.prize-action-btn:hover {
  background: var(--color-gray-200);
  color: var(--color-gray-700);
  transform: translateY(-1px);
}

.prize-action-icon {
  width: 1rem;
  height: 1rem;
}

/* Empty State */
.prize-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--color-gray-400);
  margin-bottom: 1.5rem;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  color: var(--color-gray-600);
  margin-bottom: 2rem;
  max-width: 400px;
  line-height: 1.6;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.empty-state-btn:hover {
  background: var(--primary-color-hover);
  transform: translateY(-1px);
}

/* Prize Show Page */
.prize-show-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 1rem;
}

.prize-show-header-left {
  flex: 1;
}

.prize-show-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
}

.prize-show-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.breadcrumb-link {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: var(--primary-color-hover);
  text-decoration: underline;
}

.breadcrumb-separator {
  color: var(--color-gray-400);
}

.breadcrumb-current {
  color: var(--color-gray-600);
  font-weight: 500;
}

.prize-show-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Prize Details Container */
.prize-details-container {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .prize-details-container {
    grid-template-columns: 2fr 1fr;
  }
}

/* Prize Info Card */
.prize-info-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.prize-info-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.prize-info-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

.prize-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prize-info-item-full {
  grid-column: span 2;
}

.prize-info-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.prize-info-value {
  font-size: 1rem;
  color: var(--color-gray-900);
  margin: 0;
}

.prize-description-full {
  line-height: 1.6;
  color: var(--color-gray-700);
}

/* Contest Info Card */
.contest-info-card {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contest-info-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0 0 1.5rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.contest-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  gap: 1rem;
}

.contest-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.contest-link-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--primary-color);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.contest-link-btn:hover {
  background: var(--primary-color-hover);
  transform: translateY(-1px);
}

.contest-details {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.contest-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contest-detail-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contest-detail-value {
  font-size: 0.875rem;
  color: var(--color-gray-900);
  margin: 0;
  font-weight: 500;
}

/* Prize Form */
.prize-form {
  max-width: 600px;
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-gray-200);
}

.form-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0;
}

.form-error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.form-error h3 {
  color: #DC2626;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.form-error-list {
  margin: 0;
  padding-left: 1rem;
}

.form-error-item {
  color: #DC2626;
  font-size: 0.875rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.1);
}

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

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-200);
}

.btn-cancel {
  padding: 0.75rem 1.5rem;
  background: white;
  color: var(--color-gray-600);
  border: 2px solid var(--color-gray-300);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-cancel:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
  color: var(--color-gray-700);
}

.btn-submit {
  padding: 0.75rem 1.5rem;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-submit:hover {
  background: var(--primary-color-hover);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 768px) {
  .prize-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-actions {
    justify-content: stretch;
  }

  .search-btn {
    flex: 1;
    justify-content: center;
  }

  .prizes-table {
    font-size: 0.875rem;
  }

  .prizes-table th,
  .prizes-table td {
    padding: 0.75rem 1rem;
  }

  .prize-show-header {
    flex-direction: column;
  }

  .prize-show-actions {
    align-self: stretch;
  }

  .prize-info-grid {
    grid-template-columns: 1fr;
  }

  .prize-info-item-full {
    grid-column: span 1;
  }

  .form-actions {
    flex-direction: column;
  }
} 
/* Question Detail Styles */

.question-detail-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.question-detail-section {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.question-detail-title {
  padding: 1rem 1.5rem;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray-900);
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.question-detail-content {
  padding: 1.5rem;
}

.question-body {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.meta-label {
  font-weight: 500;
  color: var(--gray-700);
}

.meta-value {
  color: var(--gray-900);
}

.meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Answer options */
.answer-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.answer-option {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: var(--gray-50);
  border-radius: 0.5rem;
  border: 1px solid var(--gray-200);
}

.answer-correct {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
}

.answer-marker {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--gray-200);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.answer-correct .answer-marker {
  background-color: rgb(16, 185, 129);
  color: var(--white);
}

.answer-letter {
  font-weight: 600;
  font-size: 0.875rem;
}

.answer-text {
  flex: 1;
  font-size: 1rem;
  color: var(--gray-900);
}

.answer-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgba(16, 185, 129, 0.1);
  border-radius: 0.375rem;
  color: rgb(6, 95, 70);
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: 1rem;
}

.answer-status-icon {
  width: 1rem;
  height: 1rem;
}

/* Responsive styles */
@media (max-width: 768px) {
  .question-bank-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .question-bank-actions {
    width: 100%;
  }
  
  .meta-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  
  .answer-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  
  .answer-status {
    margin-left: 0;
  }
} 
/* Question Form Styles */

.question-form {
  max-width: 100%;
}

.form-section {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.form-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-200);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  background-color: var(--white);
  color: var(--gray-900);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

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

.form-hint {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.form-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 0.5rem;
  background-color: var(--gray-200);
  border-radius: 1rem;
  margin: 1rem 0;
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.form-range::-moz-range-thumb {
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--primary-color);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.1s ease;
  border: none;
}

.form-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.form-range::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.range-values {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.range-values span:nth-child(2) {
  font-weight: 600;
  color: var(--primary-color);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
}

.checkbox-item input[type="checkbox"] {
  margin-right: 0.5rem;
}

.checkbox-item label {
  font-size: 0.875rem;
  cursor: pointer;
}

.answers-container {
  margin-bottom: 1rem;
}

.answers-list {
  margin-bottom: 1rem;
}

.answer-item {
  background-color: var(--gray-50);
  border-radius: 0.375rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

.answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  margin-right: 0.5rem;
}

.form-check-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.answer-remove-btn {
  padding: 0.25rem;
  background: none;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.answer-remove-btn:hover {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.answer-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.answer-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--gray-100);
  border: 1px dashed var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-700);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.answer-add-btn:hover {
  background-color: var(--gray-200);
  border-color: var(--gray-400);
  color: var(--gray-900);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.form-submit-btn {
  padding: 0.75rem 1.5rem;
  background-color: var(--primary-color);
  color: var(--white);
  border: none;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.form-submit-btn:hover {
  background-color: var(--primary-color-dark);
}

.form-cancel-btn {
  padding: 0.75rem 1.5rem;
  background-color: var(--white);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.form-cancel-btn:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
} 
/* Questions Module Styles */

/* Question Bank Header */
.question-bank-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.question-bank-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.question-bank-actions {
  display: flex;
  gap: 0.75rem;
}

/* Question Search & Filter Bar */
.question-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.filter-group {
  flex: 1;
  min-width: 180px;
}

.filter-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
}

.filter-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.filter-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.filter-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
  background-color: var(--white);
}

.filter-select:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.filter-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

.filter-btn-reset {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.filter-btn-reset:hover {
  background-color: var(--gray-300);
}

.filter-btn-icon {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

/* Question List */
.question-list {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.question-list-header {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr auto;
  padding: 0.75rem 1rem;
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.question-header-cell {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.question-list-body {
  /* Removed max-height and overflow-y for better UX with pagination */
}

.question-item {
  display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr auto;
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  transition: background-color 0.2s ease;
}

.question-item:hover {
  background-color: var(--gray-50);
}

.question-item:last-child {
  border-bottom: none;
}

.question-list .question-content {
  overflow: hidden;
  word-wrap: break-word;
  hyphens: auto;
  color: var(--gray-900);
  font-weight: 500;
  line-height: 1.4;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  columns: unset !important;
  column-count: unset !important;
  column-width: unset !important;
  column-gap: unset !important;
  column-rule: unset !important;
  column-fill: unset !important;
  column-span: unset !important;
  text-align: left;
  display: block !important;
  grid-template-columns: unset !important;
  grid-gap: unset !important;
  padding: 0;
}

.question-categories,
.question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.question-category,
.question-tag {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.question-category {
  background-color: rgba(0, 163, 224, 0.1);
  color: var(--primary-color-dark);
  padding: 0.1rem 0.5rem;
  line-height: 1;
  vertical-align: middle;
}

.question-tag {
  background-color: var(--gray-100);
  color: var(--gray-700);
}

.question-boost {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.boost-high {
  background-color: rgba(16, 185, 129, 0.1);
  color: rgb(6, 95, 70);
}

.boost-medium {
  background-color: rgba(245, 158, 11, 0.1);
  color: rgb(146, 64, 14);
}

.boost-low {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(153, 27, 27);
}

.question-date {
  font-size: 0.75rem;
  color: var(--gray-500);
  text-align: center;
  margin-right: auto;
  margin-left: auto;
}

.question-actions {
  display: flex;
  gap: 0.5rem;
}

.question-action-btn {
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-action-btn:hover {
  background-color: var(--gray-100);
  color: var(--gray-800);
}

.question-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Empty state */
.question-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--gray-300);
  margin-bottom: 1rem;
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--gray-500);
  max-width: 24rem;
  margin-bottom: 1.5rem;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.empty-state-btn:hover {
  background-color: var(--primary-color-dark);
}

/* Pagination */
.question-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid var(--gray-200);
}

.pagination-info {
  font-size: 0.875rem;
  color: var(--gray-600);
}

.pagination-controls {
  display: flex;
  gap: 0.5rem;
}

.pagination-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pagination-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.pagination-btn:disabled {
  border-color: var(--gray-200);
  color: var(--gray-400);
  cursor: not-allowed;
}

.pagination-btn-active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.pagination-btn-active:hover {
  background-color: var(--primary-color-dark);
  color: var(--white);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .question-list-header,
  .question-item {
    grid-template-columns: 2fr 1fr 1fr auto;
  }

  .question-list-header div:nth-child(3),
  .question-item div:nth-child(3) {
    display: none;
  }
}

@media (max-width: 768px) {
  .question-list-header,
  .question-item {
    grid-template-columns: 1fr auto;
  }

  .question-list-header div:nth-child(2),
  .question-list-header div:nth-child(4),
  .question-item div:nth-child(2),
  .question-item div:nth-child(4) {
    display: none;
  }
  
  .question-bank-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .question-bank-actions {
    width: 100%;
  }
} 
/* Quiz List Styles */
.quiz-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.quiz-list-title {
  font-size: 2rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.quiz-list-actions {
  display: flex;
  align-items: center;
}

.quiz-search-form {
  display: flex;
}

.search-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 250px;
}

.contest-filter {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 150px;
}

.search-button {
  padding: 8px 16px;
  background-color: #2995CC;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.search-button:hover {
  background-color: #1f7aa3;
}

/* Quiz Grid Styles */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
  margin-top: 20px;
}

/* Quiz Card Styles */
.quiz-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.quiz-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.quiz-card-header {
  padding: 15px 20px;
  background-color: #2995CC;
  color: white;
}

.quiz-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 10px 0;
}

.quiz-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.quiz-card-content {
  padding: 20px;
}

.quiz-info-group {
  margin-bottom: 12px;
}

.quiz-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4px;
}

.quiz-value {
  font-size: 1rem;
}

.language-badges, .category-badges, .tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.language-badge {
  background-color: #6c5ce7;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.category-badge {
  background-color: #00b894;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.tag-badge {
  background-color: #0984e3;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.quiz-card-footer {
  padding: 15px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}

.quiz-details-link {
  padding: 8px 16px;
  background-color: #2995CC;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.quiz-details-link:hover {
  background-color: #1f7aa3;
  text-decoration: none;
}

/* Quiz Details Styles */
.quiz-header {
  margin-bottom: 2rem;
}

.breadcrumbs {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

.breadcrumbs a {
  color: #2995CC;
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.quiz-date {
  font-size: 1rem;
  color: #666;
  font-weight: normal;
  margin-left: 10px;
}

.quiz-details-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 30px;
}

.quiz-details-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: fit-content;
}

.quiz-details-section {
  
  border-bottom: 1px solid #eee;
}

.quiz-details-section:last-child {
  border-bottom: none;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
}

.info-group {
  margin-bottom: 10px;
}

.info-label {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 4px;
}

.info-value {
  font-size: 1rem;
  font-weight: 500;
}

.languages-list, .categories-list, .tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.language-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.language-position {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
}

.statistics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  text-align: center;
}

.statistic-item {
  padding: 15px 10px;
  border-radius: 8px;
  background-color: #f8f9fa;
}

.statistic-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2995CC;
}

.statistic-label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

/* Quiz Instances Styles */
.quiz-instances-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.filter-controls {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.date-filter, .language-filter {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 150px;
}

.date-header {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 20px 0 15px 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.instances-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 15px;
  margin-bottom: 30px;
}

/* Instance Card Styles */
.instance-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s;
}

.instance-card:hover {
  transform: translateY(-5px);
}

.instance-header {
  padding: 12px 15px;
  background-color: #2995CC;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instance-language {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.instance-time {
  font-size: 0.9rem;
}

.instance-content {
  padding: 15px;
}

.instance-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.info-item {
  margin-bottom: 8px;
}

.password-display {
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 1px;
}

.status-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.status-badge.upcoming {
  background-color: #0984e3;
  color: white;
}

.status-badge.active {
  background-color: #00b894;
  color: white;
}

.status-badge.completed {
  background-color: #6c5ce7;
  color: white;
}

.instance-footer {
  padding: 12px 15px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: center;
}

.view-questions-btn {
  padding: 8px 16px;
  background-color: #2995CC;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.view-questions-btn:hover {
  background-color: #1f7aa3;
  text-decoration: none;
  color: white;
}

/* Questions List Styles */
.questions-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

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

.questions-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2995CC;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
}

.questions-actions {
  display: flex;
  gap: 10px;
}

.back-button {
  padding: 8px 16px;
  background-color: #6c5ce7;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.back-button:hover {
  background-color: #5b4cc4;
  text-decoration: none;
  color: white;
}

/* Question Item Styles */
.question-item {
  background-color: white;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}

.question-header {
  padding: 12px 15px;
  background-color: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
}

.question-number {
  font-size: 1rem;
  font-weight: 600;
  color: #333;
}

.question-actions {
  display: flex;
  gap: 10px;
}

.replace-question-btn, .refresh-question-btn {
  padding: 6px 12px;
  background-color: #2995CC;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.replace-question-btn:hover, .refresh-question-btn:hover {
  background-color: #1f7aa3;
  color: white;
  text-decoration: none;
}

.question-content {
  padding: 15px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

.question-body {
  padding-right: 20px;
  border-right: 1px solid #eee;
}

.question-text {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0 0 15px 0;
  color: #333;
}

.question-image {
  margin: 15px 0;
}

.question-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.question-categories, .question-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.boost-score {
  margin-left: auto;
  background-color: #f8f9fa;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.boost-label {
  color: #666;
}

.boost-value {
  font-weight: 600;
  color: #2995CC;
}

.question-answers {
  padding-left: 0;
}

.answers-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 15px 0;
  color: #333;
}

.answers-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.answer-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.answer-item.correct {
  background-color: rgba(0, 184, 148, 0.1);
  border-color: #00b894;
}

.answer-status {
  font-size: 1.2rem;
}

.correct-icon {
  color: #00b894;
}

.incorrect-icon {
  color: #ff7675;
}

.answer-content {
  flex: 1;
}

.answer-text {
  font-size: 1rem;
  margin-bottom: 8px;
}

.answer-image {
  margin-top: 8px;
}

.answer-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Modal Styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.show {
  display: block !important;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 1.75rem;
  pointer-events: none;
}

.modal-lg {
  max-width: 800px;
  margin: 1.75rem auto;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  pointer-events: auto;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
  font-size: 1.25rem;
  font-weight: 500;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  opacity: 0.5;
  cursor: pointer;
}

.close:hover {
  opacity: 0.75;
}

body.modal-open {
  overflow: hidden;
}

.search-section {
  margin-bottom: 20px;
}

.search-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  margin-bottom: 15px;
}

.filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-field label {
  font-size: 0.9rem;
  color: #666;
}

.checkbox-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.select2-container {
  width: 100% !important;
}

.search-actions {
  display: flex;
  justify-content: flex-end;
}

.results-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #2995CC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.results-empty {
  padding: 20px;
  text-align: center;
  color: #666;
}

.search-result-item {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background-color: #f8f9fa;
}

.search-result-item.selected {
  background-color: rgba(41, 149, 193, 0.1);
  border-color: #2995CC;
}

.result-content {
  flex: 1;
}

.result-body h4 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 10px 0;
  color: #333;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.result-categories, .result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.result-boost {
  margin-left: auto;
  background-color: #f8f9fa;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
}

.result-selection {
  margin-left: 15px;
  display: flex;
  align-items: center;
}

.select-question-btn {
  padding: 6px 12px;
  background-color: #2995CC;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.select-question-btn:hover {
  background-color: #1f7aa3;
}

.replace-button {
  padding: 8px 16px;
  background-color: #2995CC;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.replace-button:hover:not(:disabled) {
  background-color: #1f7aa3;
}

.replace-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.cancel-button {
  padding: 8px 16px;
  background-color: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #5a6268;
}

/* Quiz Show Page New Layout */
.quiz-content-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Quiz Tabs Styles */
.quiz-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 2rem;
  border-bottom: 2px solid #E5E7EB;
}

.quiz-tab {
  padding: 12px 24px;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  border-bottom: 3px solid transparent;
}

.quiz-tab:hover {
  color: #2995CC;
}

.quiz-tab.active {
  color: #2995CC;
  border-bottom-color: #2995CC;
}

/* Tab Content */
.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Filter Controls Update */
.filter-controls {
  display: flex;
  gap: 20px;
  margin-bottom: 2rem;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.filter-group label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.filter-select {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 0.875rem;
  min-width: 150px;
  background: white;
}

/* Quiz Instances Content */
.quiz-instances-content {
  margin-top: 1rem;
}

.date-header {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 2rem 0 1.5rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #E5E7EB;
}

.instances-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 3rem;
}

/* New Instance Card Styles */
.instance-card-new {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}

.instance-card-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.instance-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--card-color);
}

.instance-card-header {
  padding: 20px;
  background: var(--card-light);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

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

.language-flag {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--card-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.language-code {
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
}

.language-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.language-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

.instance-time {
  font-size: 0.875rem;
  color: #6B7280;
  font-weight: 500;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.upcoming {
  background: #DBEAFE;
  color: #1E40AF;
}

.status-indicator.upcoming .status-dot {
  background: #3B82F6;
}

.status-indicator.active {
  background: #DCFCE7;
  color: #166534;
}

.status-indicator.active .status-dot {
  background: #22C55E;
}

.status-indicator.completed {
  background: #F3F4F6;
  color: #374151;
}

.status-indicator.completed .status-dot {
  background: #6B7280;
}

.instance-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row {
  display: flex;
  align-items: center;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.info-icon {
  font-size: 1.25rem;
  width: 24px;
  text-align: center;
}

.info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.password-code {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: #F3F4F6;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
  display: inline-block;
}

.instance-card-footer {
  padding: 20px;
  border-top: 1px solid #F3F4F6;
}

.view-questions-btn-new {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--card-color);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.view-questions-btn-new:hover {
  background: color-mix(in srgb, var(--card-color) 85%, black);
  transform: translateY(-1px);
  text-decoration: none;
  color: white;
}

.btn-icon {
  width: 16px;
  height: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .quiz-content-container {
    padding: 0 1rem;
  }
  
  .instances-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .filter-controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .quiz-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .quiz-tabs::-webkit-scrollbar {
    display: none;
  }
}

/* Questions Page Improvements */
.questions-page-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Questions Header with Stats Cards */
.questions-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 2rem;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  flex: 1;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.stat-card.primary::before { background: #3B82F6; }
.stat-card.secondary::before { background: #10B981; }
.stat-card.tertiary::before { background: #F59E0B; }
.stat-card.quaternary::before { background: #8B5CF6; }

.stat-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--icon-bg, #F3F4F6);
}

.stat-card.primary .stat-icon { background: #DBEAFE; }
.stat-card.secondary .stat-icon { background: #D1FAE5; }
.stat-card.tertiary .stat-icon { background: #FEF3C7; }
.stat-card.quaternary .stat-icon { background: #EDE9FE; }

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 0.875rem;
  color: #6B7280;
  font-weight: 500;
}

.stat-card .password-display {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: #F3F4F6;
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 1px;
  font-size: 1.125rem;
}

.questions-actions {
  display: flex;
  align-items: flex-start;
}

.back-button-new {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #6B7280;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.back-button-new:hover {
  background: #374151;
  transform: translateY(-1px);
  text-decoration: none;
  color: white;
}

.back-button-new .btn-icon {
  width: 16px;
  height: 16px;
}

/* Empty State */
.empty-state-new {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.empty-state-new .empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.empty-state-new h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.empty-state-new p {
  color: #6B7280;
  font-size: 1rem;
}

/* Questions Content */
.questions-content {
  margin-top: 1rem;
}

.questions-page-container .questions-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  grid-template-columns: unset !important;
}

/* Question Card Styles */
.question-card-new {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}

.question-card-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.question-card-new::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--boost-color);
}

.question-card-header {
  padding: 24px;
  background: var(--boost-light);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.question-info {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
}

.question-number-badge {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--boost-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.question-number {
  color: white;
  font-weight: 700;
  font-size: 1rem;
}

.question-meta-header {
  flex: 1;
}

.question-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.boost-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.875rem;
}

.boost-label {
  color: #6B7280;
  font-weight: 500;
}

.boost-value {
  color: var(--boost-accent);
  font-weight: 700;
}

.question-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.replace-btn {
  background: #3B82F6;
  color: white;
}

.replace-btn:hover {
  background: #2563EB;
}

.random-btn {
  background: #10B981;
  color: white;
}

.random-btn:hover {
  background: #059669;
  text-decoration: none;
  color: white;
}

.action-btn .btn-icon {
  width: 14px;
  height: 14px;
}

.question-card-body {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Question Content Section */
.question-content-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-text-content {
  flex: 1;
}

.question-body {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
  line-height: 1.6;
}

.question-image-container {
  margin-top: 16px;
}

.question-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.question-badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badges-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-badge-new {
  background: #10B981;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-badge-new {
  background: #3B82F6;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Answers Section */
.answers-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.answers-header {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #E5E7EB;
}

.answers-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.answer-card {
  border: 2px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.answer-card.correct {
  border-color: #10B981;
  background: #ECFDF5;
}

.answer-card.incorrect {
  border-color: #EF4444;
  background: #FEF2F2;
}

.answer-card:hover {
  transform: translateX(4px);
}

.answer-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-bottom: 1px solid #E5E7EB;
}

.answer-card.correct .answer-header {
  background: #F0FDF4;
}

.answer-card.incorrect .answer-header {
  background: #FEF2F2;
}

.answer-letter {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #6B7280;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
}

.answer-card.correct .answer-letter {
  background: #10B981;
}

.answer-card.incorrect .answer-letter {
  background: #EF4444;
}

.answer-status-icon {
  width: 20px;
  height: 20px;
}

.check-icon {
  color: #10B981;
  width: 20px;
  height: 20px;
}

.x-icon {
  color: #EF4444;
  width: 20px;
  height: 20px;
}

.answer-content {
  padding: 16px;
}

.answer-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

.answer-image-container {
  margin-top: 12px;
}

.answer-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  max-height: 120px;
  object-fit: cover;
}

/* Responsive Design for Questions Page */
@media (max-width: 1200px) {
  .questions-page-container {
    padding: 0 1rem;
  }
  
  .question-card-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .questions-header {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .stat-card {
    padding: 16px;
  }
  
  .stat-value {
    font-size: 1.25rem;
  }
  
  .question-card-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .question-info {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .question-actions {
    justify-content: flex-end;
  }
  
  .questions-page-container .questions-grid {
    gap: 16px !important;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .questions-page-container .questions-grid {
    gap: 20px !important;
  }
}

@media (max-width: 480px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .question-card-new {
    margin: 0 -0.5rem;
  }
  
  .questions-page-container .question-card-compact {
    margin: 0 -0.5rem;
  }
  
  .answer-card:hover {
    transform: none;
  }
}

/* Compact Question Card Styles */
.questions-page-container .question-card-compact {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  margin-bottom: 24px;
}

.questions-page-container .question-card-compact:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.questions-page-container .question-card-compact::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--boost-color);
}

.question-card-header-compact {
  padding: 20px 24px;
  background: var(--boost-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E5E7EB;
}

.question-info-compact {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: 1;
}

.question-number-badge-compact {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--boost-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.question-number-compact {
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
}

.question-meta-compact {
  flex: 1;
}

.question-title-compact {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 2px 0;
}

.boost-indicator-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
}

.boost-label-compact {
  color: #6B7280;
  font-weight: 500;
}

.boost-value-compact {
  color: var(--boost-accent);
  font-weight: 700;
}

.question-actions-compact {
  display: flex;
  gap: 8px;
}

.action-btn-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.replace-btn-compact {
  background: #3B82F6;
  color: white;
}

.replace-btn-compact:hover {
  background: #2563EB;
}

.random-btn-compact {
  background: #10B981;
  color: white;
}

.random-btn-compact:hover {
  background: #059669;
  text-decoration: none;
  color: white;
}

.btn-icon-compact {
  width: 12px;
  height: 12px;
}

.question-card-body-compact {
  padding: 24px;
}

/* Question Text Section */
.question-text-section {
  margin-bottom: 24px;
}

.question-body-compact {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.question-image-container-compact {
  margin-top: 16px;
}

.question-image-compact {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  object-fit: cover;
}

/* Answers Section Compact */
.answers-section-compact {
  margin-bottom: 24px;
}

.answers-header-compact {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px 0;
}

.answers-list-compact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.answer-item-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.answer-item-compact.correct {
  background: #ECFDF5;
  border-color: #10B981;
}

.answer-item-compact.incorrect {
  background: #FEF2F2;
  border-color: #EF4444;
}

.answer-label-compact {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.875rem;
  color: white;
  flex-shrink: 0;
}

.answer-item-compact.correct .answer-label-compact {
  background: #10B981;
}

.answer-item-compact.incorrect .answer-label-compact {
  background: #EF4444;
}

.answer-text-compact {
  flex: 1;
  font-size: 0.9375rem;
  color: #374151;
  line-height: 1.4;
}

.answer-status-compact {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.check-icon-compact {
  color: #10B981;
  width: 20px;
  height: 20px;
}

.x-icon-compact {
  color: #EF4444;
  width: 20px;
  height: 20px;
}

.answer-image-container-compact {
  margin-left: 36px;
  margin-top: 8px;
}

.answer-image-compact {
  width: 100%;
  height: auto;
  border-radius: 6px;
  max-height: 100px;
  object-fit: cover;
}

/* Question Footer */
.question-footer-compact {
  padding-top: 20px;
  border-top: 1px solid #E5E7EB;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-section-compact {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-label-compact {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: fit-content;
}

.badges-list-compact {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-badge-compact {
  background: #10B981;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-badge-compact {
  background: #3B82F6;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Responsive Design for Compact Cards */
@media (max-width: 768px) {
  .question-card-header-compact {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 20px;
  }
  
  .question-info-compact {
    width: 100%;
  }
  
  .question-actions-compact {
    align-self: flex-end;
  }
  
  .question-card-body-compact {
    padding: 20px;
  }
  
  .footer-section-compact {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  .answer-item-compact {
    flex-wrap: wrap;
  }
  
  .answer-image-container-compact {
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .questions-page-container .question-card-compact {
    margin: 0 -0.5rem;
  }
  
  .question-card-header-compact {
    padding: 12px 16px;
  }
  
  .question-card-body-compact {
    padding: 16px;
  }
  
  .action-btn-compact {
    padding: 5px 8px;
    font-size: 0.75rem;
  }
  
  .btn-icon-compact {
    width: 10px;
    height: 10px;
  }
}

/* Modern Quizzes Index Page */
.quizzes-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  gap: 2rem;
}

.page-title-section {
  flex: 1;
}

.page-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 1.125rem;
  color: #6B7280;
  margin: 0;
}

.quizzes-stats-overview {
  display: flex;
  gap: 1rem;
}

.stat-card-small {
  background: white;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.stat-card-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-card-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.stat-card-small.primary::before { background: #3B82F6; }
.stat-card-small.secondary::before { background: #10B981; }
.stat-card-small.tertiary::before { background: #F59E0B; }

.stat-icon-small {
  font-size: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-card-small.primary .stat-icon-small { background: #DBEAFE; }
.stat-card-small.secondary .stat-icon-small { background: #D1FAE5; }
.stat-card-small.tertiary .stat-icon-small { background: #FEF3C7; }

.stat-content-small {
  flex: 1;
}

.stat-value-small {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 2px;
}

.stat-label-small {
  font-size: 0.75rem;
  color: #6B7280;
  font-weight: 500;
}

/* Modern Search and Controls */
.quizzes-controls {
  margin-bottom: 2rem;
}

.modern-search-form {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
}

.search-container {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-input-group {
  position: relative;
  flex: 1;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #6B7280;
}

.modern-search-input {
  width: 100%;
  padding: 12px 12px 12px 44px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 1rem;
  background: #FAFAFA;
  transition: all 0.2s ease;
}

.modern-search-input:focus {
  outline: none;
  border-color: #2995CC;
  background: white;
  box-shadow: 0 0 0 3px rgba(41, 149, 204, 0.1);
}

.filter-group-modern {
  display: flex;
  gap: 12px;
}

.modern-filter-select {
  padding: 12px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  min-width: 200px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modern-filter-select:focus {
  outline: none;
  border-color: #2995CC;
  box-shadow: 0 0 0 3px rgba(41, 149, 204, 0.1);
}

.modern-search-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #2995CC;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.modern-search-button:hover {
  background: #1f7aa3;
  transform: translateY(-1px);
}

.modern-search-button .btn-icon {
  width: 16px;
  height: 16px;
}

/* Modern Empty State */
.empty-state-modern {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
}

.empty-state-icon-large {
  font-size: 4rem;
  margin-bottom: 1.5rem;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
}

.empty-state-description {
  color: #6B7280;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.clear-filters-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #6B7280;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.clear-filters-btn:hover {
  background: #374151;
  text-decoration: none;
  color: white;
}

/* Modern Quiz Grid */
.quizzes-content {
  margin-top: 1rem;
}

.quizzes-grid-modern {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

/* Modern Quiz Card */
.quiz-card-modern {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #E5E7EB;
  overflow: hidden;
  transition: all 0.2s ease;
  position: relative;
}

.quiz-card-modern:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.quiz-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--theme-color);
}

.quiz-card-header-modern {
  padding: 24px;
  background: var(--theme-light);
  border-bottom: 1px solid #E5E7EB;
}

.quiz-header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.contest-info {
  flex: 1;
}

.contest-name {
  font-size: 1.375rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

.quiz-metadata {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metadata-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: #6B7280;
}

.metadata-icon {
  width: 14px;
  height: 14px;
}

.frequency-badge {
  padding: 6px 12px;
  background: var(--theme-color);
  color: white;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quiz-card-body-modern {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
}

.quiz-info-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row-modern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item-modern {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label-modern {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value-modern {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

.languages-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.languages-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.languages-list-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.language-badge-modern {
  background: #8B5CF6;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badges-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge-group-modern {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge-group-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badges-list-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-badge-modern {
  background: #10B981;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-badge-modern {
  background: #3B82F6;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}

.quiz-status-section {
  display: flex;
  align-items: center;
}

.status-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 100px;
}

.status-item {
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.status-item.completed {
  background: #F3F4F6;
  border: 1px solid #D1D5DB;
}

.status-item.active {
  background: #DCFCE7;
  border: 1px solid #10B981;
}

.status-item.upcoming {
  background: #DBEAFE;
  border: 1px solid #3B82F6;
}

.status-value {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.status-item.completed .status-value { color: #374151; }
.status-item.active .status-value { color: #059669; }
.status-item.upcoming .status-value { color: #1E40AF; }

.status-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-item.completed .status-label { color: #6B7280; }
.status-item.active .status-label { color: #047857; }
.status-item.upcoming .status-label { color: #1D4ED8; }

.quiz-card-footer-modern {
  padding: 20px 24px;
  border-top: 1px solid #F3F4F6;
  background: #FAFAFA;
}

.view-details-btn-modern {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: var(--theme-color);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.view-details-btn-modern:hover {
  background: var(--theme-accent);
  transform: translateY(-1px);
  text-decoration: none;
  color: white;
}

.view-details-btn-modern .btn-icon {
  width: 16px;
  height: 16px;
}

/* Responsive Design for Modern Quizzes Index */
@media (max-width: 1200px) {
  .quizzes-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
  
  .quiz-card-body-modern {
    grid-template-columns: 1fr;
  }
  
  .status-grid {
    flex-direction: row;
    justify-content: space-around;
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .quizzes-page-header {
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .quizzes-stats-overview {
    width: 100%;
    justify-content: space-between;
  }
  
  .stat-card-small {
    min-width: auto;
    flex: 1;
    padding: 12px;
  }
  
  .search-container {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .filter-group-modern {
    flex-direction: column;
  }
  
  .modern-filter-select {
    min-width: auto;
  }
  
  .quizzes-grid-modern {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .quiz-header-content {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .info-row-modern {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .quizzes-stats-overview {
    flex-direction: column;
    gap: 8px;
  }
  
  .stat-card-small {
    padding: 8px 12px;
  }
  
  .stat-value-small {
    font-size: 1.125rem;
  }
  
  .page-title {
    font-size: 2rem;
  }
  
  .quiz-card-modern {
    margin: 0 -0.5rem;
  }
} 

/* Question Search Modal Styles */
.search-section {
  margin-bottom: 1.5rem;
}

.search-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-field-main {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-live {
  flex: 1;
  padding: 0.875rem 3.5rem 0.875rem 1rem;
  font-size: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
  background: #fafafa;
}

.search-input-live:focus {
  border-color: #3b82f6;
  background: white;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
  position: absolute;
  right: 1.25rem;
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.search-filters {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-item label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
}

.boost-input-compact {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
}

.boost-input-compact:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkbox-item input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.checkbox-item label {
  cursor: pointer;
  font-size: 0.875rem;
}

/* Results Container */
.search-results-container {
  min-height: 300px;
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
}

.results-loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.results-empty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #6b7280;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.search-results {
  display: none;
}

.results-list {
  padding: 0;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
  cursor: pointer;
}

.search-result-item:hover {
  background: #f8fafc;
}

.search-result-item.selected {
  background: #eff6ff;
  border-color: #3b82f6;
}

.result-content {
  flex: 1;
}

.result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.result-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.4;
}

.result-boost {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
}

.result-boost.boost-highest {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.result-boost.boost-high {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.result-boost.boost-medium {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.result-boost.boost-low {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.result-categories,
.result-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.result-categories .category-badge,
.result-tags .tag-badge {
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 4px;
}

.result-categories .category-badge {
  background: #10b981;
  color: white;
}

.result-tags .tag-badge {
  background: #3b82f6;
  color: white;
}

.result-answers {
  font-size: 0.875rem;
  color: #6b7280;
}

.result-action {
  flex-shrink: 0;
}

.select-question-btn {
  padding: 0.5rem 1rem;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.select-question-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.search-result-item.selected .select-question-btn {
  background: #059669;
}

.search-result-item.selected .select-question-btn:hover {
  background: #047857;
}

.search-hint {
  padding: 1rem;
  background: #f0f9ff;
  border-top: 1px solid #e0f2fe;
  font-size: 0.875rem;
  color: #0369a1;
}

.search-hint p {
  margin: 0;
}

/* Modal Footer Buttons */
.replace-button-modern {
  padding: 0.75rem 1.5rem;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.replace-button-modern:hover:not(:disabled) {
  background: #059669;
  transform: translateY(-1px);
}

.replace-button-modern:disabled {
  background: #d1d5db;
  color: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

.cancel-button-modern {
  padding: 0.75rem 1.5rem;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cancel-button-modern:hover {
  background: #f9fafb;
  border-color: #9ca3af;
  color: #374151;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .search-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .filter-item {
    justify-content: space-between;
  }
  
  .result-header {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .result-boost {
    align-self: flex-start;
  }
} 
/* Settings Interface Styles */

/* Container and Layout */
.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  background: #f8fafc;
  min-height: 100vh;
}

/* Header Component */
.settings-header {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-text {
  flex: 1;
}

.header-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #00a6d6, #0077b6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-description {
  font-size: 1.125rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.admin-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f1f5f9;
  border-radius: 8px;
}

.admin-avatar {
  width: 3rem;
  height: 3rem;
  background: linear-gradient(135deg, #00a6d6, #0077b6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}

.admin-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-name {
  font-weight: 600;
  color: #1e293b;
  font-size: 0.875rem;
}

.admin-role {
  font-size: 0.75rem;
}

/* Role Badge */
.role-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.role-badge.role-super {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  color: white;
}

.role-badge.role-admin {
  background: linear-gradient(135deg, #00a6d6, #0077b6);
  color: white;
}

.role-badge.role-regular {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
}

/* Settings Content Layout */
.settings-content {
  display: flex;
  gap: 2rem;
}

/* Navigation Component */
.settings-navigation {
  flex-shrink: 0;
  width: 280px;
}

.settings-nav {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.nav-tabs {
  display: flex;
  flex-direction: column;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: #64748b;
  border-bottom: 1px solid #f1f5f9;
  transition: all 0.2s ease-in-out;
  position: relative;
}

.nav-tab:hover {
  background: #f8fafc;
  color: #00a6d6;
}

.nav-tab.nav-tab-active {
  background: linear-gradient(135deg, rgba(0, 166, 214, 0.1), rgba(0, 119, 182, 0.1));
  color: #00a6d6;
  border-right: 3px solid #00a6d6;
}

.nav-tab:last-child {
  border-bottom: none;
}

.tab-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2;
}

.tab-text {
  font-weight: 500;
  font-size: 0.875rem;
}

/* Main Content Area */
.settings-main {
  flex: 1;
}

.tab-content {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Tab Panel */
.tab-panel {
  padding: 2rem;
}

.tab-header {
  margin-bottom: 2rem;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 1.5rem;
}

.tab-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.tab-description {
  font-size: 1rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

/* Settings Cards */
.settings-cards {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: white;
}

.card-header {
  padding: 1.5rem;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.card-description {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.card-content {
  padding: 1.5rem;
}

/* Forms */
.settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-label {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

.form-input, .form-select {
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.875rem;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background: white;
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: #00a6d6;
  box-shadow: 0 0 0 3px rgba(0, 166, 214, 0.1);
}

.form-help {
  font-size: 0.75rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.input-with-unit {
  display: flex;
  align-items: center;
}

.input-with-unit .form-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.input-unit {
  padding: 0.75rem;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-left: none;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* Checkbox Groups */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox {
  width: 1rem;
  height: 1rem;
  accent-color: #00a6d6;
}

.checkbox-label {
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  margin: 0;
}

/* Form Actions */
.form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  gap: 0.5rem;
}

.btn-primary {
  background: linear-gradient(135deg, #00a6d6, #0077b6);
  color: white;
  border-color: #00a6d6;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0077b6, #005577);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 166, 214, 0.3);
}

.btn-outline-primary {
  background: transparent;
  color: #00a6d6;
  border-color: #00a6d6;
}

.btn-outline-primary:hover {
  background: #00a6d6;
  color: white;
}

.btn-outline-secondary {
  background: transparent;
  color: #6b7280;
  border-color: #d1d5db;
}

.btn-outline-secondary:hover {
  background: #f9fafb;
  color: #374151;
}

.btn-outline-warning {
  background: transparent;
  color: #d97706;
  border-color: #d97706;
}

.btn-outline-warning:hover {
  background: #d97706;
  color: white;
}

.btn-outline-info {
  background: transparent;
  color: #0284c7;
  border-color: #0284c7;
}

.btn-outline-info:hover {
  background: #0284c7;
  color: white;
}

/* Profile Details */
.profile-details {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.profile-avatar-large {
  width: 5rem;
  height: 5rem;
  background: linear-gradient(135deg, #00a6d6, #0077b6);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 2rem;
  flex-shrink: 0;
}

.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.info-value {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.stat-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.stat-icon-primary {
  background: linear-gradient(135deg, rgba(0, 166, 214, 0.1), rgba(0, 119, 182, 0.1));
  color: #00a6d6;
}

.stat-icon-success {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(22, 163, 74, 0.1));
  color: #16a34a;
}

.stat-icon-info {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.1));
  color: #0891b2;
}

.stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e293b;
}

.stat-label {
  font-size: 0.75rem;
  color: #64748b;
}

/* Account Details */
.account-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #f1f5f9;
}

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

.detail-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

.detail-value {
  font-size: 0.875rem;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Status Badges */
.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.status-verified {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.status-active {
  background: rgba(0, 166, 214, 0.1);
  color: #00a6d6;
}

/* Security Checks */
.security-checks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.security-check {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid;
}

.security-check-success {
  background: rgba(34, 197, 94, 0.05);
  border-color: rgba(34, 197, 94, 0.2);
}

.security-check-info {
  background: rgba(0, 166, 214, 0.05);
  border-color: rgba(0, 166, 214, 0.2);
}

.check-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.security-check-success .check-icon {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.security-check-info .check-icon {
  background: rgba(0, 166, 214, 0.1);
  color: #00a6d6;
}

.check-icon svg {
  width: 1rem;
  height: 1rem;
}

.check-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.check-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
}

.check-description {
  font-size: 0.75rem;
  color: #64748b;
}

/* Action Buttons */
.action-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.action-info {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* Notification Options */
.notification-options {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.notification-option {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.option-header {
  margin-bottom: 0.5rem;
}

.option-description {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* Notification Types */
.notification-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.notification-type {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.type-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.type-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.type-icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.type-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
}

.type-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.type-icon-primary {
  background: rgba(0, 166, 214, 0.1);
  color: #00a6d6;
}

.type-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.type-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.25rem 0;
}

.type-description {
  font-size: 0.75rem;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

/* Email Info */
.email-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f5f9;
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

.info-value {
  font-size: 0.875rem;
  color: #374151;
}

.email-note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
}

/* WhatsApp specific styles */
.test-section {
  text-align: center;
  padding: 2rem;
}

.test-description {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.info-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-section {
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.info-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.info-text {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Security metrics */
.security-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.metric-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.metric-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: #16a34a;
}

.metric-icon-info {
  background: rgba(0, 166, 214, 0.1);
  color: #00a6d6;
}

.metric-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.metric-value {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.metric-label {
  font-size: 0.75rem;
  color: #64748b;
}

/* Requirements and Recommendations */
.password-requirements,
.security-recommendations {
  margin-top: 1.5rem;
}

.requirements-title,
.recommendations-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 1rem 0;
}

.requirements-list,
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirement-item,
.recommendation-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: #374151;
}

.requirement-icon,
.recommendation-icon {
  width: 1rem;
  height: 1rem;
  color: #16a34a;
  flex-shrink: 0;
}

/* Utility classes */
.text-muted {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
  .settings-container {
    padding: 1rem;
  }
  
  .settings-content {
    flex-direction: column;
    gap: 1rem;
  }
  
  .settings-navigation {
    width: 100%;
  }
  
  .nav-tabs {
    flex-direction: row;
    overflow-x: auto;
  }
  
  .nav-tab {
    white-space: nowrap;
    border-bottom: none;
    border-right: 1px solid #f1f5f9;
  }
  
  .nav-tab:last-child {
    border-right: none;
  }
  
  .nav-tab.nav-tab-active {
    border-right: none;
    border-bottom: 3px solid #00a6d6;
  }
  
  .header-content {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .profile-details {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .notification-types {
    grid-template-columns: 1fr;
  }
  
  .security-metrics {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .detail-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
} 
/* Tags Module Styles */

/* Tag List Header */
.tag-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.tag-list-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
}

.tag-list-actions {
  display: flex;
  gap: 0.75rem;
}

/* Tag Search Bar */
.tag-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.search-group {
  flex: 1;
  min-width: 180px;
}

.search-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-700);
}

.search-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.search-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.search-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

.search-btn-reset {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.search-btn-reset:hover {
  background-color: var(--gray-300);
}

.search-btn-icon {
  margin-right: 0.5rem;
  width: 1rem;
  height: 1rem;
}

/* Tags Table */
.tags-table {
  width: 100%;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.tags-table-header {
  background-color: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.tags-table th {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.tags-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}

.tags-table tr:last-child td {
  border-bottom: none;
}

.tags-table tbody tr {
  transition: background-color 0.2s ease;
}

.tags-table tbody tr:hover {
  background-color: var(--gray-50);
}

.tag-name {
  font-weight: 500;
  color: var(--gray-900);
}

.tag-questions-count {
  font-weight: 500;
  color: var(--gray-800);
  text-align: center;
}

.tag-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.tag-action-btn {
  padding: 0.375rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tag-action-btn:hover {
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.tag-action-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Empty State */
.tag-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  color: var(--gray-400);
  margin: 0 auto 1rem;
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.empty-state-text {
  font-size: 0.875rem;
  color: var(--gray-600);
  max-width: 30rem;
  margin: 0 auto 1.5rem;
}

.empty-state-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.empty-state-btn:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

/* Tag Form */
.tag-form {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.form-header {
  margin-bottom: 1.5rem;
}

.form-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid var(--gray-300);
  border-radius: 0.375rem;
  color: var(--gray-800);
}

.form-control:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
}

.btn-cancel {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: 1px solid var(--gray-300);
  background-color: var(--white);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cancel:hover {
  background-color: var(--gray-100);
  border-color: var(--gray-400);
  text-decoration: none;
}

.btn-submit {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-submit:hover {
  background-color: var(--primary-color-dark);
}

/* Tag Detail */
.tag-detail {
  background-color: var(--white);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.tag-detail-header {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tag-detail-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray-900);
  margin: 0;
}

.tag-detail-actions {
  display: flex;
  gap: 0.5rem;
}

.tag-detail-meta {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
}

.tag-meta-item {
  display: flex;
  flex-direction: column;
}

.tag-meta-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.tag-meta-value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .tag-list-header,
  .tag-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .tag-list-actions,
  .tag-detail-actions {
    width: 100%;
  }
  
  .tag-detail-meta {
    flex-direction: column;
    gap: 1rem;
  }
  
  .search-group {
    flex: 100%;
  }
} 
/* TV Display Styles - Clean Professional Design */

/* Color Variables */
:root {
  --tv-primary: #00A0E4;    /* Pantone 2995C */
  --tv-primary-light: #33B3E8;
  --tv-primary-dark: #0080B8;
  --tv-success: #10B981;
  --tv-warning: #F59E0B;
  --tv-danger: #EF4444;
  --tv-white: #FFFFFF;
  --tv-black: #111827;
  --tv-gray-50: #F9FAFB;
  --tv-gray-100: #F3F4F6;
  --tv-gray-200: #E5E7EB;
  --tv-gray-300: #D1D5DB;
  --tv-gray-400: #9CA3AF;
  --tv-gray-500: #6B7280;
  --tv-gray-600: #4B5563;
  --tv-gray-700: #374151;
  --tv-gray-800: #1F2937;
  --tv-gray-900: #111827;
  --tv-text-primary: #111827;
  --tv-text-secondary: #6B7280;
  --tv-background: #F3F4F6;
}

/* Base TV Display Styles */




/* TV Header */
.tv-header {
  background: var(--tv-white);
  border-bottom: 1px solid var(--tv-gray-200);
  padding: 1.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tv-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}

.tv-branding {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tv-logo {
  width: 48px;
  height: 48px;
  background: var(--tv-primary);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--tv-white);
}

.tv-title h1 {
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  color: var(--tv-text-primary);
}

.tv-title p {
  font-size: 1rem;
  margin: 0;
  color: var(--tv-text-secondary);
  font-weight: 400;
}

.tv-current-time {
  text-align: right;
}

.time-display {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--tv-text-primary);
}

.date-display {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  font-weight: 400;
}

/* Main Content Area */
.tv-main-content {
  flex: 1;
  max-width: 100%;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Quiz Display Styles */
.quiz-display-container {
  width: 100%;
  max-width: 95%;
}

.quiz-display-header {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.quiz-header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.quiz-title-section h1.quiz-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--tv-text-primary);
}

.quiz-subtitle {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.quiz-language {
  background: var(--tv-gray-100);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
}

.quiz-status .status-indicator.active {
  color: var(--tv-success);
  font-weight: 600;
}

.quiz-timer-section {
  text-align: right;
}

.quiz-timer .timer-label {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  margin-bottom: 0.5rem;
}

.quiz-timer .timer-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tv-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.quiz-progress-bar {
  margin-top: 1rem;
}

.progress-bar {
  height: 8px;
  background: var(--tv-gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tv-primary), var(--tv-primary-light));
  transition: width 0.3s ease;
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
}

.questions-progress {
  color: var(--tv-text-primary);
  font-weight: 500;
}

.progress-percentage {
  color: var(--tv-text-secondary);
}

/* Quiz Display Grid */
.quiz-display-content {
  margin-top: 2rem;
}

.quiz-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.quiz-main-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Card Styles */
.quiz-metadata-card,
.quiz-timing-card,
.quiz-questions-overview {
  background: var(--tv-white);
  border-radius: 16px;
  border: 1px solid var(--tv-gray-200);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  background: var(--tv-gray-50);
  padding: 1.5rem;
  border-bottom: 1px solid var(--tv-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
  color: var(--tv-text-primary);
}

.card-badge {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-badge.active {
  background: var(--tv-success);
  animation: pulse 2s infinite;
}

.card-content {
  padding: 1.5rem;
}

/* Metadata Grid */
.metadata-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.metadata-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.metadata-label {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tv-text-secondary);
}

.metadata-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

.password-display {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  background: var(--tv-gray-100);
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--tv-gray-200);
}

/* Timing Stats */
.timing-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timing-item.large {
  text-align: center;
  padding: 1rem;
  background: var(--tv-gray-50);
  border-radius: 12px;
  border: 1px solid var(--tv-gray-200);
}

.timing-item.large .timing-label {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  margin-bottom: 0.5rem;
}

.timing-item.large .timing-value.highlight {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tv-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.timing-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.timing-item {
  text-align: center;
}

.timing-label {
  font-size: 0.75rem;
  color: var(--tv-text-secondary);
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.timing-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

.timing-progress {
  margin-top: 1rem;
}

.progress-label {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  margin-bottom: 0.5rem;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.progress-container .progress-bar {
  flex: 1;
  height: 6px;
  background: var(--tv-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.progress-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tv-primary);
  min-width: 3rem;
}

.quiz-questions-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  background: var(--tv-gray-50);
  border-radius: 12px;
}

.questions-completed,
.questions-total {
  text-align: center;
}

.summary-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tv-text-primary);
}

.summary-label {
  font-size: 0.75rem;
  color: var(--tv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.questions-separator {
  font-size: 1.5rem;
  color: var(--tv-gray-400);
  font-weight: 300;
}

/* Questions Overview */
.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.question-bubble {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid;
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.question-bubble.completed {
  background: var(--tv-success);
  border-color: var(--tv-success);
  color: var(--tv-white);
}

.question-bubble.current {
  background: var(--tv-primary);
  border-color: var(--tv-primary);
  color: var(--tv-white);
  animation: pulse 2s infinite;
}

.question-bubble.upcoming {
  background: var(--tv-white);
  border-color: var(--tv-gray-300);
  color: var(--tv-text-secondary);
}

.question-number {
  font-size: 0.875rem;
  font-weight: 600;
}

.question-status {
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.question-difficulty {
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 0.625rem;
}

.overview-legend {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-color.completed {
  background: var(--tv-success);
}

.legend-color.current {
  background: var(--tv-primary);
}

.legend-color.upcoming {
  background: var(--tv-gray-300);
}

.current-question-preview {
  background: var(--tv-gray-50);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.preview-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.preview-text {
  font-size: 0.875rem;
  color: var(--tv-text-primary);
  line-height: 1.4;
}

/* Questions Details Section */
.quiz-details-section {
  margin-top: 2rem;
}

.quiz-all-questions {
  background: var(--tv-white);
  border-radius: 16px;
  border: 1px solid var(--tv-gray-200);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.questions-header {
  background: var(--tv-gray-50);
  padding: 2rem;
  border-bottom: 1px solid var(--tv-gray-200);
  text-align: center;
}

.questions-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--tv-text-primary);
}

.questions-subtitle {
  font-size: 1rem;
  color: var(--tv-text-secondary);
  margin: 0;
}

.questions-list {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Question Detail Cards */
.question-detail-card {
  border: 2px solid var(--tv-gray-200);
  border-radius: 16px;
  background: var(--tv-white);
  transition: all 0.3s ease;
}

.question-detail-card.current {
  border-color: var(--tv-primary);
  box-shadow: 0 0 0 4px rgba(0, 160, 228, 0.1);
}

.question-detail-card.completed {
  border-color: var(--tv-success);
  opacity: 0.8;
}

.question-header {
  background: var(--tv-gray-50);
  padding: 1.5rem;
  border-bottom: 1px solid var(--tv-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.question-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.question-number-badge {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.question-timing,
.question-difficulty {
  background: var(--tv-gray-200);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
}

.question-status-indicator .status-badge {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.status-badge.completed {
  background: var(--tv-success);
  color: var(--tv-white);
}

.status-badge.current {
  background: var(--tv-primary);
  color: var(--tv-white);
}

.status-badge.upcoming {
  background: var(--tv-gray-200);
  color: var(--tv-text-secondary);
}



.question-body {
  margin-bottom: 2rem;
}



.question-image {
  margin-top: 1rem;
}

.question-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.question-answers {
  margin-top: 2rem;
}

.answers-header {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tv-text-primary);
  margin-bottom: 1rem;
}

.answers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.answer-option {
  border: 1px solid var(--tv-gray-200);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: all 0.3s ease;
  position: relative;
}

.answer-option.correct {
  border-color: var(--tv-success);
  background: #F0FDF4;
}

.answer-letter {
  width: 32px;
  height: 32px;
  background: var(--tv-gray-200);
  color: var(--tv-text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.answer-option.correct .answer-letter {
  background: var(--tv-success);
  color: var(--tv-white);
}

.answer-content {
  flex: 1;
}

.answer-text {
  font-size: 0.875rem;
  color: var(--tv-text-primary);
  line-height: 1.4;
}

.answer-image {
  margin-top: 0.5rem;
}

.answer-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--tv-gray-200);
}

.correct-indicator {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: var(--tv-success);
  color: var(--tv-white);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.question-metadata {
  background: var(--tv-gray-50);
  padding: 1rem 2rem;
  border-top: 1px solid var(--tv-gray-200);
}

.metadata-row {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.metadata-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.metadata-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
}

.metadata-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.category-tag {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.tag-tag {
  background: var(--tv-gray-200);
  color: var(--tv-text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.boost-score {
  background: var(--tv-warning);
  color: var(--tv-white);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Countdown Section */
.countdown-container {
  text-align: center;
  width: 100%;
  max-width: 1400px;
}

.countdown-header {
  margin-bottom: 3rem;
}

.countdown-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
  letter-spacing: -0.025em;
}

.countdown-subtitle {
  font-size: 1.25rem;
  margin: 0;
  color: var(--tv-text-secondary);
  font-weight: 400;
}

/* Countdown Timer Section */
.countdown-timer-section {
  margin-top: 0px;
  margin-left: auto;
  margin-right: auto;
  background: var(--tv-white);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
  width: 90%;
}

.timer-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
  text-align: center;
}

.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.countdown-unit {
  background: var(--tv-white);
  
  border-radius: 12px;
  min-width: 120px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.countdown-number {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
  color: var(--tv-text-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.countdown-label {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tv-text-secondary);
}

.countdown-separator {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tv-gray-400);
  margin: 0 0.5rem;
}

/* Main Content Grid */
.quiz-details-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  width: 100%;
  margin-top: 3rem;
}

/* Quiz Details Card */
.quiz-details-card {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.contest-info {
  margin-bottom: 2rem;
}

.contest-name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
  letter-spacing: -0.025em;
}

.contest-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.contest-frequency, .quiz-language {
  
 
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quiz-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.schedule-item {
  text-align: center;
}

.schedule-label {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  margin-bottom: 0.5rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.schedule-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

/* Participation Instructions */
.participation-section {
  background: var(--tv-surface);
  border: 1px solid var(--tv-border);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.participation-section h4 {
  color: var(--tv-primary);
  margin: 0 0 1.5rem 0;
  font-size: 1.375rem;
  font-weight: 700;
  position: relative;
  padding-left: 2rem;
}

.participation-section h4::before {
  content: "📝";
  position: absolute;
  left: 0;
}





.step-number {
  background: var(--tv-primary);
  color: var(--tv-white);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.step-text {
  flex: 1;
}

/* QR Code Placeholder */
.qr-code-placeholder {
  width: 120px;
  height: 120px;
  background: var(--tv-gray-100);
  border: 2px dashed var(--tv-gray-300);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 3rem;
  color: var(--tv-gray-400);
}

/* No Quiz Section */
.no-quiz-container {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.no-quiz-content {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 4rem 3rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.no-quiz-icon {
  font-size: 4rem;
  margin-bottom: 2rem;
  opacity: 0.6;
}

.no-quiz-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
}

.no-quiz-message {
  font-size: 1.125rem;
  margin: 0 0 0.5rem 0;
  color: var(--tv-text-secondary);
}

.no-quiz-submessage {
  font-size: 1rem;
  margin: 0 0 3rem 0;
  color: var(--tv-text-secondary);
}

.motivational-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  color: var(--tv-text-primary);
}

.tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.tip-item {
  background: var(--tv-gray-50);
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  border: 1px solid var(--tv-gray-200);
}

/* Other Phase Sections */
.intro-phase-container,
.quiz-active-container,
.results-phase-container {
  text-align: center;
  margin: 0 auto;
}

.intro-content,
.active-content,
.results-content {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 4rem 3rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.results-timer-section {
  margin-top: 2rem;
}

.results-phase-progress {
  background: var(--tv-white);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.progress-bar-fill.results-progress {
  background: linear-gradient(90deg, #dc2626, #fbbf24, #10b981);
  transition: all 0.3s ease;
}

.progress-bar-fill.results-progress.final-seconds {
  background: linear-gradient(90deg, #dc2626, #f87171);
  animation: pulse-urgent 1s ease-in-out infinite alternate;
}

.intro-icon,
.active-icon,
.results-icon {
  font-size: 4rem;
  margin-bottom: 2rem;
  opacity: 0.8;
}

.intro-content h2,
.active-content h2,
.results-content h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--tv-text-primary);
}

.intro-content p,
.active-content p,
.results-content p {
  font-size: 1rem;
  margin: 0.25rem 0;
  color: var(--tv-text-secondary);
}

.intro-content h3,
.active-content h3,
.results-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem 0;
  color: var(--tv-primary);
}

/* Enhanced Intro Phase Components */
.intro-phase-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

/* TV-Optimized Layout - More Width Than Height */
.intro-phase-main-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}

.intro-left-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.intro-right-column {
  display: flex;
  align-items: stretch;
}

.intro-phase-bottom-section {
  width: 100%;
  margin-top: 1rem;
}

/* New Intro Timer Section (like countdown timer section) */
.intro-timer-section {
  text-align: center;
  
}

/* Side-by-side layout for intro bottom sections (like countdown) */
.intro-bottom-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}

.intro-left-section,
.intro-right-section {
  min-width: 0; /* Allow content to shrink */
}

.intro-left-section .participation-content {
  margin: 0; /* Remove default margins */
}

.intro-right-section .intro-participants-section {
  margin-top: 0; /* Remove margin since parent handles spacing */
}

/* Intro Phase Header */
.intro-phase-header {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 3rem 2rem 2rem 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.intro-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.8;
}

.intro-title {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
  letter-spacing: -0.025em;
}

.intro-message {
  font-size: 1.25rem;
  margin: 0 0 1.5rem 0;
  color: var(--tv-text-secondary);
}

.intro-status {
  font-size: 1rem;
  margin: 0;
  color: var(--tv-text-secondary);
}

.intro-status-label {
  font-weight: 500;
  margin-right: 0.5rem;
}

.intro-status-value {
  font-weight: 600;
  color: var(--tv-primary);
}

/* Intro Phase Progress */
.intro-phase-progress {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.progress-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.progress-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--tv-text-primary);
}

.progress-timer {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.timer-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
}

.timer-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tv-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.timer-status {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  background: var(--tv-gray-100);
  color: var(--tv-text-secondary);
}

/* Progress Bar */
.progress-bar-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.progress-bar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-bar-track {
  flex: 1;
  height: 12px;
  background: var(--tv-gray-200);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tv-primary), #00B4D8);
  border-radius: 6px;
  transition: width 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

.progress-bar-fill.final-seconds {
  background: linear-gradient(90deg, #FF6B6B, #FF8E8E);
  animation: pulse-urgent 1s infinite;
}

.progress-percentage {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tv-text-primary);
  min-width: 50px;
  text-align: right;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--tv-text-secondary);
  font-weight: 500;
}

.progress-middle {
  font-weight: 600;
  color: var(--tv-text-primary);
}

.progress-details {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 1rem;
  background: var(--tv-gray-50);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.detail-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

.progress-placeholder {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--tv-text-secondary);
  font-size: 1.125rem;
}

/* Intro Phase Content */
.intro-phase-content {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.intro-quiz-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.quiz-info-card {
  text-align: left;
}

.quiz-contest-name {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  color: var(--tv-text-primary);
}

.quiz-meta-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.quiz-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
}

.meta-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

.intro-instructions {
  text-align: left;
}

.instructions-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
}

.instruction-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--tv-gray-50);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.instruction-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.instruction-text {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  line-height: 1.4;
}

.intro-content-placeholder {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--tv-text-secondary);
  font-size: 1.125rem;
}

/* QR Code Section Styles */
.qr-code-section {
  background: var(--tv-white);
  border: 2px solid var(--tv-gray-200);
  border-radius: 16px;
  padding: 2rem;
  /* margin-top: 2rem; */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.qr-code-container {
  
}

.qr-code-header {
  text-align: center;
}

.qr-code-header h4 {
  font-size: 1.5rem;
  color: var(--tv-primary);
  margin: 0 0 0.5rem 0;
  font-weight: 700;
}

.qr-code-subtitle {
  font-size: 1rem;
  color: var(--tv-text-secondary);
  margin: 0;
}


.qr-code-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qr-code-image:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.qr-code-image .qr-image {
  width: 160px;
  height: 160px;
  display: block;
  border-radius: 8px;
}

.qr-code-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.password-display {
  background: linear-gradient(135deg, var(--tv-primary), var(--tv-primary-dark));
  color: white;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 160, 228, 0.3);
}

.password-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  opacity: 0.9;
}

.password-value {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.quiz-info-compact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--tv-gray-50);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.info-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.info-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

/* Language Schedule Section */
.language-schedule-section {
  margin: 1rem 0;
  padding: 1.5rem;
  background: var(--tv-gray-50);
  border-radius: 12px;
  border: 1px solid var(--tv-gray-200);
}

.schedule-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.schedule-icon {
  font-size: 1.1rem;
}

.language-schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.language-schedule-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: var(--tv-white);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
  transition: all 0.3s ease;
}

.language-schedule-item.current {
  border-color: var(--tv-primary);
  background: linear-gradient(135deg, rgba(0, 160, 228, 0.05), rgba(0, 160, 228, 0.02));
  box-shadow: 0 2px 4px rgba(0, 160, 228, 0.1);
}

.language-schedule-item.active {
  border-color: var(--tv-success);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(34, 197, 94, 0.02));
}

.language-schedule-item.completed {
  opacity: 0.7;
  background: var(--tv-gray-100);
}

.language-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.language-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tv-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.language-status {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.025em;
  padding-left: 10px;
}

.language-status.upcoming {
  color: var(--tv-warning);
}

.language-status.active {
  color: var(--tv-success);
}

.language-status.completed {
  color: var(--tv-text-muted);
}

.timing-info {
  text-align: right;
}

.time-range {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--tv-text-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  padding-right: 10px;
}

/* Participation Instructions */
.participation-instructions {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.instructions-header {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
  color: var(--tv-text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.instructions-icon {
  font-size: 1.25rem;
  color: var(--tv-primary);
}




.step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tv-primary);
  color: var(--tv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.step-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

.step-description {
  font-size: 0.8rem;
  color: var(--tv-text-secondary);
  line-height: 1.4;
}

.participation-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(0, 160, 228, 0.05), rgba(0, 160, 228, 0.02));
  border: 1px solid rgba(0, 160, 228, 0.2);
  border-radius: 8px;
}

.note-icon {
  font-size: 1.125rem;
  color: var(--tv-primary);
  flex-shrink: 0;
}

.note-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tv-text-primary);
  line-height: 1.4;
}

.qr-code-instructions {
  background: var(--tv-gray-50);
  border: 1px solid var(--tv-gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
}

.instruction-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--tv-gray-200);
}

.instruction-row:last-child {
  border-bottom: none;
}

.step-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 2.5rem;
  text-align: center;
  margin-top: 0.125rem;
}

.instruction-text {
  font-size: 1rem;
  color: var(--tv-text-primary);
  font-weight: 500;
  line-height: 1.4;
}

.message-preview {
  background: var(--tv-gray-50);
  border: 1px solid var(--tv-gray-200);
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 600px;
}

.preview-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--tv-gray-200);
}

.whatsapp-icon {
  font-size: 1.5rem;
  color: #25D366;
}

.preview-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tv-text-primary);
}

.preview-message {
  background: var(--tv-white);
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
  font-size: 0.95rem;
  color: var(--tv-text-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  line-height: 1.4;
}

.qr-code-placeholder {
  background: var(--tv-gray-50);
  border: 2px dashed var(--tv-gray-300);
  border-radius: 16px;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--tv-text-secondary);
  margin-top: 2rem;
}

.placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.placeholder-text {
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
}



/* TV Footer */
.tv-footer {
  background: var(--tv-white);
  border-top: 1px solid var(--tv-gray-200);
  padding: 1rem 2rem;
  margin-top: auto;
}

.tv-footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  font-size: 0.875rem;
}

.company-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.company-name {
  font-weight: 600;
  color: var(--tv-text-primary);
}

.company-tagline {
  color: var(--tv-text-secondary);
  font-size: 0.75rem;
}

.connection-status {
  font-weight: 500;
  color: var(--tv-text-secondary);
}

.status-indicator.online {
  color: var(--tv-success);
}

.auto-refresh {
  color: var(--tv-text-secondary);
  font-size: 0.75rem;
}

/* Urgency States */
.countdown-urgency {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}

.countdown-urgency.imminent {
  background: #FEE2E2;
  color: #991B1B;
  border: 1px solid #FCA5A5;
}

.countdown-urgency.soon {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}

/* Countdown Error State */
.countdown-error {
  margin: 2rem 0;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  text-align: center;
}

.countdown-error p {
  margin: 0 0 0.5rem 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: #92400E;
}

.countdown-error .error-details {
  font-size: 0.875rem;
  font-weight: 400;
  color: #A16207;
  margin: 0;
}

/* Animations */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes pulse-urgent {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Error States */
.quiz-display-error {
  text-align: center;
  background: var(--tv-white);
  border-radius: 16px;
  padding: 4rem 3rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.quiz-display-error h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--tv-danger);
}

.quiz-display-error p {
  font-size: 1.125rem;
  margin: 0;
  color: var(--tv-text-secondary);
}

.unknown-status {
  text-align: center;
  background: var(--tv-white);
  border-radius: 16px;
  padding: 4rem 3rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.unknown-status h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--tv-warning);
}

.unknown-status p {
  font-size: 1.125rem;
  margin: 0;
  color: var(--tv-text-secondary);
}

/* Responsive Design */
@media (max-width: 2000px) {
  .quiz-display-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .quiz-details-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .countdown-timer {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  
  .countdown-unit {
    min-width: 100px;
    
  }
  
  .countdown-number {
    font-size: 2.5rem;
  }

  .answers-grid {
    grid-template-columns: 1fr;
  }

  .metadata-grid {
    grid-template-columns: 1fr;
  }

  .timing-row {
    grid-template-columns: 1fr;
  }

  /* Intro Phase Responsive */
  .intro-quiz-info {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .progress-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .progress-timer {
    justify-content: center;
  }

  .progress-details {
    gap: 2rem;
  }

  /* QR Code Responsive */
  .intro-phase-main-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .intro-right-column {
    order: -1;
  }

  .qr-display {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .instructions-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .qr-tips {
    flex-direction: column;
    gap: 0.75rem;
  }
}


/* Registered Participants Section Styles */
.countdown-participants-section {
  margin-top: 3rem;
  width: 100%;
}

/* Side-by-side layout for countdown bottom sections */
.countdown-bottom-sections {
  display: block;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 1rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.countdown-left-section,
.countdown-right-section {
  min-width: 0; /* Allow content to shrink */
}

.countdown-left-section .participation-content {
  margin: 0; /* Remove default margins */
}

.countdown-right-section .countdown-participants-section {
  margin-top: 0; /* Remove margin since parent handles spacing */
}

.registered-participants-section {
  background: var(--tv-white);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
  overflow: hidden;
}

/* Participants Header */
.participants-header {
  background: var(--tv-gray-50);
  padding: 2rem;
  border-bottom: 1px solid var(--tv-gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.participation-title-section{
  flex: 1;
  min-width: 250px;

}

.participants-title-section {
  flex: 1;
  min-width: 250px;
  padding-left: 11px;
  padding-top: 11px; 
}

.participation-title{
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--tv-text-primary);
  display: flex;
  gap: 0.75rem;
}
.participants-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: var(--tv-text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 10px;
}

.participant-count-badge {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 700;
  min-width: 2rem;
  text-align: center;
  animation: pulse-count 2s infinite;
}

.participants-subtitle {
  font-size: 0.875rem;
  margin: 0;
  color: var(--tv-text-secondary);
}

.participants-stats {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 80px;
}

.stat-icon {
  font-size: 1.25rem;
  opacity: 0.8;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tv-text-primary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--tv-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Participants List Container */
.participants-list-container {
  max-height: 400px;
  overflow-y: auto;
  position: relative;
}

.participants-list {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.participants-list-footer {
  position: sticky;
  bottom: 0;
  background: linear-gradient(transparent, var(--tv-white) 70%);
  padding: 1rem 2rem 0.5rem 2rem;
  text-align: center;
}

.scroll-indicator {
  font-size: 0.75rem;
  color: var(--tv-text-secondary);
  font-style: italic;
}

/* Individual Participant Item */
.participant-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.5rem;
  background: var(--tv-white);
  border: 1px solid var(--tv-gray-200);
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.participant-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tv-gray-300);
  transition: background-color 0.3s ease;
}

.participant-item.registered::before {
  background: var(--tv-success);
}

.participant-item.active::before {
  background: var(--tv-primary);
  animation: pulse-glow 2s infinite;
}

.participant-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--tv-primary);
}

/* Participant Avatar */
.participant-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tv-primary), var(--tv-primary-light));
  color: var(--tv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0, 160, 228, 0.3);
}

/* Participant Info */
.participant-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0; /* Allow text truncation */
}

.participant-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--tv-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-phone {
  font-size: 0.75rem;
  color: var(--tv-text-secondary);
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  letter-spacing: 0.5px;
}

/* Participant Status */
.participant-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-indicator.registered {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-indicator.active {
  background: rgba(0, 160, 228, 0.1);
  color: var(--tv-primary-dark);
  border: 1px solid rgba(0, 160, 228, 0.2);
  animation: pulse-status 2s infinite;
}

.status-icon {
  font-size: 0.875rem;
}

.status-text {
  font-weight: 500;
}

/* Participant Time */
.participant-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 80px;
}

.registration-time {
  font-size: 0.75rem;
  color: var(--tv-text-secondary);
  text-align: right;
  white-space: nowrap;
}

/* Empty State */
.participants-empty-state {
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state-content {
  max-width: 400px;
  margin: 0 auto;
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.6;
}

.empty-state-title {
  font-size: 1.0rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
  color: var(--tv-text-primary);
}

.empty-state-message {
  font-size: 0.8rem;
  margin: 0 0 2rem 0;
  color: var(--tv-text-secondary);
  line-height: 1.5;
}

.empty-state-instructions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.instruction-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 5px;
  background: var(--tv-gray-50);
  border-radius: 8px;
  text-align: left;
}

.step-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tv-primary);
  color: var(--tv-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-text {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  flex: 1;
}

/* Animations */
@keyframes pulse-count {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 160, 228, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(0, 160, 228, 0.1);
  }
}

@keyframes pulse-status {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Scrollbar Styling */
.participants-list-container::-webkit-scrollbar {
  width: 6px;
}

.participants-list-container::-webkit-scrollbar-track {
  background: var(--tv-gray-100);
  border-radius: 3px;
}

.participants-list-container::-webkit-scrollbar-thumb {
  background: var(--tv-gray-400);
  border-radius: 3px;
}

.participants-list-container::-webkit-scrollbar-thumb:hover {
  background: var(--tv-gray-500);
}

/* Responsive Design for Participants */
@media (max-width: 2000px) {
  .participants-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .participants-stats {
    gap: 1.5rem;
  }

  .participant-item {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .participant-status,
  .participant-time {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: 0.5rem;
    gap: 1rem;
  }

  .participant-time {
    justify-content: space-between;
  }
}


/* Progress Bubbles Row for Quiz Header */
.progress-bubbles-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0.5rem 0 0.25rem 0;
  padding: 0 0.5rem;
}

.progress-bubble {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background: var(--tv-gray-200);
  color: var(--tv-gray-500);
  transition: background 0.2s, color 0.2s;
}

.progress-bubble.bubble-current {
  background: var(--tv-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,160,228,0.10);
}

.progress-bubble.bubble-completed {
  background: var(--tv-primary);
  color: #fff;
}

.progress-bubble.bubble-upcoming {
  background: var(--tv-gray-200);
  color: var(--tv-gray-400);
}

/* Progress Bar with Absolute Bubbles */
.progress-bar-with-bubbles {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--tv-gray-200);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.progress-bubbles-absolute {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
  z-index: 2;
}

/*
  Each .progress-bubble is absolutely positioned with left: X%,
  where X is calculated in ERB to inset the first and last bubbles by half a bubble's width.
  The bubble is centered at its left percent using transform: translate(-50%, -50%).
  Bubble width is 32px.
*/
.progress-bubble {
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  background: var(--tv-gray-200);
  color: var(--tv-gray-500);
  transition: background 0.2s, color 0.2s;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.progress-bubble.bubble-current {
  background: var(--tv-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,160,228,0.10);
}

.progress-bubble.bubble-completed {
  background: var(--tv-primary-light);
  color: var(--tv-primary);
}

.progress-bubble.bubble-upcoming {
  background: var(--tv-gray-200);
  color: var(--tv-gray-400);
}

.progress-bubble.ghost-bubble {
  visibility: hidden;
  pointer-events: none;
}

/* Current Question Display Section */
.current-question-section {
  margin-bottom: 2rem;
  width: 100%;
}

.current-question-container {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  background: var(--tv-white);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.question-content {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.quiz-sidebar {
  flex: 1;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.sidebar-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  height: 100%;
}

.participation-instructions,
.leaderboard-section {
  flex: 1;
  min-width: 0;
}

.question-header-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.question-text-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}



.question-timer {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.question-timer::before {
  content: "⏱️";
  font-size: 1rem;
}

.question-timer.warning {
  background: var(--tv-warning);
  animation: warning-pulse 1s infinite;
}

.question-timer.danger {
  background: var(--tv-danger);
  animation: danger-pulse 0.5s infinite;
}

.question-timer.expired {
  background: var(--tv-gray-400);
  color: var(--tv-white);
}

@keyframes warning-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes danger-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.answer-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.answer-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--tv-white);
  border: 2px solid var(--tv-gray-200);
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.answer-option:hover {
  border-color: var(--tv-primary);
  background: var(--tv-gray-50);
}

.option-letter {
  width: 40px;
  height: 40px;
  background: var(--tv-primary);
  color: var(--tv-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
}

.option-text {
  font-size: 1rem;
  color: var(--tv-text-primary);
  font-weight: 500;
  line-height: 1.3;
}

/* Quiz Sidebar styles moved to earlier section with flexbox layout */

.leaderboard-placeholder,
.instructions-card {
  background: var(--tv-gray-50);
  border: 1px solid var(--tv-gray-200);
  border-radius: 12px;
  padding: 1.5rem;
}

.leaderboard-placeholder h4,
.instructions-card h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--tv-text-primary);
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.leaderboard-placeholder h4::before {
  content: "🏆";
}

.instructions-card h4::before {
  content: "📱";
}

.qr-code-display-small {
  display: flex;
  justify-content: center;
  margin: 1rem 0;
  padding: 1rem;
  background: var(--tv-white);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.qr-image-small {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.leaderboard-placeholder p {
  color: var(--tv-text-secondary);
  margin: 0;
  font-style: italic;
}



.step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--tv-white);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
}

.step-number {
  width: 24px;
  height: 24px;
  background: var(--tv-primary);
  color: var(--tv-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  flex-shrink: 0;
}

.step-text {
  font-size: 0.875rem;
  color: var(--tv-text-secondary);
  line-height: 1.3;
}

/* Responsive Design for Current Question - Disabled for TV Display */
/* TV display should always maintain side-by-side layout */



/* WhatsApp Indicator Styles */
.whatsapp-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #25D366;
  color: var(--tv-white);
  padding: 0.75rem 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}

.whatsapp-indicator.show {
  opacity: 1;
  transform: translateY(0);
}

.whatsapp-icon {
  font-size: 1.25rem;
  animation: whatsapp-pulse 2s infinite;
}

.whatsapp-status {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.status-text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
}

.status-subtext {
  font-size: 0.75rem;
  opacity: 0.9;
  line-height: 1;
}

@keyframes whatsapp-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Quiz Leaderboard Styles */
.leaderboard-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.quiz-leaderboard {
  background: var(--tv-white);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.leaderboard-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tv-gray-900);
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--tv-gray-100);
}

.leaderboard-icon {
  font-size: 1.25rem;
}

.leaderboard-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  max-height: 400px;
}

.leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--tv-gray-50);
  border-radius: 8px;
  border: 1px solid var(--tv-gray-200);
  transition: all 0.3s ease;
}

.leaderboard-entry:hover {
  background: var(--tv-gray-100);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.leaderboard-entry.rank-1 {
  background: linear-gradient(135deg, #FFF7ED, #FFEAA7);
  border-color: #F59E0B;
}

.leaderboard-entry.rank-2 {
  background: linear-gradient(135deg, #F8FAFC, #E2E8F0);
  border-color: #94A3B8;
}

.leaderboard-entry.rank-3 {
  background: linear-gradient(135deg, #FEF3E2, #FBBF24);
  border-color: #D97706;
}

.entry-rank {
  flex-shrink: 0;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rank-medal {
  font-size: 1.25rem;
}

.rank-number {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tv-gray-600);
}

.entry-participant {
  flex: 1;
  min-width: 0;
}

.participant-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tv-gray-900);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-stats {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.correct-count {
  color: var(--tv-success);
  font-weight: 600;
}

.accuracy {
  color: var(--tv-gray-600);
}

.entry-performance {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.previous-result {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 500;
}

.previous-result.correct {
  background: #DCFCE7;
  color: #166534;
}

.previous-result.incorrect {
  background: #FEE2E2;
  color: #991B1B;
}

.result-icon {
  font-size: 0.8rem;
}

.result-text {
  white-space: nowrap;
}

.response-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 0.75rem;
}

.time-value {
  font-weight: 600;
  color: var(--tv-primary);
}

.time-label {
  color: var(--tv-gray-500);
  font-size: 0.7rem;
}

.leaderboard-footer {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--tv-gray-200);
  display: flex;
  justify-content: center;
}

.update-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--tv-gray-600);
}

.pulse-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--tv-success);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

.leaderboard-placeholder {
  background: var(--tv-white);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.leaderboard-placeholder h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tv-gray-900);
  margin-bottom: 0.5rem;
}

.leaderboard-placeholder p {
  color: var(--tv-gray-600);
  font-size: 0.9rem;
}

/* Results Phase Layout - Compact for TV */
.results-phase-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  width: 95%;
  margin: 0 auto;
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--tv-white);
  border-radius: 8px;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
}

.results-main-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  flex: 1;
  min-height: 0;
}

.results-left-column,
.results-center-column,
.results-right-column {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Final Leaderboard Styles - Compact */
.results-final-leaderboard {
  background: var(--tv-white);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Quiz Leaderboard Header - Blue Theme */
.results-final-leaderboard .leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding: 1rem;
  margin: -1rem -1rem 0.75rem -1rem;
  background: linear-gradient(135deg, #EBF8FF, #DBEAFE);
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid var(--tv-primary);
}

.results-final-leaderboard .leaderboard-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tv-primary);
  margin: 0;
}

.leaderboard-icon {
  font-size: 1.25rem;
}

/* Quiz Leaderboard Stats */
.results-final-leaderboard .leaderboard-stats {
  display: flex;
  gap: 2rem;
}

.results-final-leaderboard .stat-value {
  color: var(--tv-primary);
}

/* Contest Leaderboard Stats */
.results-contest-leaderboard .leaderboard-stats {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.results-contest-leaderboard .stat-value {
  color: #F59E0B;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tv-primary);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--tv-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.final-leaderboard-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  max-height: 400px;
}

.final-leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: var(--tv-gray-50);
  border-radius: 6px;
  border: 1px solid var(--tv-gray-200);
  transition: all 0.3s ease;
}

.final-leaderboard-entry:hover {
  background: var(--tv-gray-100);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.final-leaderboard-entry.rank-1 {
  background: linear-gradient(135deg, #FFF7ED, #FFEAA7);
  border-color: #F59E0B;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.final-leaderboard-entry.rank-2 {
  background: linear-gradient(135deg, #F8FAFC, #E2E8F0);
  border-color: #94A3B8;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.2);
}

.final-leaderboard-entry.rank-3 {
  background: linear-gradient(135deg, #FEF3E2, #FBBF24);
  border-color: #D97706;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.2);
}

.entry-rank {
  flex-shrink: 0;
  width: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rank-medal {
  font-size: 1.75rem;
}

.rank-number {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tv-gray-600);
}

.entry-participant {
  flex: 1;
  min-width: 0;
}

.participant-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tv-gray-900);
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-performance {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.score-display {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.correct-answers {
  color: var(--tv-success);
}

.score-separator {
  color: var(--tv-gray-400);
}

.total-questions {
  color: var(--tv-gray-600);
}

.accuracy-display {
  font-size: 0.9rem;
  color: var(--tv-gray-600);
  font-weight: 500;
}

.entry-timing {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.total-time,
.average-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.time-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tv-primary);
}

.time-label {
  font-size: 0.75rem;
  color: var(--tv-gray-500);
}

.leaderboard-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tv-gray-200);
  text-align: center;
}

.more-participants {
  font-size: 0.9rem;
  color: var(--tv-gray-600);
  font-style: italic;
}

/* Question Summary Styles - Compact */
.results-question-summary {
  background: var(--tv-white);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--tv-gray-100);
}

.summary-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tv-gray-900);
  margin: 0;
}

.summary-icon {
  font-size: 1.25rem;
}

.summary-stats {
  display: flex;
  gap: 2rem;
}

.question-summary-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  max-height: 400px;
}

.question-summary-item {
  background: var(--tv-gray-50);
  border-radius: 6px;
  padding: 0.75rem;
  border: 1px solid var(--tv-gray-200);
  transition: all 0.3s ease;
}

.question-summary-item:hover {
  background: var(--tv-gray-100);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.question-number {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.question-position {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

.image-indicator {
  font-size: 1rem;
  opacity: 0.7;
}

.question-stats {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.accuracy-stat,
.response-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.accuracy-value {
  font-size: 0.9rem;
  font-weight: 700;
}

.accuracy-value.high-accuracy {
  color: var(--tv-success);
}

.accuracy-value.medium-accuracy {
  color: var(--tv-warning);
}

.accuracy-value.low-accuracy {
  color: var(--tv-danger);
}

.accuracy-label,
.response-label {
  font-size: 0.75rem;
  color: var(--tv-gray-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.response-count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tv-gray-700);
}



.question-text {
  font-size: 1rem;
  color: var(--tv-gray-900);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.correct-answer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: #DCFCE7;
  border-radius: 6px;
  border: 1px solid #16A34A;
}

.answer-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #166534;
}

.answer-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.answer-letter {
  background: var(--tv-white);
  color: var(--tv-gray-900);
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--tv-gray-300);
}

.answer-letter.correct {
  background: #16A34A;
  color: var(--tv-white);
  border-color: #16A34A;
}

.answer-text {
  font-size: 0.8rem;
  color: var(--tv-gray-900);
}

.answer-distribution {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.distribution-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.answer-info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 60px;
}

.answer-percentage {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--tv-gray-700);
}

.percentage-bar {
  flex: 1;
  height: 6px;
  background: var(--tv-gray-200);
  border-radius: 3px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--tv-gray-400);
  transition: width 0.3s ease;
}

.bar-fill.correct {
  background: var(--tv-success);
}

/* Compact Question Summary Styles */
.question-summary-item-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--tv-gray-50);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--tv-gray-200);
  transition: all 0.3s ease;
}

.question-summary-item-compact:hover {
  background: var(--tv-gray-100);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.question-number-section {
  flex-shrink: 0;
}

.question-position-badge {
  background: var(--tv-primary);
  color: var(--tv-white);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.correct-answer-section {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.answer-option-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #DCFCE7;
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  border: 2px solid #16A34A;
}

.answer-letter-display {
  background: #16A34A;
  color: var(--tv-white);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 1.1rem;
  font-weight: 700;
  min-width: 2.5rem;
  text-align: center;
}

.answer-text-display {
  font-size: 1.1rem;
  font-weight: 600;
  color: #166534;
}

/* Contest Leaderboard Styles */
.results-contest-leaderboard {
  background: var(--tv-white);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Contest Leaderboard Header - Purple/Orange Theme */
.results-contest-leaderboard .leaderboard-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.75rem;
  padding: 1rem;
  margin: -1rem -1rem 0.75rem -1rem;
  background: linear-gradient(135deg, #FEF3E2, #FBBF24, #F59E0B);
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid #F59E0B;
}

.results-contest-leaderboard .leaderboard-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #92400E;
  margin: 0 0 0.25rem 0;
}

.results-contest-leaderboard .leaderboard-subtitle {
  font-size: 0.9rem;
  color: #92400E;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.contest-leaderboard-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  overflow-y: auto;
  max-height: 350px;
}

.contest-leaderboard-entry {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem;
  background: var(--tv-gray-50);
  border-radius: 6px;
  border: 1px solid var(--tv-gray-200);
  transition: all 0.3s ease;
}

.contest-leaderboard-entry:hover {
  background: var(--tv-gray-100);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contest-leaderboard-entry.rank-1 {
  background: linear-gradient(135deg, #FFF7ED, #FFEAA7);
  border-color: #F59E0B;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.contest-leaderboard-entry.rank-2 {
  background: linear-gradient(135deg, #F8FAFC, #E2E8F0);
  border-color: #94A3B8;
  box-shadow: 0 2px 8px rgba(148, 163, 184, 0.2);
}

.contest-leaderboard-entry.rank-3 {
  background: linear-gradient(135deg, #FEF3E2, #FBBF24);
  border-color: #D97706;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.2);
}

.contest-leaderboard-entry .entry-rank {
  flex-shrink: 0;
  width: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contest-leaderboard-entry .rank-medal {
  font-size: 1.4rem;
}

.contest-leaderboard-entry .rank-number {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tv-gray-600);
}

.contest-leaderboard-entry .entry-participant {
  flex: 1;
  min-width: 0;
}

.contest-leaderboard-entry .participant-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--tv-gray-900);
  margin-bottom: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contest-leaderboard-entry .participant-performance {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.contest-leaderboard-entry .score-display {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.contest-leaderboard-entry .accuracy-display {
  font-size: 0.8rem;
  color: var(--tv-gray-600);
  font-weight: 500;
}

.contest-leaderboard-entry .entry-stats {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contest-leaderboard-entry .quiz-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contest-leaderboard-entry .quiz-count .stat-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tv-primary);
}

.contest-leaderboard-entry .quiz-count .stat-label {
  font-size: 0.65rem;
  color: var(--tv-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.contest-leaderboard-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--tv-gray-500);
  font-style: italic;
}

@keyframes whatsapp-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* TV DISPLAY - NATURAL FIT FOR TV SCREENS - ONLY FOR TV DISPLAY BODY */
.tv-display-body {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  width: 100%;
  font-size: 1.5vh;
  overflow: hidden; /* Prevent scrollbars on the entire page */
  zoom: 0.6 !important;
}

/* FULLSCREEN MAIN CONTENT */


.countdown-container {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 1vh 1vw !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* READABLE TEXT SIZES FOR TV */
.countdown-container * {
  box-sizing: border-box !important;
}



.countdown-timer .countdown-number {
  font-size: 4vh !important;
  line-height: 1.1 !important;
}

.countdown-timer .countdown-label {
  font-size: 1.5vh !important;
}

.metadata-title,
.participation-title {
  font-size: 1.8vh !important;
  margin-bottom: 1vh !important;
}

.quiz-info-compact .info-item {
  font-size: 1.8vh !important;
  margin-bottom: 0.5vh !important;
  line-height: 1.3 !important;
}

.language-schedule-section h4 {
  font-size: 2vh !important;
  margin-bottom: 1vh !important;
}

.language-schedule-item {
  font-size: 1.6vh !important;
  padding: 0.3vh 0 !important;
  margin-bottom: 0.3vh !important;
  line-height: 1.2 !important;
}

.step-title {
  font-size: 1.8vh !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.step-description {
  font-size: 1.5vh !important;
  line-height: 1.3 !important;
}

.step-number {
  font-size: 1.4vh !important;
  width: 3vh !important;
  height: 3vh !important;
  line-height: 3vh !important;
}

.qr-image {
  max-width: 15vh !important;
  max-height: 15vh !important;
  width: 100% !important;
  height: auto !important;
}

.countdown-participants-section h3 {
  font-size: 1.8vh !important;
  margin-bottom: 1vh !important;
}

.countdown-participants-section .participant-item {
  font-size: 1.5vh !important;
  padding: 0.5vh !important;
  line-height: 1.2 !important;
}

/* LAYOUT IMPROVEMENTS */
.countdown-bottom-sections {
  display: flex !important;
  gap: 2vw !important;
  flex: 1 !important;
  min-height: 0 !important;
}

.countdown-first-column,
.countdown-middle-section,
.countdown-right-section {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.quiz-metadata,
.participation-card {
  background: white !important;
  padding: 1.5vh 1.5vw !important;
  border-radius: 1vh !important;
  box-shadow: 0 0.3vh 1.5vh rgba(0,0,0,0.1) !important;
  border: 1px solid #E5E7EB !important;
  flex: 1 !important;
  overflow: hidden !important;
}

.metadata-header,
.participation-header {
  background: var(--tv-gray-50) !important;
  border-bottom: 1px solid var(--tv-gray-200) !important;
  margin: -1.5vh -1.5vw 1vh -1.5vw !important;
  
}

/* TV Force Fit Styles - Make TV display fit screen without external zoom controls */


.tv-display-body .timer-title {
  font-size: 2.2vh;
}

.tv-display-body .countdown-timer {
  scale: 0.7;
}

.tv-display-body .countdown-number {
  font-size: 4vh;
}

.tv-display-body .countdown-label {
  font-size: 1.5vh;
}

.tv-display-body .countdown-separator {
  font-size: 3vh;
}

.tv-display-body .tv-main-content {
  height: 100vh;
}

/* Make headers/titles more readable */
.tv-display-body .metadata-title,
.tv-display-body .participation-title {
  font-size: 1.8vh;
}

/* Scale all text elements appropriately */
.tv-display-body .info-text,
.tv-display-body .step-title,
.tv-display-body .step-description,
.tv-display-body .language-name,
.tv-display-body .language-status,
.tv-display-body .time-range {
  font-size: 1.5vh;
}



.tv-display-body .participant-name,
.tv-display-body .participant-phone {
  font-size: 1.5vh;
}

/* Full screen layout for countdown */


/* Add card styling to Quiz Information section */
.tv-display-body .quiz-metadata {
  background: var(--tv-white, white);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200, #e5e7eb);
  overflow: hidden;
}

.tv-display-body .metadata-header {
  background: var(--tv-gray-50, #f9fafb);
  padding: 2rem;
  border-bottom: 1px solid var(--tv-gray-200, #e5e7eb);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Add card styling to How to Participate section */
.tv-display-body .participation-card {
  background: var(--tv-white, white);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--tv-gray-200, #e5e7eb);
  overflow: hidden;
}

.tv-display-body .participation-header {
  background: var(--tv-gray-50, #f9fafb);
  padding-top: 10px;
  padding-bottom: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 1px solid var(--tv-gray-200, #e5e7eb);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* Stack QR code vertically above instructions */
.tv-display-body .qr-code-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem;
  gap: 1.5rem;
}

.tv-display-body .qr-code-image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  width: 150px;
}

.tv-display-body .qr-code-info {
  width: 100%;
  max-width: none;
}

.tv-display-body .participation-instructions {
  width: 100%;
}

.tv-display-body .instruction-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
} 
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  /* Pantone 2995C - Primary color */
  --primary-color: #00A3E0;
  --primary-color-light: #33B5E6;
  --primary-color-dark: #0077A3;
  
  /* Neutral colors */
  --white: #FFFFFF;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;
  --black: #000000;
  
  /* Status colors */
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --info: #3B82F6;
  
  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  color: var(--gray-800);
  background-color: var(--gray-50);
  height: 100%;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1rem;
  font-weight: 600;
  line-height: 1.2;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

a:hover {
  color: var(--primary-color-dark);
  text-decoration: underline;
}

/* Layout */
.main-container {
  width: 100%;
  min-height: 100vh;
}

/* Flash messages */
.flash-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 24rem;
}

.flash-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  color: var(--white);
  animation: slideIn 0.3s ease-out forwards;
}

.flash-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.flash-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.flash-notice {
  background-color: var(--success);
}

.flash-alert {
  background-color: var(--danger);
}

.flash-close {
  background: none;
  border: none;
  color: var(--white);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.flash-close:hover {
  opacity: 1;
}

.flash-close svg {
  width: 1rem;
  height: 1rem;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Form styles */
.form-container {

  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  background-color: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.form-subtitle {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray-700);
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-900);
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 0.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-input:focus {
  border-color: var(--primary-color);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.25);
}

.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-checkbox input {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}

.form-checkbox label {
  font-size: 0.875rem;
  color: var(--gray-700);
  cursor: pointer;
}

.form-submit {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--white);
  background-color: var(--primary-color);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.form-submit:hover {
  background-color: var(--primary-color-dark);
}

.form-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--gray-600);
}

.form-footer a {
  color: var(--primary-color);
  font-weight: 500;
}

.form-error {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--danger);
}

.form-error-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.form-error-item {
  margin-bottom: 0.25rem;
}

/* Button Styles */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  border: none;
  background-color: var(--primary-color);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--primary-color-dark);
  text-decoration: none;
  color: var(--white);
}

.btn-primary .icon {
  width: 1rem;
  height: 1rem;
}

/* Error message styles */
.error-container {
  background-color: #fee;
  border: 1px solid #f99;
  border-radius: 5px;
  margin-bottom: 20px;
  padding: 15px;
}

.error-header h2 {
  color: #d00;
  font-size: 16px;
  margin-top: 0;
}

.error-list {
  margin: 5px 0 0 20px;
  padding: 0;
}

.error-item {
  color: #d00;
  margin-bottom: 5px;
}

/* Flash message styles */
.flash {
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.flash-notice {
  background-color: #e8f5e9;
  border: 1px solid #81c784;
  color: #2e7d32;
}

.flash-alert {
  background-color: #ffebee;
  border: 1px solid #e57373;
  color: #c62828;
}

.flash-success {
  background-color: #e8f5e9;
  border: 1px solid #81c784;
  color: #2e7d32;
}