moved to API

app/styles.css

@@ -73,6 +73,100 @@
     .settings-trigger[aria-pressed="true"] {
       background: #3f3f46;
     }
+    body.connection-gated {
+      overflow: hidden;
+    }
+    .connection-gate {
+      position: fixed;
+      inset: 0;
+      z-index: 120;
+      display: grid;
+      place-items: center;
+      padding: 24px;
+      background:
+        radial-gradient(circle at top, rgba(245, 158, 11, 0.18), transparent 34%),
+        linear-gradient(180deg, rgba(9, 9, 11, 0.84), rgba(9, 9, 11, 0.96));
+      -webkit-backdrop-filter: blur(8px);
+      backdrop-filter: blur(8px);
+    }
+    .connection-gate[hidden] {
+      display: none;
+    }
+    .connection-gate-card {
+      width: min(460px, calc(100vw - 32px));
+      padding: 24px;
+      border: 1px solid rgba(245, 158, 11, 0.28);
+      border-radius: 18px;
+      background: linear-gradient(180deg, rgba(24, 24, 27, 0.96), rgba(9, 9, 11, 0.98));
+      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
+      box-sizing: border-box;
+    }
+    .connection-gate-eyebrow {
+      margin-bottom: 10px;
+      font-size: 12px;
+      font-weight: 700;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+      color: #fbbf24;
+    }
+    .connection-gate-title {
+      margin: 0;
+      font-size: 28px;
+      line-height: 1.1;
+      color: #fafaf9;
+    }
+    .connection-gate-copy {
+      margin: 12px 0 18px;
+      color: #d4d4d8;
+      font-size: 14px;
+      line-height: 1.6;
+    }
+    .connection-gate-fields {
+      display: grid;
+      gap: 12px;
+    }
+    .connection-gate-status {
+      min-height: 20px;
+      margin-top: 14px;
+      font-size: 13px;
+      color: #d4d4d8;
+    }
+    .connection-gate-status[data-tone="error"] {
+      color: #fca5a5;
+    }
+    .connection-gate-status[data-tone="success"] {
+      color: #86efac;
+    }
+    .connection-gate-status[data-tone="pending"] {
+      color: #fcd34d;
+    }
+    .connection-gate-actions {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: 10px;
+      margin-top: 18px;
+    }
+    .connection-gate-actions button {
+      padding: 9px 14px;
+      border-radius: 8px;
+      border: 1px solid #3f3f46;
+      background: #27272a;
+      color: #f4f4f5;
+      cursor: pointer;
+    }
+    .connection-gate-actions button:hover {
+      background: #3f3f46;
+    }
+    #connection-gate-connect {
+      border-color: #d97706;
+      background: linear-gradient(180deg, #f59e0b, #d97706);
+      color: #111827;
+      font-weight: 700;
+    }
+    #connection-gate-connect:hover {
+      background: linear-gradient(180deg, #fbbf24, #ea580c);
+    }
     #tarot-section {
       height: calc(100vh - 61px);
       background: #18181b;
@@ -3509,6 +3603,9 @@
       color: #f4f4f5;
       box-sizing: border-box;
     }
+    .settings-field input[type="password"] {
+      letter-spacing: 0.04em;
+    }
     .settings-actions {
       margin-top: 12px;
       display: flex;
@@ -3528,6 +3625,23 @@
     .settings-popup-header button:hover {
       background: #3f3f46;
     }
+    @media (max-width: 640px) {
+      .connection-gate {
+        padding: 16px;
+      }
+      .connection-gate-card {
+        padding: 18px;
+      }
+      .connection-gate-title {
+        font-size: 24px;
+      }
+      .connection-gate-actions {
+        justify-content: stretch;
+      }
+      .connection-gate-actions button {
+        flex: 1 1 100%;
+      }
+    }
     #month-strip {
       height: 28px;
       background: #18181b;