Adopt shared WebUI structural primitives

webui/src/styles/notifications.css

@@ -1,18 +1,3 @@
-.notifications-page {
-  box-sizing: border-box;
-  height: calc(100vh - 115px);
-  min-height: 0;
-  overflow: hidden;
-  color: var(--text);
-  background: var(--bg);
-}
-
-.notifications-page *,
-.notifications-page *::before,
-.notifications-page *::after {
-  box-sizing: border-box;
-}
-
 .notifications-widget-actions {
   display: flex;
   align-items: center;
@@ -21,28 +6,14 @@
   margin-top: 14px;
 }
 
-.notifications-shell {
-  height: 100%;
-  min-height: 0;
-  display: grid;
-  grid-template-columns: minmax(270px, 340px) minmax(0, 1fr);
-  border: var(--border-line);
-  background: var(--panel);
-  overflow: hidden;
-}
-
 .notifications-sidebar {
   min-width: 0;
   min-height: 0;
   display: flex;
   flex-direction: column;
-  border-right: var(--border-line);
-  background: var(--panel-soft);
 }
 
-.notifications-sidebar-bar,
 .notifications-title,
-.notifications-topbar,
 .notifications-title-line,
 .notifications-actions,
 .notifications-message-meta,
@@ -52,27 +23,6 @@
   gap: 8px;
 }
 
-.notifications-sidebar-bar,
-.notifications-topbar {
-  min-height: 54px;
-  justify-content: space-between;
-  border-bottom: var(--border-line);
-  background: var(--panel-header);
-  padding: 9px 12px;
-}
-
-.notifications-count {
-  min-width: 21px;
-  height: 21px;
-  display: inline-grid;
-  place-items: center;
-  border-radius: 999px;
-  background: var(--accent);
-  color: var(--on-accent);
-  font-size: 12px;
-  font-weight: 800;
-}
-
 .notifications-status-filter {
   width: calc(100% - 16px);
   margin: 8px;
@@ -244,17 +194,6 @@
   font-size: 15px;
 }
 
-.notifications-section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.notifications-section-heading h2 {
-  margin: 0;
-}
-
 .notifications-properties dl {
   display: grid;
   grid-template-columns: repeat(2, minmax(180px, 1fr));
@@ -307,44 +246,13 @@
   color: var(--muted);
 }
 
-.notifications-empty-state {
-  min-height: 100%;
-  display: grid;
-  place-items: center;
-  align-content: center;
-  gap: 8px;
-  padding: 32px;
-  text-align: center;
-}
-
 .notifications-permission-state {
   max-width: 860px;
   margin: 0 auto;
   padding: 32px 20px;
 }
 
-.notifications-empty-state h1 {
-  margin: 0;
-  color: var(--text-strong);
-}
-
-.notifications-empty-state p {
-  max-width: 520px;
-  margin: 0;
-  color: var(--muted);
-}
-
 @media (max-width: 900px) {
-  .notifications-shell {
-    grid-template-columns: 1fr;
-  }
-
-  .notifications-sidebar {
-    min-height: 220px;
-    border-right: 0;
-    border-bottom: var(--border-line);
-  }
-
   .notifications-topbar {
     align-items: flex-start;
     flex-direction: column;