feat(system-hub): add widget preferences styles and new widget gradients

CSS improvements for v0.3.2:
- Widget preferences button and modal styles
- Network widget gradient (cyan → blue)
- Services widget gradient (green →  emerald)
- Preferences modal with category groups
- Checkbox styling for widget selection
- Responsive design for preferences modal

luci-app-system-hub/htdocs/luci-static/resources/system-hub/overview.css

@@ -721,6 +721,137 @@
 	background: linear-gradient(90deg, #f59e0b, #ef4444);
 }
 
+/* Network widget gradient */
+.sh-rt-gradient-network {
+	background: linear-gradient(90deg, #06b6d4, #3b82f6);
+	box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
+}
+
+.sh-rt-metric-network::before { background: linear-gradient(90deg, #06b6d4, #3b82f6); }
+
+/* Services widget gradient */
+.sh-rt-gradient-services {
+	background: linear-gradient(90deg, #22c55e, #10b981);
+	box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
+}
+
+.sh-rt-metric-services::before { background: linear-gradient(90deg, #22c55e, #10b981); }
+
+/* === Widget Preferences Bar === */
+.sh-widget-prefs-bar {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: 20px;
+	padding: 12px 0;
+	border-bottom: 1px solid var(--sh-border);
+}
+
+.sh-btn-icon {
+	display: inline-flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 20px;
+	background: var(--sh-bg-secondary);
+	border: 1px solid var(--sh-border);
+	border-radius: 8px;
+	color: var(--sh-text-primary);
+	font-size: 14px;
+	font-weight: 600;
+	cursor: pointer;
+	transition: all 0.3s ease;
+}
+
+.sh-btn-icon:hover {
+	background: var(--sh-bg-tertiary);
+	border-color: var(--sh-primary);
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
+}
+
+.sh-btn-prefs {
+	background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
+}
+
+/* === Widget Preferences Modal === */
+.sh-widget-prefs-modal {
+	max-width: 600px;
+	margin: 0 auto;
+}
+
+.sh-widget-prefs-modal h3 {
+	margin: 0 0 12px 0;
+	font-size: 20px;
+	font-weight: 700;
+	color: var(--sh-text-primary);
+}
+
+.sh-modal-desc {
+	margin: 0 0 24px 0;
+	color: var(--sh-text-secondary);
+	font-size: 14px;
+	line-height: 1.6;
+}
+
+.sh-prefs-category {
+	margin-bottom: 24px;
+}
+
+.sh-prefs-category-title {
+	margin: 0 0 12px 0;
+	font-size: 11px;
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 1px;
+	color: var(--sh-text-muted);
+}
+
+.sh-prefs-widgets {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: 12px;
+}
+
+.sh-prefs-widget-item {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	padding: 12px 16px;
+	background: var(--sh-bg-secondary);
+	border: 1px solid var(--sh-border);
+	border-radius: 8px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.sh-prefs-widget-item:hover {
+	background: var(--sh-bg-tertiary);
+	border-color: var(--sh-primary);
+}
+
+.sh-prefs-widget-item input[type="checkbox"] {
+	width: 18px;
+	height: 18px;
+	cursor: pointer;
+}
+
+.sh-prefs-widget-info {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex: 1;
+}
+
+.sh-prefs-widget-icon {
+	font-size: 20px;
+	line-height: 1;
+}
+
+.sh-prefs-widget-name {
+	font-size: 14px;
+	font-weight: 600;
+	color: var(--sh-text-primary);
+}
+
 /* === Responsive === */
 @media (max-width: 768px) {
 	.sh-overview-header {
@@ -765,6 +896,15 @@
 	.sh-rt-histogram-bars {
 		height: 50px;
 	}
+
+	/* Widget prefs modal responsive */
+	.sh-prefs-widgets {
+		grid-template-columns: 1fr;
+	}
+
+	.sh-widget-prefs-bar {
+		justify-content: center;
+	}
 }
 
 /* === Dark Mode === */