/* Number Search Test Styles - Dark Theme */
.number-search-test-container {max-width: 1100px; margin: 0 auto; padding: 30px 20px; background-color: #f5f7fa; color: #1e293b; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;}
.number-search-header {text-align: center; margin-bottom: 30px;}
.number-search-header h2 {font-size: 2em; font-weight: 600; color: #1e293b!important; margin: 0;}
.number-search-start-screen {background: #ffffff; border-radius: 12px; padding: 60px 40px; text-align: center; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);}
.start-content {max-width: 600px; margin: 0 auto;}
.start-icon {font-size: 4em; margin-bottom: 20px;}
.start-content h3 {font-size: 2em; font-weight: 600; color: #1e293b; margin: 0 0 20px 0;}
.start-description {font-size: 1.2em; color: #64748b; margin-bottom: 30px;}
.start-info {font-size: 1em; color: #909090; line-height: 1.8; text-align: left; background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #2563eb; margin-bottom: 30px;}
.start-btn {background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #ffffff; font-size: 1.6em; font-weight: 700; padding: 18px 60px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);}
.start-btn:hover {background: linear-gradient(135deg, #40A0A0 0%, #2563eb 100%); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);}
.start-btn:active {transform: translateY(0);}
.number-search-test-content {background: #ffffff; border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);}
.number-search-progress {margin-bottom: 30px;}
.progress-info {display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1.1em;}
.progress-text {color: #1e293b; font-weight: 600;}
.timer-text {color: #2563eb; font-weight: 600;}
.progress-bar {width: 100%; height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden;}
.progress-fill {height: 100%; background: linear-gradient(90deg, #2563eb 0%, #40A0A0 100%); transition: width 0.3s ease; border-radius: 4px;}
.instruction-area {text-align: center; margin-bottom: 30px;}
.instruction-display {display: inline-block; padding: 15px 40px; border-radius: 8px; font-size: 1.8em; font-weight: 700; letter-spacing: 1px;}
.instruction-display.max-type {background: linear-gradient(135deg, #E74C3C, #dc2626); box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4);}
.instruction-display.min-type {background: linear-gradient(135deg, #3498DB, #2980B9); box-shadow: 0 4px 15px rgba(52, 152, 219, 0.4);}
.number-grid-container {margin-bottom: 30px; display: flex; justify-content: center;}
.number-grid {display: grid; gap: 8px; max-width: 600px; width: 100%;}
.number-cell {background: #2563eb; color: #ffffff; font-size: 1.4em; font-weight: 600; padding: 15px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);}
.number-cell:hover {background: #40A0A0; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);}
.number-cell:active {transform: scale(0.98);}
.number-cell.correct {background: #27AE60 !important; box-shadow: 0 0 20px rgba(39, 174, 96, 0.6);}
.number-cell.wrong {background: #E74C3C !important; box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);}
.control-buttons {display: flex; justify-content: center; gap: 15px;}
.control-btn {padding: 12px 30px; font-size: 1.1em; font-weight: 600; border: none; border-radius: 6px; cursor: pointer; transition: all 0.3s ease;}
.end-btn {background: #1d4ed8; color: #ffffff;}
.end-btn:hover {background: #2563eb;}
.number-search-results {background: #ffffff; border-radius: 12px; padding: 50px 40px; text-align: center; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);}
.results-content h2 {font-size: 2.5em; font-weight: 600; color: #1e293b; margin: 0 0 40px 0;}
.results-stats {display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin-bottom: 40px;}
.stat-card {background: #ffffff; padding: 30px 20px; border-radius: 10px; border: 2px solid #e2e8f0;}
.stat-number {font-size: 3em; font-weight: 700; color: #2563eb; margin-bottom: 8px;}
.stat-label {font-size: 1em; color: #909090; text-transform: uppercase; letter-spacing: 1px;}
.results-message {background: #ffffff; padding: 25px; border-radius: 8px; border-left: 4px solid #2563eb; margin-bottom: 30px;}
.results-message p {font-size: 1.3em; color: #64748b; margin: 0;}
.test-disclaimer {background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #F39C12; color: #64748b; line-height: 1.6; text-align: left; margin-bottom: 30px;}
.test-disclaimer strong {color: #F39C12;}
.number-search-info {margin-top: 40px; padding: 30px; background: #ffffff; border-radius: 12px;}
.number-search-info h3 {font-size: 1.8em; font-weight: 600; color: #1e293b!important; margin-bottom: 25px; text-align: center;}
.info-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;}
.info-card {background: #ffffff; padding: 25px; border-radius: 8px; border-top: 3px solid #2563eb;}
.info-card h4 {font-size: 1.2em; color: #1e293b; margin: 0 0 12px 0;}
.info-card p {font-size: 0.95em; color: #909090; line-height: 1.6; margin: 0;}
@media (max-width: 768px) {
  .number-search-test-container {padding: 20px 15px;}
  .number-search-header h2 {font-size: 1.6em;}
  .number-search-start-screen {padding: 40px 25px;}
  .start-content h3 {font-size: 1.6em;}
  .start-btn {font-size: 1.4em; padding: 15px 40px;}
  .number-search-test-content {padding: 25px 20px;}
  .instruction-display {font-size: 1.4em; padding: 12px 30px;}
  .number-grid {gap: 6px;}
  .number-cell {font-size: 1.2em; padding: 12px;}
  .results-content h2 {font-size: 2em;}
  .stat-number {font-size: 2.5em;}
}
@media (max-width: 480px) {
  .number-cell {font-size: 1.1em; padding: 10px;}
  .results-stats {grid-template-columns: repeat(2, 1fr);}
  .info-grid {grid-template-columns: 1fr;}
}