feat: add Shoutrrr push notification support and settings to reminders

frontend/src/styles.css

@@ -82,26 +82,34 @@ body {
   background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(59, 130, 246, 0.04));
 }
 
-.header-actions { display: flex; align-items: center; gap: 1rem; }
+.header-actions { display: flex; align-items: center; gap: 0.75rem; }
 
-.theme-toggle {
+.icon-btn {
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background: var(--accent-bg);
-  border: 1px solid var(--border-primary);
+  background: transparent;
+  border: none;
   cursor: pointer;
-  font-size: 1.1rem;
+  font-size: 1.2rem;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 150ms ease, background 150ms ease;
   padding: 0;
+  opacity: 0.7;
 }
-.theme-toggle:hover {
+.icon-btn:hover {
   transform: scale(1.1);
-  background: rgba(47, 134, 246, 0.2);
+  background: rgba(255, 255, 255, 0.1);
+  opacity: 1;
 }
+.icon-btn.active {
+  opacity: 1;
+  background: rgba(47, 134, 246, 0.15);
+}
+[data-theme="light"] .icon-btn:hover { background: rgba(0, 0, 0, 0.08); }
+[data-theme="light"] .icon-btn.active { background: rgba(47, 134, 246, 0.12); }
 
 .hero h1 { margin: 0.15rem 0 0; font-size: 1.6rem; font-weight: 600; }
 .sub { color: var(--text-secondary); margin: 0; }
@@ -177,6 +185,8 @@ body {
 .card h2 { margin: 0; font-size: 1.2rem; }
 
 .pill { border: 1px solid var(--accent); color: var(--text-muted); background: var(--accent-bg); padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.85rem; transition: all 150ms ease; }
+.pill.clickable { cursor: pointer; }
+.pill.clickable:hover { filter: brightness(1.15); transform: scale(1.02); }
 .pill.success { border-color: var(--success); background: var(--success-bg); color: var(--success); }
 .pill.neutral { border-color: var(--border-secondary); background: rgba(255, 255, 255, 0.04); color: var(--text-muted); }
 [data-theme=\"light\"] .pill.neutral { background: rgba(0, 0, 0, 0.04); }