diff --git a/web/static/style.css b/web/static/style.css
index c197dea..adc7f67 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -73,11 +73,11 @@ body {
 
 /* 按钮 */
 button {
-    padding: 8px 16px;
+    padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    font-size: 13px;
+    font-size: 14px;
     transition: all 0.2s;
 }
 
@@ -109,8 +109,8 @@ button {
 }
 
 .btn-small {
-    padding: 5px 15px;
-    font-size: 12px;
+    padding: 6px 15px;
+    font-size: 13px;
     background: #9e9e9e;
     color: white;
 }
@@ -318,31 +318,6 @@ button {
     background: #f9f5ff;
 }
 
-.event-card.type-人物活动 {
-    border-left-color: #e91e63;
-}
-
-.event-card.type-运动检测 {
-    border-left-color: #ff9800;
-}
-
-.event-card.type-物体变化 {
-    border-left-color: #ff9800;
-}
-
-.event-card.type-环境变化 {
-    border-left-color: #4caf50;
-}
-
-.event-card.type-异常情况 {
-    border-left-color: #f44336;
-}
-
-.event-card.type-无事件 {
-    border-left-color: #9e9e9e;
-    opacity: 0.7;
-}
-
 .event-header {
     display: flex;
     justify-content: space-between;
@@ -395,6 +370,25 @@ button {
     background: #e0e0e0;
 }
 
+/* Toast 提示 */
+.toast {
+    position: fixed;
+    top: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #333;
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    z-index: 2000;
+    font-size: 14px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
+
+.toast.fade-out {
+    opacity: 0;
+}
+
 /* 模态框 */
 .modal {
     display: none;
@@ -408,7 +402,7 @@ button {
     align-items: flex-start;
     justify-content: center;
     overflow-y: auto;
-    padding: 20px;
+    padding: 30px;
 }
 
 .modal.active {
@@ -417,20 +411,11 @@ button {
 
 .modal-content {
     background: white;
-    padding: 15px;
+    padding: 20px;
     border-radius: 10px;
-    max-width: 800px;
+    max-width: 700px;
     position: relative;
-}
-
-.settings-modal-content {
-    max-width: 500px;
-}
-
-.settings-modal-content h2 {
-    margin-bottom: 10px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid #eee;
+    margin: 20px auto;
 }
 
 .modal-close {
@@ -512,104 +497,218 @@ button {
     gap: 10px;
 }
 
-/* 设置模态框 */
-.settings-section {
-    margin-bottom: 8px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #eee;
+/* 设置模态框 - 可滚动 */
+.settings-modal-content {
+    max-width: 550px;
+    max-height: 85vh;
+    overflow-y: auto;
 }
 
-.settings-section:last-of-type {
-    border-bottom: none;
+.settings-modal-content h2 {
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 2px solid #eee;
+    font-size: 18px;
+}
+
+.settings-section {
+    margin-bottom: 15px;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
 }
 
 .settings-section h4 {
-    margin-bottom: 6px;
+    margin-bottom: 12px;
     color: #667eea;
-    font-size: 13px;
+    font-size: 15px;
+    font-weight: bold;
 }
 
 .setting-item {
     display: flex;
     align-items: center;
-    gap: 5px;
-    margin-bottom: 4px;
+    gap: 12px;
+    margin-bottom: 10px;
 }
 
 .setting-item label {
-    min-width: 100px;
-    color: #555;
-    font-size: 12px;
+    min-width: 140px;
+    color: #333;
+    font-size: 14px;
+    font-weight: 500;
 }
 
 .setting-item input[type="text"],
 .setting-item input[type="number"],
 .setting-item input[type="password"] {
     flex: 1;
-    padding: 4px 8px;
+    padding: 8px 12px;
     border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 12px;
-    max-width: 120px;
+    border-radius: 5px;
+    font-size: 14px;
+    min-width: 180px;
 }
 
 .setting-item input[type="checkbox"] {
-    width: 14px;
-    height: 14px;
+    width: 20px;
+    height: 20px;
 }
 
-.setting-note {
-    color: #888;
-    font-size: 11px;
-    margin-top: 3px;
+.setting-item select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+    min-width: 180px;
 }
 
 .setting-desc {
     color: #888;
-    font-size: 11px;
+    font-size: 13px;
+}
+
+.setting-note {
+    color: #888;
+    font-size: 13px;
+    margin-top: 5px;
+    padding-left: 140px;
 }
 
 .settings-actions {
-    margin-top: 10px;
-    padding-top: 8px;
-    border-top: 1px solid #eee;
+    margin-top: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 8px;
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    border-top: 2px solid #eee;
+}
+
+.settings-actions button {
+    padding: 12px 30px;
+    font-size: 15px;
+}
+
+/* 统计图表模态框 */
+.stats-modal-content {
+    max-width: 600px;
+    max-height: 85vh;
+    overflow-y: auto;
+}
+
+.stats-controls {
     display: flex;
     gap: 10px;
-    justify-content: center;
+    margin-bottom: 15px;
 }
 
-/* Toast 提示 */
-.toast {
-    position: fixed;
-    top: 80px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: #333;
-    color: white;
-    padding: 12px 24px;
-    border-radius: 8px;
-    z-index: 2000;
+.stats-summary-box {
+    margin-bottom: 15px;
+}
+
+.chart-container {
+    margin-bottom: 20px;
+}
+
+.chart-container h4 {
+    margin-bottom: 10px;
+    color: #667eea;
     font-size: 14px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    animation: fadeIn 0.3s;
 }
 
-.toast.fade-out {
-    animation: fadeOut 0.3s;
-    opacity: 0;
+.timeline-chart {
+    display: flex;
+    gap: 3px;
+    height: 150px;
+    align-items: flex-end;
+    background: #f5f5f5;
+    padding: 10px;
+    border-radius: 5px;
 }
 
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
-    to { opacity: 1; transform: translateX(-50%) translateY(0); }
+.timeline-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
 }
 
-@keyframes fadeOut {
-    from { opacity: 1; }
-    to { opacity: 0; }
+.bar-fill {
+    background: #667eea;
+    width: 80%;
+    min-height: 5px;
+    border-radius: 3px 3px 0 0;
 }
 
-/* 人员库样式 */
+.bar-label {
+    font-size: 10px;
+    color: #888;
+    margin-top: 3px;
+}
+
+.bar-value {
+    font-size: 11px;
+    color: #667eea;
+    font-weight: bold;
+}
+
+.history-chart {
+    display: flex;
+    gap: 5px;
+    height: 120px;
+    align-items: flex-end;
+    background: #f5f5f5;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.history-bar {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    height: 100%;
+}
+
+.bar-fill.images {
+    background: #4CAF50;
+}
+
+.event-type-bar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.event-type-label {
+    min-width: 100px;
+    font-size: 13px;
+    color: #555;
+}
+
+.event-type-fill {
+    background: #667eea;
+    height: 24px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    min-width: 40px;
+}
+
+.event-type-count {
+    font-size: 13px;
+    color: white;
+    font-weight: bold;
+}
+
+/* 人员库模态框 */
 .persons-stats {
     margin-bottom: 15px;
 }
@@ -670,126 +769,6 @@ button {
     gap: 8px;
 }
 
-/* 统计图表样式 */
-.stats-modal-content {
-    max-width: 600px;
-    max-height: 85vh;
-    overflow-y: auto;
-}
-
-.stats-controls {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 15px;
-    align-items: center;
-}
-
-.stats-summary-box {
-    margin-bottom: 15px;
-}
-
-.chart-container {
-    margin-bottom: 20px;
-}
-
-.chart-container h4 {
-    margin-bottom: 10px;
-    color: #667eea;
-    font-size: 13px;
-}
-
-.timeline-chart {
-    display: flex;
-    gap: 2px;
-    height: 150px;
-    align-items: flex-end;
-    background: #f5f5f5;
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.timeline-bar {
-    flex: 1;
-    min-width: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    height: 100%;
-}
-
-.bar-fill {
-    background: #667eea;
-    width: 80%;
-    min-height: 5px;
-    border-radius: 3px 3px 0 0;
-}
-
-.bar-label {
-    font-size: 9px;
-    color: #888;
-    margin-top: 3px;
-    text-align: center;
-}
-
-.bar-value {
-    font-size: 10px;
-    color: #667eea;
-    font-weight: bold;
-}
-
-.history-chart {
-    display: flex;
-    gap: 5px;
-    height: 120px;
-    align-items: flex-end;
-    background: #f5f5f5;
-    padding: 10px;
-    border-radius: 5px;
-}
-
-.history-bar {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: flex-end;
-    height: 100%;
-}
-
-.bar-fill.images {
-    background: #4CAF50;
-}
-
-.event-type-bar {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 8px;
-}
-
-.event-type-label {
-    min-width: 100px;
-    font-size: 12px;
-    color: #555;
-}
-
-.event-type-fill {
-    background: #667eea;
-    height: 20px;
-    border-radius: 3px;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    min-width: 30px;
-}
-
-.event-type-count {
-    font-size: 12px;
-    color: white;
-    font-weight: bold;
-}
-
 /* 响应式 */
 @media (max-width: 768px) {
     .control-panel {
@@ -808,7 +787,17 @@ button {
         flex-wrap: wrap;
     }
     
-    .settings-modal-content {
+    .settings-modal-content,
+    .stats-modal-content {
         max-width: 95vw;
+        padding: 15px;
+    }
+    
+    .setting-item {
+        flex-wrap: wrap;
+    }
+    
+    .setting-item label {
+        min-width: 100%;
     }
 }
\ No newline at end of file