feat: Add custom metric builder, export/import, and Grafana dashboards (v0.3.0)

- Custom Metrics Builder with admin UI for gauge metrics
- Support for static values and WordPress option-based values
- JSON-based export/import with skip/overwrite/rename modes
- Three Grafana dashboard templates (overview, runtime, WooCommerce)
- New tabs: Custom Metrics and Dashboards
- Reset runtime metrics button

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/admin.css

@@ -45,3 +45,163 @@
 .wp-prometheus-tab-content .form-table {
     margin-top: 10px;
 }
+
+/* Custom metrics form */
+.wp-prometheus-metric-form {
+    background: #fff;
+    border: 1px solid #ccd0d4;
+    border-radius: 4px;
+    padding: 20px;
+    margin: 20px 0;
+}
+
+.wp-prometheus-metric-form h3 {
+    margin-top: 0;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #eee;
+}
+
+.wp-prometheus-metric-form .required {
+    color: #d63638;
+}
+
+/* Label rows */
+.metric-label-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.metric-label-row input {
+    flex: 1;
+    max-width: 300px;
+}
+
+.metric-label-row .remove-label {
+    padding: 0 8px;
+    min-width: auto;
+}
+
+/* Value rows */
+.metric-value-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    flex-wrap: wrap;
+}
+
+.metric-value-row input {
+    width: 120px;
+}
+
+.metric-value-row .remove-value-row {
+    padding: 0 8px;
+    min-width: auto;
+}
+
+/* Custom metrics table */
+.wp-prometheus-custom-metrics .wp-list-table code {
+    background: #f0f0f1;
+    padding: 2px 6px;
+    border-radius: 3px;
+}
+
+.wp-prometheus-custom-metrics .wp-list-table td {
+    vertical-align: middle;
+}
+
+.wp-prometheus-custom-metrics .wp-list-table .dashicons {
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
+/* Dashboard grid */
+.wp-prometheus-dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+    margin: 20px 0;
+}
+
+.wp-prometheus-dashboard-card {
+    background: #fff;
+    border: 1px solid #ccd0d4;
+    border-radius: 4px;
+    padding: 20px;
+    text-align: center;
+    transition: box-shadow 0.2s ease;
+}
+
+.wp-prometheus-dashboard-card:hover {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.wp-prometheus-dashboard-card .dashboard-icon {
+    margin-bottom: 15px;
+}
+
+.wp-prometheus-dashboard-card .dashboard-icon .dashicons {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    color: #2271b1;
+}
+
+.wp-prometheus-dashboard-card h3 {
+    margin: 0 0 10px 0;
+    font-size: 16px;
+}
+
+.wp-prometheus-dashboard-card p {
+    color: #646970;
+    margin: 0 0 15px 0;
+    font-size: 13px;
+}
+
+/* Import options panel */
+#import-options {
+    border-radius: 4px;
+}
+
+#import-options label {
+    display: block;
+    margin-bottom: 8px;
+}
+
+/* Spinner alignment */
+.spinner {
+    float: none;
+    vertical-align: middle;
+}
+
+/* Button groups */
+.wp-prometheus-tab-content .button + .button {
+    margin-left: 5px;
+}
+
+/* Notice messages in forms */
+.wp-prometheus-metric-form .notice,
+.wp-prometheus-custom-metrics .notice {
+    margin: 10px 0;
+    padding: 10px 15px;
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 782px) {
+    .wp-prometheus-dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .metric-value-row {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .metric-value-row input {
+        width: 100%;
+        max-width: none;
+    }
+}