.gf-cert-tracking-container{max-width:800px;margin:50px auto;padding:20px}
.tracking-form{display:flex;gap:10px;margin-bottom:30px}
.tracking-form input{flex:1;padding:12px;border:1px solid #ddd;border-radius:4px;font-size:16px}
.tracking-form button{padding:12px 30px;background:#007cba;color:#fff;border:none;border-radius:4px;cursor:pointer}
.cert-results-table{width:100%;border-collapse:collapse;margin-top:20px}
.cert-results-table th, .cert-results-table td{padding:12px;text-align:right;border-bottom:1px solid #ddd}
.cert-results-table th{background:#f5f5f5;font-weight:700}
.view-cert, .download-cert{padding:8px 16px;margin:0 4px;border:none;border-radius:4px;cursor:pointer;background:#007cba;color:#fff}
.download-cert{background:#28a745}
.cert-preview-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:800px;height:90vh;background:#fff;box-shadow:0 0 20px rgba(0,0,0,0.3);z-index:9999;overflow:auto;padding:40px;box-sizing:border-box}
.gf-cert-tracker-container {max-width: 800px; margin: 40px auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);}
.tracker-header {text-align: center; margin-bottom: 30px;}
.tracker-header h3 {font-size: 24px; margin-bottom: 10px; color: #333;}
.tracker-header p {color: #666;}
.gf-cert-tracker-form .form-group {display: flex; gap: 10px;}
.tracker-input {flex: 1; padding: 15px; border: 2px solid #e0e0e0; border-radius: 6px; font-size: 16px; transition: border-color 0.3s;}
.tracker-input:focus {border-color: #2271b1; outline: none;}
.tracker-submit {padding: 15px 40px; background: #2271b1; color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: 16px; transition: background 0.3s;}
.tracker-submit:hover {background: #135e96;}

.cert-results-table {width: 100%; border-collapse: collapse; margin-top: 20px;}
.cert-results-table th {background: #f8f9fa; padding: 15px; text-align: right; font-weight: 600; border-bottom: 2px solid #e0e0e0;}
.cert-results-table td {padding: 15px; border-bottom: 1px solid #e0e0e0; vertical-align: middle;}
.cert-results-table tr:hover {background: #f8f9fa;}
.cert-results-table .actions {display: flex; gap: 8px;}
.btn-view, .btn-download {padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-size: 14px; transition: all 0.2s;}
.btn-view {background: #e3f2fd; color: #1976d2;}
.btn-view:hover {background: #1976d2; color: #fff;}
.btn-download {background: #e8f5e9; color: #388e3c;}
.btn-download:hover {background: #388e3c; color: #fff;}

/* Modal */
.cert-modal-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.8); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px;}
.cert-modal-content {background: #fff; width: 100%; max-width: 800px; max-height: 90vh; overflow: auto; position: relative; padding: 40px; box-shadow: 0 5px 20px rgba(0,0,0,0.3);}
.close-modal {position: absolute; top: 10px; left: 10px; background: none; border: none; font-size: 24px; cursor: pointer; color: #666; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;}
.close-modal:hover {background: #f0f0f0; color: #000;}

/* Loading */
.tracker-results.loading {opacity: 0.6; pointer-events: none;}
.spinner {display: inline-block; width: 20px; height: 20px; border: 2px solid #f3f3f3; border-top: 2px solid #2271b1; border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin {0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}