第 5 阶段：纠纷、通知与后台-1

frontend/src/styles/base.css

@@ -307,6 +307,69 @@ h1 {
   margin-top: 14px;
 }
 
+.full-control {
+  width: 100%;
+}
+
+.dialog-body {
+  display: grid;
+  gap: 10px;
+}
+
+.dialog-body p {
+  margin: 0;
+  color: #52616f;
+  line-height: 1.6;
+}
+
+.notification-list {
+  display: grid;
+  gap: 12px;
+  margin-top: 28px;
+}
+
+.notification-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  background: #ffffff;
+  padding: 16px;
+}
+
+.notification-item.unread {
+  border-color: #0f766e;
+}
+
+.notification-item span {
+  color: #0f766e;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.notification-item h2 {
+  margin: 6px 0;
+  font-size: 18px;
+}
+
+.notification-item p {
+  margin: 0 0 8px;
+  color: #52616f;
+}
+
+.notification-item small {
+  color: #6b7785;
+}
+
+.notification-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
 @media (max-width: 760px) {
   .app-shell {
     grid-template-columns: 1fr;