cssが崩れてる

style.css

@@ -1,3 +1,18 @@
+
+/* Base styles */
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    line-height: 1.5;
+}
+
+/* Container styles */
+.container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
 /* Custom animations */
 @keyframes fadeIn {
     from { opacity: 0; }
@@ -40,10 +55,70 @@
     color: #2ecc71;
 }
 
+.file-type-sheet {
+    color: #27ae60;
+}
+
+.file-type-ppt {
+    color: #e67e22;
+}
+
 .file-type-zip {
     color: #f39c12;
 }
 
 .file-type-other {
     color: #9b59b6;
-}
+}
+
+/* Responsive grid fixes */
+@media (max-width: 768px) {
+    .grid-cols-12 > div {
+        grid-column: span 12 !important;
+        margin-bottom: 0.5rem;
+    }
+    
+    .flex-col {
+        flex-direction: column;
+    }
+    
+    .flex-col .space-x-6 {
+        margin-top: 1rem;
+        margin-left: 0;
+    }
+}
+
+/* Input and button fixes */
+input[type="password"],
+input[type="file"] {
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    padding: 0.5rem 0.75rem;
+    width: 100%;
+}
+
+button {
+    transition: all 0.2s ease;
+}
+
+/* Shadow DOM component fixes */
+custom-header, custom-footer {
+    display: block;
+    width: 100%;
+}
+
+/* Spacing fixes */
+.py-8 {
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+
+.px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+/* Icon alignment fixes */
+[data-feather] {
+    vertical-align: middle;
+}