new UI

index.html

@@ -453,6 +453,56 @@
             z-index: 1;
             border-radius: var(--radius);
         }
+
+        /* Mobile Responsive */
+        @media (max-width: 600px) {
+            .header {
+                padding: 12px 16px;
+                gap: 8px;
+            }
+
+            .app-title {
+                font-size: 20px;
+            }
+
+            .header-right {
+                flex-wrap: nowrap;
+                gap: 8px;
+            }
+
+            .save-status {
+                font-size: 10px;
+                padding: 6px 12px;
+                min-width: 70px;
+                letter-spacing: 0;
+            }
+
+            .word-count {
+                font-size: 11px;
+                padding: 4px 10px;
+            }
+
+            .editor-container {
+                margin: 12px;
+            }
+
+            .editor {
+                padding: 20px;
+                font-size: 16px;
+            }
+
+            .login-box {
+                padding: 32px 24px;
+            }
+
+            .login-box h1 {
+                font-size: 32px;
+            }
+
+            .login-subtitle {
+                font-size: 14px;
+            }
+        }
     </style>
 </head>