css update

assets/index.html

@@ -6,13 +6,80 @@
 </head>
 
 <style>
+    body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        margin: 0;
+        padding: 20px;
+        background-color: #f5f5f7;
+        color: #333;
+        text-align: center;
+    }
+
     * {
-        font-size: 3vmin;
+        box-sizing: border-box;
+    }
+
+    #status, #permission, #connectionSettings {
+        max-width: 500px;
+        width: 100%;
+        margin-bottom: 20px;
+        padding: 20px;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 20px;
+    }
+
+    td {
+        padding: 10px;
+        text-align: left;
+    }
+
+    input {
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 1rem;
+    }
+
+    button {
+        padding: 10px 20px;
+        margin: 5px;
+        font-size: 1rem;
+        cursor: pointer;
+        background-color: #0071e3;
+        color: white;
+        border: none;
+        border-radius: 8px;
+        transition: background-color 0.2s;
+    }
+
+    button:hover {
+        background-color: #0077ed;
     }
 
     video {
-        max-width: 100vw;
+        max-width: 100%;
         max-height: 50vh;
+        border-radius: 8px;
+        margin: 10px 0;
+    }
+
+    #qr {
+        margin-top: 20px;
+        font-size: 0.9rem;
+        color: #666;
     }
 </style>
 <div id="status">Loading...</div>