implement supabase

public/style.css

@@ -405,6 +405,157 @@ h1 {
     border-color: #c0392b;
 }
 
+/* ─── Auth overlay ─────────────────────────────────────────────────────────── */
+
+.auth-overlay {
+    position: fixed;
+    inset: 0;
+    background: #1a252f;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+}
+
+.auth-card {
+    background: #2c3e50;
+    border: 2px solid #34495e;
+    padding: 40px;
+    width: 100%;
+    max-width: 400px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.auth-title {
+    color: #ecf0f1;
+    font-size: 1.6em;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 6px;
+}
+
+.auth-subtitle {
+    color: #7f8c8d;
+    font-size: 0.9em;
+    margin-bottom: 28px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.auth-tabs {
+    display: flex;
+    margin-bottom: 24px;
+    border-bottom: 2px solid #34495e;
+}
+
+.auth-tab {
+    background: none;
+    border: none;
+    color: #7f8c8d;
+    padding: 10px 20px;
+    font-size: 0.95em;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: color 0.2s;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px;
+}
+
+.auth-tab.active {
+    color: #3498db;
+    border-bottom-color: #3498db;
+}
+
+.auth-input {
+    display: block;
+    width: 100%;
+    padding: 12px 14px;
+    margin-bottom: 12px;
+    background: #1a252f;
+    border: 2px solid #34495e;
+    color: #ecf0f1;
+    font-size: 1em;
+    font-family: 'Arial', sans-serif;
+    transition: border-color 0.2s;
+}
+
+.auth-input:focus {
+    outline: none;
+    border-color: #3498db;
+}
+
+.auth-input::placeholder {
+    color: #7f8c8d;
+}
+
+.auth-error {
+    font-size: 0.9em;
+    color: #e74c3c;
+    margin-bottom: 12px;
+    min-height: 20px;
+}
+
+.auth-button {
+    width: 100%;
+    padding: 14px;
+    background: #3498db;
+    color: white;
+    border: none;
+    font-size: 1em;
+    font-weight: bold;
+    font-family: 'Arial', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.auth-button:hover {
+    background: #2980b9;
+}
+
+/* ─── User display in header ─────────────────────────────────────────────── */
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.user-display {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 6px;
+}
+
+.user-name {
+    color: #bdc3c7;
+    font-size: 0.85em;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.logout-button {
+    background: none;
+    border: 1px solid #34495e;
+    color: #7f8c8d;
+    padding: 5px 12px;
+    font-size: 0.8em;
+    font-family: 'Arial', sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    cursor: pointer;
+    transition: border-color 0.2s, color 0.2s;
+}
+
+.logout-button:hover {
+    border-color: #e74c3c;
+    color: #e74c3c;
+}
+
 @media (max-width: 900px) {
     .app-wrapper {
         flex-direction: column;