/* public/assets/css/hardware/codec-test.css */
.codec-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #8b5cf6; --p-primary-hover: #7c3aed; --p-hw: #10b981; --p-sw: #f59e0b; --p-none: #ef4444; --p-text: #0f172a; --p-text-muted: #64748b; width: 100%; max-width: 1000px; margin: 0 auto; background: var(--p-bg); border-radius: 20px; padding: 24px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.codec-wrapper *, .codec-wrapper *::before, .codec-wrapper *::after { box-sizing: border-box; }

.codec-header { text-align: center; margin-bottom: 24px; border-bottom: 1px solid var(--p-border); padding-bottom: 24px; }
.codec-title { font-size: 1.7rem; font-weight: 800; color: var(--p-text); margin: 0 0 10px 0; }
.codec-subtitle { font-size: 0.95rem; color: var(--p-text-muted); max-width: 800px; margin: 0 auto; line-height: 1.6; }

.codec-workspace { display: flex; flex-direction: column; gap: 20px; }

/* Control Button */
.codec-controls { display: flex; justify-content: center; margin-bottom: 10px; }
.codec-btn-primary { width: 100%; max-width: 400px; padding: 18px 24px; border-radius: 12px; font-weight: 900; font-size: 1.1rem; cursor: pointer; border: none; transition: 0.2s; background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: #ffffff; box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4); letter-spacing: 1px; }
.codec-btn-primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5); }
.codec-btn-primary:disabled { background: #94a3b8; box-shadow: none; transform: none; cursor: not-allowed; }

/* Legend */
.codec-legend { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; background: #f8fafc; border: 1px solid var(--p-border); padding: 12px; border-radius: 10px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: #475569; }

/* Badges */
.badge { padding: 4px 10px; border-radius: 6px; font-family: monospace; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.5px; border: 1px solid transparent; }
.badge.hw { background: #dcfce7; color: #166534; border-color: #86efac; box-shadow: 0 0 10px rgba(22, 101, 52, 0.1); }
.badge.sw { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.badge.none { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.badge.loading { background: #e2e8f0; color: #64748b; animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Matrix Table */
.codec-matrix-container { overflow-x: auto; border-radius: 12px; border: 2px solid #1e293b; background: #0f172a; box-shadow: inset 0 5px 20px rgba(0,0,0,0.5); }
.codec-matrix-table { width: 100%; border-collapse: collapse; min-width: 700px; }
.codec-matrix-table th, .codec-matrix-table td { padding: 16px; text-align: center; border: 1px solid #334155; }
.codec-matrix-table th { background: #1e293b; color: #cbd5e1; font-family: monospace; font-size: 0.9rem; font-weight: 800; letter-spacing: 1px; }
.codec-matrix-table td { background: #0f172a; }

.codec-name { font-weight: 900; color: #f8fafc; font-family: monospace; font-size: 1.1rem; text-align: left !important; display: flex; flex-direction: column; gap: 4px; }
.codec-name small { font-size: 0.75rem; color: #64748b; font-weight: normal; }

.codec-hint-card { background: #fef2f2; border-left: 4px solid #ef4444; padding: 16px; border-radius: 0 10px 10px 0; font-size: 0.9rem; color: #7f1d1d; line-height: 1.6; margin-top: 10px; }

/* Dark Mode */
[data-theme="dark"] .codec-wrapper { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .codec-title { color: #f8fafc; }
[data-theme="dark"] .codec-subtitle { color: #94a3b8; }
[data-theme="dark"] .codec-legend { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .legend-item { color: #cbd5e1; }
[data-theme="dark"] .codec-matrix-container { border-color: #020617; }
[data-theme="dark"] .badge.hw { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: #059669; }
[data-theme="dark"] .badge.sw { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: #b45309; }
[data-theme="dark"] .badge.none { background: rgba(239, 68, 68, 0.15); color: #f87171; border-color: #b91c1c; }
[data-theme="dark"] .codec-hint-card { background: rgba(239, 68, 68, 0.1); border-left-color: #ef4444; color: #fca5a5; }