.electrode-table-container { max-width:1400px;margin:40px auto;border-radius:20px;box-shadow:0 20px 40px rgba(0, 0, 0, 0.1);overflow:hidden;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background:white;} .electrode-table-container .table-header { background:linear-gradient(135deg, #2c3e50 0%, #34495e 100%);color:white;padding:50px;text-align:center;} .electrode-table-container .table-header h1 { font-size:2.5em;color:white !important;margin:0 0 10px 0;font-weight:600;} .electrode-table-container .table-header .subtitle { font-size:1.1em;opacity:0.9;margin:0;} .electrode-table-container .table-controls-section { padding:30px 30px;background:#f8f9fa;border-bottom:2px solid #e9ecef;display:flex;flex-wrap:wrap;gap:15px;align-items:center;} .electrode-table-container .filter-group { display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .electrode-table-container .filter-label { font-weight:600;color:#2c3e50;} .electrode-table-container .filter-btn { padding:8px 16px;border:2px solid #667eea;background:white;color:#667eea;border-radius:20px;cursor:pointer;transition:all 0.3s;font-size:0.9em;font-weight:500;} .electrode-table-container .filter-btn:hover { background:#33475c;color:white;transform:translateY(-2px);} .electrode-table-container .filter-btn.active { background:#33475c;color:white;} .electrode-table-container .table-content-section { padding:0px;} .electrode-table-container .table-wrapper { overflow-x:auto;} .electrode-table-container .data-table { width:100%;border-collapse:collapse;font-size:0.95em;min-width:1200px;} .electrode-table-container .data-table th:not(:last-child), .electrode-table-container .data-table td:not(:last-child) { border-right:1px dashed #dde2e7;} .electrode-table-container .data-table tr:hover td:not(:last-child) { border-right-color:#c8ced5;} .electrode-table-container .data-table th { background:#33475c;color:white;padding:15px 10px;text-align:left;font-weight:600;position:sticky;top:0;z-index:10;} .electrode-table-container .data-table th:first-child { width:200px;min-width:200px;z-index:11;} .electrode-table-container .data-table td { padding:12px 10px;border-bottom:1px solid #e9ecef;vertical-align:top;} .electrode-table-container .data-table tr:hover td { background:#f8f9fa;} .electrode-table-container .category-row { background:#e3f2fd !important;font-weight:700;color:#1976d2;font-size:1.05em;} .electrode-table-container .category-row td { padding:15px 10px;border-top:3px solid #1976d2;border-bottom:2px solid #1976d2;} .electrode-table-container .category-row:hover td { background:#e3f2fd !important;} .electrode-table-container .row-label { font-weight:600;color:#2c3e50;background:#f8f9fa;} .electrode-table-container .hidden { display:none;} .electrode-table-container .rating { color:#ffc107;} .electrode-table-container .tag { display:inline-block;padding:3px 8px;background:#e3f2fd;color:#1976d2;border-radius:12px;font-size:0.85em;margin:2px;} .electrode-table-container .tag.green { background:#e8f5e9;color:#2e7d32;} .electrode-table-container .tag.orange { background:#fff3e0;color:#ef6c00;} .electrode-table-container .tag.red { background:#ffebee;color:#c62828;} .electrode-table-container .pros { color:#2e7d32;} .electrode-table-container .cons { color:#c62828;} @media (max-width:768px) { .electrode-table-container .table-header h1 { font-size:1.8em;} .electrode-table-container .table-controls-section { padding:15px;} .electrode-table-container .table-content-section { padding:15px 0;} .electrode-table-container .data-table { font-size:0.85em;} }