/* ===== brand.css — Wizly Agent login design (wizly-agent/frontend login/page.tsx + styles/tokens.css) ported over LibreChat's auth DOM. RULE (incident 2026-09-08 "Node.removeChild: not a child of this node"): the JS must never move or re-parent React-owned nodes. The splash lives OUTSIDE React's root (appended to , position: fixed); the card header (mark, title, subtitle) is pure CSS on LibreChat's own elements; the JS only toggles classes. */ :root{ --n0:#FFFFFF;--n50:#FBFAF9;--n100:#F4F1EE;--n150:#ECE7E2;--n200:#DDD5CD;--n400:#A39A92;--n600:#5F564F;--n900:#1A1714; --wz-bg:var(--n50);--wz-surface:var(--n0);--wz-text:var(--n900);--wz-text-2:var(--n600);--wz-text-3:var(--n400);--wz-line:var(--n150);--wz-line-2:var(--n200); --wz-accent:#2997ff;--wz-accent-hover:#0071e3;--wz-accent-contrast:#FFFFFF;--wz-ring:0 0 0 3px rgba(41,151,255,.22); --wz-ease:cubic-bezier(0.2,0.7,0.2,1); --wz-font:'Geist','IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --wz-mark:url("data:image/png;base64,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"); } html.dark{--wz-bg:#14110F;--wz-surface:#1B1714;--wz-text:#F3EFE9;--wz-text-2:#B3A99F;--wz-text-3:#7C7268;--wz-line:#2A241F;--wz-line-2:#362E28;--wz-accent:#4AA8FF;--wz-accent-hover:#7DBFFF;--wz-accent-contrast:#071018;--wz-ring:0 0 0 3px rgba(74,168,255,.28)} @keyframes wizFadeIn{from{opacity:0}to{opacity:1}} @keyframes wizRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* --- LibreChat's auth root (class added by brand.js; React may re-set className, the observer re-adds it) --- */ html.wiz-auth-page body{background:var(--wz-bg)} .login-shell{margin-left:50%!important;min-height:100vh;background:var(--wz-bg)!important;font-family:var(--wz-font);color:var(--wz-text);animation:wizFadeIn 300ms ease-out} .login-shell>.h-10{display:none} /* the 40px logo strip: the splash carries the brand */ .login-shell main{padding:40px 24px} .login-shell main>div{width:100%;max-width:380px!important;padding:0!important;background:transparent!important;text-align:center;animation:wizRise .32s var(--wz-ease) both} .login-shell main>div::before{content:"";display:block;width:54px;height:54px;margin:0 auto 16px;border-radius:50%;background:var(--wz-mark) center/cover no-repeat} .login-shell main h1{margin:0 0 32px!important;font-size:0!important;line-height:0;color:var(--wz-text)!important;font-family:var(--wz-font)} .login-shell main h1::before{content:"Sign in to Wiz AI";display:block;font-size:22px;line-height:1.3;font-weight:600;letter-spacing:0} .login-shell main h1::after{content:"Use your Wiztech Google account";display:block;margin-top:6px;font-size:13px;line-height:1.5;font-weight:400;color:var(--wz-text-2)} .login-shell a[data-testid="google"]{width:100%;padding:12px!important;background:var(--wz-accent)!important;border:none!important;border-radius:10px!important;color:var(--wz-accent-contrast)!important;font-size:15px;font-weight:600;font-family:var(--wz-font);display:flex;align-items:center;justify-content:center;gap:10px;transition:background 150ms ease,opacity 150ms ease;box-shadow:none} .login-shell a[data-testid="google"]:hover{background:var(--wz-accent-hover)!important} .login-shell a[data-testid="google"]:focus-visible{outline:none;box-shadow:var(--wz-ring)} .login-shell a[data-testid="google"] svg{width:20px;height:20px;background:#fff;border-radius:50%;padding:2px;box-sizing:border-box} .login-shell a[data-testid="google"] p{margin:0;color:inherit} .login-shell [role="contentinfo"]{align-items:center;font-size:12px} .login-shell [role="contentinfo"] a{color:var(--wz-text-3)!important;text-decoration:none;font-size:12px} .login-shell [role="contentinfo"] a:hover{color:var(--wz-text-2)!important} .login-shell [role="contentinfo"]>div{height:1em;border-color:var(--wz-line-2)!important} /* --- the splash: a fixed pane appended to by brand.js, never inside React's tree --- */ .login-splash{position:fixed;left:0;top:0;bottom:0;width:50%;z-index:1;overflow:hidden;padding:60px 56px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;font-family:var(--wz-font);box-sizing:border-box;animation:wizFadeIn 300ms ease-out; background:radial-gradient(circle at 80% 20%,rgba(41,151,255,.28) 0%,transparent 55%),linear-gradient(135deg,#161b23 0%,#0c0e13 100%)} .login-splash .wiz-brand{display:flex;align-items:center;gap:12px} .login-splash .wiz-brand i{width:36px;height:36px;border-radius:50%;background:var(--wz-mark) center/cover no-repeat} .login-splash .wiz-brand span{font-weight:700;font-size:17px;letter-spacing:-.01em} .login-splash h2{margin:0;font-size:38px;font-weight:700;line-height:1.1;letter-spacing:-.02em} .login-splash p{margin:16px 0 0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.7);max-width:420px} .login-splash ul{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:10px} .login-splash li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:rgba(255,255,255,.78)} .login-splash li svg{flex-shrink:0;margin-top:2px} .login-splash .wiz-tag{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.06em;text-transform:uppercase} .login-splash .wiz-wordmark{position:absolute;right:56px;bottom:40px;height:22px;opacity:.55} @media (max-width:900px){.login-splash{display:none}.login-shell{margin-left:0!important}.login-shell>.h-10{display:block}} @media (prefers-reduced-motion:reduce){.login-shell,.login-splash,.login-shell main>div{animation:none}}