body { overflow-x: hidden; }
.login-shell { min-height: 100vh; display: grid; grid-template-rows: 78px minmax(0,1fr) 46px; background: var(--cp-black); }
.login-brand { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--cp-line); padding: 0 28px; }
.login-brand .cp-logo { width: 158px; }
.login-layout { width: min(1320px, 100%); display: grid; grid-template-columns: minmax(0,1.2fr) minmax(420px,.68fr); align-items: stretch; margin: 0 auto; }
.login-intro { position: relative; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--cp-line); padding: 54px 64px 54px 28px; }
.login-intro::before { content: ""; position: absolute; inset: 0; opacity: .13; background-image: linear-gradient(var(--cp-line) 1px, transparent 1px), linear-gradient(90deg, var(--cp-line) 1px, transparent 1px); background-size: 56px 56px; pointer-events: none; }
.login-intro > * { position: relative; }
.login-intro h1 { max-width: 780px; margin: 8px 0 16px; font-family: var(--cp-display); font-size: clamp(66px,8vw,126px); font-weight: 400; line-height: .86; text-transform: uppercase; }
.login-intro > p:last-of-type { max-width: 610px; margin: 0; color: var(--cp-muted); font-size: 14px; }
.login-assurance { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: 1px solid var(--cp-line); margin: 40px 0 0; }
.login-assurance div { border-right: 1px solid var(--cp-line); padding: 14px; }
.login-assurance div:last-child { border-right: 0; }
.login-assurance dt { color: var(--cp-blue); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.login-assurance dd { margin: 4px 0 0; font-family: var(--cp-display); font-size: 18px; text-transform: uppercase; }
.login-panel { align-self: center; border: 1px solid var(--cp-line-purple); margin: 44px 28px; background: #06080a; }
.login-panel > header { border-bottom: 1px solid var(--cp-line); padding: 22px; }
.login-panel h2 { margin: 4px 0 2px; font-family: var(--cp-display); font-size: 48px; font-weight: 400; text-transform: uppercase; }
.login-panel header p:last-child { margin: 0; color: var(--cp-muted); }
.login-panel .cp-form { padding: 22px; }
.login-submit { width: 100%; min-height: 44px; }
.login-secondary { width: 100%; min-height: 40px; margin-top: 8px; }
.login-error { border-left: 3px solid var(--cp-red); margin: 0; padding: 9px 11px; background: #16090a; color: #ffc8c8; font-size: 11px; }
.sso-access { border-top: 1px solid var(--cp-line); padding: 18px 22px 22px; }
.sso-access > span { display: block; margin-bottom: 10px; color: var(--cp-muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.sso-access a { display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.invitation-identity { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 11px; border: 1px solid var(--cp-line); padding: 11px; }
.invitation-identity > span { width: 48px; height: 48px; display: grid; place-items: center; background: var(--cp-blue); color: #050609; font-family: var(--cp-display); font-size: 20px; }
.invitation-identity strong,.invitation-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invitation-identity strong { font-family: var(--cp-display); font-size: 20px; font-weight: 400; text-transform: uppercase; }
.invitation-identity small,.password-policy { color: var(--cp-muted); font-size: 9px; text-transform: uppercase; }
.password-policy { margin: -3px 0 2px; }
.demo-access { border-top: 1px solid var(--cp-line); padding: 18px 22px 22px; }
.demo-access > header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--cp-muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
.demo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid var(--cp-line); border-left: 1px solid var(--cp-line); }
.demo-grid button { min-width: 0; min-height: 66px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line); padding: 10px; background: transparent; color: var(--cp-white); text-align: left; }
.demo-grid button:hover { background: #0a0d11; color: var(--cp-blue); }
.demo-grid strong,.demo-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-grid strong { font-family: var(--cp-display); font-size: 18px; font-weight: 400; text-transform: uppercase; }
.demo-grid small { color: var(--cp-muted); font-size: 8px; text-transform: uppercase; }
.login-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--cp-line); padding: 0 28px; color: var(--cp-muted); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; }
@media (max-width: 900px) { .login-layout { grid-template-columns: minmax(0,1fr); } .login-intro { min-height: 420px; border-right: 0; border-bottom: 1px solid var(--cp-line); padding: 42px 28px; } .login-intro h1 { font-size: 72px; } .login-panel { width: min(560px,calc(100% - 28px)); margin: 28px auto; } }
@media (max-width: 560px) { .login-brand { padding: 0 14px; } .login-brand .cp-logo { width: 132px; } .login-intro { min-height: 370px; padding: 30px 16px; } .login-intro h1 { font-size: 56px; } .login-assurance { grid-template-columns: minmax(0,1fr); } .login-assurance div { border-right: 0; border-bottom: 1px solid var(--cp-line); } .login-assurance div:last-child { border-bottom: 0; } .login-panel { margin: 14px auto 28px; } .login-foot { padding: 0 14px; } .login-foot span:last-child { display: none; } }