Update style.css

style.css

@@ -1,32 +1,57 @@
 :root {
-    --primary-color: #3b82f6;
-    --error-color: #ef4444;
-    --success-color: #22c55e;
+    --primary-color: #2563eb;
+    --success-color: #16a34a;
+    --error-color: #dc2626;
+    --warning-color: #d97706;
+    --background-color: #f8fafc;
+    --text-color: #1e293b;
 }
 
-body {
+* {
     margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    background-color: #f3f4f6;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: system-ui, -apple-system, sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.5;
+}
+
+header {
+    background-color: white;
+    padding: 1rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+}
+
+h1 {
+    max-width: 1200px;
+    margin: 0 auto;
+    font-size: 1.5rem;
+    font-weight: 600;
 }
 
 .container {
-    max-width: 64rem;
-    margin: 2rem auto;
+    max-width: 1200px;
+    margin: 0 auto;
     padding: 0 1rem;
 }
 
 .upload-area {
-    border: 2px dashed #d1d5db;
+    background-color: white;
+    border: 2px dashed #cbd5e1;
     border-radius: 0.5rem;
     padding: 2rem;
     text-align: center;
-    background-color: white;
-    transition: border-color 0.3s;
+    transition: all 0.3s ease;
 }
 
-.upload-area:hover {
+.upload-area.drag-over {
     border-color: var(--primary-color);
+    background-color: #eff6ff;
 }
 
 .upload-label {
@@ -34,32 +59,34 @@ body {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 0.5rem;
+    gap: 1rem;
 }
 
 .upload-icon {
-    width: 3rem;
-    height: 3rem;
-    border: 2px solid #9ca3af;
+    width: 4rem;
+    height: 4rem;
+    border: 2px solid #94a3b8;
     border-radius: 50%;
     position: relative;
+    transition: all 0.3s ease;
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 .loading {
     display: flex;
-    justify-content: center;
-    margin: 1rem 0;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    margin: 2rem 0;
 }
 
-.loading::after {
-    content: "";
-    width: 2rem;
-    height: 2rem;
-    border: 2px solid #e5e7eb;
+.spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 3px solid #e2e8f0;
     border-top-color: var(--primary-color);
     border-radius: 50%;
     animation: spin 1s linear infinite;
@@ -67,30 +94,73 @@ body {
 
 .analysis-results {
     margin-top: 2rem;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
 }
 
 .alert {
-    padding: 1rem;
-    border-radius: 0.5rem;
     background-color: white;
-    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-left: 4px solid;
+}
+
+.alert-success {
+    border-left-color: var(--success-color);
 }
 
 .alert-error {
-    border-color: var(--error-color);
-    background-color: #fef2f2;
+    border-left-color: var(--error-color);
 }
 
-.alert-success {
-    border-color: var(--success-color);
-    background-color: #f0fdf4;
+.alert-warning {
+    border-left-color: var(--warning-color);
+}
+
+.compliance-report {
+    background-color: white;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    margin-top: 2rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.report-content {
+    margin-top: 1rem;
+}
+
+.report-section {
+    margin-bottom: 1.5rem;
+}
+
+.report-section h3 {
+    margin-bottom: 0.5rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+}
+
+.metric {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.metric:last-child {
+    border-bottom: none;
 }
 
 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
+}
+
+@media (max-width: 640px) {
+    .container {
+        padding: 0 0.5rem;
+    }
+    
+    .upload-area {
+        padding: 1rem;
+    }
 }