/* ============================================
   Training Suite / Benchmarks Page Styles
   ============================================ */

/* Hero Section */
.hero-training-suite { padding-top: 120px; padding-bottom: 80px; overflow: hidden; }
.hero-training-suite .hero-bg.hero-bg-right { width: 40%; right: 0; left: auto; opacity: 0.4; }
.hero-training-suite .hero-headline { font-size: 48px; margin-bottom: 15px; }
.hero-training-suite .hero-subtitle { font-size: 20px; color: #925ADD; font-weight: 600; margin-bottom: 20px; }
.hero-training-suite .hero-bio { font-size: 16px; line-height: 1.7; max-width: 700px; margin: 0 auto 30px; color: #B8A8D9; }
.hero-training-suite .hero-action { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; }

/* Precision Table Section */
.precision-section { padding: 60px 0; }
.sort-controls { display: flex; align-items: center; gap: 15px; justify-content: flex-end; }
.sort-controls label { margin: 0; font-weight: 600; color: #B8A8D9; }
.sort-select { width: auto; min-width: 200px; padding: 10px 15px; border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 14px; color: #F0EAFF; background-color: #2B1F45; cursor: pointer; }
.sort-select:focus { border-color: #925ADD; outline: none; box-shadow: 0 0 0 3px rgba(146,90,221,0.15); }

/* Spinner */
.loading-spinner { padding: 60px 20px; color: #B8A8D9; }
.spinner { width: 50px; height: 50px; border: 4px solid #2B1F45; border-top: 4px solid #925ADD; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Precision Table */
.precision-table-wrapper { overflow-x: auto; background: #1E1530; border-radius: 12px; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.precision-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.precision-table thead { background: linear-gradient(93.96deg, #3D2A6E 6.46%, rgba(90,50,153,0.9) 98.85%); }
.precision-table thead th { padding: 18px 20px; text-align: left; color: #F0EAFF; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.precision-table tbody tr { border-bottom: 1px solid rgba(255,255,255,0.05); transition: background-color 0.2s ease; cursor: pointer; position: relative; }
.precision-table tbody tr:hover { background-color: rgba(146,90,221,0.1); }
.precision-table tbody td { padding: 18px 20px; font-size: 14px; color: #B8A8D9; }
.precision-table .language-cell { font-weight: 600; display: flex; align-items: center; gap: 10px; color: #F0EAFF; }
.precision-table .language-code { background: rgba(255,255,255,0.08); padding: 3px 8px; border-radius: 4px; font-size: 11px; color: #B8A8D9; text-transform: uppercase; }

/* Click hint */
.precision-table tbody tr::after { content: 'Click for details'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); opacity: 0; color: #925ADD; font-size: 12px; transition: opacity 0.2s ease; }
.precision-table tbody tr:hover::after { opacity: 1; }

/* Accuracy Badges */
.accuracy-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: 14px; }
.accuracy-badge .accuracy-bar { width: 40px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden; }
.accuracy-badge .accuracy-bar-fill { height: 100%; border-radius: 3px; background: currentColor; }
.accuracy-excellent { background: rgba(22,163,74,0.2); color: #4ade80; }
.accuracy-very-good { background: rgba(34,197,94,0.2); color: #86efac; }
.accuracy-good { background: rgba(234,179,8,0.2); color: #fde047; }
.accuracy-fair { background: rgba(249,115,22,0.2); color: #fb923c; }
.accuracy-needs-improvement { background: rgba(239,68,68,0.2); color: #f87171; }
.accuracy-na { background: rgba(156,163,175,0.15); color: #9ca3af; }

/* Misc Badges */
.model-badge { background: rgba(255,255,255,0.08); padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; color: #B8A8D9; }
.date-badge { color: #7D6FA8; font-size: 13px; }

/* Error / No-data States */
.error-message { padding: 60px 20px; background: rgba(239,68,68,0.1); border-radius: 12px; max-width: 500px; margin: 0 auto; color: #B8A8D9; }
.no-data-message { padding: 40px 20px; text-align: center; color: #7D6FA8; }
.no-data-message i { font-size: 48px; margin-bottom: 15px; }

/* Metric Cards */
.metric-card { background: #2B1F45; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 30px; margin-bottom: 24px; }
.metric-card h3 { color: #F0EAFF; margin-bottom: 12px; font-size: 20px; }
.metric-card p { color: #B8A8D9; }
.metric-icon { width: 44px; height: 44px; background: #3D2A6E; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #925ADD; }
.metric-formula { background: rgba(0,0,0,0.3); border-radius: 8px; padding: 12px 16px; margin: 12px 0; overflow-x: auto; }
.metric-formula code { color: #C4B8E8; font-size: 13px; white-space: nowrap; }
.metric-formula::-webkit-scrollbar { height: 6px; }
.metric-formula::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); border-radius: 6px; }
.metric-formula::-webkit-scrollbar-thumb { background: rgba(146,90,221,0.7); border-radius: 6px; }
.metric-formula::-webkit-scrollbar-thumb:hover { background: #925add; }
.metric-note { font-size: 13px; color: #7D6FA8; margin-bottom: 0; }

/* Error Type Cards */
.error-type-card { background: #2B1F45; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 24px; margin-bottom: 0; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.error-type-card h4 { color: #F0EAFF; margin: 12px 0 8px; }
.error-type-card p { color: #B8A8D9; font-size: 14px; margin: 0; }
.error-type-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; margin: 0 auto; }
.error-type-icon.substitution { background: rgba(146,90,221,0.2); color: #925ADD; }
.error-type-icon.insertion { background: rgba(34,197,94,0.2); color: #4ade80; }
.error-type-icon.deletion { background: rgba(249,115,22,0.2); color: #fb923c; }

/* CTA Section */
.cta-content { padding: 20px 0; }
.cta-content h2 { color: #F0EAFF; margin-bottom: 16px; }
.cta-content p { color: #B8A8D9; margin-bottom: 28px; }
.cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
#cta .cta-buttons .btn { background: rgba(146,90,221,0.15) !important; color: #F0EAFF !important; border: 2px solid #925add !important; padding: 14px 36px !important; border-radius: 50px !important; }
#cta .cta-buttons .btn:hover { background: linear-gradient(93.96deg, #3d2a6e 6.46%, #925add 98.85%) !important; color: #fff !important; }

/* Modal */
.modal-content { background: #1E1530; border: 1px solid rgba(255,255,255,0.1); color: #B8A8D9; }
.modal-header { border-bottom: 1px solid rgba(255,255,255,0.07); }
.modal-header .modal-title { color: #F0EAFF; }
.modal-header .close { color: #B8A8D9; opacity: 0.7; }
.modal-body { color: #B8A8D9; }
.language-header { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.language-header h3 { color: #F0EAFF; margin-bottom: 5px; font-size: 24px; }
.language-header p { color: #7D6FA8; margin: 0; }

/* Model Comparison Table */
.model-comparison-table { width: 100%; border-collapse: collapse; }
.model-comparison-table thead { background: rgba(146,90,221,0.2); }
.model-comparison-table th { padding: 12px 16px; color: #F0EAFF; font-weight: 600; font-size: 13px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.07); }
.model-comparison-table td { padding: 12px 16px; color: #B8A8D9; border-bottom: 1px solid rgba(255,255,255,0.05); }
.model-comparison-table tbody tr:hover { background-color: rgba(146,90,221,0.1); }
.model-comparison-table .best-model { background: rgba(146,90,221,0.08); }
.model-comparison-table .best-model td:first-child { position: relative; }
.model-comparison-table .best-model td:first-child::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #925ADD; }

/* Error Breakdown (Modal) */
.error-breakdown-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.07); }
.error-breakdown-section h4 { color: #F0EAFF; margin-bottom: 16px; }
.error-breakdown-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.error-breakdown-card { background: #2B1F45; border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 20px 16px; flex: 1; min-width: 120px; text-align: center; }
.error-breakdown-card.substitutions { border-left: 3px solid #925ADD; }
.error-breakdown-card.insertions { border-left: 3px solid #4ade80; }
.error-breakdown-card.deletions { border-left: 3px solid #fb923c; }
.error-breakdown-card.total-words { border-left: 3px solid #60a5fa; }
.error-breakdown-card.total-errors { border-left: 3px solid #f87171; }
.error-breakdown-card .error-count { display: block; font-size: 26px; font-weight: 700; color: #F0EAFF; }
.error-breakdown-card .error-label { display: block; font-size: 12px; color: #B8A8D9; margin-top: 4px; }

/* Responsive */
@media only screen and (max-width: 992px) {
    .hero-training-suite .hero-headline { font-size: 36px; }
    .sort-controls { justify-content: center; margin-bottom: 20px; }
}

@media only screen and (max-width: 768px) {
    .hero-training-suite { padding-top: 100px; padding-bottom: 60px; }
    .hero-training-suite .hero-headline { font-size: 28px; }
    .precision-table thead th, .precision-table tbody td { padding: 12px 15px; font-size: 13px; }
    .sort-controls { flex-direction: column; gap: 10px; }
    .sort-select { width: 100%; }
    .error-breakdown-cards { flex-wrap: wrap; }
}

@media only screen and (max-width: 576px) {
    .hero-training-suite .hero-action { flex-direction: column; align-items: center; }
    .hero-training-suite .hero-action .btn { width: 100%; max-width: 280px; }
    .cta-buttons { flex-direction: column; align-items: center; }
    .cta-buttons .btn { width: 100%; max-width: 280px; }
}