ltcai 2.2.2 → 3.0.1

package/static/css/reference/account.css

@@ -0,0 +1,439 @@
+/* Lattice AI — account / auth page (account.html, body.lattice-ref-auth). Token-native. */
+/* ============================================================
+   ACCOUNT / AUTH PAGE  (account.html)
+   Token-native product entry surface — unified with chat/graph/admin pages.
+   ============================================================ */
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        html, body.lattice-ref-auth { height: 100%; }
+        body.lattice-ref-auth {
+            font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
+            color: var(--text);
+            background: var(--app-bg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 24px;
+            overflow: hidden;
+            position: relative;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background:
+                radial-gradient(circle, rgba(123,109,255,0.28) 1px, transparent 1.8px),
+                linear-gradient(rgba(123,109,255,0.08) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(123,109,255,0.06) 1px, transparent 1px);
+            background-size: 82px 82px, 46px 46px, 46px 46px;
+            background-position: 16px 18px, 0 0, 0 0;
+            mask-image: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.02));
+            pointer-events: none;
+        }
+
+        body::after {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background:
+                radial-gradient(ellipse at 8% 78%, rgba(142,111,255,0.24), transparent 34%),
+                linear-gradient(115deg, transparent 0 35%, rgba(111,75,246,0.09) 35.2%, transparent 35.6% 100%);
+            pointer-events: none;
+        }
+
+        .orb {
+            display: none;
+        }
+
+        .login-shell {
+            width: min(920px, 100%);
+            display: grid;
+            grid-template-columns: minmax(280px, 400px) minmax(220px, 1fr);
+            align-items: center;
+            gap: 46px;
+            position: relative;
+            z-index: 1;
+        }
+
+        .brand-preview {
+            min-height: 360px;
+            border-radius: 34px;
+            background:
+                radial-gradient(circle at 54% 45%, rgba(111,75,246,0.24), transparent 18%),
+                linear-gradient(145deg, rgba(255,255,255,0.68), rgba(244,239,255,0.32));
+            border: 1px solid rgba(111,75,246,0.12);
+            box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
+            position: relative;
+            overflow: hidden;
+        }
+        .brand-preview::before {
+            content: '';
+            position: absolute;
+            inset: auto -12% 0 -8%;
+            height: 46%;
+            background: linear-gradient(135deg, rgba(111,75,246,0.24), rgba(255,255,255,0.12));
+            clip-path: polygon(0 62%, 18% 42%, 36% 54%, 55% 26%, 76% 44%, 100% 20%, 100% 100%, 0 100%);
+            filter: blur(1px);
+        }
+        .preview-node {
+            position: absolute;
+            width: 52px;
+            height: 52px;
+            border-radius: 17px;
+            background: var(--surface-2);
+            border: 1px solid rgba(111,75,246,0.18);
+            box-shadow: 0 18px 40px rgba(111,75,246,0.16);
+        }
+        .preview-node::after {
+            content: '';
+            position: absolute;
+            inset: 14px;
+            border-radius: 10px;
+            background: linear-gradient(135deg, #6f4bf6, #9f8cff);
+        }
+        .preview-node.n1 { top: 52px; left: 58px; }
+        .preview-node.n2 { top: 112px; right: 64px; }
+        .preview-node.n3 { left: 120px; bottom: 92px; }
+        .preview-node.n4 { right: 120px; bottom: 58px; }
+        .preview-line {
+            position: absolute;
+            height: 2px;
+            width: 150px;
+            background: linear-gradient(90deg, transparent, rgba(111,75,246,0.45), transparent);
+            transform-origin: left center;
+        }
+        .preview-line.l1 { top: 108px; left: 112px; transform: rotate(18deg); }
+        .preview-line.l2 { top: 186px; left: 176px; transform: rotate(112deg); }
+        .preview-line.l3 { bottom: 112px; left: 172px; transform: rotate(-13deg); }
+
+        .card {
+            width: min(400px, 100%);
+            background: var(--card);
+            border: 1px solid rgba(111,75,246,0.13);
+            border-radius: 14px;
+            padding: 38px 34px;
+            box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.9);
+            position: relative;
+            z-index: 1;
+            backdrop-filter: blur(28px);
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 50%;
+            transform: translateX(-50%);
+            width: 55%; height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(111,75,246,0.65), rgba(123,109,255,0.45), transparent);
+        }
+
+        .logo {
+            width: 54px; height: 54px;
+            background: linear-gradient(135deg, #6f4bf6 0%, #8d7aff 100%);
+            border-radius: 10px;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 26px; color: #fff;
+            margin: 0 auto 18px;
+            box-shadow: 0 16px 34px rgba(111,75,246,0.28);
+        }
+
+        .title {
+            text-align: center;
+            font-size: 23px;
+            font-weight: 800;
+            margin-bottom: 6px;
+            background: linear-gradient(135deg, #1f2140 35%, #6f4bf6 82%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+
+        .subtitle {
+            text-align: center;
+            color: var(--muted);
+            font-size: 12.5px;
+            margin-bottom: 26px;
+            line-height: 1.5;
+        }
+
+        .input {
+            width: 100%;
+            padding: 12px 14px;
+            margin-bottom: 10px;
+            background: var(--surface);
+            border: 1px solid rgba(111,75,246,0.16);
+            color: var(--text);
+            border-radius: 8px;
+            outline: none;
+            font-size: 14px;
+            font-family: inherit;
+            transition: border-color .15s, box-shadow .15s;
+        }
+        .input:focus {
+            border-color: rgba(111,75,246,0.52);
+            box-shadow: 0 0 0 4px rgba(111,75,246,0.10);
+        }
+        .input::placeholder { color: var(--faint); }
+
+        .submit {
+            width: 100%;
+            padding: 13px;
+            background: linear-gradient(135deg, #6f4bf6, #7b6dff);
+            color: #fff;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 800;
+            font-size: 14px;
+            font-family: inherit;
+            box-shadow: 0 14px 30px rgba(111,75,246,0.24);
+            transition: all .18s;
+            margin-top: 4px;
+        }
+        .submit:hover {
+            background: linear-gradient(135deg, #5f3ee6, #705fff);
+            box-shadow: 0 18px 38px rgba(111,75,246,0.30);
+            transform: translateY(-1px);
+        }
+        .submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
+
+        .switch {
+            margin-top: 18px;
+            text-align: center;
+            font-size: 12.5px;
+            color: var(--faint);
+        }
+        .switch a { color: #6f4bf6; text-decoration: none; font-weight: 700; }
+        .switch a:hover { text-decoration: underline; }
+
+        .sso-divider {
+            display: flex; align-items: center; gap: 10px;
+            margin: 14px 0 10px;
+            color: var(--faint); font-size: 11.5px;
+        }
+        .sso-divider::before, .sso-divider::after {
+            content: ''; flex: 1;
+            height: 1px; background: rgba(111,75,246,0.12);
+        }
+        .sso-btn {
+            width: 100%;
+            padding: 12px;
+            background: var(--surface-2);
+            border: 1px solid rgba(111,75,246,0.15);
+            color: var(--text);
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: 600;
+            font-size: 13.5px;
+            font-family: inherit;
+            display: flex; align-items: center; justify-content: center; gap: 8px;
+            transition: all .18s;
+        }
+        .sso-btn:hover {
+            background: var(--surface);
+            border-color: rgba(111,75,246,0.34);
+        }
+
+        .msg {
+            font-size: 12px;
+            min-height: 18px;
+            margin-bottom: 6px;
+            text-align: center;
+            color: #d44f5c;
+        }
+        .msg.ok { color: var(--success); }
+
+        /* Lang picker */
+        .lang-wrap {
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            z-index: 10;
+        }
+        .lang-btn {
+            background: var(--surface-2);
+            border: 1px solid rgba(111,75,246,0.18);
+            color: var(--text);
+            border-radius: 8px;
+            padding: 7px 12px;
+            font-size: 13px;
+            font-family: inherit;
+            cursor: pointer;
+            transition: background .15s;
+            box-shadow: 0 10px 28px rgba(86,70,160,0.12);
+        }
+        .lang-btn:hover { background: rgba(111,75,246,0.08); }
+        .lang-menu {
+            display: none;
+            position: absolute;
+            top: calc(100% + 6px);
+            right: 0;
+            background: var(--surface-elevated);
+            border: 1px solid rgba(111,75,246,0.15);
+            border-radius: 8px;
+            padding: 4px;
+            min-width: 130px;
+            box-shadow: 0 18px 44px rgba(86,70,160,0.16);
+        }
+        .lang-menu.open { display: block; }
+        .lang-opt {
+            padding: 7px 10px;
+            border-radius: 7px;
+            cursor: pointer;
+            font-size: 13px;
+            color: var(--muted);
+        }
+        .lang-opt:hover { background: rgba(111,75,246,0.07); color: var(--text); }
+        .lang-opt.active { color: var(--accent); font-weight: 700; }
+
+        @media (max-width: 760px) {
+            .login-shell { display: block; }
+            .brand-preview { display: none; }
+        }
+
+:root[data-lt-theme="dark"] body.lattice-ref-auth .title,
+:root[data-lt-theme="dark"] body.lattice-ref-auth #register-section .title {
+    background: none;
+    -webkit-background-clip: border-box;
+    background-clip: border-box;
+    -webkit-text-fill-color: currentColor;
+    color: var(--text);
+}
+
+/* Product-grade auth surface — functional entry point, token-native. */
+.lattice-ref-auth {
+  background: var(--app-bg);
+}
+
+.lattice-ref-auth::before {
+  background:
+    linear-gradient(90deg, rgba(12, 92, 115, 0.05) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(12, 92, 115, 0.05) 1px, transparent 1px);
+  background-size: 42px 42px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 76%);
+}
+
+.lattice-ref-auth::after,
+.lattice-ref-auth .orb,
+.auth-wave,
+.auth-network {
+  display: none;
+}
+
+.auth-titlebar {
+  background: var(--surface-elevated);
+  border-bottom-color: var(--line);
+  color: var(--text);
+}
+
+.auth-window-brand i,
+.lattice-ref-auth .hero-logo-mark {
+  color: var(--accent);
+}
+
+.auth-window-controls span::before,
+.auth-window-controls span::after {
+  background: var(--text);
+  border-color: var(--text);
+}
+
+.lattice-ref-auth .login-shell {
+  width: min(980px, calc(100vw - 36px));
+  grid-template-columns: minmax(300px, 430px) minmax(280px, 1fr);
+}
+
+.lattice-ref-auth .brand-preview {
+  display: block;
+  border-radius: 8px;
+  background:
+    linear-gradient(135deg, var(--accent-soft), transparent 58%),
+    var(--surface);
+  border-color: var(--line);
+  box-shadow: none;
+}
+
+.lattice-ref-auth .preview-node {
+  border-radius: 8px;
+  background: var(--surface-2);
+  border-color: var(--line);
+  box-shadow: none;
+}
+
+.lattice-ref-auth .preview-node::after {
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  border-radius: 8px;
+}
+
+.lattice-ref-auth .preview-line {
+  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
+}
+
+.lattice-ref-auth .card {
+  border-radius: 8px;
+  background: var(--surface-elevated);
+  border-color: var(--line);
+  box-shadow: var(--shadow);
+}
+
+.lattice-ref-auth .card::before {
+  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
+}
+
+.lattice-ref-auth .title {
+  background: none;
+  color: var(--text);
+  -webkit-text-fill-color: currentColor;
+}
+
+.lattice-ref-auth .subtitle {
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.lattice-ref-auth .input,
+.lattice-ref-auth .auth-field,
+.lattice-ref-auth .sso-btn {
+  background: var(--input);
+  border-color: var(--line);
+  color: var(--text);
+}
+
+.lattice-ref-auth .input:focus,
+.lattice-ref-auth .auth-field:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.lattice-ref-auth .submit {
+  background: var(--accent);
+  box-shadow: none;
+}
+
+.lattice-ref-auth .submit:hover {
+  background: var(--accent-deep);
+  box-shadow: none;
+}
+
+.lattice-ref-auth .local-start,
+.lattice-ref-auth .register-cta,
+.lattice-ref-auth .switch a {
+  color: var(--accent);
+}
+
+.lattice-ref-auth .lang-btn,
+.lattice-ref-auth .lang-menu {
+  border-color: var(--line);
+  box-shadow: none;
+}
+
+@media (max-width: 760px) {
+  .lattice-ref-auth .login-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .lattice-ref-auth .brand-preview {
+    display: none;
+  }
+}